html
  body
    div#container
      div#theme-text Hi, I'm light theme
      div#theme-switch Click me to change theme
View Compiled
:root{
  --color-bg:#faf7f0;
  --color-font:#363636;
}

body[data-theme="dark"]{
  --color-bg: #282930;
  --color-font: #b1b3bd;
}

body{
  background-color:var(--color-bg);
  color:var(--color-font);
  font-size:1.5rem;
  transition:.2s background-color,.2s color;
}

#container{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  margin-top:35vh;
}

#theme-switch{
  border:1px var(--color-font) solid;
  margin-top:1rem;
  padding:1rem;
  border-radius:1rem;
  user-select:none;
  cursor:pointer;
}
View Compiled
const themeText = document.getElementById("theme-text")
const themeSwitch = document.getElementById("theme-switch")
if (window.localStorage.getItem("theme") === "dark"){
  document.body.dataset.theme = "dark";
  themeText.innerHTML = "Hi, I'm dark theme";
}
themeSwitch.addEventListener("click",function(){
  if(document.body.dataset.theme !== "dark"){
    document.body.dataset.theme = "dark"
    themeText.innerHTML = "Hi, I'm dark theme"
    window.localStorage.setItem("theme","dark")
  }else{
    document.body.dataset.theme = "light"
    themeText.innerHTML = "Hi, I'm light theme"
    window.localStorage.setItem("theme","light")
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.