drkmd.js icon indicating copy to clipboard operation
drkmd.js copied to clipboard

Initial LocalStorage value doesn't match OS preferred theme

Open egeesin opened this issue 10 months ago • 0 comments

The script (with default options) doesn't detect prefer-color-scheme and set invalid LocalStorage darkMode value in the beginning. If my OS theme is dark mode and I'm visiting a page that is drkmd.js loaded for the first time, the page will still be in light mode as it doesn't detect the system theme. Even if I choose the default theme as dark in the script tag (data-drkmd-opts='{ "defaultTheme": "dark" }') or set data-theme=dark/body.theme-dark in the markup + my system theme is dark, it still sets the light theme automatically as darkMode=false in LocalStorage.

📚 To Reproduce

  1. Switch to dark mode in your operating system.
  2. Go to CodePen example.
  3. Open Web Inspector/DevTools and go to Application tab (Storage tab in Safari) to browse LocalStorage under cdpn.io
  4. In order to simulate the first visit, delete existing LocalStorage key from cdpn.io and reload the page.

💡 Expected behavior

Quoting from Browser Compatibility section in README:

drkmd.js uses prefers-color-scheme: dark to automatically enable the Dark Mode if the OS prefered theme is dark.

This.

⚙️ Environment

  • Using the latest version that is distributed on jsdelivr at the time of this issue opened.

egeesin avatar Jan 11 '25 00:01 egeesin