Prefer ‘prefers-color-scheme‘ but allow it to be overridden by the user

[SSmale]

Is there a way to use the system preferences for dark mode but then allow the user to override them if they want?

I think this would be good for devices that don’t have dark mode but the user wants it

[simonswiss]

Hey! 👋

A possible implementation of this is presented in the Tailwind CSS docs website:

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.querySelector('html').classList.add('dark')
} else {
  document.querySelector('html').classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

Is that useful?

[SSmale]

Thank you for pointing that out! I missed that on my skim of the documentation. This is exactly what I was after Kind regards, Simon Smale

…

On 3 Dec 2020, at 03:12, Simon Vrachliotis ***@***.***> wrote:  Hey! 👋 A possible implementation of this is presented in the Tailwind CSS docs website: // On page load or when changing themes, best to add inline in `head` to avoid FOUC if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.querySelector('html').classList.add('dark') } else { document.querySelector('html').classList.remove('dark') } // Whenever the user explicitly chooses light mode localStorage.theme = 'light' // Whenever the user explicitly chooses dark mode localStorage.theme = 'dark' // Whenever the user explicitly chooses to respect the OS preference localStorage.removeItem('theme') Is that useful? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[simonswiss]

Nice, glad I could help 👍