:root {
--primary-color: #3498db;
--background-color: #ffffff;
--text-color: #333333;
}
.dark-theme {
--primary-color: #1abc9c;
--background-color: #2c3e50;
--text-color: #ecf0f1;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
.button {
background-color: var(--primary-color);
}
When the .dark-theme
class is added to the body, it overrides the variables, and the entire theme changes dynamically.