所以我有以下代碼來管理我的暗模式（請注意我沒有撰寫原始代碼，我只是在修改）：
if (toggleTheme) {
toggleTheme.click(function () {
darkMode();
});
};
// Theme Switcher
function darkMode() {
const logo = document.getElementById('logo'); // I Added this line
if (html.hasClass('dark-mode')) {
html.removeClass('dark-mode');
localStorage.removeItem("theme");
$(document.documentElement).removeAttr("dark");
logo.src = logo.dataset.logoLight; // I Added this line
} else {
html.addClass('dark-mode');
localStorage.setItem("theme", "dark");
$(document.documentElement).attr("dark", "");
logo.src = logo.dataset.logoDark // I Added this line
}
}
這是相對的 HTML（注意，我正在使用Hugo構建，因此包括 Go 模板）：
{{- $logo := (resources.Get site.Params.logo).Resize "270x webp q100" -}}
{{- $logoDark := (resources.Get "/images/logo-dark.png").Resize "270x webp q100" -}}
<img id="logo" class="logo__image" src="{{- $logo.RelPermalink -}}" data-logo-light="{{- $logo.RelPermalink -}}" data-logo-dark="{{- $logoDark.RelPermalink -}}" alt="{{ .Site.Title }}" height="{{- div $logo.Height 2 -}}" width="{{- div $logo.Width 2 -}}">
我只在 JavaScript 中添加了上面提到的三行。
所以這完全符合我的要求。當有人切換暗模式按鈕并且徽標翻轉到暗模式版本時。
偉大的。
除非他們單擊新頁面，否則原始徽標已就位。
不知道如何存盤、檢查和檢索適當的徽標，因為我不太擅長 JavaScript（我只是將我需要的東西拼湊在一起）。
你會怎么做？
uj5u.com熱心網友回復：
有幾種方法可以添加您缺少的功能，但考慮到您當前的實作，最直接的方法可能是使用themelocalStorage 中的值。
您的代碼已localStorage用于存盤當前主題。您缺少的一點是一些 JavaScript，它檢查themelocalStorage 中的值，然后適當地設定徽標路徑。您可以使用該存盤的值來確定加載任何頁面時的主題是什么，方法是在每個頁面中放置一些 JavaScript <head>，或者將其添加到現有暗模式切換邏輯所在的 JavaScript 檔案中：
// Define a function that will check localStorage and set the logo path
function checkThemeAndSetLogo() {
const logo = document.getElementById('logo');
const currentTheme = localStorage.getItem("theme"); // get the theme value from localStorage
if (currentTheme === "dark") {
logo.src = logo.dataset.logoDark;
} else {
logo.src = logo.dataset.logoLight;
}
}
// Call the function so that the logo is updated appropriately
checkThemeAndSetLogo();
如果您對暗模式的進一步閱讀和其他選項感興趣，我推薦A Complete Guide to Dark Mode on the Web。
uj5u.com熱心網友回復：
我認為您始終可以存盤一個標志變數來檢查頁面是否切換到暗模式，我向您展示：
// Theme Switcher
function darkMode(){
if (html.hasClass('dark-mode')){
html.removeClass('dark-mode');
localStorage.removeItem("theme");
$(document.documentElement).removeAttr("dark");
localStorage.setItem('dark_mode', 'false');
darkModeLogo();
}else{
html.addClass('dark-mode');
localStorage.setItem("theme", "dark");
$(document.documentElement).attr("dark", "");
localStorage.setItem('dark_mode', 'true');
darkModeLogo();
}
}
//runs everytime the js file is loaded
function darkModeLogo(){
const logo = document.getElementById('logo'); // I Added this line
const DARK_MODE = localStorage.getItem('dark_mode');
if(eval(DARK_MODE)){
logo.src = logo.dataset.logoLight; // I Added this line
}else{
logo.src = logo.dataset.logoDark // I Added this line
}
}
darkModeLogo();
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/469313.html
標籤：javascript html css 雨果 暗模式