I built this using html css and javascript.

Community feedback

• 

  three•180

  @ewlondonPosted 9 months ago

  You could do something like this for the theme switching

  script.js

  const themes = ['default', 'dark', 'purple'];
  
  const themeButtons = document.querySelectorAll('.theme-button');
  themeButtons.forEach((button, index) => {
  	button.addEventListener('click', (e) => {
  		switchTheme(themes[index], button);
  	});
  });
  
  function switchTheme(theme, button) {
  	theme1.classList.remove('active');
  	theme2.classList.remove('active');
  	theme3.classList.remove('active');
  	button.classList.add('active');
          document.body.className = '';
  	document.body.classList.add(`theme-${theme}`);
  }
  

  and adjust your style.css by moving the light theme into :root and adjusting the naming convention of your other themes like this.

  :root {
    --background: hsl(0, 0%, 90%);
    --keypad-background: hsl(0, 5%, 81%);
    --screen-background: hsl(0, 0%, 93%);
  
    --key-background: hsl(30, 25%, 89%);
    --key-shadow: hsl(28, 16%, 65%);
    --key-selected: hsl(30, 25%, 79%);
  
    --key-toggle: hsl(19, 63%, 50%);
    --key-toggle-shadow: hsl(19, 70%, 34%);
  
    --key-reset: hsl(185, 30%, 49%);
    --key-reset-shadow: hsl(172, 28%, 35%);
  
    --text: hsl(60, 10%, 19%);
    --text-white: hsl(0, 0%, 100%);
  }
  
  .theme-dark {
   /* variables here */
  }
  
  .theme-purple {
  /* variables here */
  }
  

  this will also allow you to remove the class definition on your body in your index.html all together as root will be applied by default.

  0