How do I switch themes in a React application?

How do I switch themes in a React application?

You can switch themes in a React app by using state management to toggle between different theme styles. Would you like a code example?

Yes, please provide a code example.

Sure! You can use the useState hook to manage the theme state. Here's a simple example:

import React, { useState } from 'react';

const App = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <div className={theme}>
      <button onClick={toggleTheme}>Switch Theme</button>
    </div>
  );
};

export default App;

How do I style the themes differently?

You can define separate CSS classes for each theme. For example, create a 'light' and 'dark' class in your CSS file and apply them conditionally based on the theme state.