Change theme to dark theme switch

drawdb-io · Jul 16, 2024 · 5aefd70 · 5aefd70
1 parent 4a7d312
commit 5aefd70
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 27 deletions.
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
@@ -1158,30 +1158,21 @@ export default function ControlPanel({
             showCardinality: !prev.showCardinality,
           })),
       },
-      theme: {
-        children: [
-          {
-            light: () => {
-              const body = document.body;
-              if (body.hasAttribute("theme-mode")) {
-                body.setAttribute("theme-mode", "light");
-              }
-              localStorage.setItem("theme", "light");
-              setSettings((prev) => ({ ...prev, mode: "light" }));
-            },
-          },
-          {
-            dark: () => {
-              const body = document.body;
-              if (body.hasAttribute("theme-mode")) {
-                body.setAttribute("theme-mode", "dark");
-              }
-              localStorage.setItem("theme", "dark");
-              setSettings((prev) => ({ ...prev, mode: "dark" }));
-            },
-          },
-        ],
-        function: () => {},
+      dark_theme: {
+        state: settings.mode === "dark" ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () => {
+          const body = document.body;
+          const theme_mode = settings.mode === "dark" ? "light" : "dark";
+          if (body.hasAttribute("theme-mode")) {
+            body.setAttribute("theme-mode", theme_mode);
+          }
+          localStorage.setItem("theme", theme_mode);
+          setSettings((prev) => ({ ...prev, mode: theme_mode }));
+        },
       },
       zoom_in: {
         function: zoomIn,

diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
@@ -49,9 +49,7 @@ const en = {
     reset_view: "Reset view",
     show_grid: "Show grid",
     show_cardinality: "Show cardinality",
-    theme: "Theme",
-    light: "Light",
-    dark: "Dark",
+    dark_theme: "Dark theme",
     zoom_in: "Zoom in",
     zoom_out: "Zoom out",
     fullscreen: "Fullscreen",