Fatal编程技术网
  • javascript/
  • Javascript 在2个样式表之间切换，并使用本地存储永久保存用户首选项

Javascript 在2个样式表之间切换，并使用本地存储永久保存用户首选项

javascript html css

Javascript 在2个样式表之间切换，并使用本地存储永久保存用户首选项,javascript,html,css,local-storage,Javascript,Html,Css,Local Storage,我有两个图像（一个月亮和一个太阳）和两个不同的黑暗和光明页面主题样式表。默认为暗模式。要更改为灯光模式，请单击太阳图像 我可以在样式表之间切换。但是，我不知道如何存储所选主题。我希望用户能够保留他们的风格偏好，即使在刷新页面或更改页面（在同一网站上）后也是如此 我在下面列出了一些代码示例。我希望有人能帮助我理解本地存储 相关html <link href="normalize.css" rel="stylesheet" type="

我有两个图像（一个月亮和一个太阳）和两个不同的黑暗和光明页面主题样式表。默认为暗模式。要更改为灯光模式，请单击太阳图像

我可以在样式表之间切换。但是，我不知道如何存储所选主题。我希望用户能够保留他们的风格偏好，即使在刷新页面或更改页面（在同一网站上）后也是如此

我在下面列出了一些代码示例。我希望有人能帮助我理解本地存储

相关html

    <link href="normalize.css" rel="stylesheet" type="text/css">
    <link id="theme" rel="stylesheet" type="text/css" href="styles-dark.css" />
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
    <link class="favicon" rel="icon" href="./favicon.ico" />  
  </head>
 
  <body>
 
    <header id="flex-box-header">
      <h1 id="nameHeading">MY NAME</h1>
      <!-- 'Dark Mode' will be the default --> 
      <div class="toggle">
        <div class="tooltip">
          <img class="displayButton" id="dark" src="moon - light.png" alt="dark mode" width="90.82px" height="76px">
          <span class="tooltiptext" id="textDark">Dark Mode</span>
        </div>
        <div class="tooltip">
          <img class="displayButton" id="light" src="sun.jpg" alt="light mode" width="83.56px" height="62.02px">
          <span class="tooltiptext" id="textLight">Light Mode</span>
        </div>
      </div>
    </header>
我终于明白了！ 它有FOIT（不正确主题的闪光），但我只是松了一口气，用户的偏好正在保存。改天我会致力于消除FOIT

JavaScript

// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");

// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";

// Select the stylesheet <link>
const theme = document.getElementById("theme");

function lightFunction() {
  theme.href = lightStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun - light.png";
  document.querySelector(".favicon").href = "favicon-light.ico";
  window.localStorage.setItem('theme', 'light');
}

function darkFunction() {
  theme.href = darkStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun.jpg";
  document.querySelector(".favicon").href = "favicon.ico";
  window.localStorage.setItem('theme', 'dark');
}

// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", lightFunction);

// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", darkFunction);

const currentTheme = localStorage.getItem("theme");

if (currentTheme == "dark") {
  darkFunction();
} else {
  lightFunction();
}

//按钮选择
const buttonLight=document.getElementById（“light”）；
const buttonDark=document.getElementById（“暗”）；
//风格选择
const lightStyle=“styles light.css”；
const darkStyle=“styles dark.css”；
//选择样式表
const theme=document.getElementById（“主题”）；
函数lightFunction（）{
theme.href=lightStyle；
//黑暗主题的不同太阳
document.getElementById（“light”）.src=“sun-light.png”；
document.querySelector（“.favicon”）.href=“favicon light.ico”；
setItem（'theme'，'light'）；
}
函数darkFunction（）{
theme.href=darkStyle；
//黑暗主题的不同太阳
document.getElementById（“light”）.src=“sun.jpg”；
document.querySelector（“.favicon”）.href=“favicon.ico”；
setItem（'theme'，'dark'）；
}
//聆听太阳按钮（按钮灯）上的点击
buttonLight.addEventListener（“单击”，lightFunction）；
//听月亮按钮（按钮标记）上的点击
按钮标记。addEventListener（“单击”，暗色功能）；
const currentTheme=localStorage.getItem（“主题”）；
如果（当前主题==“暗”）{
暗函数（）；
}否则{
lightFunction（）；
}
为此使用CSS变量这是否回答了您的问题？你好。我已经知道如何使用按钮更改样式表，但我不知道如何存储用户首选项。感谢您的建议，但本地存储解决方案的哪些方面不起作用？它只是不记得主题吗？重做主题需要一点时间吗？主题是否仅在单击时重新应用？你的确切期望是什么？现在发生了什么？你是如何调试它的？嗨@zero298我只是不知道如何正确地实现它。在上面的例子中，“尝试使用本地存储而失败”，它甚至根本不会在主题之间切换。当您单击太阳图像时，它会闪烁一次，然后停留在黑暗主题上，而不是切换到光明主题。我读了很多书，不知道如何用两个CSS文件实现本地存储。似乎大多数示例都使用类。 
function toggle(theme) {
    var styleSheet = document.getElementById("theme");
    if (theme != styleSheet.href) styleSheet.href = theme;
    document.getElementById("light").src.onClick = styleSheet.href === "styles-light.css";
  }
  window.addEventListener("click", function() {
    var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
    toggle(theme);
    document.getElementById("light").addEventListener("click", function() {
      var theme = this.onClick ? "styles-light.css" : "styles-dark.css"
      toggle(theme);  
      localStorage.setItem("theme", theme);
    })
  })


// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");

// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";

// Select the stylesheet <link>
const theme = document.getElementById("theme");

function lightFunction() {
  theme.href = lightStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun - light.png";
  document.querySelector(".favicon").href = "favicon-light.ico";
  window.localStorage.setItem('theme', 'light');
}

function darkFunction() {
  theme.href = darkStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun.jpg";
  document.querySelector(".favicon").href = "favicon.ico";
  window.localStorage.setItem('theme', 'dark');
}

// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", lightFunction);

// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", darkFunction);

const currentTheme = localStorage.getItem("theme");

if (currentTheme == "dark") {
  darkFunction();
} else {
  lightFunction();
}