From 20ab4299f46835382fa06fe31684f09e7b2e5c4f Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Thu, 10 Nov 2022 14:06:10 +0100 Subject: [PATCH 01/12] [ui] ThemeToggle: add stub component --- .../ThemeToggle/ThemeToggle.component.js | 43 +++++++++++++++++++ .../ThemeToggle/ThemeToggle.stories.js | 13 ++++++ .../ThemeToggle/ThemeToggle.test.js | 13 ++++++ .../src/components/ThemeToggle/index.js | 1 + 4 files changed, 70 insertions(+) create mode 100644 libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js create mode 100644 libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.stories.js create mode 100644 libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.test.js create mode 100644 libs/juno-ui-components/src/components/ThemeToggle/index.js diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js new file mode 100644 index 000000000..89371ec7e --- /dev/null +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js @@ -0,0 +1,43 @@ +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; +import { Icon } from "../Icon/index.js"; + +const togglestyles = ` +` + +/** A Toggle to switch between Light and Dark UI themes */ +export const ThemeToggle = ({ + theme, + className, + ...props +}) => { + const [currentTheme, setCurrentTheme] = useState(null) + + React.useEffect(() => { + setCurrentTheme(theme) + }, [theme]) + + const toggleTheme = () => { + if (currentTheme === "dark") { + setCurrentTheme("light") + } else { + setCurrentTheme("dark") + } + } + + return ( + + ) +} + +ThemeToggle.propTypes = { + /** The theme to show, either 'dark' or 'light'. */ + theme: PropTypes.oneOf(["dark", "light"]), + /** Pass custom className */ + className: PropTypes.string, +} + +ThemeToggle.defaultProps = { + theme: "dark", + className: "", +} \ No newline at end of file diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.stories.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.stories.js new file mode 100644 index 000000000..8d0e88a0e --- /dev/null +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.stories.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { ThemeToggle } from './index.js'; + +export default { + title: 'WiP/ThemeToggle', + component: ThemeToggle, + argTypes: {}, +}; + +const Template = (args) => ; + +export const Default = Template.bind({}); +Default.args = {} \ No newline at end of file diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.test.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.test.js new file mode 100644 index 000000000..d2c1aed5a --- /dev/null +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.test.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { ThemeToggle } from './index'; + +describe('ThemeToggle', () => { + test('render a theme toggle', async () => { + render(); + expect(screen.getByRole('button')).toBeInTheDocument(); + expect(screen.getByRole('button')).toHaveClass("juno-theme-toggle"); + }); + +}); diff --git a/libs/juno-ui-components/src/components/ThemeToggle/index.js b/libs/juno-ui-components/src/components/ThemeToggle/index.js new file mode 100644 index 000000000..468d2eb6c --- /dev/null +++ b/libs/juno-ui-components/src/components/ThemeToggle/index.js @@ -0,0 +1 @@ +export { ThemeToggle } from "./ThemeToggle.component" \ No newline at end of file From e8eae03584c5ebfb14247905f9f233d5c62eb32f Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Thu, 10 Nov 2022 14:20:28 +0100 Subject: [PATCH 02/12] [ui] ThemeToggle: add MUI icons, titleText --- .../src/components/Icon/Icon.component.js | 28 +++++++++++++++++++ .../src/components/Icon/icons/dark_mode.svg | 1 + .../src/components/Icon/icons/light_mode.svg | 1 + .../ThemeToggle/ThemeToggle.component.js | 10 ++++++- 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 libs/juno-ui-components/src/components/Icon/icons/dark_mode.svg create mode 100644 libs/juno-ui-components/src/components/Icon/icons/light_mode.svg diff --git a/libs/juno-ui-components/src/components/Icon/Icon.component.js b/libs/juno-ui-components/src/components/Icon/Icon.component.js index a540a19c5..0bbc0675f 100644 --- a/libs/juno-ui-components/src/components/Icon/Icon.component.js +++ b/libs/juno-ui-components/src/components/Icon/Icon.component.js @@ -16,6 +16,7 @@ import Close from "./icons/close.svg" import ContentCopy from "./icons/content_copy.svg" import Danger from "./icons/juno-danger.svg" import Dangerous from "./icons/dangerous.svg" +import DarkMode from "./icons/dark_mode.svg" import DeleteForever from "./icons/delete_forever.svg" import Description from "./icons/description.svg" import DNS from "./icons/dns.svg" @@ -30,6 +31,7 @@ import Help from "./icons/help.svg" import Home from "./icons/home_sharp.svg" import Info from "./icons/info.svg" import InsertComment from "./icons/insert_comment.svg" +import LightMode from "./icons/light_mode.svg" import ManageAccounts from "./icons/manage_accounts.svg" import MoreVert from "./icons/more_vert.svg" import OpenInBrowser from "./icons/open_in_browser.svg" @@ -87,6 +89,7 @@ export const knownIcons = [ "contentCopy", "danger", "dangerous", + "darkMode", "default", "deleteForever", "description", @@ -102,6 +105,7 @@ export const knownIcons = [ "home", "info", "insertComment", + "lightMode", "manageAccounts", "moreVert", "openInBrowser", @@ -283,6 +287,18 @@ const getColoredSizedIcon = ({ {...iconProps} /> ) + case "darkMode": + return ( + + ) case "deleteForever": return ( ) + case "lightMode": + return ( + + ) case "manageAccounts": return ( \ No newline at end of file diff --git a/libs/juno-ui-components/src/components/Icon/icons/light_mode.svg b/libs/juno-ui-components/src/components/Icon/icons/light_mode.svg new file mode 100644 index 000000000..7fae634e8 --- /dev/null +++ b/libs/juno-ui-components/src/components/Icon/icons/light_mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js index 89371ec7e..de68b2862 100644 --- a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js @@ -25,8 +25,16 @@ export const ThemeToggle = ({ } } + const titleText = () => { + if (currentTheme === "dark") { + return "Change theme to Light mode" + } else { + return "Change theme to Dark mode" + } + } + return ( - + ) } From 00a5f7a0d5d9c0e50451cda10bd574d9eb22710c Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 10:45:46 +0100 Subject: [PATCH 03/12] [ui] add useThemeDetector hook --- .../src/hooks/useThemeDetector.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 libs/juno-ui-components/src/hooks/useThemeDetector.js diff --git a/libs/juno-ui-components/src/hooks/useThemeDetector.js b/libs/juno-ui-components/src/hooks/useThemeDetector.js new file mode 100644 index 000000000..2f47150ee --- /dev/null +++ b/libs/juno-ui-components/src/hooks/useThemeDetector.js @@ -0,0 +1,31 @@ +import React, { useState, useEffect } from 'react' + +/* Hook to detect user UI theme setting and to detect when it changes. + * From Kacper Kula: https://medium.com/hypersphere-codes/detecting-system-theme-in-javascript-css-react-f6b961916d48 + * Using this hook, any component can test wether the user is currently using dark theme: + * + * const MyComponent = () => { + * const isDarkTheme = useThemeDetector() + * return ( + *

{ isDarkTheme ? "Dark" : "Light" } Theme

+ * ) + * } +*/ + + +export const useThemeDetector = () => { + const getUserTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches + const [ isDarkTheme, setIsDarkTheme ] = useState(getUserTheme()) + const mqListener = (e) => { + setIsDarkTheme(e.matches) + } + + useEffect(() => { + const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)") + darkThemeMq.addListener(mqListener) + return () => darkThemeMq.removeListener(mqListener) + }, []) + + return isDarkTheme + +} From a9c379b5df1edc0a758edefb23ae482f4ce79110 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 14:31:32 +0100 Subject: [PATCH 04/12] [ui] ThemeToggle: detect theme, write current theme to localStorage --- .../ThemeToggle/ThemeToggle.component.js | 34 +++++++++++++++---- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js index de68b2862..00ca4975d 100644 --- a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js @@ -1,27 +1,47 @@ import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import { Icon } from "../Icon/index.js"; +import { useThemeDetector } from '../../hooks/useThemeDetector' const togglestyles = ` ` -/** A Toggle to switch between Light and Dark UI themes */ +/** A Toggle to switch between Light and Dark UI themes. +* Can auto-detect current system/useragent theme, and will the current theme in localStore. +*/ export const ThemeToggle = ({ theme, className, ...props }) => { - const [currentTheme, setCurrentTheme] = useState(null) + + let theTheme = "" + + switch (theme) { + case "auto": + theTheme = useThemeDetector() ? "dark" : "light" + case "light": + theTheme = "light" + case "dark": + theTheme = "dark" + default: + const storedTheme = localStorage.getItem("currentTheme") + storedTheme ? theTheme = storedTheme : "dark" + } + + const [currentTheme, setCurrentTheme] = useState(theTheme) React.useEffect(() => { - setCurrentTheme(theme) - }, [theme]) + setCurrentTheme(theTheme) + }, [theTheme]) const toggleTheme = () => { if (currentTheme === "dark") { setCurrentTheme("light") + localStorage.setItem("currentTheme", "light") } else { setCurrentTheme("dark") + localStorage.setItem("currentTheme", "dark") } } @@ -34,18 +54,18 @@ export const ThemeToggle = ({ } return ( - + ) } ThemeToggle.propTypes = { /** The theme to show, either 'dark' or 'light'. */ - theme: PropTypes.oneOf(["dark", "light"]), + theme: PropTypes.oneOf(["auto", "dark", "light"]), /** Pass custom className */ className: PropTypes.string, } ThemeToggle.defaultProps = { - theme: "dark", + theme: "auto", className: "", } \ No newline at end of file From 06d2fe2735911a3f397103c6b7bb0c2aefa66288 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 14:45:01 +0100 Subject: [PATCH 05/12] [ui] ThemeToggle: write inital theme to local storage, default to dark --- .../src/components/ThemeToggle/ThemeToggle.component.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js index 00ca4975d..5ac500184 100644 --- a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js @@ -7,7 +7,7 @@ const togglestyles = ` ` /** A Toggle to switch between Light and Dark UI themes. -* Can auto-detect current system/useragent theme, and will the current theme in localStore. +* Pass `theme="auto"` to auto-detect and apply current system/user agent theme. The current theme will be written to `localStorage.currentTheme`. */ export const ThemeToggle = ({ theme, @@ -35,6 +35,8 @@ export const ThemeToggle = ({ setCurrentTheme(theTheme) }, [theTheme]) + localStorage.setItem("currentTheme", theTheme) + const toggleTheme = () => { if (currentTheme === "dark") { setCurrentTheme("light") @@ -66,6 +68,6 @@ ThemeToggle.propTypes = { } ThemeToggle.defaultProps = { - theme: "auto", + theme: "dark", className: "", } \ No newline at end of file From bafffa22c2943644d6616dda46a5019b48a1f4a0 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 14:50:18 +0100 Subject: [PATCH 06/12] [ui] export ThemeToggle --- libs/juno-ui-components/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/juno-ui-components/src/index.js b/libs/juno-ui-components/src/index.js index 5b6cfe8cf..2127c9838 100644 --- a/libs/juno-ui-components/src/index.js +++ b/libs/juno-ui-components/src/index.js @@ -73,6 +73,7 @@ export { Tabs } from "./components/Tabs/index.js" export { TextareaRow } from "./components/TextareaRow/index.js" export { TextInput } from "./components/TextInput/index.js" export { TextInputRow } from "./components/TextInputRow/index.js" +export { ThemeToggle } from "./components/ThemeToggle/index" export { Toast } from "./components/Toast/index.js" export { Tooltip } from "./components/Tooltip/index.js" export { TopNavigation } from "./components/TopNavigation/index.js" From 4bfa983152e26033934e9f89b38644566b061da1 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 15:45:04 +0100 Subject: [PATCH 07/12] [ui] StyleProvider: update theme handling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * expect non-“theme-“ prefixed theme prop, construct className inside the component * default to checking localStorage first before final default if no theme prop was passed --- .../src/components/StyleProvider/StyleProvider.component.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js index aacc85784..3c0e5f52d 100644 --- a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js +++ b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js @@ -25,12 +25,12 @@ const StylesContext = React.createContext() */ export const StyleProvider = ({ stylesWrapper, - theme: themeClassName, + theme, children, shadowRootMode, }) => { - // theme class default to theme-dark - const themeClass = themeClassName || "theme-dark" + // theme class defaults to checking for localStorage.currentTheme; defaults to to theme-dark: + const themeClass = "theme-" + theme || "theme-" + localStorage.getItem("currentTheme") || "theme-dark" // manage custom css classes (useStyles) const [customCssClasses, setCustomCssClasses] = React.useState("") From 6165dd76e61b3a03156fe664c9308d883535dcb2 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 15:56:12 +0100 Subject: [PATCH 08/12] [ui] storybook: update to work with StyleProvider changes from prev commit --- libs/juno-ui-components/.storybook/preview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/juno-ui-components/.storybook/preview.js b/libs/juno-ui-components/.storybook/preview.js index 51562a442..8c518f36f 100644 --- a/libs/juno-ui-components/.storybook/preview.js +++ b/libs/juno-ui-components/.storybook/preview.js @@ -77,10 +77,10 @@ export const parameters = { export const decorators = [ (Story) => { - const themeClass = useDarkMode() ? "theme-dark" : "theme-light" + const theme = useDarkMode() ? "dark" : "light" return ( - + From ea6bde539d618ad636e4c2efd8e0d395b31d1a4c Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 16:09:27 +0100 Subject: [PATCH 09/12] [ui] StyleProvider: fix theme/themeClass defaulting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * don’t create “theme-undefined” themeClass --- .../src/components/StyleProvider/StyleProvider.component.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js index 3c0e5f52d..2eb471650 100644 --- a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js +++ b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js @@ -30,7 +30,10 @@ export const StyleProvider = ({ shadowRootMode, }) => { // theme class defaults to checking for localStorage.currentTheme; defaults to to theme-dark: - const themeClass = "theme-" + theme || "theme-" + localStorage.getItem("currentTheme") || "theme-dark" + //const themeClass = "theme-" + theme || "theme-" + localStorage.getItem("currentTheme") || "theme-dark" + + const themeClass = theme ? "theme-" + theme : ( localStorage.getItem("currentTheme") ? "theme-" + localStorage.getItem("currentTheme") : "theme-dark" ) + // manage custom css classes (useStyles) const [customCssClasses, setCustomCssClasses] = React.useState("") From 1c2d7c1c9d277948e14b6dc7aef0f0313ae22e10 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 16:10:00 +0100 Subject: [PATCH 10/12] [ui] StyleProvider: update Tests to reflect new behaviour --- .../src/components/StyleProvider/StyleProvider.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.test.js b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.test.js index 80696612b..7694d0a95 100644 --- a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.test.js +++ b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.test.js @@ -12,7 +12,7 @@ describe("StyleProvider", () => { test("renders a StyleProvider wrapper div with theme class as passed", async () => { const { container } = render() - expect(container.firstChild).toHaveClass('my-theme') + expect(container.firstChild).toHaveClass('theme-my-theme') }) From 5a401413e09879b0403f28b72500fa3fff043e73 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 15 Nov 2022 16:26:50 +0100 Subject: [PATCH 11/12] [ui] StyleProvider: update story args --- .../src/components/StyleProvider/StyleProvider.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.stories.js b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.stories.js index 6e64b8226..4fdac807d 100644 --- a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.stories.js +++ b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.stories.js @@ -38,6 +38,6 @@ AddStylesToShadowRoot.args = { export const WithTheme = Template.bind({}) WithTheme.args = { stylesWrapper: "shadowRoot", - theme: "theme-light", + theme: "light", children: "Light Theme", } From 94f2253dd3632fcd1b637aaab7acd528a9958ef3 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Tue, 22 Nov 2022 10:22:35 +0100 Subject: [PATCH 12/12] [ui] ThemeToggle: improve toggling --- .../StyleProvider/StyleProvider.component.js | 29 +++++++++++++++---- .../ThemeToggle/ThemeToggle.component.js | 10 +++---- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js index 2eb471650..678f8d679 100644 --- a/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js +++ b/libs/juno-ui-components/src/components/StyleProvider/StyleProvider.component.js @@ -4,7 +4,7 @@ * to place the ui-components styles. * @module StyleProvider */ -import React from "react" +import React, { useEffect, useState } from "react" import PropTypes from "prop-types" import { ShadowRoot } from "../ShadowRoot" @@ -29,10 +29,27 @@ export const StyleProvider = ({ children, shadowRootMode, }) => { - // theme class defaults to checking for localStorage.currentTheme; defaults to to theme-dark: - //const themeClass = "theme-" + theme || "theme-" + localStorage.getItem("currentTheme") || "theme-dark" + const DEFAULT_THEME = "dark" + // Use theme prop if passed, otherwise use localStorage.currentTheme if present, otherwise default to "dark": + const theTheme = theme ? theme : ( localStorage.getItem("currentTheme") ? localStorage.getItem("currentTheme") : DEFAULT_THEME ) + // init theme state: + const [currentTheme, setCurrentTheme] = React.useState(theTheme); - const themeClass = theme ? "theme-" + theme : ( localStorage.getItem("currentTheme") ? "theme-" + localStorage.getItem("currentTheme") : "theme-dark" ) + // update currentTheme in state when local storage changes: + useEffect(() => { + + const handleLocalStorageChange = () => { + const themeFromStorage = localStorage.getItem('currentTheme') + if (currentTheme != themeFromStorage) { + setCurrentTheme(themeFromStorage) + } + } + + window.addEventListener('storage', handleLocalStorageChange ) + + return () => window.removeEventListener('storage', handleLocalStorageChange ); + + }, []); // manage custom css classes (useStyles) const [customCssClasses, setCustomCssClasses] = React.useState("") @@ -92,13 +109,13 @@ export const StyleProvider = ({ {children} ) : ( -
+
{stylesWrapper === "inline" && ( )} diff --git a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js index 5ac500184..be5d0bc42 100644 --- a/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js +++ b/libs/juno-ui-components/src/components/ThemeToggle/ThemeToggle.component.js @@ -14,6 +14,7 @@ export const ThemeToggle = ({ className, ...props }) => { + const [currentTheme, setCurrentTheme] = useState(undefined) let theTheme = "" @@ -29,15 +30,11 @@ export const ThemeToggle = ({ storedTheme ? theTheme = storedTheme : "dark" } - const [currentTheme, setCurrentTheme] = useState(theTheme) - React.useEffect(() => { setCurrentTheme(theTheme) }, [theTheme]) - localStorage.setItem("currentTheme", theTheme) - - const toggleTheme = () => { + const handleThemeToggleClick = () => { if (currentTheme === "dark") { setCurrentTheme("light") localStorage.setItem("currentTheme", "light") @@ -45,6 +42,7 @@ export const ThemeToggle = ({ setCurrentTheme("dark") localStorage.setItem("currentTheme", "dark") } + window.dispatchEvent(new Event('storage')) } const titleText = () => { @@ -56,7 +54,7 @@ export const ThemeToggle = ({ } return ( - + ) }