New to KendoReact? Start a free 30-day trial

Next.js Theme Switcher

Environment

Product Version	7.3.0
Product	Progress® KendoReact

Description

I want to implement a theme switcher that changes between all the different kendo theme swatches in KendoReact.

You can achieve this using CDN imports for the themes. Basically, in the main layout.js file, add the link to the default main swatch inside the head element. In addition, the ThemeSwitcher component can be added in the body, where this will always render it no matter the route.

jsx

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
                <link
                    rel="stylesheet"
                    data-kendo="true"
                    href={`https://cdn.kendostatic.com/themes/7.2.1/default/default-main.css`}
                />
            </head>
            <body className="k-body">
                <ThemeSwitcher />
                {children}
            </body>
        </html>
    );
}

For the ThemeSwitcher, the most convenient component is the KendoReact DropDownList component. This is because it supports grouping, rendering custom items, and binding its data to an array of objects.

Basically, the main idea in this ThemeSwitcher component is to change the href attribute of the link in the onChange event handler of the DropDownList using link.setAttribute.

jsx

const handleChange = (event) => {
    const link = document.head.querySelector('link[data-kendo');
    if (link) {
        link.setAttribute('href', `https://cdn.kendostatic.com/themes/7.2.1/${event.target.value.swatch}.css`);
    }
};

This approach is demonstrated in this StackBlitz example.

Next.js Theme Switcher

Environment

Description

Solution