Implementing dark mode with Sass is hard because it is a preprocessor language. Any changes implies a new generating process and a page refresh. Therefore it is impossible to switch from light to dark - or the way around - in real time.
The CSS variables instead are accessible and can be changed dynamically at any time.
Why not take advantage of potential of the two languages together?
Step 1 - Create colors variables in Sass
Declare the Sass variables dedicated to colors:
$color-black:rgb(0,0,0);$color-white:rgb(255,255,255);$color-gray-light:rgba($color-white,.15);$color-gray-dark:rgba($color-black,.15);Generally I use dedicated files to store project variables like _settings.scss or _design-tokens.scss depending on project complexity.
Step 2 - Create element-scoped CSS variables
I declare the CSS variables that will be affected by theme switch, using element-scoped naming:
:root{ --color-page-background:#{$color-white}; --color-text:#{$color-black};}Pay attention to use escaping Sass syntax#{$variable} otherwise the code is not compiled.
Step 3 - Create basic CSS styles
I declare the two background-color and color properties on the<body> using the dedicated CSS variables:
body{ background-color:var(--color-page-background); color:var(--color-text);}Step 4 - Add dark mode variables change
Through the use of a.dark class to be added to the<body> I change the value of the CSS variables by inverting the Sass variables:
.dark{ --color-page-background:#{$color-black}; --color-text:#{$color-white};}You can also decide to use data-attributes if you prefer such asdata-theme="dark". The decision is up to you and the coding conventions defined with your team.
A single style.scss file
If you use a singlestyle.scss you could import setting variables first using Sass partials. Then put dark mode at the end of the file.
// Settings@import'setting/tokens'//Sassvariables@import'settings/global';//CSSvariables// other CSS stuff here// Dark mode@import'trumps/dark';//CSSvariablesfordarkmodeRemind to use CSS variables for all those components you want to control with dark mode.
Benefits
Following this way, we canmanage layout changes foreseen by the light/dark switch with few lines of code,using Sass partials for code modularity without having to create dedicated dark theme files or introduce complex logic in Sass.
Try thisdemo con CodePen
Top comments(2)
- LocationBulgaria
- WorkSenior Software Engineer @ alkem.io
- Joined
Why should I use sass variables and css ones when I can just declare colors directly in the css vars and use them anywhere..
- LocationRome
- WorkSenior Product Designer at HCL Technologies
- Joined
Hi@kibobishtrudelz, this article is related to that projects that use Sass/SCSS. If you don't need a preprocessor sure you can use CSS Custom Properties only.
For further actions, you may consider blocking this person and/orreporting abuse
