Dark mode CSS in a seperate file #2947

dawidpotocki · 2020-11-30T03:00:13Z

dawidpotocki
Nov 30, 2020

Hi!

I have a pretty simple website and I want to have light/dark mode on it. The
problem is that there are only 2 ways to do it which are not ideal.

darkMode: 'media'
It works by checking if prefers-color-scheme is dark, but there isn't a
good way to make a JavaScript switch to change theme.
darkMode: 'class'
It works by applying dark theme if html has dark class, but there isn't
a (good) way to set it without using JavaScript.

This means that using current methods we can't have a website with working
prefers-color-scheme without JavaScript and an additional button to switch
themes when JavaScript is enabled at the same time.

It is possible to do though, dark: classes would just have to be placed in a
seperate file by using something like @tailwind base-dark. Here is a quick,
messy example of how it could work (there are much better ways :L):

main.css:

@tailwind base;

dark.css:

@tailwind base-dark;

index.html:

<html>
  <head>
    <link href="/main.css" rel="stylesheet" />
    <link id="dark-css" href="/dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
  </head>
  <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <script src="/applytheme.js"></script>
    <h1>Hello!</h1>
    <div class="bg-blue-500 hidden"></div>
    <script src="/main.js"></script>
  </body>
</html>

applytheme.js:

if (localStorage.getItem("colorScheme") === "dark") {
  document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
}
else if (localStorage.getItem("colorScheme") === "light") {
  document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
}

main.js:

document.querySelector("#switch-theme").style.display = "block";
document.querySelector("#switch-theme").addEventListener("click", changeColorScheme);

function changeColorScheme() {
  if (localStorage.getItem("colorScheme") === "dark") {
    // Change to light theme
    if (window.matchMedia("(prefers-color-scheme: dark)").matches === false) {
      document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
      localStorage.removeItem("colorScheme");
    } else {
      // by setting invalid media it won't apply dark CSS for anyone
      document.querySelector("#dark-css").setAttribute("media", "invalid");
      localStorage.setItem("colorScheme", "light");
    }
  }
  // Change to dark theme
  else if (localStorage.getItem("colorScheme") === "light") {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
      document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
      localStorage.removeItem("colorScheme");
    } else {
      // media was set to prefers-color-scheme: dark
      document.querySelector("#dark-css").removeAttribute("media");
      localStorage.setItem("colorScheme", "dark");
    }
  }

  else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
    // Change to light Theme
    document.querySelector("#dark-css").setAttribute("media", "invalid");
    localStorage.setItem("colorScheme", "light");
  } else {
    // Change to dark theme
    document.querySelector("#dark-css").removeAttribute("media");
    localStorage.setItem("colorScheme", "dark");
  }
}

alinnert · 2021-01-30T22:43:35Z

alinnert
Jan 30, 2021

I was about to start a similar discussion. From the heading I thought this one was about something different. I want to share a different approach to this problem.

There could be a new class: <body class="dark-auto">. Using this class the dark mode could be applied automatically depending on prefers-color-scheme.

But this makes it necessary to output all styles twice like this:

body.dark .dark\:bg-gray-700 {
  background-color: #3F3F46;
}

@media (prefers-color-scheme: dark) {
  body.dark-auto .dark\:bg-gray-700 {
    background-color: #3F3F46;
  }
}

This could also make the darkMode setting obsolete because you can achieve what darkMode: 'media' does with the dark-auto class. Or this setting could be used to control, if the .dark-auto class should be available or not.

That way a theme switcher could cycle through <body>, <body class="dark"> and <body class="dark-auto">.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Dark mode CSS in a seperate file #2947

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Dark mode CSS in a seperate file #2947

Uh oh!

dawidpotocki Nov 30, 2020

Replies: 1 comment

Uh oh!

Uh oh!

alinnert Jan 30, 2021

dawidpotocki
Nov 30, 2020

alinnert
Jan 30, 2021