堆棧內存溢出
  簡體   English   中英

如何使用現有的切換開關在兩個 css 工作表之間切換？

[英]How do I use my existing toggle to also switch between two css sheets?

 原文  2022-09-09 15:57:18  6   2    javascript/ function/ toggle/ mode

問題描述

我正在嘗試在網站上實現亮模式/暗模式切換。 切換本身按預期工作，但我不知道如何讓它在樣式表之間切換。 我是 JS 新手，所以 CSS/HTML 在那里，但我無法正確編寫腳本。

所以這就是我到目前為止在嘗試切換樣式表之前自行工作的東西......

CSS：

<head>
<link rel="stylesheet" type="text/css" href="light-styles.css" id="theme-link">
</head>

<style>

/* Light Mode / Dark Mode Switch */

#switchposition { 
  position: relative; 
  display: flex; 
  flex-direction: 
  column-reverse; 
  justify-content: start; 
  align-items: start;
}

#modelabel { 
  position: relative; 
  font-size: 14px; 
  color: #dc92b9; 
  transition: .4s; 
  margin-bottom: 0; 
  padding-bottom: 0; 
}

.switch { 
  position: relative; 
  width: 50px; 
  height: 25px; 
}

.switch input { 
  opacity: 0;
  height: 0; 
  width: 0; 
}

.slider { 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  transition: 0.4s;
  background-color: #dc92b9;
  border-radius: 34px;
  position: absolute;
  cursor: pointer; 
}

.slider::before { 
  content: ''; 
  position: absolute; 
  background-color: #f8e8ef;
  width: 15px;
  height: 15px; 
  border-radius: 50%;
  left: 5px; 
  bottom: 5px; 
  transition: 0.4s; 
}

.switch input:checked + .slider::before { 
  transform: translateX(25px); 
  background-color: #6d5f94; 
}

.switch input:checked + .slider { 
  background-color: #101010; 
}

</style>

HTML：

  <div id="switchposition">
    <p id="modelabel">Light Mode</p>
    <label class="switch">
        <input onclick="toggle()" type="checkbox" id="checkBox">
        <span class=" slider"></span>
    </label>
  </div>

JS：

function toggle(){
    var input = document.getElementById("checkBox");
    if(input.checked == true){
        modelabel.style.color ="#6d5f94";
    } else{
        modelabel.style.color ="#dc92b9";
    }

    var x = document.getElementById("modelabel");
  if (x.innerHTML === "Light Mode") {
    x.innerHTML = "Dark Mode";
  } else {
    x.innerHTML = "Light Mode";
  }
  
}

這就是我試圖放入代碼中以使其在 css 表之間切換的內容。 當我添加它時沒有任何中斷，但它也不起作用。

function toggle(){
    var input = document.getElementById("checkBox");
    if(input.checked == true){
        modelabel.style.color ="#6d5f94";
    } else{
        modelabel.style.color ="#dc92b9";
    }

    var input = document.getElementById("theme-link")
    if (input.checked == true) { 
        theme.setAttribute('href', 'dark-styles.css'); 
    } else { 
        theme.setAttribute('href', 'light-styles.css'); 
    } 

    var x = document.getElementById("modelabel");
  if (x.innerHTML === "Light Mode") {
    x.innerHTML = "Dark Mode";
  } else {
    x.innerHTML = "Light Mode";
  }
  
}

2 個解決方案

解決方案1
 0  2022-09-09 16:24:27

顯然你需要先做一些 css 基礎工作。 在一個文件中定義所有主題對我有用。 styles 的區別在於文檔正文的 class。 然后在 JS 上，您需要做的就是將 class （比如dark ）與主體切換。

