feat: add theme toggler button in top bar

The toggler button will read/write to the `theme` key in localStorage.

For simplicity, I wanted to keep the theming logic strictly on the
client side. This is why I chose localStorage instead of cookies.

Author: tymzd

gcp/website/frontend3/src/base.html

@@ -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">
@@ -92,7 +100,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">

gcp/website/frontend3/src/index.js

@@ -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) {
@@ -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);

gcp/website/frontend3/src/styles.scss

@@ -264,8 +264,8 @@ pre {
   }
 
   .logo-link {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
   }
 
   .tabs {
@@ -280,6 +280,11 @@ pre {
       vertical-align: middle;
     }
 
+    a.logo-img {
+        display: flex;
+        align-items: center;
+    }
+
     // Remove external link indicator.
     a.logo-img::after {
       display: none;
@@ -290,6 +295,7 @@ pre {
     .social-icons {
       padding: 0;
       display: flex;
+      align-items: center;
       gap: 20px;
     }
   }
@@ -2145,3 +2151,39 @@ div.highlight {
 .search-suggestions::-webkit-scrollbar-thumb:hover {
   background-color: $osv-grey-800;
 }
+
+/* Theme toggle button visibility */
+.theme-toggle-container {
+  display: flex;
+  align-items: center;
+}
+.theme-toggle-btn {
+  background: transparent;
+  border: none;
+  color: white;
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  border-radius: 50%;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .icon-dark-mode { display: none; }
+  .icon-light-mode { display: inline-block; }
+}
+html[data-theme="light"] .theme-toggle-btn {
+  color: $osv-text-color;
+  .icon-dark-mode { display: inline-block; }
+  .icon-light-mode { display: none; }
+}
+
+.github-container {
+    width: 36px;
+    display: flex;
+    justify-content: center;
+}