Theme Toggle Button
Theme Toggle Button

Hy guys, today we are going to create a Theme Toggle Button. The toggle button is used to show on or off state. A toggle button allows the user to change a setting between two states.

Here, Our toggle button will be used to change the theme in dark or light mode. Here we are using basic HTML & CSS to create this button. Let’s start our design!

Theme Toggle Button

As we mentioned we will use basic HTML & CSS, so here we will create two files called index.html and style.css file. Let’s start with our index.html file.

index.html

<!DOCTYPE html>
<head>
  <title>Theme Toggle Button</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <label class="theme">
    
    <span class="theme_toggle-wrap">
      <input class="theme_toggle" type="checkbox" role="switch" name="theme" value="dark">
      <span class="theme_fill"></span>
      <span class="theme_icon">
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
        <span class="theme_icon-part"></span>
      </span>
    </span>
    
  </label>
</body>
</html>


We have created an input box with the type of checkbox because here we need only two states on or off. A checkbox can show only these two states, so it is best for our design.

The “theme_fill” class is used to create the button shape.

The “theme_icon” class is used to create our icon inside of it.

in the next first span tag is used to create the black circle of our sun and the other span is used to show the outer bars of the sun.

style.css

Here our style.css code is long to explain, so we will explain only important parts of our style.

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --bgWhite: #FFFFFF;
    --bgBlack: #000000;
    --transDur: 0.5s;
    --buttonBackColor1: #000000;
    --buttonBackColor2: #FFFFFF;
    --circleBlack: #000000;
    --circleWhite: #FFFFFF;
    --sunBlack: #000000;
    --moonWhite: #FFFFFF;
    font-size:5px;
}
html,
body {
}
body,
input {
    font: 5px Fredoka, sans-serif;
}
body {
    color: var(--bgWhite);
    height: 100vh;
    display: grid;
    place-items: center;
}

