• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Next.js Theme Switcher

Environment

Product Version7.3.0
ProductProgress® KendoReact

Description

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

Solution

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.

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]({% dropdownlist_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.

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.

In this article

Not finding the help you need?