How can I implement dynamic theming in my web application using JavaScript?

How can I implement dynamic theming in my web application using JavaScript?

You can implement dynamic theming by changing CSS variables or classes based on user preferences. Would you like a code example?

Yes, please provide a code example for changing themes.

Sure! You can use the following code to toggle between light and dark themes:

const toggleTheme = () => {
  const currentTheme = document.body.dataset.theme;
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.body.dataset.theme = newTheme;
};

You can call toggleTheme() on a button click.

How do I set up the initial theme when the page loads?

You can set the initial theme by checking the user's preference in local storage or using a default value. For example:

const setInitialTheme = () => {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.body.dataset.theme = savedTheme;
};
setInitialTheme();