Rotate localStorage key for color scheme

Author: philipp-spiess

src/app/layout.tsx

@@ -115,7 +115,7 @@ export default async function RootLayout({
           dangerouslySetInnerHTML={{
             __html: js`
               try {
-                _updateTheme(localStorage.theme)
+                _updateTheme(localStorage.currentTheme)
               } catch (_) {}
 
               try {
@@ -175,7 +175,7 @@ export default async function RootLayout({
   );
 }
 
-const FAVICON_VERSION = 3;
+const FAVICON_VERSION = 4;
 function v(href: string) {
   return `${href}?v=${FAVICON_VERSION}`;
 }

src/components/theme-toggle.tsx

@@ -17,7 +17,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   let [theme, setTheme] = useState<Theme>(null);
 
   useEffect(() => {
-    setTheme((localStorage.getItem("theme") ?? "system") as Theme);
+    setTheme((localStorage.getItem("currentTheme") ?? "system") as Theme);
   }, []);
 
   let themeValue = useMemo(() => ({ theme, setTheme }), [theme]);
@@ -27,9 +27,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
 function onChange(theme: Theme, setTheme: (theme: Theme) => void) {
   if (theme !== null) {
-    localStorage.setItem("theme", theme);
+    localStorage.setItem("currentTheme", theme);
   } else {
-    localStorage.removeItem("theme");
+    localStorage.removeItem("currentTheme");
   }
   (window as any)._updateTheme(theme);
   setTheme(theme);

src/docs/dark-mode.mdx

@@ -174,15 +174,15 @@ Here's a simple example of how you can support light mode, dark mode, as well as
 // On page load or when changing themes, best to add inline in `head` to avoid FOUC
 document.documentElement.classList.toggle(
   "dark",
-  localStorage.theme === "dark" ||
+  localStorage.currentTheme === "dark" ||
     (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
 );
 
 // Whenever the user explicitly chooses light mode
-localStorage.theme = "light";
+localStorage.currentTheme = "light";
 
 // Whenever the user explicitly chooses dark mode
-localStorage.theme = "dark";
+localStorage.currentTheme = "dark";
 
 // Whenever the user explicitly chooses to respect the OS preference
 localStorage.removeItem("theme");