Question

我使用 JavaScript 编写了一个脚本，该脚本允许我检测用户的首选颜色模式并使用按钮在明暗模式之间切换。但是整个事情必须针对每一页进行调整。

是否有更简单的解决方案来检测首选颜色模式并使用开关（按钮）在两种模式之间切换？由于 CSS 已经具有 prefers-color-scheme 功能，因此作为用户，我只需要知道如何通过按钮在明暗模式之间切换。

这是我当前的代码，用纯 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
    }
}

任何答案都会对我有很大帮助。如果有仅使用 CSS（或 SCSS/SASS）的解决方案，我很乐意使用它。

Answer 1

ThatPurpleGuy 的评论实际上回答了我的问题。

原则上不使用prefers-color-scheme。 JS 只检测用户是使用深色模式还是浅色模式，然后在 body 标签中调整一个类。根据标签中的类别（浅色或深色），应用不同的 CSS 变量。

这是 YT 教程的链接：https://www.youtube.com/watch?v=rXuHGLzSmSE

Answer 2

我正在上传使用 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>

在明暗模式之间切换

2 个答案: