Creating a dark-mode supported layout with SCSS variables and CSS variables

Last updated: Aug 18, 2021

Creating a dark-mode supported layout these days is easy using CSS-variables. Define some variables in the root of your project, create a prefers-color-scheme media query and off you go.

But you have just learned how to structure your application with SCSS-variables. That's no problem. You can easily use them together. You will need the SCSS interpolation feature though.

:root {
  --body-bg: #{$white};
  --body-fg: #{$black};
  --section-bg: #{$white};
  --section-bg-alt: #{$grey-lightest};
  --section-fg: #{$black};
  --heading-color: #{$black};
  --accent: #{$accent};
  --link-color: #{$blue};
}

Use SCSS to create your color scheme and use CSS variables to make it respond to the prefers-color-scheme media query.

:root {
  --body-bg: #{$white};
  ...

  @media (prefers-color-scheme: dark) {
    --body-bg: #{$black};
    --body-fg: #{$grey-lightest};
    --section-bg: #{$grey-darker};
    --section-bg-alt: #{$grey-dark};
    --section-fg: #{$grey-lighter};
    --heading-color: #{$white};
    --accent: #{$accent-muted};
    --link-color: #{$blue-muted};
  }
}

Leave a comment below if you have got any questions about this article.