There are a lot of implementations for color scheme switch/toggle
My favorite one probably made be Adam Argyle
But I think I've found even most minimal solution.
Few prerequisites:
- In general you might have more them 2 themes, but I think dark/light is enough, therefore I'll need only toggle button
- User might have system preference for dark/light and I want to be able to use in my code
- If user want to change theme he/she should be able to do it with one click/touch
- For current implementation I don't want to store toggle state in any, I suppose that developer will decide where to store such info it could be anything like state manager, cookies, Local/Session Storage, user settings on backend.
For design I've decided to use MDI icon theme-light-dark
and button that invert background/foreground colors with help of CSS system colors such as WindowText/Window
System preference I am getting with window.matchMedia("(prefers-color-scheme: dark)")
Example you might find in following codepen:
Top comments (0)