← Tasks
Design: Dark mode
It seems inevitable that at some point I will add this… 😅
The good news is that the entire site only uses 16 semantic colour variables and they’re quite easy to swap out. (Colours taken from Open UI)
Steps
-
Determine dark mode CSS vars -
Pattern: Dark mode icons -
Pattern: Dark mode toggle button -
Frontend: Add dark mode toggle to sidebar -
Frontend: Switch CSS vars when in dark mode -
Frontend: Save dark mode setting to local storage -
Frontend: Load dark mode setting from local storage
Now live! Click the moon icon in the bottom left to turn dark mode on. ☀️🌑
Dark mode looks sweet! Only thing I would say is that to me the icon to turn it back to light mode looks like a settings icon. I didn’t clock initially that it’s meant to be a sun.
Yes. Totally agree.
I use FontAwesome for icons, and it looks like they have some better options in the paid plans. Might have to shell out. 💰
And I’ve just noticed the scrollbar isn’t styled for dark mode. Will fix that too.
Updated the light mode icon and styled the scrollbars. ✅