Comments (7)
crazychatting
commented on June 14, 2024
1
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 )
from dark-mode-switch.
coliff
commented on June 14, 2024
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.
from dark-mode-switch.
MG32Codes
commented on June 14, 2024
Alright, thanks!
from dark-mode-switch.
ardianta
commented on June 14, 2024
I think just add the data-theme="dark" to the <body> element. It will set the dark theme as default.
from dark-mode-switch.
doniwirawan
commented on June 14, 2024
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
from dark-mode-switch.
ardianta
commented on June 14, 2024
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: ardianta@9fad4b9?branch=9fad4b93e68d588559cfc898c0411b6665e063aa&diff=split
from dark-mode-switch.
doniwirawan
commented on June 14, 2024
thanks mas
from dark-mode-switch.
Related Issues (20)
- Not Working (node.js and ejs) HOT 4
- Bootstrap Nav Link colors not changing in Dark Mode HOT 2
- Delay in dark mode detection HOT 12
- Not working on latest Firefox HOT 2
- Dark mode default?
- Apply to modals HOT 1
- Update To Bootstrap 5 HOT 3
- Changes not taking effect on body element HOT 5
- td elements keep data-theme=dark style, even when not active. HOT 3
- how to use this project in react ? HOT 5
- not working on phone HOT 6
- Using html element with dark mode HOT 3
- Background color of menu dropdown not changing HOT 2
- How to use it with sass?
- dark mode
- Laravell Support HOT 3
- Please make the dark mode as default and we can toggle to make it light
- Does this package registered in cdnjs.com ? HOT 1
- Not working :'(
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dark-mode-switch.