Skip to content

Commit 3d5779c

Browse files
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 this
1 parent c9b5409 commit 3d5779c

13 files changed

Lines changed: 524 additions & 78 deletions

File tree

gcp/website/blog/hugo.toml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ baseURL = 'http://osv.dev/blog/'
22
languageCode = 'en-us'
33
title = 'OSV Blog'
44
[markup]
5-
[markup.highlight]
6-
style = 'native'
7-
tabWidth = 2
5+
[markup.highlight]
6+
noClasses = false
7+
tabWidth = 2

gcp/website/blog/layouts/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="author">Posted by {{ .Params.author }} on {{ .PublishDate.Format "Jan 2, 2006" }}</div>
66
<div class="summary">
77
{{ .Summary }}
8-
<p><a href="{{ .Permalink | relURL }}">Read more...</a></p>
8+
<p><a class="read-more" href="{{ .Permalink | relURL }}">Read more...</a></p>
99
</div>
1010
</div>
1111
{{ end }}
2.22 KB
Loading
1023 Bytes
Loading
11.1 KB
Loading

gcp/website/frontend3/img/logo.png

1.12 KB
Loading
-1.87 KB
Binary file not shown.
10.2 KB
Loading
28.1 KB
Loading
23.6 KB
Loading

0 commit comments

Comments
 (0)