Added new ThemeProvider

components/layout.tsx → app/layout.tsx

@@ -1,5 +1,5 @@
-import Header from "./header";
-import { Providers } from "@/app/providers";
+import Header from "../components/header";
+import Providers from "@/app/providers";
 
 export default function Layout({
    children,

app/providers.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { ReactNode, Suspense } from 'react';
+import { ThemeProvider } from './store/ThemeContext';
+
+export default function Providers(props: Readonly<{children: ReactNode}>) {
+    return (<ThemeProvider>
+        <Suspense fallback={null}>{props.children}</Suspense>
+    </ThemeProvider>)
+}

app/store/ThemeContext.tsx

@@ -0,0 +1,53 @@
+"use client";
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
+
+export const ThemeContext = createContext< { theme: string; toggleTheme: () => void; }|null>(null);
+
+export const ThemeProvider = ({ children }: {
+    children: ReactNode
+}) => {
+    const [theme, setTheme] = useState('');
+
+    // Step 2: Toggle theme and save to localStorage
+    const toggleTheme = () => {
+        const newTheme = theme === 'dark' ? 'light' : 'dark';
+        setTheme(newTheme);
+        window.localStorage?.setItem('theme', newTheme);
+    };
+
+    // Step 3: Effect to update the documentElement based on theme
+    useEffect(() => {
+        const root = document.documentElement;
+
+        if (theme === 'dark') {
+            root.classList.add('dark');
+            root.classList.remove('light');
+        } else {
+            root.classList.add('light');
+            root.classList.remove('dark');
+        }
+    }, [theme]);
+
+    useEffect(() => {
+        const savedTheme = window.localStorage?.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const initialTheme = savedTheme ?? (prefersDark ? 'dark' : 'light');
+        setTheme(initialTheme)
+
+        // If the initial theme is not light, apply it to the documentElement immediately
+        if (initialTheme && initialTheme !== 'light') {
+            document.documentElement.classList.add(initialTheme);
+        }
+    }, []);
+    if (!theme) {
+        return null
+    }
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};
+
+export const useTheme = () => React.useContext(ThemeContext);

components/header.tsx

@@ -2,20 +2,19 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import Image from "next/image";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/app/store/ThemeContext";
 
 export default function Header() {
     const pathname = usePathname()
-    const { systemTheme, theme, setTheme } = useTheme();
-    const currentTheme = theme === 'system' ? systemTheme : theme;
-
+    const isDarkTheme = useTheme()?.theme === 'dark';
+console.error(useTheme()?.theme)
     return (
         <header>
             <nav className="w-full bg-white border-gray-200 dark:bg-gray-900">
                 <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                     <a href="https://reterics.com/" className="flex items-center">
                         <Image src={
-                            currentTheme === "dark" ? "/logo-light.png" : "/logo.png"
+                            isDarkTheme ? "/logo-light.png" : "/logo.png"
                         } width={30} height={32} className="h-8" alt="Reterics Logo"/>
                         <div
                             className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white flex-row flex">T

package.json

@@ -27,7 +27,7 @@
     "react-dom": "19.0.0",
     "react-icons": "4.12.0",
     "three": "^0.172.0",
-    "uic-pack": "^0.2.0"
+    "uic-pack": "^0.3.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.13.0",

pages/_app.tsx

@@ -4,10 +4,12 @@ import type { AppProps } from "next/app"
 // Use of the <SessionProvider> is mandatory to allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
 export default function App({
-                                Component,
-                                pageProps,
-                            }: AppProps) {
+    Component,
+    pageProps,
+}: AppProps) {
     return (
-        <Component {...pageProps} />
+        <>
+            <Component {...pageProps} />
+        </>
     )
 }

pages/assets.tsx

@@ -1,13 +1,12 @@
-import Layout from "@/components/layout";
-import { BsFillTrashFill, BsPencilSquare } from "react-icons/bs";
+import Layout from "@/app/layout";
 import React, { useEffect, useState } from "react";
 import { AssetObject } from "@/src/types/assets";
 import { db, firebaseCollections } from "@/src/firebase/config";
 import AssetModal from "@/components/modals/AssetModal";
 import { collection, doc, setDoc } from "firebase/firestore";
 import Image from 'next/image'
 import { refreshAssets } from "@/src/utils/assets";
-import {TableViewActions, TableViewComponent} from "uic-pack";
+import { TableViewActions, TableViewComponent } from "uic-pack";
 
 
 export default function Assets() {

pages/editor.tsx

@@ -1,5 +1,5 @@
 "use client";
-import Layout from "@/components/layout";
+import Layout from "@/app/layout";
 import { useEffect, useState } from "react";
 import {
     BsArrowsFullscreen,

pages/globals.css

@@ -38,4 +38,4 @@ body {
   background-size: contain !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
-}
+}

pages/index.tsx

@@ -1,9 +1,7 @@
-import Layout from "@/components/layout";
+import Layout from "@/app/layout";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
-    BsPencilSquare,
-    BsFillTrashFill,
     BsArrowLeft,
     BsArrowRight,
     BsArrowUpLeft,
@@ -18,7 +16,7 @@ import { db, firebaseCollections, getCollection } from "@/src/firebase/config";
 import { doc, deleteDoc } from "firebase/firestore";
 import Link from "next/link";
 import { Constants } from "@/src/constants";
-import {TableViewActions, TableViewComponent} from "uic-pack";
+import { TableViewActions, TableViewComponent } from "uic-pack";
 
 export const useGridProperties = (coordinates: Coordinates, projection2D: ATMap[][]) => {
     const gridTemplateColumns: string[] = [];

yarn.lock

@@ -3391,10 +3391,10 @@ typescript@^5.7.3, typescript@>=3.3.1, typescript@>=4.8.4, "typescript@>=4.8.4 <
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz"
   integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
 
-uic-pack@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/uic-pack/-/uic-pack-0.2.0.tgz"
-  integrity sha512-ykEKDMaOqptavrPpUbVKcxRiCfAOsG3B3pkAiT9F/irfBcza8Yt4atEn44igCH5JqLDbxSDUMNEWh86/2HPMaw==
+uic-pack@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/uic-pack/-/uic-pack-0.3.0.tgz"
+  integrity sha512-pIt5PGHdfU8PW9t4TTcyLqUQGQ8MBVj3e9kqLwpbly8svzqytMIbm0Zco1l/vrD8Q/cEhA6UC2PNxOp+TDEhLA==
   dependencies:
     react "^19.0.0"
     react-dom "^19.0.0"