Switch between Light & Dark Mode

Question

I have written a script using JavaScript that allows me to detect the user's preferred color mode and switch between light and dark mode using a button. But the whole thing has to be adjusted for each page.

Is there a simpler solution to both detect the preferred color mode and switch between the two modes using a switch (button)? Since CSS already has the prefers-color-scheme feature, I would only need to know how to switch between light and dark mode via a button as a user.

Here's my current code, written in plain JS:

window.onload = detectTheme()
function detectTheme() {
// This detects the device color mode when the user enters the webpage

    var theme = document.getElementById("theme");
    // Get the ID from the link we want to change

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        theme.href = '/link/to/darkmode/file'
        // Changing the file based on the color mode ("dark" file for dark-mode)
    
    }
    else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
        theme.href = '/link/to/lightmode/file'
        // Changing the file based on the color mode ("light" file for light-mode)
            
    }
}


var switchLD = document.getElementById("switch");
// This is the ID from the switch button

switchLD.onclick = function toggleTheme() { 

    var theme = document.getElementById("theme");

    // Checks what color-mode file is used
    if (theme.getAttribute('href') == '/link/to/lightmode/file') { 
        theme.href = '/link/to/darkmode/file'
        // Changing the file from light to darkmode
    }
    else if (theme.getAttribute('href') == '/link/to/darkmode/file') {
        theme.href = '/link/to/lightmode/file'
        // Changing the file from dark to lightmode
    }
}  

Any answer would help me a lot. If there is a solution using only CSS (or SCSS / SASS), I'd love to use it.

Answer 1

I am uploading whole code of switching between light and dark themes using HTML/CSS/JavaScript

HTML

const sunMoonContainer = document.querySelector('.sun-moon-container')
document.querySelector('.theme-toggle-button').addEventListener('click',() =>{
    
    document.body.classList.toggle('dark')

    const currentRotation = parseInt(getComputedStyle(sunMoonContainer).getPropertyValue('--rotation'))

    sunMoonContainer.style.setProperty('--rotation',currentRotation+360)


})

body {
  --accet-color: orangered;
  --text-color: black;
  --background-color: white;
  --button-text-color: var(var(--background-color));
  --transition-delay: 1s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;

  background-color: var(--background-color);
  color: var(--text-color);
  overflow: hidden;
  transition: var(--transition-delay);
}

body.dark {
  --accet-color: #d0d066;
  --text-color: white;
  --background-color: #333;
  --button-text-color: #333;
}

.title {
  margin: 0;
  margin-bottom: 0.5rem;
}

.theme-toggle-button {
  background-color: var(--accet-color);
  color: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 0.3em;
  border: none;
  outline: none;
  transition: var(--transition-delay);
}

.theme-toggle-button:hover,
.theme-toggle-button:focus {
  transform: scale(1.1);
}

.sun-moon-container {
  --rotation: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  top: 0;
  height: 200vmin;
  transform: rotate(calc(var(--rotation) * 1deg));
  transition: transform var(--transition-delay);
}

.fas.fa-sun {
  top: 5%;
  opacity: 1;
}

.fas.fa-moon {
  /* bottom: 5%; */
  top: 5%;
  opacity: 0;
}

.dark .fas.fa-sun {
  opacity: 0;
}

.dark .fas.fa-moon {
  opacity: 1;
}

.fas.fa-sun,
.fas.fa-moon {
  position: absolute;
  /*  transition: opacity var(--transition-delay); */
  fill: var(--accet-color);
}

.dark .sun-moon-container {
  --rotation: 360;
}

<!DOCTYPE html>
<html lang="en">
   <link rel="stylesheet" href="/style.css">
   <script src="/script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<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">
    <title>Document</title>
</head>
<body class="">
    <div class="sun-moon-container">
        <h2 class="sun"><i class="fas fa-sun"></i></h2>
        <h2 class="moon"> <i class="fas fa-moon"></i></h2>
    </div>
    
   
    <h2 class="title">Theme Swaper</h2>
    <button class="theme-toggle-button">Theme Swaper</button>

    
</body>
</html>

Answer 2

The comment by ThatPurpleGuy actually answered my question.

In principle, prefers-color-scheme is not used. JS only detects whether the user is using dark or light mode and then adjusts a class in the body tag. Depending on which class is in the tag (light or dark), different CSS variables are applied.

Here is the link to the YT Tutorial: https://www.youtube.com/watch?v=rXuHGLzSmSE