如何使用water.css在亮模式和暗模式之间切换

我在我的网站上使用water.css，我有这个js代码：

function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Immediately invoked function to set the theme on initial load
(function () {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
})();

和这个按钮切换：

<div class="container">
<h1>Theme Switcher</h1>
<button id="switch" onclick="toggleTheme()">Switch</button>
</div>

我导入了javascript文件，我想知道如何更改javascript代码以在2个cdn链接之间切换：

dark.min.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">

以及2.水.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">

以下是如何更改主题：

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Theme Switcher</h1>
<button id="switch" onclick="toggleTheme()">Switch</button>
</div>
</body>
</html>

javascript

function setTheme(themeName) {
localStorage.setItem('theme', themeName);
//document.documentElement.className = themeName;
var link = document.createElement('link');
link.rel = 'stylesheet';
if (themeName == "theme-dark") {
link.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css';
} else {
link.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css';
}
document.head.appendChild(link);
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Immediately invoked function to set the theme on initial load
(function() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else {
setTheme('theme-light');
}
})();

我所做的更改是在setTheme函数中：

var link = document.createElement('link');
link.rel = 'stylesheet';
if (themeName == "theme-dark") {
link.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css';
} else {
link.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css';
}
document.head.appendChild(link);

这会根据您的主题添加相关的css。

这是一个JSFiddle现场演示。

相关内容

最新更新

热门标签：