像這樣的東西： 

 var darkMode = false function handle_dark_click() { if (darkMode == true) { document.body.classList.remove("dark"); } else { document.body.classList.add("dark"); } darkMode =;darkMode. } document.getElementById('toggle-theme'),addEventListener('click', handle_dark_click)
 /* default theme */ body { background: white; text-align: center; } h1 { color: blue; } h2 { color: navy; } div { border: 1px solid black; } /* another theme */ body.dark { background: #333; } body.dark h1 { color: lightgreen; } body.dark h2 { color: green; } body.dark div { border: 1px solid white; }
 <body> <div> <h1>hello world</h1> <h2>javascript</h2> </div> <br> <button id="toggle-theme">toggle theme</button> </body>

解決方案2
 0  2022-09-09 16:36:38

最簡單的方法是根據 HTML 數據屬性確定主題，然后使用html[data-theme='dark']或html[data-theme='light']檢查 CSS 中應用了哪個主題。

這可以分為幾個步驟：

根據數據屬性應用 Styles

您可以通過定位數據值將 CSS 應用於任何給定元素。 在這種情況下，您可能希望將此值應用於最上面的節點，例如<html> 。

在 JavaScript 中，您可以使用以下命令更改此值：

document.getElementsByTagName('html')[0].setAttribute('data-theme', 'dark');

這將更新 HTML 看起來像：

<html data-theme="dark">
...
</html>

然后可以在 CSS 中使用：

html[data-theme='light'] {
  --background: #fff;
  --foreground: #000;
}

html[data-theme='dark'] {
  --background: #000;
  --foreground: #fff;
}

存儲用戶偏好

當用戶更改主題時，使用Window.localStorage將他們的選擇存儲在瀏覽器本地存儲中，然后在下次訪問您的站點時再次應用它。

// Set
window.localStorage.setItem('theme', 'dark');
// Get
const theme = window.localStorage.theme;

這里有更詳細的教程。

檢測用戶亮/暗偏好

您可以檢查用戶的操作系統/瀏覽器是否設置為喜歡淺色或深色模式，並在初始頁面加載時應用該主題。 這是使用prefers-color-scheme

@media (prefers-color-scheme: dark) {
  --background: #000;
  --foreground: #fff;
}

@media (prefers-color-scheme: light) {
  --background: #fff;
  --foreground: #000;
}

把它們放在一起

這是一個活生生的例子，它將以上幾點組合成一個可運行的代碼片段，您可以將其集成到您的應用程序中

 const setTheme = () => { const newTheme = document.getElementById('theme-selector').value; const htmlTag = document.getElementsByTagName('html')[0]; if (htmlTag.hasAttribute('data-theme')) htmlTag.removeAttribute('data-theme'); htmlTag.setAttribute('data-theme', newTheme); window.localStorage.setItem('theme', newTheme); } // Apply previously saved theme, on page load document.onload = function() { const savedTheme = window.localStorage.theme; if (savedTheme) { document.getElementsByTagName('html')[0].setAttribute('data-theme', savedTheme) } };
 html[data-theme='light'] { --background: #fff; --foreground: #000; } html[data-theme='dark'] { --background: #000; --foreground: #fff; } body { background: var(--background); color: var(--foreground); }
 <label for="theme-selector">Theme</label> <select id="theme-selector" onchange="setTheme()"> <option value="light">Light</option> <option value="dark">Dark</option> </select>

如果您想查看一個真實的示例，了解如何擴展更大的代碼庫，我在這個應用程序中使用了這種方法，主題在這個文檔中進行了解釋

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何切換播放器變量以在播放器一和播放器二之間切換？ 如何使用切換開關更改文本？ 如何在2個CSS樣式表之間切換以與jQuery-UI一起使用？ 如何正確使用 setInterval 和 clearInterval 在兩個不同的函數之間切換？ 如何使用JavaScript在HTML元素的兩個ID之間切換？ 我如何在兩個jQuery函數之間切換 如何通過反應在兩個 css 類之間切換 如何使用撥動開關更改語言？ 如何在兩個字體系列之間進行切換 如何使用jQuery在可見和隱藏之間切換（切換）。
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM