I built this using html css and javascript.

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.