diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx index 5e827a0e..3fbe38be 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx +++ b/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Menu, MenuSelectEvent, @@ -20,16 +20,30 @@ interface CustomMenuItemModel extends MenuItemModel { const Header: React.FC = () => { const isAdminValue = useStore(isAdmin); - const [theme, setTheme] = useState( - "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css" + + const [theme, setTheme] = useState(() => + typeof window !== "undefined" + ? localStorage.getItem("theme") || + "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css" + : "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css" ); + useEffect(() => { + const themeLink = document.getElementById("theme-link") as HTMLLinkElement; + if (themeLink) { + themeLink.href = theme; + } else { + console.error("Theme tag not found"); + } + }, [theme]); + const handleThemeChange = (event: any) => { const selectedTheme = themeItems.find( (item) => item.themeName === event.item.themeName ); if (selectedTheme) { - setTheme(selectedTheme.link); + setTheme(selectedTheme.link); + localStorage.setItem("theme", selectedTheme.link); } }; diff --git a/examples/kendo-react-e-commerce-astro-app/src/helpers/themeStore.ts b/examples/kendo-react-e-commerce-astro-app/src/helpers/themeStore.ts new file mode 100644 index 00000000..8d25c270 --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/helpers/themeStore.ts @@ -0,0 +1,15 @@ +import { atom } from 'nanostores'; + +export const themeStore = atom( + typeof window !== 'undefined' + ? localStorage.getItem('theme') || + 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css' + : 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css' +); + +export const setTheme = (newTheme: string) => { + themeStore.set(newTheme); + if (typeof window !== 'undefined') { + localStorage.setItem('theme', newTheme); + } +}; diff --git a/examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro b/examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro index d29b0a0f..ae7efded 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro +++ b/examples/kendo-react-e-commerce-astro-app/src/layouts/Layout.astro @@ -59,7 +59,7 @@ z-index: 1000; } - .sized-parent{ + body.sized-parent { max-width: 1280px; margin: auto; }