From 1be3585a3b1813a58d684cc07f85b20e5d08f0a7 Mon Sep 17 00:00:00 2001 From: shiva Date: Fri, 28 Mar 2025 05:05:29 +0530 Subject: [PATCH 1/4] feat: persist dark/light mode across page reloads Signed-off-by: shiva --- src/components/ToggleDarkMode.tsx | 5 +++-- src/store/store.ts | 24 ++++++++++++++++++++++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..3fd06cc9 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -8,8 +8,9 @@ const ToggleDarkMode: React.FC = () => { const [isDarkMode, setIsDarkMode] = useState(backgroundColor === "#121212"); useEffect(() => { - setIsDarkMode(backgroundColor === "#121212"); - }, [backgroundColor]); + const savedTheme = localStorage.getItem('theme'); + setIsDarkMode(savedTheme === 'dark'); + }, []); const handleChange = () => { toggleDarkMode(); diff --git a/src/store/store.ts b/src/store/store.ts index 52d697f3..6333020f 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -87,6 +87,21 @@ const useAppStore = create()( init: async () => { const params = new URLSearchParams(window.location.search); const compressedData = params.get("data"); + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + set(() => ({ + backgroundColor: '#121212', + textColor: '#ffffff', + })); + document.documentElement.setAttribute("data-theme", "dark"); + } + else { + set(() => ({ + backgroundColor: '#ffffff', + textColor: '#121212', + })); + document.documentElement.setAttribute("data-theme", "light"); + } if (compressedData) { await get().loadFromLink(compressedData); } else { @@ -197,9 +212,14 @@ const useAppStore = create()( toggleDarkMode: () => { set((state) => { const isDark = state.backgroundColor === '#121212'; + const newBackgroundColor = isDark ? '#ffffff' : '#121212'; + const newTextColor = isDark ? '#121212' : '#ffffff'; + + localStorage.setItem('theme', isDark ? 'light' : 'dark'); + return { - backgroundColor: isDark ? '#ffffff' : '#121212', - textColor: isDark ? '#121212' : '#ffffff', + backgroundColor: newBackgroundColor, + textColor: newTextColor, }; }); }, From cbf585b12f1ccd983f1b3edabdd553cdeaba3594 Mon Sep 17 00:00:00 2001 From: shiva Date: Sat, 29 Mar 2025 14:56:41 +0530 Subject: [PATCH 2/4] fix:loading dark screen Signed-off-by: shiva --- src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.tsx b/src/App.tsx index d2433985..f5672fa9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -128,6 +128,7 @@ const App = () => { display: "flex", justifyContent: "center", alignItems: "center", + background: backgroundColor, minHeight: "calc(100vh - 64px - 70px)", // Adjust for Navbar and Footer height }} > From 07c5d447494d28e1a50cb57a9e123c6078b64dda Mon Sep 17 00:00:00 2001 From: shiva Date: Fri, 25 Apr 2025 11:56:50 +0530 Subject: [PATCH 3/4] fix:more optimization Signed-off-by: shiva --- src/components/ToggleDarkMode.tsx | 7 ++----- src/constants.ts | 4 ++++ src/store/store.ts | 9 +++++---- 3 files changed, 11 insertions(+), 9 deletions(-) create mode 100644 src/constants.ts diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index 3fd06cc9..0fed6a5a 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -5,12 +5,9 @@ import useAppStore from "../store/store"; const ToggleDarkMode: React.FC = () => { const { backgroundColor, toggleDarkMode } = useAppStore(); - const [isDarkMode, setIsDarkMode] = useState(backgroundColor === "#121212"); + const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem('theme') === 'dark'); - useEffect(() => { - const savedTheme = localStorage.getItem('theme'); - setIsDarkMode(savedTheme === 'dark'); - }, []); + const handleChange = () => { toggleDarkMode(); diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 00000000..0b666daa --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,4 @@ +export const lightBackgroundColor = "#ffffff"; +export const lightTextColor = "#121212"; +export const darkBackgroundColor = "#121212"; +export const darkTextColor = "#ffffff"; \ No newline at end of file diff --git a/src/store/store.ts b/src/store/store.ts index 6333020f..c02ac863 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -9,6 +9,7 @@ import { transform } from "@accordproject/markdown-transform"; import { SAMPLES, Sample } from "../samples"; import * as playground from "../samples/playground"; import { compress, decompress } from "../utils/compression/compression"; +import { darkBackgroundColor, darkTextColor, lightBackgroundColor, lightTextColor } from "../constants"; interface AppState { templateMarkdown: string; @@ -90,15 +91,15 @@ const useAppStore = create()( const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { set(() => ({ - backgroundColor: '#121212', - textColor: '#ffffff', + backgroundColor: darkBackgroundColor, + textColor: darkTextColor, })); document.documentElement.setAttribute("data-theme", "dark"); } else { set(() => ({ - backgroundColor: '#ffffff', - textColor: '#121212', + backgroundColor: lightBackgroundColor, + textColor: lightTextColor, })); document.documentElement.setAttribute("data-theme", "light"); } From e237edacbf3ebf48de9ee3aab4c1a07a7fc4b045 Mon Sep 17 00:00:00 2001 From: shiva Date: Fri, 25 Apr 2025 12:01:50 +0530 Subject: [PATCH 4/4] fix:build error Signed-off-by: shiva --- src/components/ToggleDarkMode.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index 0fed6a5a..6ca0b043 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { ToggleDarkModeContainer } from "../styles/components/ToggleDarkMode"; import DarkModeToggle from "react-dark-mode-toggle"; import useAppStore from "../store/store"; const ToggleDarkMode: React.FC = () => { - const { backgroundColor, toggleDarkMode } = useAppStore(); + const { toggleDarkMode } = useAppStore(); const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem('theme') === 'dark');