我有一个带有两个CSS文件的html页面-一个用于浅色主题,一个用于深色主题。当我单击相应的按钮时,主题将更改为light. css或暗.css。
但是,每当我刷新页面、重新加载页面、返回等时,它都会变回默认的css(即light. css文件)。
当我单击按钮并刷新页面时,有什么方法可以让它停留在黑暗. css主题上吗?
谢谢。
您可以使用cookie、localStorage或session sionStorage来保留默认主题和选择的主题。因此,当您的页面加载时,您必须从cookie/localStorage/session sionStorage中读取该信息并应用所选主题。
例如页面加载时
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';
如果不想使用后端方法替换style. css文件,可以尝试使用本地存储,如下所示:
如果不想使用后端方法替换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>