feat: implement light mode theme for osv.dev web frontend

Author: tymzd

gcp/website/frontend3/img/logo-dark.png

@@ -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">
@@ -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>
@@ -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">

gcp/website/frontend3/img/logo-dark@2x.png

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