@john-mirage
Posted
Hello,
For the dark mode feature, you only have to toggle one class.
- Use javascript to handle the toggle of the class "dark" at the top of the tree like <html> or <body> element (dont forget to handle keyboard to activate the dark mode).
- Set the dark style when the "dark" class is present.
CSS
.header {
background-color: light;
}
.dark .header {
background-color: dark;
}
As a bonus challenge you can also do the project with only CSS (accessibility may be not perfect).
Marked as helpful
@Blurryface1998
Posted
@ChaosDynamix Thank you for the response, I'll try this approach!
@john-mirage
Posted
@Blurryface1998 You can check my solution if you want a concrete example. My solution also take care of the localstorage and prefers-color-scheme so that theme is saved even if you leave the site.
Note: for this project, the theme is actually inverted, the best way is to set dark theme as default and toggle light theme.
Marked as helpful
@Blurryface1998
Posted
@ChaosDynamix Thank you for allowing me to check your work, it will help me a lot, especially with a preferred color scheme.
