commit 7c52741a0fc8c8581a3b4da54b20052a4eb3cd7d
author Jamal Carvalho <jamal@golang.org> Thu Mar 10 11:41:39 2022 -0500
committer Jamal Carvalho <jamal@golang.org> Thu Apr 07 14:11:52 2022 +0000
tree c2eb466c0269bba1e838dcb310f926ff115e386f
parent a3d868e5e55ad57bea6506985e4732a4e5fa433a

_content: add dark theme toggle

Added a toggle button with three states: auto, light, and dark
to set the preferred color scheme of go.dev.

For golang/go#34601.

Change-Id: I771f64f34294fa0a86bbcdd6c0acaa4af7e7cf8c
Reviewed-on: https://go-review.googlesource.com/c/website/+/391536
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
TryBot-Result: Gopher Robot <gobot@golang.org>
Reviewed-by: Jamal Carvalho <jamalcarvalho@google.com>

_content/js/site.js

diff --git a/_content/js/site.js b/_content/js/site.js
index 03928b0..dda15d2 100644
--- a/_content/js/site.js
+++ b/_content/js/site.js
@@ -212,9 +212,14 @@
     } else if (theme === 'light') {
       nextTheme = 'auto';
     }
+    let domain = '';
+    if (location.hostname === 'go.dev') {
+      // Include subdomains to apply the setting to pkg.go.dev.
+      domain = 'domain=.go.dev;';
+    }
     document.documentElement.setAttribute('data-theme', nextTheme);
     document.cookie =
-      `prefers-color-scheme=${nextTheme};domain=.go.dev;path=/;max-age=31536000;`;
+      `prefers-color-scheme=${nextTheme};${domain}path=/;max-age=31536000;`;
   }
 
   initialThemeSetup();

_content/site.tmpl

diff --git a/_content/site.tmpl b/_content/site.tmpl
index 9cb4f9d..bc9ac60 100644
--- a/_content/site.tmpl
+++ b/_content/site.tmpl
@@ -143,6 +143,31 @@
               Report an Issue
             </a>
           </li>
+          <li class="Footer-listItem go-Footer-listItem">
+            <button class="go-Button go-Button--text go-Footer-toggleTheme js-toggleTheme" aria-label="Toggle theme">
+              <img
+                data-value="auto"
+                class="go-Icon go-Icon--inverted"
+                height="24"
+                width="24"
+                src="/images/icons/brightness_6_gm_grey_24dp.svg"
+                alt="System theme">
+              <img
+                data-value="dark"
+                class="go-Icon go-Icon--inverted"
+                height="24"
+                width="24"
+                src="/images/icons/brightness_2_gm_grey_24dp.svg"
+                alt="Dark theme">
+              <img
+                data-value="light"
+                class="go-Icon go-Icon--inverted"
+                height="24"
+                width="24"
+                src="/images/icons/light_mode_gm_grey_24dp.svg"
+                alt="Light theme">
+            </button>
+          </li>
         </ul>
         <a class="Footer-googleLogo" target="_blank" href="https://google.com" rel="noopener">
           <img class="Footer-googleLogoImg" src="/images/google-white.png" alt="Google logo">