Skip to main content

Theme control

Themes​

How It Works:​

CSS Variables: Global variables for background and text color (--background-color and --text-color) are defined in the root selector :root.
Themes: For each theme (dark, Halloween), when a class is activated on the <body> element, the values of these variables change, which automatically updates the styles of all elements using these variables.
Theme Management: In JavaScript, clicking on buttons changes the class on the <body> element, activating the corresponding theme and applying the styles through CSS variables.
With this approach, you don't need to add separate states for each element in the CSS—just use variables. This simplifies maintaining and extending styles for new themes.

:root {
  --background-color: white;
  --text-color: black;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  transition:
    background-color 0.3s,
    color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

body.dark-mode {
  --background-color: #121212;
  --text-color: white;
}

body.halloween-mode {
  --background-color: orange;
  --text-color: black;
}

.theme-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 15px 25px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#default-mode-toggle {
  display: none;
}

button:hover {
  background-color: #f0f0f0;
}

h1,
p {
  margin: 10px;
  text-align: center;
}
HTML Theme controlJS Theme controlTS Theme control

Themes React JS​

:root {
  --background-color: white;
  --text-color: black;
}

body {
  margin: 0;
  padding: 0;
}

.app {
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  transition:
    background-color 0.3s,
    color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.app.dark-mode {
  --background-color: #121212;
  --text-color: white;
}

.app.halloween-mode {
  --background-color: orange;
  --text-color: black;
}

.theme-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  padding: 15px 25px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  min-width: 200px;
}

button:hover {
  background-color: #f0f0f0;
}

h1,
p {
  margin: 10px;
  text-align: center;
}
React Theme control

Tailwind settings React JS / TS​

Add to the index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

.app {
  @apply transition-colors duration-300;
}

.app.default {
  @apply bg-white text-black;
}

.app.dark-mode {
  @apply bg-gray-900 text-white;
}

.app.halloween-mode {
  @apply bg-orange-500 text-black;
}
React Theme control