From 895eea688aab528a7e023e7aec78d05ee729c15f Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Wed, 10 Apr 2024 22:17:58 +0200
Subject: [PATCH] Fixed dark mode not activating immediatly at refresh (#1666)
Changed location of dark listener to improve dark performance
---
src/frontend/index.html | 2 +-
src/frontend/src/App.tsx | 9 +++++++++
src/frontend/src/components/headerComponent/index.tsx | 9 ---------
src/frontend/src/stores/darkStore.tsx | 5 ++++-
4 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/src/frontend/index.html b/src/frontend/index.html
index d4b03effb..c99fd9f2f 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -11,7 +11,7 @@
>
Langflow
-
+
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 75070b3bd..6c5af17df 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -50,9 +50,18 @@ export default function App() {
);
const checkHasStore = useStoreStore((state) => state.checkHasStore);
const navigate = useNavigate();
+ const dark = useDarkStore((state) => state.dark);
const [isLoadingHealth, setIsLoadingHealth] = useState(false);
+ useEffect(() => {
+ if (!dark) {
+ document.getElementById("body")!.classList.remove("dark");
+ } else {
+ document.getElementById("body")!.classList.add("dark");
+ }
+ }, [dark]);
+
useEffect(() => {
const isLoginPage = location.pathname.includes("login");
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index c302800c0..b3f60619c 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -40,15 +40,6 @@ export default function Header(): JSX.Element {
const setDark = useDarkStore((state) => state.setDark);
const stars = useDarkStore((state) => state.stars);
- useEffect(() => {
- if (dark) {
- document.getElementById("body")!.classList.add("dark");
- } else {
- document.getElementById("body")!.classList.remove("dark");
- }
- window.localStorage.setItem("isDark", dark.toString());
- }, [dark]);
-
async function checkForChanges(nodes: Node[]): Promise {
if (nodes.length === 0) {
await removeFlow(id!);
diff --git a/src/frontend/src/stores/darkStore.tsx b/src/frontend/src/stores/darkStore.tsx
index f3ccc2e5c..5b42b5dcf 100644
--- a/src/frontend/src/stores/darkStore.tsx
+++ b/src/frontend/src/stores/darkStore.tsx
@@ -8,7 +8,10 @@ export const useDarkStore = create((set, get) => ({
dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
stars: startedStars,
version: "",
- setDark: (dark) => set(() => ({ dark: dark })),
+ setDark: (dark) => {
+ set(() => ({ dark: dark }));
+ window.localStorage.setItem("isDark", dark.toString());
+ },
refreshVersion: () => {
getVersion().then((data) => {
set(() => ({ version: data.version }));