HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Theme Changer | CodeAtNow</title>
</head>
<body>
<div class="menu">
<div class="menu-header">
<h2 class="menu-header-title">Theme</h2>
<div class="theme-switcher">
<input type="radio" id="light-theme" name="themes" checked />
<label for="light-theme">
<span>
<i data-feather="sun"></i>Light
</span>
</label>
<input type="radio" id="dark-theme" name="themes" />
<label for="dark-theme">
<span>
<i data-feather="moon"></i>Dark
</span>
</label>
<input type="radio" id="black-theme" name="themes" />
<label for="black-theme">
<span>
<i data-feather="star"></i>Black
</span>
</label>
<span class="slider"></span>
</div>
</div>
<div class="menu-body">
<a href="#"><i data-feather="user"></i>Account Settings</a>
<a href="#"><i data-feather="message-square"></i>Give Feedback</a>
<a href="#"><i data-feather="info"></i>About</a>
<a href="#"><i data-feather="life-buoy"></i>Support</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=DM+Serif+Display&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Karla:ital,wght@0,400;0,600;0,800;1,200;1,400;1,500;1,600;1,700;1,800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*, *:after, *:before {
box-sizing: border-box;
}
:root {
--c-text-primary: #191919;
--c-text-secondary: #737374;
--c-border-primary: #ccc;
--c-bg-body: #2c2e2f;
--c-bg-primary: #fff;
--c-bg-secondary: rgb(230, 244, 248);
--c-bg-button: #fff;
--slider-shadow: inset 0 1px 1px #ddd, 0 2px 3px #ccc;
}
:root.dark-theme {
--c-text-primary: #eee;
--c-text-secondary: #d3d5db;
--c-border-primary: #454545;
--c-bg-primary: #323339;
--c-bg-secondary: #222128;
--c-bg-button: #494a50;
--slider-shadow: inset 0 1px 1px #767676;
}
:root.black-theme {
--c-text-primary: #edeeef;
--c-text-secondary: #d4d7e1;
--c-border-primary: #323232;
--c-bg-primary: #1b1d23;
--c-bg-secondary: #000001;
--c-bg-button: #343844;
--slider-shadow: inset 0 1px 1px #555;
}
body {
font-family: "Poppins", sans-serif;
line-height: 1.5;
min-height: 100vh;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
background-color: var(--c-bg-body);
color: var(--c-text-primary);
}
.menu {
width: 90%;
max-width: 320px;
background-color: var(--c-bg-primary);
transition: background-color 0.15s ease;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 -4px 16px rgba(0, 0, 0, 0.1);
}
.menu-header {
padding: 1rem;
}
.menu-header-title {
font-size: 0.875rem;
color: var(--c-text-secondary);
margin-bottom: 0.375rem;
font-weight: 500;
}
.theme-switcher {
background-color: var(--c-bg-secondary);
border-radius: 10px;
display: flex;
padding: 0 3px;
align-items: center;
position: relative;
overflow: hidden;
}
.theme-switcher .slider {
display: block;
position: absolute;
z-index: 1;
width: calc((100% - 6px) / 3);
top: 3px;
transform: translatex(-110%);
bottom: 3px;
border-radius: 6px;
transition: 0.15s ease, transform 0.25s ease-out;
background-color: var(--c-bg-button);
box-shadow: var(--slider-shadow);
}
.theme-switcher input {
display: none;
}
.theme-switcher input:nth-of-type(1):checked ~ .slider {
transform: translateX(0);
}
.theme-switcher input:nth-of-type(2):checked ~ .slider {
transform: translateX(100%);
}
.theme-switcher input:nth-of-type(3):checked ~ .slider {
transform: translateX(200%);
}
.theme-switcher label {
position: relative;
z-index: 2;
width: calc(100% / 3);
color: var(--c-text-secondary);
}
.theme-switcher label span {
padding: 8px 0;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
}
.theme-switcher label svg {
display: inline-block;
margin-right: 0.5rem;
width: 20px;
}
.menu-body {
display: flex;
flex-direction: column;
padding: 0.5rem;
border-top: 1px solid var(--c-border-primary);
transition: border-color 0.15s ease;
}
.menu-body a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
padding: 0.625rem 0.5rem;
border-radius: 4px;
font-weight: 500;
transition: 0.15s ease;
}
.menu-body a svg {
margin-right: 1rem;
color: var(--c-text-secondary);
transition: color 0.15s ease;
}
.menu-body a:hover {
background-color: var(--c-bg-secondary);
}
JS
// feather.replace();
// Just a tiny bit of JavaScript to add classnames to the HTML-element on toggle
var html = document.getElementsByTagName('html');
var radios = document.getElementsByName('themes');
console.log(radios);
for (i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
html[0].classList.remove(html[0].classList.item(0));
html[0].classList.add(this.id);
});
}
