I've been experimenting with implementing different themes on my website. I modified my main stylesheet to include variables and created three additional "theme" stylesheets that define these variables at the :root level. The HTML file then connects to two stylesheets: the main one and a chosen theme, which can be switched by clicking a button that changes the href attribute. Strangely, only some of the variables are functioning as expected.
/* dark.css (a theme stylesheet with custom properties) */
/* Only --background works */
:root {
--background: #000000;
--seperator: rgba(1,1,1,0.12);
--text: #FFFFFF;
--block-border: #404040;
--block-shadow: #000000;
--block-background: #151017;
}
/* All properties work except for --comment */
code {
--keyword: #F72057;
--type: #FF9519;
--call: #FF5700;
--property: #FF5700;
--number: #F72057;
--string: #F72057;
--comment: #FFFFFF;
--dot-access: #FF5700;
--preprocessing: #646485;
}
Upon inspecting, all seems fine. Inheritance is correct, and clicking on the variable in use reveals the desired color.
Here are some examples of how the variables are utilized:
/* styles.css (main stylesheet) */
body {
...
background: var(--background);
color: var(--text);
}
pre code .comment {
color: var(--comment);
opacity: 0.4;
}
Different Approaches Tried
I attempted various strategies, but encountered the same issue (only certain variables working).
- Modifying the variables directly with JavaScript instead of linking to another stylesheet
- Utilizing three distinct main stylesheets rather than multiple theme stylesheets
- Changing a custom attribute within the HTML tag and defining all variables like
[theme="dark"] {...}in a primary stylesheet