fix: mantine color scheme conflict

Author: AykutSarac

src/lib/utils/mantineColorScheme.ts

@@ -0,0 +1,76 @@
+import { type MantineColorScheme, type MantineColorSchemeManager } from "@mantine/core";
+
+export interface SmartColorSchemeManagerOptions {
+  /** Local storage key used to retrieve value with `localStorage.getItem(key)` */
+  key: string;
+  /** Function that returns the current pathname */
+  getPathname: () => string;
+  /** Optional list of paths that should use the dynamic color scheme */
+  dynamicPaths?: string[];
+}
+
+/**
+ * Creates a smart color scheme manager that handles different behaviors based on the current path
+ * - For editor paths: Uses dynamic behavior with localStorage persistence and per-tab independence
+ * - For other paths: Forces light theme
+ */
+export function smartColorSchemeManager({
+  key,
+  getPathname,
+  dynamicPaths = [],
+}: SmartColorSchemeManagerOptions): MantineColorSchemeManager {
+  // Keep track of theme in memory for dynamic paths
+  let currentColorScheme: MantineColorScheme | null = null;
+
+  // Helper function to check if current path should use dynamic behavior
+  const shouldUseDynamicBehavior = () => {
+    const pathname = getPathname();
+    return dynamicPaths.some(path => pathname === path || pathname.startsWith(`${path}/`));
+  };
+
+  return {
+    get: defaultValue => {
+      // If not in a dynamic path (e.g., editor), always return light theme
+      if (!shouldUseDynamicBehavior()) return "light";
+
+      // For dynamic paths, use the stored value (memory first, then localStorage)
+      if (currentColorScheme) return currentColorScheme;
+
+      // First time initialization - read from localStorage
+      if (typeof window === "undefined") return defaultValue;
+
+      try {
+        currentColorScheme =
+          (window.localStorage.getItem(key) as MantineColorScheme) || defaultValue;
+        return currentColorScheme;
+      } catch {
+        return defaultValue;
+      }
+    },
+
+    set: value => {
+      // Only store theme for dynamic paths
+      if (!shouldUseDynamicBehavior()) return;
+
+      // Update our in-memory value
+      currentColorScheme = value;
+
+      // Also save to localStorage
+      try {
+        window.localStorage.setItem(key, value);
+      } catch (error) {
+        console.warn("Smart color scheme manager was unable to save color scheme.", error);
+      }
+    },
+
+    // These do nothing regardless of path
+    subscribe: () => {},
+    unsubscribe: () => {},
+    clear: () => {
+      currentColorScheme = null;
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+    },
+  };
+}

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { createTheme, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/code-highlight/styles.css";
@@ -10,6 +11,7 @@ import { Toaster } from "react-hot-toast";
 import GlobalStyle from "../constants/globalStyle";
 import { SEO } from "../constants/seo";
 import { lightTheme } from "../constants/theme";
+import { smartColorSchemeManager } from "../lib/utils/mantineColorScheme";
 
 const theme = createTheme({
   autoContrast: true,
@@ -53,6 +55,15 @@ const theme = createTheme({
 const IS_PROD = process.env.NODE_ENV === "production";
 
 function JsonCrack({ Component, pageProps }: AppProps) {
+  const { pathname } = useRouter();
+
+  // Create a single smart manager that handles pathname logic internally
+  const colorSchemeManager = smartColorSchemeManager({
+    key: "editor-color-scheme",
+    getPathname: () => pathname,
+    dynamicPaths: ["/editor"], // Only editor paths use dynamic theme
+  });
+
   return (
     <>
       <NextSeo {...SEO} />
@@ -66,7 +77,11 @@ function JsonCrack({ Component, pageProps }: AppProps) {
         applicationCategory="DeveloperApplication"
         aggregateRating={{ ratingValue: "4.9", ratingCount: "19" }}
       />
-      <MantineProvider defaultColorScheme="light" theme={theme}>
+      <MantineProvider
+        colorSchemeManager={colorSchemeManager}
+        defaultColorScheme="light"
+        theme={theme}
+      >
         <ThemeProvider theme={lightTheme}>
           <Toaster
             position="bottom-right"