From 1e517c35295cf1e64651c06ba0bf0ff6924fcd76 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Wed, 27 Nov 2024 18:21:30 +0200
Subject: [PATCH 1/4] implement theme switcher

refactor theme choosing

fix theme version
---
 .../src/components/Header.tsx                 | 115 ++++++++++++------
 .../src/data/themeItems.ts                    |  24 ++++
 2 files changed, 103 insertions(+), 36 deletions(-)
 create mode 100644 examples/kendo-react-e-commerce-astro-app/src/data/themeItems.ts

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 87971b71..5e827a0e 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,20 +1,37 @@
-import React from "react";
-import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
-import { Button } from "@progress/kendo-react-buttons";
+import React, { useState } from "react";
+import {
+  Menu,
+  MenuSelectEvent,
+  MenuItemModel,
+} from "@progress/kendo-react-layout";
+import { Button, DropDownButton } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs";
-import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons";
+import { searchIcon, userIcon, cartIcon, paletteIcon } from "@progress/kendo-svg-icons";
 import items from "../data/items";
+import themeItems from "../data/themeItems";
 import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { isAdmin } from "../helpers/adminStore";
 import { useStore } from "@nanostores/react";
 
 interface CustomMenuItemModel extends MenuItemModel {
-    page?: string;
-  }
+  page?: string;
+}
 
 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 handleThemeChange = (event: any) => {
+    const selectedTheme = themeItems.find(
+      (item) => item.themeName === event.item.themeName
+    );
+    if (selectedTheme) {
+      setTheme(selectedTheme.link);
+    }
+  };
 
   const handleCartClick = () => {
     window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/shoppingcart";
@@ -28,46 +45,72 @@ const Header: React.FC = () => {
     const selectedItem: CustomMenuItemModel = event.item;
 
     if (selectedItem.page) {
-        window.location.href = '/kendo-react/kendo-react-e-commerce-astro-app/' + selectedItem.page;
-        return;
+      window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/" + selectedItem.page;
+      return;
     }
 
     const selectedCategory = selectedItem.text;
     if (selectedCategory === "All") {
-      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products`; // No category filter applied
+      window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products`;
     } else {
       window.location.href = `/kendo-react/kendo-react-e-commerce-astro-app/products?category=${encodeURIComponent(selectedCategory)}`;
     }
   };
 
   return (
-    <AppBar themeColor="inherit">
-      <AppBarSection className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center" style={{ paddingLeft: "50px" }}>
-        <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
-          <img src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png" alt="Logo" />
-        </a>
-        <Menu items={items} onSelect={handleMenuSelect} />
-      </AppBarSection>
-      <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
-        <TextBox
-          placeholder="Search"
-          prefix={() => (
-            <>
-              <InputPrefix orientation="horizontal">
-                <span className="k-input-prefix-text">
-                  <SvgIcon icon={searchIcon} size="medium" />
-                </span>
-              </InputPrefix>
-              <InputSeparator />
-            </>
-          )}
-          style={{ width: 300 }}
-        />
-        <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
-        <Button svgIcon={cartIcon} fillMode="flat" className="k-ml-2" onClick={handleCartClick} />
-        <Switch onLabel="Admin" offLabel="Client" checked={isAdminValue} onChange={handleSwitchChange} />
-      </AppBarSection>
-    </AppBar>
+    <>
+      <link id="theme-link" rel="stylesheet" href={theme} />
+      <AppBar themeColor="inherit">
+        <AppBarSection
+          className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
+          style={{ paddingLeft: "50px" }}
+        >
+          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+            <img
+              src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png"
+              alt="Logo"
+            />
+          </a>
+          <Menu items={items} onSelect={handleMenuSelect} />
+        </AppBarSection>
+        <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
+          <TextBox
+            placeholder="Search"
+            prefix={() => (
+              <>
+                <InputPrefix orientation="horizontal">
+                  <span className="k-input-prefix-text">
+                    <SvgIcon icon={searchIcon} size="medium" />
+                  </span>
+                </InputPrefix>
+                <InputSeparator />
+              </>
+            )}
+            style={{ width: 300 }}
+          />
+          <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
+          <Button
+            svgIcon={cartIcon}
+            fillMode="flat"
+            className="k-ml-2"
+            onClick={handleCartClick}
+          />
+          <DropDownButton
+            svgIcon={paletteIcon}
+            items={themeItems}
+            textField="themeName"
+            fillMode="flat"
+            onItemClick={handleThemeChange}
+          />
+          <Switch
+            onLabel="Admin"
+            offLabel="Client"
+            checked={isAdminValue}
+            onChange={handleSwitchChange}
+          />
+        </AppBarSection>
+      </AppBar>
+    </>
   );
 };
 
