Use prefers-color-scheme over manual selection

[xeruf]

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Use the query @media (prefers-color-scheme: dark)

I want to use only the CSS but still have adaptive dark mode following user preferences.

[thagxt]

Hi @xeruf thank you for checking skelet.css and for the suggestion.

We usually use JS to match users' preferences when necessary, We left out the @media (prefers-color-scheme: dark) mainly because not all projects want to offer a dark version. So we leave the choice to the developer to decide whether or not to include a dark version in their project, and if they do decide, they can simply add the class to the body or use JS to toggle between dark and light versions.

if (window.matchMedia("(prefers-color-scheme:dark)").matches) document.body.classList.add('dark-mode');

If you have any suggestions on how this can be implemented without forcing every project to have a dark version by default feel free to share your thoughts here or to open a pull request.

Thanks

[xeruf]

Thank you, I will look into it, Skelet looks like a great project and is the only still active Skeleton fork I found :)

[thagxt]

Thanks a lot. Yes, It seems like everybody jumped on the Tailwind bandwagon and nobody wants to maintain CSS frameworks anymore.

[thagxt]

Match users' preferences

if (window.matchMedia("(prefers-color-scheme:dark)").matches) document.body.classList.add('dark-mode')

Avoid FOUC on page load

if (localStorage.getItem("dark-mode") === 'on' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme:dark)').matches)) {
    document.documentElement.classList.add('dark-mode')
    localStorage.setItem('dark-mode', 'on')
} else {
    document.documentElement.classList.remove('dark-mode')
}

Toggle dark mode

<label for="lightBulb">Light</label>
<input id="lightBulb" type="checkbox" class="switch">
<label for="lightBulb">Dark</label>

let checkBox = document.getElementById("lightBulb");

const enableDarkMode = () => {
  document.body.classList.add("dark-mode")
  checkBox.checked = true;
  localStorage.setItem("dark-mode", "on")
};

const disableDarkMode = () => {
  document.body.classList.remove("dark-mode")
  checkBox.checked = false;
  localStorage.setItem("dark-mode", "off")
};

if (localStorage.getItem("dark-mode") === "on") enableDarkMode();

checkBox.addEventListener("click", () => {
    if (localStorage.getItem("dark-mode") === "off") { enableDarkMode() } 
    else { disableDarkMode() }
});