fix: dark mode persistence on Learn page

src/components/Navbar.tsx

@@ -1,26 +1,34 @@
-import { useState } from "react";
-import { Menu, Dropdown, Button, Image, Grid } from "antd";
+import { useState, useEffect} from "react";
+import { Menu, Dropdown, Button, Image} from "antd";
 import { useSpring, animated } from "react-spring";
 import { useLocation, Link } from "react-router-dom";
+import useAppStore from "../store/store";
 import {
   GithubOutlined,
   QuestionOutlined,
   UserOutlined,
   InfoOutlined,
   BookOutlined,
   CaretDownFilled,
+  MenuOutlined,
+  CompassOutlined,
 } from "@ant-design/icons";
 import ToggleDarkMode from "./ToggleDarkMode";
 
-const { useBreakpoint } = Grid;
-
-function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
+function Navbar({ scrollToFooter }: { scrollToFooter: () => void }) {
   const [hovered, setHovered] = useState<
     null | "home" | "explore" | "help" | "github" | "join"
   >(null);
-  const screens = useBreakpoint();
   const location = useLocation();
 
+  const [isWideScreen, setIsWideScreen] = useState(
+    typeof window !== 'undefined' && window.innerWidth >= 954
+  );
+  const { backgroundColor } = useAppStore();
+  useEffect(() => {
+    const theme = backgroundColor === "#121212" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [backgroundColor]);
   const props = useSpring({
     to: async (next) => {
       while (true) {
@@ -40,7 +48,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
     config: { duration: 1000 },
   });
 
-  const menu = (
+  const helpMenu = (
     <Menu>
       <Menu.ItemGroup title="Info">
         <Menu.Item key="about">
@@ -85,19 +93,78 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
     </Menu>
   );
 
+  const mobileMenu = (
+    <Menu>
+      <Menu.Item key="explore" onClick={scrollToFooter}>
+        <CompassOutlined /> Explore
+      </Menu.Item>
+      <Menu.SubMenu key="help" title={<span><QuestionOutlined /> Help</span>}>
+        <Menu.ItemGroup title="Info">
+          <Menu.Item key="about">
+            <a
+              href="https://github.com/accordproject/template-playground/blob/main/README.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              About
+            </a>
+          </Menu.Item>
+          <Menu.Item key="community">
+            <a
+              href="https://discord.com/invite/Zm99SKhhtA"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Community
+            </a>
+          </Menu.Item>
+          <Menu.Item key="issues">
+            <a
+              href="https://github.com/accordproject/template-playground/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Issues
+            </a>
+          </Menu.Item>
+        </Menu.ItemGroup>
+        <Menu.ItemGroup title="Documentation">
+          <Menu.Item key="documentation">
+            <a
+              href="https://github.com/accordproject/template-engine/blob/main/README.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Documentation
+            </a>
+          </Menu.Item>
+        </Menu.ItemGroup>
+      </Menu.SubMenu>
+    </Menu>
+  );
+
   const menuItemStyle = (key: string, isLast: boolean) => ({
     display: "flex",
     alignItems: "center",
-    padding: screens.md ? "0 20px" : "0",
+    padding: isWideScreen ? "0 20px" : "0",
     backgroundColor:
       hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
     height: "65px",
     borderRight:
-      screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
+      isWideScreen && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
   });
 
   const isLearnPage = location.pathname.startsWith("/learn");
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsWideScreen(window.innerWidth >= 954);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <div
       style={{
@@ -106,8 +173,8 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
         lineHeight: "65px",
         display: "flex",
         alignItems: "center",
-        paddingLeft: screens.md ? 40 : 10,
-        paddingRight: screens.md ? 40 : 10,
+        paddingLeft: isWideScreen ? 40 : 10,
+        paddingRight: isWideScreen ? 40 : 10,
       }}
     >
       <div
@@ -124,19 +191,19 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
           style={{ display: "flex", alignItems: "center" }}
         >
           <Image
-            src={screens.md ? "/logo.png" : "/accord_logo.png"}
+            src={isWideScreen ? "/logo.png" : "/accord_logo.png"}
             alt="Template Playground"
             preview={false}
             style={{
-              paddingRight: screens.md ? "24px" : "10px",
+              paddingRight: isWideScreen ? "24px" : "10px",
               height: "26px",
-              maxWidth: screens.md ? "184.17px" : "36.67px",
+              maxWidth: isWideScreen ? "184.17px" : "36.67px",
             }}
           />
-          <span style={{ color: "white" }}>Template Playground</span>
+          {isWideScreen && <span style={{ color: "white" }}>Template Playground</span>}
         </a>
       </div>
-      {screens.md && (
+      {isWideScreen ? (
         <>
           <div
             style={{
@@ -157,7 +224,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
             onMouseEnter={() => setHovered("help")}
             onMouseLeave={() => setHovered(null)}
           >
-            <Dropdown overlay={menu} trigger={["click"]}>
+            <Dropdown overlay={helpMenu} trigger={["click"]}>
               <Button
                 style={{
                   background: "transparent",
@@ -176,6 +243,20 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
             </Dropdown>
           </div>
         </>
+      ) : (
+        <div style={{ marginLeft: "10px" }}>
+          <Dropdown overlay={mobileMenu} trigger={["click"]}>
+            <Button
+              style={{
+                background: "transparent",
+                border: "none",
+                padding: 0,
+              }}
+            >
+              <MenuOutlined style={{ fontSize: "20px", color: "white" }} />
+            </Button>
+          </Dropdown>
+        </div>
       )}
       <div
         style={{
@@ -191,7 +272,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
         {!isLearnPage && (
           <div
             style={{
-              marginLeft: screens.md ? "20px" : "0",
+              marginLeft: isWideScreen ? "20px" : "0",
               height: "65px",
               display: "flex",
               justifyContent: "center",
@@ -229,12 +310,12 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            padding: screens.md ? "0 20px" : "0 10px",
+            padding: isWideScreen ? "0 20px" : "0 10px",
             borderRadius: "5px",
-            borderLeft: screens.md
+            borderLeft: isWideScreen
               ? "1.5px solid rgba(255, 255, 255, 0.1)"
               : "none",
-            paddingLeft: screens.md ? "20px" : "0",
+            paddingLeft: isWideScreen ? "20px" : "0",
             backgroundColor:
               hovered === "github" ? "rgba(255, 255, 255, 0.1)" : "transparent",
             cursor: "pointer",
@@ -252,15 +333,15 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
               style={{
                 fontSize: "20px",
                 color: "white",
-                marginRight: screens.md ? "5px" : "0",
+                marginRight: isWideScreen ? "5px" : "0",
               }}
             />
-            {screens.md && <span>Github</span>}
+            {isWideScreen && <span>Github</span>}
           </a>
         </div>
       </div>
     </div>
   );
 }
 
-export default Navbar;
+export default Navbar;

src/components/Sidebar.tsx

@@ -49,4 +49,4 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
   );
 };
 
-export default Sidebar;
+export default Sidebar;

src/components/ToggleDarkMode.tsx

@@ -14,6 +14,9 @@ const ToggleDarkMode: React.FC = () => {
   const handleChange = () => {
     toggleDarkMode();
     setIsDarkMode((prev) => !prev);
+    const newTheme = !isDarkMode ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", newTheme);
+    console.log('ToggleDarkMode: new isDarkMode:', !isDarkMode, 'data-theme set to:', newTheme, 'localStorage:', localStorage.getItem('darkMode'));
   };
 
   return (

src/index.css

@@ -7,3 +7,23 @@ body {
   margin: 0;
   padding: 0;
 }
+
+html[data-theme="dark"] {
+    --bg-color: #121212;
+    --text-color: #ffffff;
+    --border-color: #444444;
+    --active-bg-color: #333333;
+    --active-text-color: #ffffff; 
+    --hover-bg-color: #444444;
+    --hover-text-color: #ffffff;
+}
+
+html[data-theme="light"] {
+    --bg-color: #ffffff;
+    --text-color: #121212;
+    --border-color: #ddd;
+    --active-bg-color: #e0e0e0;
+    --active-text-color: #1b2540; 
+    --hover-bg-color: #e0e0e0;
+    --hover-text-color: #050c40;
+}

src/pages/LearnNow.tsx

@@ -1,14 +1,23 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import Sidebar from "../components/Sidebar";
-import { LearnNowContainer } from "../styles/pages/LearnNow";
+import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow";
 import { steps } from "../constants/learningSteps/steps";
 
 const LearnNow: React.FC = () => {
+  useEffect(() => {
+    const computedBg = getComputedStyle(document.documentElement).getPropertyValue('--bg-color');
+    console.log("LearnNow: computed --bg-color:", computedBg);
+  }, []);
+
   return (
     <LearnNowContainer>
-      <Sidebar steps={steps} />
-      <Outlet />
+      <SidebarContainer>
+        <Sidebar steps={steps} />
+      </SidebarContainer>
+      <ContentContainer>
+        <Outlet />
+      </ContentContainer>
     </LearnNowContainer>
   );
 };

src/styles/components/Content.ts

@@ -5,7 +5,7 @@ export const ContentContainer = styled.div`
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
-  background: #ffffff;
+  background-color: var(--bg-color) !important;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
@@ -18,12 +18,13 @@ export const ContentContainer = styled.div`
   h6 {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    color: #333;
+    color: var(--text-color) !important;
   }
 
   p {
     line-height: 1.6;
     margin-bottom: 1em;
+    color: var(--text-color) !important;
   }
 
   a {
@@ -41,6 +42,7 @@ export const ContentContainer = styled.div`
 
     li {
       margin-bottom: 0.5em;
+      color: var(--text-color) !important;
     }
   }