drkmd.js
drkmd.js copied to clipboard
Initial LocalStorage value doesn't match OS preferred theme
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
- Switch to dark mode in your operating system.
- Go to CodePen example.
- Open Web Inspector/DevTools and go to Application tab (Storage tab in Safari) to browse LocalStorage under cdpn.io
- In order to simulate the first visit, delete existing LocalStorage key from
cdpn.ioand 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.