Question

我有一个带有两个CSS文件的html页面 - 一个用于灯光主题，另一个用于黑暗主题。单击相应按钮时，主题将更改为light.css或dark.css。

但是，每当我刷新页面时，重新加载页面，返回等等。它会变回默认的css（作为light.css文件）。

当我点击按钮并刷新页面时，有什么方法可以让它保持在dark.css主题上？

感谢。

Answer 1

您可以使用cookie，localStorage或sessionStorage保留默认主题和选择的主题。因此，当您的页面加载时，您必须从cookie / localStorage / sessionStorage中读取该信息并应用所选主题。

例如加载页面时

let theme = localStorage.getElement('theme');
if(!theme){
theme = 'light';
localStorage.setElement('theme', 'light');
}
// and you use theme variable to load the light theme

例如，当用户更改主题时

localStorage.setElement('theme', 'dark');
theme = 'dark';

Answer 2

如果您不想使用后端方法替换style.css文件，可以尝试使用这样的本地存储：

$(function(){

  setSiteTheme(getSiteTheme());
  
  function setSiteTheme(themeName) {
    //Uncomment this in your app: window.localStorage.setItem('themeName', themeName);
    $('link[data-theme]').attr('href', themeName);
  }
  
  function getSiteTheme() {
    //Uncomment this in your app: return window.localStorage.getItem('themeName') || 'light.css';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="/css/styles.css?version=5a6992221f52c" data-theme>

之后，将DATA-THEME属性添加到头部的链接标记中。并且不要忘记取消必要的行。

在页面重新加载时保持CSS不刷新

2 个答案: