How do I change the Syncfusion light and dark themes dynamically in Vue?

This article explains how to implement dynamic theme switching in a Vue application for Syncfusion components. Switching between light and dark themes enhances the user experience by allowing users to choose their preferred visual environment.

Include theme files

First, include the Syncfusion light and dark themes in your HTML file. Here, we have included the light and dark Material 3 themes.

<link href="https://cdn.syncfusion.com/ej2/24.1.41/material3.css" rel="stylesheet" id="material3">
<link href="https://cdn.syncfusion.com/ej2/24.1.41/material3-dark.css" rel="stylesheet" id="material3-dark">

Enabling the Default Theme

Upon initial rendering, you should enable the default theme and disable other themes that are referenced in the HTML.
You can achieve this by setting the disabled property.

mounted() {
  document.getElementById("input1").checked = "true";
  this.setTheme("material3");
}
  
setTheme(selectedTheme) {
  document.getElementById(selectedTheme).disabled = false;
  const otherTheme = selectedTheme == "material3" ? "material3-dark" : "material3";
  document.getElementById(otherTheme).disabled = true;
}

Theme Switching

To allow users to switch themes based on their input, you can create a function that listens for changes and updates the enabled stylesheet. The following function handleThemeChange demonstrates how to toggle between the Material 3 and Material 3 Dark themes:

handleThemeChange(event) {
  const selectedTheme = event.target.value;
  this.setTheme(selectedTheme);
}

To use this function, you would typically have an input element such as a select dropdown or a toggle switch where the event.target.value corresponds to the theme the user wants to activate.

Explore the provided sample to see the theme switching functionality in action:

Refer to the working sample for additional details and implementation: Vue Theme Switcher Sample

Conclusion

By following the steps outlined in this article, you can now dynamically switch between light and dark themes in your Vue application for Syncfusion components, providing a better user experience.

Additional References

• Syncfusion Vue UI Components
• Referring themes in the Vue application

Conclusion

We hope you enjoyed learning about how to change the Syncfusion light and dark themes dynamically in Vue.

You can refer to our Vue feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Vue example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!