I'm trying to implement a dark and light theme using bulma. The approach I was thinking of is to assign classes to elements dynamically using vue (e.g .dark-theme or .light-theme) and then use different colours depending on those themes. However, customising the bulma variables based on class selectors in main.scss doesn't seem to be working, for example:
.dark-theme {
$primary: /* some colour; */
}
.light-theme {
$primary: /* some other colour; */
}
#import "~bulma/bulma"
The closest question I could find was this one but the solution does not work for me as I need to modify the actual $ variables based on class selectors.
If my approach is stupid and there is a better one please let me know. Note that my bulma setup appears to be working correctly, and changing the variable outside of selectors works as expected.
You could compile two css files from the bulma scss files, one for dark mode & one for light mode. Then if dark mode is enabled just reload the page with the dark css file or use the method in the first comment to change theme without reloading.
Here it suggests swapping the $scheme-main & $scheme-invert values to generate a dark mode.
I do not have experience with Vue but I know that it would be possible to implement this in JavaScript.
Related
I need to customize the color of the label for the Input field ( ant design ). but i couldn't change the color of it.
Inside the yellow box is the CSS I have added to the code but when I run and inspect the code (inside the red box) there is two .ant-form-item-label > label is there, the issue is the one I have added (inside the yellow box) is not working, other one (i think its the default one) is overwriting the one which I have written. how to overcome this
Hard to judge as no one will know how the project is set up. The correct way to overcome this is by checking the order of your scss imports, if your default login scss styles are located below your LoginStyles.scss then they will overwrite any of your sass styles. Simply move, shift your imports so that LoginStyles.scss is below defaults.scss i.e
#import 'default.scss';
#import 'LoginStyles.scss';
A dirty way to fix the issue is by assigning !important on your color but I would try getting your import order correct first as this stops messy conflicts
You can add !important rule. And there is no definition of that color in the files? The default label appearance can also be changed.
Pre-History
Our system is a setup of Angular 11 with Bootstrap 5. Lately I have been working with theming our system.
Determining the background color has been a real challenge all the way, but I have solved it by implementing this in my typescript:
document.body.setAttribute('style', 'background-color: #FFFFFF');
This feels like I am implementing a minor "hack" to overcome a challenge rather than programming at a professional level.
Case:
I am able to determine the background color in a much prettier way using the global variables offered by Bootstrap. By altering the global variable $body-bg I am able to set the background color in styles.scss.
As I am working with themes, I do not want to set the background color to one color and keep it there forever. I need to be able to change the background color with the rest of the styles. However, I cannot find any method of passing the variable of which theme is active to the stylesheet. What I want to do is displayed below:
#if $activeTheme == "dark" {
$body-bg: #000;
}
Challenge:
I cannot find any method of passing on the variable #activeTheme from my theme-service.ts to the styles.scss to be used in a #if.
I've been looking all over for a solution to this problem, but have not been able to find any topics with this exact case. That might mean I am on the moon in my thinking of how I want to solve the background challenge.
Can this be done?
I am open to any other solutions to theming the background of body :)
im creating a vue app.
At the moment I have a light.scss and a dark.scss and decide in the build process which one I use.
But I want to toggle the dark mode directly in my app.
Im using a css theme and until now I could write:
light.scss
$header-bar-color: null;
dark.scss
$header-bar-color: black;
The light variant took the default value from my css theme.
Now I want to use only one main.scss with custom properties.
Therefore I have a light.scss with:
--header-bar-color: null
and a dark.scss with:
--header-bar-color: black
and in my main.scss I write:
$header-bar-color: var(--header-bar-color)
My Problem is that the null value from the light theme don't fallback to my default css theme. Is it possible to achieve this?
This question is less of a code question and more of a best-practices question. I am working on a custom bootstrap theme based on https://github.com/HackerThemes/theme-kit. I have a working theme that I like, however, I am overriding some styles in the original Bootstrap theme. Even in the minified CSS, these are duplicated. For example, Bootstrap defines...
.btn-danger:hover {
color: #fff;
background-color: #ae130b;
border-color: #a2120a;
}
...but my code also defines...
.btn-danger:hover {
border-color: #0000;
}
In the final stylesheet, both of these styles are present. The second style overrides Bootstrap and it looks just fine. However, this leads to useless code. First of all, is there a postprocessor of some sort that I can use with Gulp to eliminate these duplicates and consolidate them? Second, should I just fork the Bootstrap repository and modify the original SCSS directly?
It depends on what you #import. Looking at mytheme.scss, the entire Bootstrap SASS is imported, creating full duplicate code in the final CSS.
Instead you can pick specific SASS files to import and look at the option variables which also effects what CSS is generated. For example, setting $enable-grid-classes: false will prevent duplication of the entire grid system in the generated CSS.
I already tried the custom function from the website, but keeps give me error, and tried the BASIC method too:
body {background-color:red;}
so, does anyone know?
Download all of the bootstrap files and somewhere inside the .css file add:
body {
background:red !important;
}
The correct way to change background color in Bootstrap 3 is to use bg-* classes. For red color there is bg-danger. Also available bg-primary, bg-success, bg-info and bg-warning.
http://getbootstrap.com/css/#helper-classes-backgrounds
I would not recommend changing the actual bootstrap CSS files. You can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
SOURCE: How to change the default background color white to something else in twitter boostrap
I would strongly recommend using Sass with Bootstrap-Sass not just for making any customisations to the core Bootstrap framework but also to ensure your CSS is as DRY as possible. Then you can do something like
$red: #f00;
$body-bg: $red;
before you import your core Bootstrap CSS, and you will be good to go. Note that Sass allows you to reuse the variable ($red) you just declared anywhere else you may like in your app.
The benefits of using a CSS preprocessor like Sass or LESS don't end here. Bootstrap is based on a proportionate system of font sizes, so you can also do something like
$font-size-base: 16px;
and that will accordingly change the font sizes of all elements (p, h1..h6 etc) across the board. You may also, for example, write
$font-family-sans-serif: 'Gill Sans';
and that will replace Helvetica as the default sans-serif font for all elements.
Look here for all the customisations you can make to your code whenever you wish and not just while downloading Bootstrap if you use Sass.
In html change to
In CSS change "body {}" to ".body {}"
This is because a CLASS is more specific than a tag, and so it will take the rule over the main bootsrap.css which only classifies as a tag.
I have a boilerplate I've created that I use to create bootstrap themes, that will generate docs using the theme you've created. I've implemented this at companies that use it across multiple web teams in order to get a branded result while just using basic bootstrap components.
Check it out here: https://github.com/patrickleet/bootstrap-override-boilerplate
There are instructions in the README
For Bootstrap 3.3 Add the following BG Style.
body{
background-color: gray !important;
}
Source : from Bootstrap 3.3 Guide.