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 (
+ <>
+
-
+
-
{
style={{ width: 300 }}
/>
-
+
+
);
};
-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({
+ 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(() =>
+ 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 (
+
+ {children}
+
+ );
+};
+
+export const useThemeContext = () => useContext(ThemeContext);
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..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
@@ -1,21 +1,52 @@
-import React from "react";
-import { Menu, MenuItemModel, MenuSelectEvent } from "@progress/kendo-react-layout";
-import { Button } from "@progress/kendo-react-buttons";
+import React, { useState, useEffect } 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(() =>
+ 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);
+ localStorage.setItem("theme", selectedTheme.link);
+ }
+ };
+
const handleCartClick = () => {
window.location.href = "/kendo-react/kendo-react-e-commerce-astro-app/shoppingcart";
};
@@ -28,46 +59,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 (
-
-
-
- 
-
-
-
-
- (
- <>
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+ (
+ <>
+
+
+
+
+
+
);
};
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 (
- <>
+
{
)}
-
+
);
};
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;
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..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;
}
-
- .sized-parent{
- max-width: 1280px;
- margin: auto;
- }
-
-
-
-
+
+
+