TikTok Tutorial #10 - How to create a Beginner Color Changing Toggle in CSS and Javascript

Learn with us how to create a color-changing toggle using CSS and Javascript!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim For the full code, check out the link in bio 🤩 #webdev #programmingexercises #csscoding #javascript ♬ original sound - Creative Tim


Use this code to start your toggle!

<html lang="en" dir="ltr">

  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">

  <div class="dark-mode">
    <input type="checkbox" class='checkbox' id='checkbox'>
    <label for="checkbox" class='label'>
      <div class="ball"></div>

  <script src="script.js" charset="utf-8"></script>


CSS Code

Continue with the CSS code and add life to your color-changing toggle!

:root {
  --background: linear-gradient(#c8e7ff, #abc4ff);
  --check: #000;
  --ball: #f2eee3;

.dark {
  --background: linear-gradient(#5e60ce, #80ffdb);
  --check: #f2eee3;
  --ball: #000;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

.dark-mode {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: var(--background);
  transition: 0.5s;

.checkbox:checked + .label .ball {
  transform: translateX(24px);

.checkbox {
  opacity: 0;
  position: absolute;

.label {
  width: 50px;
  height: 26px;
  background: var(--check);
  border-radius: 50px;
  padding: 5px;
  position: relative;

.ball {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: var(--ball);
  border-radius: 50%;
  transition: transform 0.2s linear;

Javascript Code

Add the JS code and Voila!

const html = document.querySelector('html')
const check = document.querySelector('#checkbox')

check.addEventListener('change', function(){

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources:

Alexandra Murtaza

Alexandra Murtaza