/* Default */
.theme {
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
.theme_fill,
.theme_icon {
    transition: transform var(--transDur) ease-in-out;
}
.theme_fill {
    background-color: var(--bgBlack);
    display: block;
    mix-blend-mode: difference;
    position: fixed;
    inset: 0;
    height: 100%;
    transform: translateX(-100%);
}
.theme_icon,
.theme_toggle {
    z-index: 1;
}
.theme_icon,
.theme_icon-part {
    position: absolute;
}
.theme_icon {
    display: block;
    top: 0.75em;
    left: 0.75em;
    width: 1.5em;
    height: 1.5em;   
}
.theme_icon-part {
    border-radius: 50%;
    box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    width: 1em;
    height: 1em;
    transition:
        box-shadow var(--transDur) ease-in-out,
        opacity var(--transDur) ease-in-out,
        transform var(--transDur) ease-in-out;
    transform: scale(0.5);
}
.theme_icon-part ~ .theme_icon-part {
    background-color: var(--sunBlack);
    border-radius: 0.05em;
    box-shadow: none;
    top: 50%;
    left: calc(50% - 0.05em);
    transform: rotate(0deg) translateY(0.5em);
    transform-origin: 50% 0;
    width: 0.1em;
    height: 0.2em;
}
.theme_icon-part:nth-child(1) {
    background-color: var(--sunBlack);
    box-shadow: inset 0px 0px 1px var(--sunBlack);
}
.theme_icon-part:nth-child(2) {
    transform: rotate(0deg) translateY(0.5em);
}
.theme_icon-part:nth-child(3) {
    transform: rotate(45deg) translateY(0.5em);
}
.theme_icon-part:nth-child(4) {
    transform: rotate(90deg) translateY(0.5em);
}
.theme_icon-part:nth-child(5) {
    transform: rotate(135deg) translateY(0.5em);
}
.theme_icon-part:nth-child(6) {
    transform: rotate(180deg) translateY(0.5em);
}
.theme_icon-part:nth-child(7) {
    transform: rotate(225deg) translateY(0.5em);
}
.theme_icon-part:nth-child(8) {
    transform: rotate(270deg) translateY(0.5em);
}
.theme_icon-part:nth-child(9) {
    transform: rotate(315deg) translateY(0.5em);
}

.theme_label,
.theme_toggle,
.theme_toggle-wrap {
    position: relative;
}
.theme_toggle,
.theme_toggle:before {
    display: block;
}
.theme_toggle {
    background-color: var(--buttonBackColor1);
    border-radius: 25% / 50%;
    box-shadow: 0 0 0 0.125em var(--primaryT);
    padding: 0.25em;
    width: 6em;
    height: 3em;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color var(--transDur) ease-in-out,
        box-shadow 0.15s ease-in-out,
        transform var(--transDur) ease-in-out;
}
.theme_toggle:before {
    background-color: var(--circleWhite);
    border-radius: 50%;
    content: "";
    width: 2.5em;
    height: 2.5em;
    transition:
        background-color var(--transDur) ease-in-out,
        transform var(--transDur) ease-in-out;
}
.theme_toggle:focus {
    box-shadow: 0 0 0 0.125em var(--primary);
    outline: transparent;
}

/* Checked */
.theme_toggle:checked {
    background-color: var(--buttonBackColor2);
}
.theme_toggle:checked:before,
.theme_toggle:checked ~ .theme_icon {
    transform: translateX(3em);
}
.theme_toggle:checked:before {
    background-color: var(--circleBlack);
}
.theme_toggle:checked ~ .theme_fill {
    transform: translateX(0);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(1) {
    box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
    transform: scale(1);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part ~ .theme_icon-part {
    opacity: 0;
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(2) {
    transform: rotate(45deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(3) {
    transform: rotate(90deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(4) {
    transform: rotate(135deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(5) {
    transform: rotate(180deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(6) {
    transform: rotate(225deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(7) {
    transform: rotate(270deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(8) {
    transform: rotate(315deg) translateY(0.8em);
}
.theme_toggle:checked ~ .theme_icon .theme_icon-part:nth-child(9) {
    transform: rotate(360deg) translateY(0.8em);
}
.theme_toggle-wrap {
    margin: 0 0.75em;
}

Here we have used some variables:

:root {
    --bgWhite: #FFFFFF;
    --bgBlack: #000000;
    --transDur: 0.5s;
    --buttonBackColor1: #000000;
    --buttonBackColor2: #FFFFFF;
    --circleBlack: #000000;
    --circleWhite: #FFFFFF;
    --sunBlack: #000000;
    --moonWhite: #FFFFFF;
    font-size:5px;
}

–bgWhite is used for the light theme background color and the –bgBlack is used for dark theme background color.

–transDur is used for all the transition durations.

–buttonBackColor1 and –buttonBackColor2 are used for our button shape with different themes.

–circleBlack and –circleWhite is used for our icon container background.

–sunBlack is used for sun color and –moonWhite is used for moon color.

.theme_icon-part:nth-child(2) {
    transform: rotate(0deg) translateY(0.5em);
}
.theme_icon-part:nth-child(3) {
    transform: rotate(45deg) translateY(0.5em);
}
.theme_icon-part:nth-child(4) {
    transform: rotate(90deg) translateY(0.5em);
}
.theme_icon-part:nth-child(5) {
    transform: rotate(135deg) translateY(0.5em);
}
.theme_icon-part:nth-child(6) {
    transform: rotate(180deg) translateY(0.5em);
}
.theme_icon-part:nth-child(7) {
    transform: rotate(225deg) translateY(0.5em);
}
.theme_icon-part:nth-child(8) {
    transform: rotate(270deg) translateY(0.5em);
}
.theme_icon-part:nth-child(9) {
    transform: rotate(315deg) translateY(0.5em);
}


this code is used to create the dashed lines for the sun.

Hope you guys enjoyed this tutorial!

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply