Using: Gatsbyjs
Problem:
Trying to declare css variables at :root (which works very well), but onces I try to override them like that:
:root { --feature-background: red; }
:root [data-theme="gradient"] {
--feature-background: blue;
}
<div data-theme="gradient">Hello</div>
I get the following warning and the I get the fallback color.
--feature-background is not getting overwritten, which is what I expect.
Custom property ignored: not scoped to the top-level :root element
Related
I'm using sass preprocessor on my laravel project.
on all of my stylesheets, i've used css variables for all colors. all of the variables are stored in 'resource/sass/_variables.scss' and imported in the begining of all stylesheet files.
the inside of '_variables.scss' file is something like this:
$primary-background:#1b203d;
$primary-box-color:#2a2b4a;
$primary-border-color: #7277c422;
$secoundary-box-color: #393a66;
$primary-box-shadow: #1a1b2f;
......
and also in my stylesheet i've used variables like this:
#import 'variables';
#sidebar{
background-color: $secoundary-box-color;
border:1px solid $primary-border-color;
// .....
}
now i'm trying to implement dark mode switch using css variables.
I have no idea how to change css variables, consider it that all my stylesheets (with variables) will be compiled and i have no longer access to css variable on the frontend!
you can use css custom properties to assign colors
//_variables.scss
$lightTheme: #fff;
$darkTheme: #000;
//style.css
#import 'variables';
:root {
--theme: #{$lightTheme};
}
body {
background-color: var(--theme);
}
body.dark {
--theme: #{$darkTheme};
}
I'm working on an Angular 9 project where I'm creating two themes and each theme has it's own css output file.
I modified the angular.json file to handle that:
"styles": [
{
"input": "src/styles/themes/light-theme.scss",
"lazy": true,
"bundleName": "light-theme"
},
{
"input": "src/styles/themes/dark-theme.scss",
"lazy": false,
"bundleName": "dark-theme"
}
],
light-theme and dark-theme are my input files, where I'm setting variables like:
$background-color
$button-color
$text-color
etc, etc.
My problem is that I cannot use those variables from each component, because my component won't know what those variables are. I cannot import one or another theme, because I would like to use the values that I declared in the input file.
How should I handle this? Is there any way of "importing" the input file I wrote on my angular.json file?
Thanks!
If you define sass variables in your global styles, you won't be able to access them after when you dynamically change the theme. This is because the dynamically loaded theme will contain css rules only, not sass; besides at run time your components scss has also already compiled to css so there is no more notions of sass variables either way.
What you can do instead is use CSS variables, which have good browser support (apart from IE and opera mini).
So for instance, you can define these variables in your theme files
dark-theme.scss
:root{
--button-background: darkgrey;
--button-color: white;
}
light-theme.scss
:root{
--button-background: lightgrey;
--button-color: black;
}
Then in your component, use these variables
component.scss
button
{
cursor: pointer;
padding: 10px;
border: 0;
color:var(--button-color);
background-color:var(--button-background);
}
Then, when you dynamically load the light theme, it will override the existing variables. If you then dynamically remove light-theme.css, it'll go back to using your dark theme's variables.
I want to have a dark and a light theme on my Vue app.
I can create dark.scss file and change classes styles and use !important property to override styles defined in components.
Or I can use props in my components and change className with v-if based on the theme.
e.g. set class to className__light when theme is light otherwise set to className__dark.
which one is better in all situations like performance or time needed to do it?
Well i would not do it with classes. I would create CSS variables with either SCSS or you create CSS variables in :root
If you do it with the :root method then it should look something like this:
:root {
--background: red;
}
Then you can access it in any component like this for example:
.class {
background: var(--background); // the background will appear red
}
Now you can change the background color with just 1 CSS variables.
To change the variable with Javascript you just write following:
root.style.setProperty('--background', "green");
The problem here is that it isnt supported in IE if you care about browser support.
So you should create an fallback like this:
.class {
background: red; //fallback
background: var(--background); // the background will appear red
}
I have some styles that are meant to apply anywhere, including deep inside components. They're defined like this:
<style id="base-css" is="custom-style">
:root .primary {
color: red;
}
</style>
The result was that if I had, for example a <span class="primary"> anywhere, no matter how deep inside a Polymer component, it'd always apply. In fact, inspecting this span shows that the style was rewritten as:
:not([style-scope]):not(.style-scope):root .primary {
color: red;
}
Since I've updated my Polymer to 1.7.0, this no longer works. Styles defined this way no longer penetrate into components, and only work outside them. Adding a span with .primary to body and inspecting it shows that the style is now rewritten as:
html .primary:not([style-scope]):not(.style-scope) {
color: red;
}
Which, of course, wouldn't work inside a component, since all inside elements have .style-scope on them.
I read 1.7.0 release notes, and tried replacing :root with html, with exactly the same result.
Does anyone have any idea on how I can get this to work again?
Thank you.
Creating style hooks using CSS custom properties
You can tweak internal styles if you provide styling hooks using CSS custom properties. You create "style placeholders" inside the element that you can override from the main page.
Inside the main page:
<style>
base-css {
--primary: red;
}
</style>
Inside the element:
<style>
:host([background]) {
// Use --primary is not define, use #9E9E9E
background: var(--primary, #9E9E9E);
}
</style>
Documentation
Using CSS variables
Shadow DOM v1: Self-Contained Web Components
I'm using CSS Modules within a React application. I also have a dropdown component with some global styles (which I'm happy with, as the general styles I want to re-use).
When the dropdown is active, a CSS class is applied (.dropdown--active). Is there a way I can include that global class alongside my component's locally scoped styles? i.e., what I'd like is for this to work:
.myClass {
color: red;
}
:global .dropdown--active .myClass {
color: blue;
}
However, that syntax makes the entire selector global, which is not what I'm after: I want .myClass to be scoped to the component.
just include the desired global class in parens:
:global(.dropdown--active) .myClass {
color: blue;
}