Theme control

React JS

How It Works:

JSX/TSX: Functional components are used with the useState hook to manage the theme state.
Dynamic Classes: The theme class is dynamically added to the root div element with the app class, making it easy to switch styles.
CSS: CSS variables (--background-color and --text-color) control global styles that automatically change based on the active theme.

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [theme, setTheme] = useState("default");

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
  };

  return (
    <div className={`app ${theme}`}>
      <div className="theme-buttons">
        {theme !== "default" && (
          <button onClick={() => handleThemeChange("default")}>
            Default Mode
          </button>
        )}
        {theme !== "dark-mode" && (
          <button onClick={() => handleThemeChange("dark-mode")}>
            Dark Mode
          </button>
        )}
        {theme !== "halloween-mode" && (
          <button onClick={() => handleThemeChange("halloween-mode")}>
            Halloween Mode
          </button>
        )}
      </div>

      <h1>Welcome to the Themed Website</h1>
      <p>
        This is an example of how to implement multiple themes using CSS and
        JavaScript.
      </p>
    </div>
  );
}

export default App;

CSS Theme control

React TS

How It Works:

JSX/TSX: Functional components are used with the useState hook to manage the theme state.
Dynamic Classes: The theme class is dynamically added to the root div element with the app class, making it easy to switch styles.
CSS: CSS variables (--background-color and --text-color) control global styles that automatically change based on the active theme.

import React, { useState } from "react";
import "./styles.css";

const App: React.FC = () => {
  const [theme, setTheme] = useState<string>("default");

  const handleThemeChange = (newTheme: string) => {
    setTheme(newTheme);
  };

  return (
    <div className={`app ${theme}`}>
      <div className="theme-buttons">
        {theme !== "default" && (
          <button onClick={() => handleThemeChange("default")}>
            Default Mode
          </button>
        )}
        {theme !== "dark-mode" && (
          <button onClick={() => handleThemeChange("dark-mode")}>
            Dark Mode
          </button>
        )}
        {theme !== "halloween-mode" && (
          <button onClick={() => handleThemeChange("halloween-mode")}>
            Halloween Mode
          </button>
        )}
      </div>

      <h1>Welcome to the Themed Website</h1>
      <p>
        This is an example of how to implement multiple themes using CSS and
        JavaScript.
      </p>
    </div>
  );
};

export default App;

CSS Theme control

React JS + Tailwind

import React, { useState } from "react";
import "./index.css";

function App() {
  const [theme, setTheme] = useState("default");

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
  };

  return (
    <div
      className={`app ${theme} min-h-screen flex flex-col justify-center items-center`}
    >
      <div className="theme-buttons flex gap-4 mb-6">
        {theme !== "default" && (
          <button
            onClick={() => handleThemeChange("default")}
            className="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-lg"
          >
            Default Mode
          </button>
        )}
        {theme !== "dark-mode" && (
          <button
            onClick={() => handleThemeChange("dark-mode")}
            className="px-6 py-2 bg-gray-800 hover:bg-gray-900 text-white rounded-lg"
          >
            Dark Mode
          </button>
        )}
        {theme !== "halloween-mode" && (
          <button
            onClick={() => handleThemeChange("halloween-mode")}
            className="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-black rounded-lg"
          >
            Halloween Mode
          </button>
        )}
      </div>

      <h1 className="text-3xl font-bold mb-4 text-center">
        Welcome to the Themed Website
      </h1>
      <p className="text-lg text-center">
        This is an example of how to implement multiple themes using Tailwind
        CSS and React.
      </p>
    </div>
  );
}

export default App;

CSS Theme control

React TS + Tailwind

import React, { useState } from "react";
import "./index.css";

const App: React.FC = () => {
  const [theme, setTheme] = useState<string>("default");

  const handleThemeChange = (newTheme: string) => {
    setTheme(newTheme);
  };

  return (
    <div
      className={`app ${theme} min-h-screen flex flex-col justify-center items-center`}
    >
      <div className="theme-buttons flex gap-4 mb-6">
        {theme !== "default" && (
          <button
            onClick={() => handleThemeChange("default")}
            className="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-lg"
          >
            Default Mode
          </button>
        )}
        {theme !== "dark-mode" && (
          <button
            onClick={() => handleThemeChange("dark-mode")}
            className="px-6 py-2 bg-gray-800 hover:bg-gray-900 text-white rounded-lg"
          >
            Dark Mode
          </button>
        )}
        {theme !== "halloween-mode" && (
          <button
            onClick={() => handleThemeChange("halloween-mode")}
            className="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-black rounded-lg"
          >
            Halloween Mode
          </button>
        )}
      </div>

      <h1 className="text-3xl font-bold mb-4 text-center">
        Welcome to the Themed Website
      </h1>
      <p className="text-lg text-center">
        This is an example of how to implement multiple themes using Tailwind
        CSS and React.
      </p>
    </div>
  );
};

export default App;

CSS Theme control