Merge pull request #827 from microsoft/dark_switch

Persist the dark mode switcher when in dark mode
microsoft · Jul 31, 2020 · 7d2825d · 7d2825d
2 parents 8d68eb1 + 2cc09f2
commit 7d2825d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 4 deletions.
diff --git a/packages/typescriptlang-org/gatsby-ssr.js b/packages/typescriptlang-org/gatsby-ssr.js
@@ -25,7 +25,7 @@ const CustomColorSwitcherCode = () => {
 
   if (!customThemeOverride && systemIsDark) {
     document.documentElement.classList.add("dark-theme")
-  } else if (customThemeOverride) {
+  } else if (customThemeOverride !== undefined) {
     document.documentElement.classList.add(customThemeOverride)
   }
 })()

diff --git a/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx b/packages/typescriptlang-org/src/components/layout/SiteFooter.tsx
@@ -209,7 +209,6 @@ export const SiteFooter = (props: Props) => {
   const systemIsDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   const customThemeOverride = hasLocalStorage && localStorage.getItem("color-theme")
   const useDark = !customThemeOverride && systemIsDark ? true : customThemeOverride === "dark-theme"
-
   const [isDarkMode, setDarkMode] = useState(useDark)
 
   const handleThemeChange = () => {
@@ -226,7 +225,7 @@ export const SiteFooter = (props: Props) => {
 
     } else {
       document.documentElement.classList.remove("dark-theme")
-      hasLocalStorage && localStorage.setItem("color-theme", "")
+      hasLocalStorage && localStorage.setItem("color-theme", "light-theme")
     }
   }, [isDarkMode])
 

diff --git a/packages/typescriptlang-org/src/components/layout/main.scss b/packages/typescriptlang-org/src/components/layout/main.scss
@@ -33,7 +33,7 @@
   );
 }
 
-html {
+html, html.light-theme {
   // light theme
   --background-color: #{$ts-light-bg-sandy-color};
   --text-color: #333;