Skip to content

feat: Add dark/light mode toggler #4872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tymzd wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat: Add dark/light mode toggler #4872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
02c5801
fix(ui): stop forcing the webpack vendor output path
tymzd Feb 22, 2026
e82d653
feat: add theme toggler button in top bar
tymzd Feb 22, 2026
f3c62dd
feat: apply light-mode colour palette
tymzd Feb 22, 2026
b448ac6
fix: set sharper logo image for web dark and light mode
tymzd Feb 25, 2026
262265b
feat: dynamically style blog code blocks based on light/dark theme
tymzd Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions gcp/website/blog/hugo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ baseURL = 'http://osv.dev/blog/'
languageCode = 'en-us'
title = 'OSV Blog'
[markup]
[markup.highlight]
style = 'native'
tabWidth = 2
[markup.highlight]
noClasses = false
tabWidth = 2
Binary file added gcp/website/frontend3/img/logo-dark.png
View file
Open in desktop
Copy link
Copy Markdown
Member

@michaelkedar michaelkedar Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these logos look more pixelated than the white-text ones?

I've tried looking around, but I can't find the original source of these images.
The GitHub docs use a different icon - I'm not against changing to use those instead.

Copy link
Copy Markdown
Member Author

@tymzd tymzd Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I'll let @cuixq propose the colours.

I find the white text on red buttons on white background a bit harsh

It's possible to minimise this also by remove/lightening the button fill:
image

Let me know if you think that's the right move.

Also, FYI there are some code blocks in a few blog posts

I left this out since it's a bit hacky to make this dynamically apply a theme based on light/dark mode. The issue is that <code> block styling is statically configured in hugo.toml. It's possible to 'escape hatch' this though and apply CSS ourselves. I've done this after generating the CSS with:

hugo gen chromastyles --style=native
hugo gen chromastyles --style=github

Example screenshot of light theme code blocks:

image

There are more syntax highlighting schemes to choose from: https://gohugo.io/quick-reference/syntax-highlighting-styles/.

I think these logos look more pixelated than the white-text ones?

I've extracted the logo you suggested and replaced it in both dark/light mode with a higher resolution version. It no longer looks pixelated to me :)

image

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gcp/website/frontend3/img/logo-dark@4x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified gcp/website/frontend3/img/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed gcp/website/frontend3/img/logo@2x.png
View file
Open in desktop
Binary file not shown.
Binary file added gcp/website/frontend3/img/logo@4x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gcp/website/frontend3/img/original-logo-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added gcp/website/frontend3/img/original-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 18 additions & 2 deletions gcp/website/frontend3/src/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@
{% if disable_turbo_cache %}
<meta name="turbo-cache-control" content="no-cache">
{% endif %}
<script>
// Early inline script element here is necessary to prevent the "flash of
// unstyled content" problem where the dark default theme is first rendered
// followed by a sudden flash to light mode.
// See https://en.wikipedia.org/wiki/Flash_of_unstyled_content.
const theme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', theme);
</script>
<link rel="icon" type="image/png" href="/static/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/static/img/favicon-16x16.png" sizes="16x16">
<link rel="preconnect" href="https://fonts.googleapis.com">
Expand Down Expand Up @@ -40,7 +48,9 @@
<header class="top-bar">
<div class="logo">
<a href="{{ url_for('frontend_handlers.index') }}" aria-label="Home page">
<img alt="OSV logo" src="/static/img/logo.png" srcset="/static/img/logo.png, /static/img/logo@2x.png 2x"
<img alt="OSV logo" class="logo-img-light" src="/static/img/logo.png" srcset="/static/img/logo.png, /static/img/logo@4x.png 4x"
width="54" height="20">
<img alt="OSV logo" class="logo-img-dark" src="/static/img/logo-dark.png" srcset="/static/img/logo-dark.png, /static/img/logo-dark@4x.png 4x"
width="54" height="20">
</a>
</div>
Expand Down Expand Up @@ -92,7 +102,13 @@
</a>
</li>
{% endif %}
<li>
<li class="theme-toggle-container">
<button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle theme">
<span class="material-icons icon-light-mode">light_mode</span>
<span class="material-icons icon-dark-mode">dark_mode</span>
</button>
</li>
<li class="github-container">
<a class="logo-img" href="https://github.com/google/osv.dev" target="_blank"
aria-label="Go to our github page">
<img class="logo-link" src="/static/img/github-mark-white.svg" alt="Github Logo" width="24" height="24">
Expand Down
15 changes: 15 additions & 0 deletions gcp/website/frontend3/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,20 @@ function initializeSearch() {
searchInstance = new ExpandableSearch();
}

function initializeThemeToggle() {
const toggle = document.getElementById('theme-toggle');
// Ensure the event handler is attached only once.
if (toggle && !toggle.dataset.themeInitialized) {
toggle.dataset.themeInitialized = 'true';
toggle.addEventListener('click', () => {
const currentTheme = localStorage.getItem("theme") || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
});
}
}

// Ensure initialization happens after all dependencies are loaded
function ensureInitialization() {
if (!customElements) {
Expand All @@ -65,6 +79,7 @@ function ensureInitialization() {

if (customElements.get('md-filled-text-field')) {
initializeSearch();
initializeThemeToggle();
} else {
// wait a bit longer for components to load
setTimeout(ensureInitialization, 50);
Expand Down
Loading
Loading