Skip to main content

Dark mode

If you use Sass to develop, there is a predefined placeholder selector for dark mode, this file is in /scss/helpers/_dark-mode.scss, in this file the %dark-mode selector is defined you can create your selectors by extending it.
Here is an example of a dark mode selector:

style.scss
html.dark {
  @extend %dark-mode;
}

or you can detect automatically if users prefer dark theme with CSS @media feature:

style.scss
@media (prefers-color-scheme: dark) {
  :root {
    @extend %dark-mode;
  }
}

Now if the <html> tag has the .dark class or the user prefers to have a dark theme, the dark mode will be applied.
Note that you should extend this selector as <html> tag because it changes CSS variables that are defined as the :root.