Solution 1 :

You could use CSS variables and a little bit of JavaScript to switch themes.

Define the theming in the .light or the .dark then set the class of the body to it. It will set the variables to the theme color.


function toLight() {

function toDark() {
.light {
  --font-color: #111;
  --bg-color: #fff;

.dark {
  --font-color: #eee;
  --bg-color: #111;

p, h1 {
  color: var(--font-color);

body {
  background-color: var(--bg-color);
<body class="light">
  <p>text blah blah</p>
  <button onclick="toDark()">switch to dark</button>
  <button onclick="toLight()">switch to light</button>

Problem :

hello so I’m in the process of making a website right now and need some help. you see, i made this very cool switch link to see the switch= (–yoDIK/view?usp=sharing) (may have to download it) and I would like to know how I can make it change the background of the website. so when you flip it it turns black flip it again it turns white. can anyone help?


Comment posted by Manas Khandelwal

Plz include the respective HTML/CSS/JS.

Comment posted by danihazler

You probably need to create a button that once the user clicks on it, it will add a class to the and from there you change your CSS styles or CSS source.

Comment posted by cohan err

so i could litteraly copy and paste that?

Comment posted by giilbert

you’ll need to add some CSS to style the elements for light and dark mode (with variables) and add some logic for the toggle button. But for the rest, I think it’ll work.

Comment posted by cohan err

i dont know how to do that. could you tell me?

Comment posted by cohan err

i dont know how to do that. could you show me?