coliff
How to set dark mode as default
Good question! You could set all the CSS as dark by default, and have the switch 'on' by default. If a user swicthes to 'off' you could load a light-mode CSS instead. It should be quite straight forward, though I may add a separate demo for that at some point.
I think just add the data-theme="dark" to the <body> element. It will set the dark theme as default.
I think to add the data-theme attribute would not be enough. truly the CSS would show the page with dark style, but the switch would appear off. The initTheme-method needs then to be extended to check if the attribute is already set. Currently only localStorage is checked. But I don´t know yet, if this would be the best solution. Indeed it would be useful to avoid some flickering or flashing when opening the page, while loading, instead of waiting for JS to be loaded and executed (like issue #22 )
I think just add the
data-theme="dark"to the<body>element. It will set the dark theme as default.
but there is a problem with the toggle if we make it like that
I think just add the
data-theme="dark"to the<body>element. It will set the dark theme as default.but there is a problem with the toggle if we make it like that
Yes, the switch button will not updated.
I created custom script to handle it. See my changes: https://github.com/ardianta/dark-mode-switch/commit/9fad4b93e68d588559cfc898c0411b6665e063aa?branch=9fad4b93e68d588559cfc898c0411b6665e063aa&diff=split