I am trying to make a toggle between night mode and day mode only by changing colors. I have some base color variables inside my _colors.scss, and they are used all over my site. I use React to toggle a className between 'night-mode' and 'day-mode' at the first div of the project.
I have tried to wrap the variables in the mentioned class names, but the result is that no other files can access the variables. Therefore I was hoping for a solution where I can use a night-mode file and a day-time file and toggle between them.
As I see it now, the issue is that I can't wrap the $variables or the #import in a class name, which makes it difficult to know what mode is selected. I am looking for a solution that does not include jQuery (I have a variable globally stored that can be used for javascript reference if that ends up to be the best solution).
You can't toggle scss files at runtime, since they are already compiled to css.
I would go with CSS custom properties (sometimes called CSS variables) instead of pure Sass variables.
Example:
:root {
--background: lightblue;
}
.night-mode {
--background: darkblue;
}
.component {
background-color: var(--background);
}
Toggle the class .night-mode on with javascript depending on the time of day.
You may of course feed your CSS custom properties from Sass variables in your scss files:
$bg-day: lightblue;
$bg-night: darkblue;
:root {
--background: $bg-day;
}
.night-mode {
-- background: $bg-night;
}
.component {
background-color: var(--background);
}
Related
I am trying to apply CSS to Vaadin 8 component. I have followed this example and still unable to apply CSS. I understand that i can call the addStyleName method and i am able to apply the build in ValoTheme styles (for example ValoTheme.PANEL_BORDERLESS does make a button smaller), but my custom styles are ignored. I have tried defining my custom CSS rules in the following files:
/src/Main/webapp/VAADIN/themes/apptheme/styles.css
#import "../reindeer/styles.css";
.mystyle {
color: red;
background: #012345;
background-color: #012345;
}
Then in Java i create a button:
Button btn = new Button(" Test ");
btn.addStyleName("mystyle");
My custom style does not get applied to the button. I suspect that i am not defining CSS correctly. Please share your knowledge of how to do this correctly in Vaadin 8.
This is not related, but are you actually using a reindeer theme?
Otherwise, you should put you styles in your own theme file (the default one generated from an archetype is mytheme.scss)
It's suggested to leave styles.scss as it is. Also, it's mentioned in comments section of the file:
This file prefixes all rules with the theme name to avoid causing conflicts with other themes. The actual styles should be defined in mytheme.scss
If you want, you could add your styles there as well under
.mytheme {
#include addons;
#include mytheme;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
While it works, I will still suggest to add them to your custom scss file (Based on your folder name it is apptheme.scss)
Mine mytheme.scss looks like this:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.testStyle{
color: red;
background: #012345;
background-color: #012345;
}
}
After styles are applied, button looks like this:
Style files are located under webapp/VAADIN/themes/mytheme
I am trying to change a variable's value in "../myStyle.scss" file from myComponent.ts . I read that it is impossible to achieve it because sass file are compiled into css by the sass pre-processor and the variable disapears. Isn't there a way to work this around.
My variable is called $theme.
And I want to change it's value.
$theme: #5A352A;
and I want it to become $theme: #ffffff; when the user clicks
You have to work in a different way.
Basically when you compile the angular app , it will generate a css file where it substitute the variable with the value , wherever you used it.
So if you want to achieve a color change you have to create a other variable and other classes and swipe it in your class attributes (this is one way, check also ngStyle and ngClass in angular reference).
For example white-theme/dark-theme (the most common case).
variables -> $black: #00000; $white: #ffffff
Example classes:
.body-dark {
background-color: $black;
}
.body-white {
background-color: $white;
}
and swipe the classes in the html elements.
setDark(){
document.getElementById("bodyId").setAttribute("class","body-dark ")
}
the same for white.
Apologies if this question has been asked or if there's a much better way to achieve my objective - I'm very new on the subject.
Using .scss within my React project I have a variable which is used in a number of visual elements as a highlight, eg.:
$theme = red;
.element{
color: $theme;
}
I'd like the user to be able to customize this to suit their tastes within the app client, however it is compiled down by sass-loader/style-loader to something like:
.element{
color: red;
}
which would require me to manually maintain a list of element classes to fire style edits at after the fact.
I am hoping that someone here knows a practical way to achieve what I'm after or, if that doesn't exist, could assist me with modifying sass-loader to also spit out a list of class names where the variable is used to a file that I can load post-compile.
You can use CSS variable instead.
Declare variables:
:root {
--theme-color: red;
}
... and then use it ...
#div1 {
background-color: var(--theme-color);
}
#div2 {
background-color: var(--theme-color);
}
Note: It does not work on Internet Explorer
https://caniuse.com/#search=css%20variables
Learn more about CSS variables
https://www.w3schools.com/css/css3_variables.asp
I want to define CSS variables like in Sass.
Something like:
.someClass {
background-image: $imageLink;
color: $someColor;
}
And i Want to define $imageLink and $someColor in my class or in json file.
Can i do this without Sass or Less? (Or without css variables, because it does not supported in IE.)
I an using angular2 and webpack in my project.
Of course you cannot set SASS variables at run-time, because by that time the SASS has already been compiled.
A classic approach is to instead think in terms of "themes", and select a theme by a class on a higher-level element (such as body). So you could have
.darktheme .someClass { color: white; }
.lighttheme .someClass { color: black; }
Now from your JS you can change the theme with
document.body.classList.add('darktheme');
I would like to change default styling for hover buttons (Bootstrap v3.2). By default it's becoming darker. Let's assume I would like to make it lighter.
I looked at Buttons Less variables but I don't see button hover styling option.
In SASS I can do:
#import "packages/stylesheets/bootstrap/bootstrap";
.btn {
&:hover {
background: yellow;
}
}
but it changes all button background to defined color (in this case yellow).
Is it possible to do it for all buttons?
The only solution I found id to do it this for each type of button this way but I hope it can be done for all buttons a bit simpler:
#import "packages/stylesheets/bootstrap/bootstrap";
.btn-primary {
&:hover {
background: lighten($btn-primary-bg, 5%);
}
}
.btn-success {
&:hover {
background: lighten($btn-success-bg, 5%);
}
}
While Marcin's solution will work, as he mentioned it is not very elegant as you will modify bootstrap's source code and you will loose all the edits once you update the base of bs.
What you need to do, in order to properly customize the button hover is, define a new file called for example "_buttons.scss" and include it in your main bootstrap/main file you are using (usually a file that include the base boostrap + the customized parts):
// Base bootstrap 3
#import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
#import "_buttons.scss"
This way you are overriding default styles in order to have your look and feel of default bootstrap elements, and keeping base bootstrap file intact so you can update it without a fear you will overwrite your changes with next update.
And now, your part:
in the _buttons.scss define your hovers like you mentioned:
// My custom variation for btn-primary
.btn-primary {
&:hover {
background: lighten($btn-primary-bg, 5%);
}
}
If you want to do that on global level, just simply update the mixins that are in charge for buttons output in the override file, so that would be (if you follow your Bootstrap's default namespace, in your custom styles folder for example: myproject/assets/scss/mixins/_buttons.scss)
// My custom mixin for button-variant override file
// I only include the part i want to customize
// In this case, i want to customize background-color
#mixin button-variant($color, $background, $border) {
&:hover {
background-color: darken($background, 40%);
}
}
.. and include it into your main file
// Base bootstrap 3
#import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
#import "_buttons.scss"
#import "mixins/_buttons.scss"
This way you are:
1) Able to update bootstrap base once the update is up
2) Able to keep your custom buttons styles in one file, if you decide to update it later, you can find it easily
3) Able to use same bootstrap base for different projects (if needed)
Hope it helps
Cheers
M.
The solution I found is not very elegant (you need to modify bootstrap file) but it works.
You need to go to mixins/_buttons.scss file and then change:
background-color: darken($background, 10%);
into
background-color: lighten($background, 10%);
It should do the job for all buttons.