diff --git a/examples/kendo-react-e-commerce-astro-app/src/data/themeItems.ts b/examples/kendo-react-e-commerce-astro-app/src/data/themeItems.ts
new file mode 100644
index 00000000..cb207c37
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/data/themeItems.ts
@@ -0,0 +1,24 @@
+const themeItems = [
+    {
+        themeName: 'Main',
+        link: 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css'
+    },
+    {
+        themeName: 'Main Dark',
+        link: 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main-dark.css'
+    },
+    {
+        themeName: 'Ocean Blue',
+        link: 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-ocean-blue-a11y.css'
+    },
+    {
+        themeName: 'Nordic',
+        link: 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-nordic.css'
+    },
+    {
+        themeName: 'Purple',
+        link: 'https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-purple.css'
+    }
+];
+
+export default themeItems;

From 1df097ac192ca11583013f4efb6dfd1760091bc6 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Sun, 1 Dec 2024 17:37:47 +0200
Subject: [PATCH 2/4] persist theme selection when navigating

---
 .../src/components/Header.tsx                 | 22 +++++++++++++++----
 .../src/helpers/themeStore.ts                 | 15 +++++++++++++
 .../src/layouts/Layout.astro                  |  2 +-
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 examples/kendo-react-e-commerce-astro-app/src/helpers/themeStore.ts

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<string>(() =>
+    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 <link> 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<string>(
+  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;
       }

From 0ed451b6316b52488c8fd02a031c007a33303124 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Sun, 1 Dec 2024 18:51:26 +0200
Subject: [PATCH 3/4] add themechooser for Vite

---
 examples/ecommerce-jewellery-store/index.html |  1 +
 .../ecommerce-jewellery-store/package.json    |  1 -
 .../ecommerce-jewellery-store/src/App.tsx     | 50 +++++++++--------
 .../src/components/Footer.tsx                 |  2 +-
 .../src/components/Header.tsx                 | 55 +++++++++++--------
 .../src/data/themeItems.ts                    | 24 ++++++++
 .../src/helpers/ThemeContext.tsx              | 48 ++++++++++++++++
 7 files changed, 133 insertions(+), 48 deletions(-)
 create mode 100644 examples/ecommerce-jewellery-store/src/data/themeItems.ts
 create mode 100644 examples/ecommerce-jewellery-store/src/helpers/ThemeContext.tsx

diff --git a/examples/ecommerce-jewellery-store/index.html b/examples/ecommerce-jewellery-store/index.html
index af77d546..8c7d7055 100644
--- a/examples/ecommerce-jewellery-store/index.html
+++ b/examples/ecommerce-jewellery-store/index.html
@@ -9,6 +9,7 @@
   <link
     href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     rel="stylesheet">
+    <link href="https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css" rel="stylesheet" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Ecommerce Jewellery Store</title>
 
diff --git a/examples/ecommerce-jewellery-store/package.json b/examples/ecommerce-jewellery-store/package.json
index 51a0247d..56fa2589 100644
--- a/examples/ecommerce-jewellery-store/package.json
+++ b/examples/ecommerce-jewellery-store/package.json
@@ -34,7 +34,6 @@
     "@progress/kendo-react-progressbars": "^9.0.0",
     "@progress/kendo-react-treeview": "^9.0.0",
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-default": "^10.0.1",
     "@progress/kendo-theme-utils": "^10.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/examples/ecommerce-jewellery-store/src/App.tsx b/examples/ecommerce-jewellery-store/src/App.tsx
index d9656172..8212d999 100644
--- a/examples/ecommerce-jewellery-store/src/App.tsx
+++ b/examples/ecommerce-jewellery-store/src/App.tsx
@@ -6,7 +6,6 @@ import ThankYou from "./pages/ThankYou";
 import PaymentDetails from "./pages/PaymentDetails";
 import { AllProductsListView } from "./pages/AllProductsListView";
 import Home from "./pages/Home";
-import "@progress/kendo-theme-default/dist/all.css";
 import "@progress/kendo-theme-utils/dist/all.scss";
 import { SizedParent } from "./components/SizedParent";
 import { DetailedCategory } from "./pages/DetailedCategory";
@@ -14,32 +13,35 @@ import { ProductDetails } from "./pages/ProductsDetails";
 import { CartProvider } from "./helpers/CartContext";
 import { AdminProvider } from './helpers/AdminContext';
 import { CategoriesProvider } from './helpers/CategoriesContext';
-import { ShoppingCartList } from "./components/ShoppingCartList"; // Adjust path if necessary
+import { ThemeProvider } from './helpers/ThemeContext'; 
+import { ShoppingCartList } from "./components/ShoppingCartList"; 
 
 function App() {
   return (
-    <CartProvider>
-      <AdminProvider>
-        <CategoriesProvider>
-          <Router basename="/kendo-react/ecommerce-jewellery-store">
-            <Header />
-            <SizedParent>
-              <Routes>
-                <Route path="/" element={<Home />} />
-                <Route path="/paymentdetails" element={<PaymentDetails />} />
-                <Route path="/thankyou" element={<ThankYou />} />
-                <Route path="/contacts" element={<Contacts />} />
-                <Route path="/products" element={<AllProductsListView />} />
-                <Route path="/category" element={<DetailedCategory />} />
-                <Route path="/product/:id" element={<ProductDetails />} />
-                <Route path="/shoppingcart" element={<ShoppingCartList />} />
-              </Routes>
-            </SizedParent>
-            <Footer />
-          </Router>
-        </CategoriesProvider>
-      </AdminProvider>
-    </CartProvider>
+    <ThemeProvider> 
+      <CartProvider>
+        <AdminProvider>
+          <CategoriesProvider>
+            <Router basename="/kendo-react/ecommerce-jewellery-store">
+              <Header />
+              <SizedParent>
+                <Routes>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/paymentdetails" element={<PaymentDetails />} />
+                  <Route path="/thankyou" element={<ThankYou />} />
+                  <Route path="/contacts" element={<Contacts />} />
+                  <Route path="/products" element={<AllProductsListView />} />
+                  <Route path="/category" element={<DetailedCategory />} />
+                  <Route path="/product/:id" element={<ProductDetails />} />
+                  <Route path="/shoppingcart" element={<ShoppingCartList />} />
+                </Routes>
+              </SizedParent>
+              <Footer />
+            </Router>
+          </CategoriesProvider>
+        </AdminProvider>
+      </CartProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/examples/ecommerce-jewellery-store/src/components/Footer.tsx b/examples/ecommerce-jewellery-store/src/components/Footer.tsx
index 953fc889..f18f8526 100644
--- a/examples/ecommerce-jewellery-store/src/components/Footer.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/Footer.tsx
@@ -12,7 +12,7 @@ import viloraLogo from '@/assets/vilora-logo.png';
 
 const Footer: React.FC = () => {
   return (
-    <section className="k-py-10 k-px-12 header"> 
+    <section className="k-py-10 k-px-12 footer"> 
       <div className="k-d-flex k-flex-wrap k-justify-content-between k-gap-8 k-text-align-left">
         <div className="k-flex-basis-250 k-flex-grow-1 k-mb-4 k-mt-6" style={{marginLeft: '50px'}}> 
           <a href="#" className="k-d-block k-mb-4 k-text-align-center">
diff --git a/examples/ecommerce-jewellery-store/src/components/Header.tsx b/examples/ecommerce-jewellery-store/src/components/Header.tsx
index 0ced0fc9..ab896d44 100644
--- a/examples/ecommerce-jewellery-store/src/components/Header.tsx
+++ b/examples/ecommerce-jewellery-store/src/components/Header.tsx
@@ -1,32 +1,44 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
-import { Button } from "@progress/kendo-react-buttons";
+import { Button, DropDownButton } from "@progress/kendo-react-buttons";
 import { SvgIcon } from "@progress/kendo-react-common";
 import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs";
-import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons";
+import { searchIcon, userIcon, cartIcon, paletteIcon } from "@progress/kendo-svg-icons";
 import viloraLogo from "@/assets/vilora-logo.png";
 import items from "../data/items";
+import themeItems from "../data/themeItems";
 import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
 import { useAdminContext } from "../helpers/AdminContext";
-import { useCategoriesContext } from "../helpers/CategoriesContext"; 
+import { useCategoriesContext } from "../helpers/CategoriesContext";
+import { useThemeContext } from "../helpers/ThemeContext";
 
 interface CustomMenuItemModel extends MenuItemModel {
   page?: string;
 }
 
-
 const Header: React.FC = () => {
   const navigate = useNavigate();
   const { toggleRole } = useAdminContext();
   const { setSelectedCategory } = useCategoriesContext();
+  const { theme, setTheme } = useThemeContext();
+
+  const handleThemeChange = (event: any) => {
+    const selectedTheme = themeItems.find((item) => item.themeName === event.item.themeName);
+    if (selectedTheme) {
+      setTheme(selectedTheme.link);
+      console.log("Theme changed to:", selectedTheme.link);
+    } else {
+      console.error("Selected theme not found:", event.item.themeName);
+    }
+  };
 
   const handleCartClick = () => {
     navigate("/shoppingcart");
   };
 
   const handleSwitchChange = () => {
-    toggleRole(); 
+    toggleRole();
   };
 
   const handleMenuSelect = (event: MenuSelectEvent) => {
@@ -36,25 +48,26 @@ const Header: React.FC = () => {
       navigate(selectedItem.page);
       return;
     }
-  
+
     const selectedCategory = selectedItem.text;
     if (selectedCategory === "All") {
-      setSelectedCategory(null); 
+      setSelectedCategory(null);
     } else {
-      setSelectedCategory(selectedCategory ?? null); 
-      navigate("/category"); 
+      setSelectedCategory(selectedCategory ?? null);
+      navigate("/category");
     }
   };
 
   return (
+    <>
+      <link id="theme-link" rel="stylesheet" href={theme} />
       <AppBar themeColor="inherit">
         <AppBarSection className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center" style={{ paddingLeft: "50px" }}>
-          <a href="#" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img src={viloraLogo} alt="Logo" />
           </a>
           <Menu items={items} onSelect={handleMenuSelect} />
         </AppBarSection>
-
         <AppBarSection className="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
           <TextBox
             placeholder="Search"
@@ -71,21 +84,19 @@ const Header: React.FC = () => {
             style={{ width: 300 }}
           />
           <Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
-          <Button
-            svgIcon={cartIcon}
+          <Button svgIcon={cartIcon} fillMode="flat" className="k-ml-2" onClick={handleCartClick} />
+          <DropDownButton
+            svgIcon={paletteIcon}
+            items={themeItems}
+            textField="themeName"
             fillMode="flat"
-            className="k-ml-2"
-            onClick={handleCartClick}
-          />
-          <Switch
-            className="switch-width"
-            onLabel="Admin"
-            offLabel="Client"
-            onChange={handleSwitchChange}
+            onItemClick={handleThemeChange}
           />
+          <Switch className="switch-width" onLabel="Admin" offLabel="Client" onChange={handleSwitchChange} />
         </AppBarSection>
       </AppBar>
+    </>
   );
 };
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/examples/ecommerce-jewellery-store/src/data/themeItems.ts b/examples/ecommerce-jewellery-store/src/data/themeItems.ts
new file mode 100644
index 00000000..91f54095
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/data/themeItems.ts
@@ -0,0 +1,24 @@
+const themeItems = [
+  {
+    themeName: "Main",
+    link: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css",
+  },
+  {
+    themeName: "Main Dark",
+    link: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main-dark.css",
+  },
+  {
+    themeName: "Ocean Blue",
+    link: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-ocean-blue-a11y.css",
+  },
+  {
+    themeName: "Nordic",
+    link: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-nordic.css",
+  },
+  {
+    themeName: "Purple",
+    link: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-purple.css",
+  },
+];
+
+export default themeItems;
diff --git a/examples/ecommerce-jewellery-store/src/helpers/ThemeContext.tsx b/examples/ecommerce-jewellery-store/src/helpers/ThemeContext.tsx
new file mode 100644
index 00000000..3b907af2
--- /dev/null
+++ b/examples/ecommerce-jewellery-store/src/helpers/ThemeContext.tsx
@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+interface ThemeContextProps {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps>({
+  theme: "https://unpkg.com/@progress/kendo-theme-default@10.0.0/dist/default-main.css",
+  setTheme: () => {},
+});
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [theme, setThemeState] = useState<string>(() =>
+    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"
+  );
+
+  const setTheme = (newTheme: string) => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", newTheme);
+    }
+  };
+
+  useEffect(() => {
+    const themeLink = document.getElementById("theme-link") as HTMLLinkElement;
+    if (themeLink) {
+      themeLink.href = theme;
+    }
+
+    document.body.classList.add("k-body");
+
+    return () => {
+      document.body.classList.remove("k-body");
+    };
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => useContext(ThemeContext);

From 54ee135a21e7d8653ba2ee2e6dcfdbef993cbc75 Mon Sep 17 00:00:00 2001
From: Silviya Boteva <sboteva@progress.com>
Date: Mon, 2 Dec 2024 12:32:59 +0200
Subject: [PATCH 4/4] chore: layout fixes

---
 examples/ecommerce-jewellery-store/package-lock.json  | 11 -----------
 .../src/components/Header.tsx                         |  2 +-
 .../src/components/Home.tsx                           |  4 ++--
 .../src/layouts/Layout.astro                          |  8 +-------
 4 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/examples/ecommerce-jewellery-store/package-lock.json b/examples/ecommerce-jewellery-store/package-lock.json
index c0741283..1301c1f7 100644
--- a/examples/ecommerce-jewellery-store/package-lock.json
+++ b/examples/ecommerce-jewellery-store/package-lock.json
@@ -29,7 +29,6 @@
         "@progress/kendo-react-progressbars": "^9.0.0",
         "@progress/kendo-react-treeview": "^9.0.0",
         "@progress/kendo-svg-icons": "^4.0.0",
-        "@progress/kendo-theme-default": "^10.0.1",
         "@progress/kendo-theme-utils": "^10.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1609,16 +1608,6 @@
       "resolved": "https://registry.npmjs.org/@progress/kendo-theme-core/-/kendo-theme-core-10.0.1.tgz",
       "integrity": "sha512-DbMt1c/zXTS54Q65RFXlEnw7iUcCGkh/s7ZLvxG+gS9ZbODeFGku7wHsfJfrURz02HFwrbvH7cFHiEqvwnGE5g=="
     },
-    "node_modules/@progress/kendo-theme-default": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-10.0.1.tgz",
-      "integrity": "sha512-wc5IigmG32+xfvUj8IAWHdMQBCu3HLG/7ZBNiY7X+puBMSkbTjDk8mwWhlRagje9wltEd1GPGGDVOY7oCqRU8g==",
-      "dependencies": {
-        "@progress/kendo-svg-icons": "^4.0.0",
-        "@progress/kendo-theme-core": "10.0.1",
-        "@progress/kendo-theme-utils": "10.0.1"
-      }
-    },
     "node_modules/@progress/kendo-theme-utils": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-theme-utils/-/kendo-theme-utils-10.0.1.tgz",
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 3fbe38be..ef6dc7fb 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
@@ -79,7 +79,7 @@ const Header: React.FC = () => {
           className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center"
           style={{ paddingLeft: "50px" }}
         >
-          <a href="/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
+          <a href="/kendo-react/kendo-react-e-commerce-astro-app/" className="k-d-sm-flex" style={{ marginRight: "50px" }}>
             <img
               src="/kendo-react/kendo-react-e-commerce-astro-app/vilora-logo.png"
               alt="Logo"
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx
index f7b92047..2c158d92 100644
--- a/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx
@@ -34,7 +34,7 @@ const Home: React.FC = () => {
   const isAdminValue = useStore(isAdmin);
 
   return (
-    <>
+    <div className="k-m-auto" style={{ maxWidth: 1280 }}>
       <BackgroundImage
         title={title}
         subtitle={subtitle}
@@ -121,7 +121,7 @@ const Home: React.FC = () => {
           </Layout>
         </>
       )}
-    </>
+    </div>
   );
 };
 
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 ae7efded..79294d8d 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
@@ -58,16 +58,10 @@
        top: auto;
        z-index: 1000; 
       }
-
-      body.sized-parent {
-        max-width: 1280px;
-        margin: auto;
-      }
-      
     </style>
     <slot name="head" />
   </head>
-  <body class="k-body sized-parent">
+  <body class="k-body">
     <slot />
   </body>
 </html>