<main data-theme="light">
  <section>
    <h1>Try selecting a theme</h1>
    
    <p>Use the select input to switch between light, dark and high contrast themes. Then see how the different elements on the page change.</p>
    
    <select name="theme-toggle" id="theme-toggle">
      <option value="light">Light Theme</option>
      <option value="dark">Dark Theme</option>
      <option value="contrast">High Contrast Theme</option>
    </select>
    
    <h2>A heading</h2>
    
    <a href="#">Link to another page</a>
    
    <br>
    
    <button>Button</button>
  </section>
</main>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

:root {
  --brand-primary-1: hsl(169, 90%, 50%); // light
  --brand-primary-2: hsl(169, 90%, 40%); // mid
  --brand-primary-3: hsl(169, 90%, 30%); // dark
  --brand-primary-4: hsl(169, 90%, 20%); // darker
  --brand-primary-5: hsl(169, 90%, 10%); // darkest
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
}

:root, main[data-theme='light'] {
  --brand-1: var(--brand-primary-2);
  --brand-2: var(--white);
  --brand-3: var(--brand-2);
  --text-1: var(--brand-primary-4);
  --text-2: hsl(0, 0%, 27%);
  --link-1: var(--brand-primary-2);
  --link-2: var(--brand-primary-4);
  --btn-1: var(--brand-primary-2);
  --btn-2: var(--brand-2);
}

main[data-theme='dark'] {
  --brand-1: var(--brand-primary-5);
  --brand-2: var(--brand-primary-4);
  --brand-3: var(--brand-2);
  --text-1: var(--white);
  --text-2: var(--text-1);
  --link-1: var(--brand-primary-2);
  --link-2: var(--white);
  --btn-1: var(--brand-primary-5);
  --btn-2: var(--white);
}

main[data-theme='contrast'] {
  --brand-1: var(--black);
  --brand-2: var(--black);
  --brand-3: var(--white);
  --text-1: var(--brand-3);
  --text-2: var(--brand-3);
  --link-1: var(--brand-primary-2);
  --link-2: var(--white);
  --btn-1: var(--brand-primary-2);
  --btn-2: var(--white);
}

* {
  box-sixing: border-box;
}

body {
  margin: 0;
  display: block;
  height: 100vh;
  width: 100%;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.transition, .transition * {
  transition: all 200ms ease-in-out;
}

h1, h2 {
  color: var(--text-1);
}

p {
  color: var(--text-2);
}

a {
  display: inline-block;
  color: var(--link-1);
  font-weight: 700;
  margin-bottom: 1em;
  transition: all 200ms ease-in-out;
  
  &:hover {
    color: var(--link-2);
  }
}

button {
  border: none;
  background: var(--btn-1);
  color: var(--btn-2);
  padding: 0.7em 2em;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  
  &:hover {
    background: var(--btn-2);
    color: var(--btn-1);
  }
}

select {
  padding: 0.7em;
}

main[data-theme='light'] {
  button {
    &:hover {
      background: var(--brand-primary-4);
      color: var(--white);
    }
  }
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--brand-1);  
}

section {
  width: clamp(200px, 50%, 500px);
  padding: 1em 2em 3em;
  background-color: var(--brand-2);
  border-radius: 5px;
  box-shadow: 0 4px 8px 3px rgba(0,0,0,0.3);
  border: 2px solid var(--brand-3);
}
View Compiled
const main = document.querySelector('main');
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
const themeSelector = document.getElementById('theme-toggle');

console.log(currentTheme);

if (currentTheme && currentTheme == 'dark' || !currentTheme && prefersDarkScheme.matches) {
  main.dataset.theme = 'dark';
  themeSelector.value = 'dark';
} else if (currentTheme && currentTheme == 'light') {
  main.dataset.theme = 'light';
  themeSelector.value = 'light';
} else if (currentTheme && currentTheme == 'contrast') {
  main.dataset.theme = 'contrast';
  themeSelector.value = 'contrast';
}

function handleThemeSelectChange(event) {
  const selectedTheme = event.target.value;
  
  main.classList.add('transition');
  main.dataset.theme = selectedTheme;
  localStorage.setItem("theme", selectedTheme);
  
  setTimeout(function () {
    main.classList.remove('transition');
  }, 300);
}

themeSelector.addEventListener("change", handleThemeSelectChange);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.