Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to set dark mode as default #43

Closed
MG32Codes opened this issue Nov 11, 2020 · 7 comments
Closed

How to set dark mode as default #43

MG32Codes opened this issue Nov 11, 2020 · 7 comments

Comments

@MG32Codes
Copy link

As the title says.
@coliff
Copy link
Owner

coliff commented Nov 11, 2020

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.

@MG32Codes
Copy link
Author

Alright, thanks!

@ardianta
Copy link

I think just add the data-theme="dark" to the <body> element. It will set the dark theme as default.

@crazychatting
Copy link
Contributor

crazychatting commented Mar 15, 2021 •
edited
Loading

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 )

@doniwirawan
Copy link

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

@ardianta
Copy link

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

@doniwirawan
Copy link

thanks mas

@philipbrembeck philipbrembeck mentioned this issue Aug 17, 2021
Merged
5 tasks
@coliff coliff closed this as completed Jul 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@coliff @ardianta @crazychatting @doniwirawan @MG32Codes