1

I was able to successfully integrate a dark theme on my website and let users pick what they want with three options:

  • Default to System (follow the OS interface colours), with the use of prefers-color-scheme ;
  • Light Theme (force the use of the old light theme) ;
  • Dark Theme (force the use of the new dark theme no matter what the OS interface looks like).

My website is running on Ruby on Rails and use the Assets Pipeline with SCSS. I did the following to integrate the dark mode:

/* darkmode.scss */
@mixin dark {
/* all the colours/css changes to make the website dark */
}

/* use the dark mode when OS interface is light */
@media (prefers-color-scheme: light) {
  [data-color-mode="dark"] {
    @include dark;
  }
}

/* Follow the OS interface colours or force the use of the dark theme */
@media (prefers-color-scheme: dark) {
  [data-color-mode="auto"], [data-color-mode="dark"] {
    @include dark;
  }
}

Then in my application view I just set the data-attribute:

<html lang="en" data-color-mode="<%= (@current_user&.preferred_theme || "auto") %>">

It works very well. I got inspired by this answer to do it.

Unfortunately, it leads to a LOT of CSS codes after being compiled. First, the dark code is obviously being duplicated twice with the @include method. Secondly, the [data-color-mode] attribute gets duplicated for every selector like this:

[data-color-mode="auto"] ul.disclist li a,
[data-color-mode="auto"] .profile_info a,
[data-color-mode="auto"] .profile_user_links li a,
[data-color-mode="auto"] .thumb_overlay a span,
[data-color-mode="auto"] li.sotd h4 a,
[data-color-mode="auto"] #online_users .footer_box a,

[data-color-mode="dark"] ul.disclist li a,
[data-color-mode="dark"] .profile_info a,
[data-color-mode="dark"] .profile_user_links li a,
[data-color-mode="dark"] .thumb_overlay a span,
[data-color-mode="dark"] li.sotd h4 a,
[data-color-mode="dark"] #online_users .footer_box a {
    color: #7C7C7C !important;
  }

Is there any way to optimize this and reduce the amount of code generated? I thought about CSS variables but it would need a whole rework of the original design.

Edit: I was able to reduce the amount of code by using hackish methods like [data-color-mode*="a"] instead [data-color-mode="auto"], [data-color-mode="dark"] but I'm pretty sure there must be something better to do. This technique lead to a file with 400 lines removed.

1 Answer 1

0

Would it work if you used CSS variables to set the colors, based on the user preference?

Instead of including the mixin twice, doubling the amount of css output, maybe you can just set the colors (variables) in the mixin and have the rest of the styles applied only once:

@mixin dark {
/* all the colours/css changes to make the website dark */
--text-color: #fff;
--bg-color: #000;
}

Sorry for any typos, I'm writing this from my phone.

4
  • I'm not sure I get it but even with CSS variables, you would have to include the mixin dark twice. One for people with prefers-color-scheme set to light but who wants the dark theme, and one for the other ("auto" or "dark mode")
    – kinoute
    Mar 25, 2021 at 22:20
  • You only need to change the variables twice, you don't need to duplicate the whole dark styles twice + light styles. You can just use CSS variables. When "prefers dark" or "selected dark", just update the variables, don't include the whole dark styles mixin. Here's the code pen: codepen.io/vfonic/pen/MWJygpm
    – Viktor
    Mar 26, 2021 at 12:52
  • In that last pen, you only need to override/set the variables. Here's another pen that seems more in line with how you're doing it now: codepen.io/vfonic/pen/dyNMbRQ
    – Viktor
    Mar 26, 2021 at 12:53
  • Keep in mind that the amount of styles grows much much faster than the number of variables. Try adding some more styles to both of the pens (add some styles for div, some columns, etc.) You'll soon realize that in the first code pen you're writing most of the styles only once, while in the second one, you have to duplicate the styles (for light and for dark)
    – Viktor
    Mar 26, 2021 at 12:54

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.