1

我使用 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）的解决方案，我很乐意使用它。
4

2 回答 2

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>

于 2021-04-13T06:36:15.250 回答
1

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

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

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

于 2021-03-24T11:02:58.087 回答