Commit 3d5779c
authored
feat: Add dark/light mode toggler (#4872)
**Why?** Offering light/dark mode improves accessibility and legibility
for web content. Light/dark themes are now an expectation for any modern
tooling that developers interact with.
[osv light mode
demo.webm](https://github.com/user-attachments/assets/395f22fb-1347-434a-9013-d72daa55fdf2)
**Caveats**:
- For simplicity, I wanted to keep the theming logic *strictly* on the
client side. This is why I chose localStorage instead of cookies for
storing theme state.
- I developed this with `make run-website-emulator` because I don't have
access to the real osv dataset - so perhaps the default emulator data is
not representative of the styles that would be seen in production on
real data. A thorough look against real data would be helpful to find
conflicting/unresolved styles.
- The more 'correct' way to surface light/dark mode is to include an
'auto' mode that defers to the OS-level theme setting. See
https://brandur.org/fragments/dark-mode-notes. For simplicity, I chose
to do a simple binary toggle, but it would not be very challenging to
support OS-based theming in the future.
- If you open two tabs, and flip the theme in one of them, the other tab
does not reflect the update unless you refresh. This can be fixed by
having a localStorage event listener but I chose to keep it simple.
- I did not try to pick a new colour palette, I just picked some
reasonable white/grey colours.
- I was blinded in the making of this1 parent c9b5409 commit 3d5779c
13 files changed
Lines changed: 524 additions & 78 deletions
File tree
- gcp/website
- blog
- layouts
- frontend3
- img
- src
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
2 | 2 | | |
3 | 3 | | |
4 | 4 | | |
5 | | - | |
6 | | - | |
7 | | - | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
5 | 5 | | |
6 | 6 | | |
7 | 7 | | |
8 | | - | |
| 8 | + | |
9 | 9 | | |
10 | 10 | | |
11 | 11 | | |
Loading
Loading
Loading
Loading
Binary file not shown.
Loading
Loading
Loading
0 commit comments