在設計我的數位花園時，我知道我想要一個可愛的黑暗模式切換開關。繪製完 SVG 後，我開始建立一個 Web 元件，該元件具有與 React 中的暗模式切換功能相同的功能。這包括我在可訪問性審核我的網站時學到的所有內容。
除了更改主題之外，切換還需要考慮使用者的首選顏色方案選擇，並在重新載入時保留使用者的偏好。為了實現可訪問性，切換的螢幕閱讀器公告必須有意義（例如「深色模式切換開啟」）。由於我想顯示 SVG 而不是帶有文字的複選框，因此我必須添加焦點和懸停樣式以及懸停時顯示的標籤。
首先，我需要一個用於建立 HTML 元素的 Toggle 類別。使用自訂元素 API，我將定義
使用類別的建構函數，我設定了
HTML 就位後，我在該類別中新增一個connectedCallback 函數。自訂元素 API 的這一部分定義了在元件內使用的函數，並在元件插入 DOM 時執行程式碼。
// /components/toggle.js
class Toggle extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<label title="dark mode toggle">
<input type="checkbox" id="theme-toggle" class="theme-switch" />
<svg id="daisy">{SVG code removed for brevity}</svg>
</label>
`
this.setAttribute("class", "toggle-component");
}
connectedCallback() {
function switchTheme(e) {
if (e.target.checked) {
setTheme('dark');
return;
}
setTheme('light');
};
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.setAttribute('data-theme', themeName);
};
function setCheckBox(toggleSwitch, theme) {
toggleSwitch.checked = theme === 'dark' ? true : false;
}
function keepTheme() {
const toggleSwitch = document.querySelector('#theme-toggle');
toggleSwitch.addEventListener('change', switchTheme, false);
const theme = localStorage.getItem('theme');
if (theme) {
setTheme(theme);
setCheckBox(toggleSwitch, theme);
return;
};
const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
if (prefersLightTheme.matches) {
setTheme('light');
return;
};
setTheme('dark');
setCheckBox(toggleSwitch, 'dark');
};
document.addEventListener("DOMContentLoaded", keepTheme);
}
}
customElements.define("toggle-component", Toggle);
因為
keepTheme 的其餘部分致力於在加載時選擇正確的主題。首先，它檢查 localStorage 以查看使用者的首選項是否已設定。接下來，它檢查prefers-color-scheme是否設定為“light”。最後，它預設為深色模式。對於深色和淺色模式，我呼叫 setTheme。對於深色模式，我也調用setCheckbox。此複選框以未選取狀態安裝。螢幕閱讀器將宣布“深色模式”以及是否選中該複選框。要獲得諸如“選中深色模式切換”或“打開深色模式切換”之類的公告，當我在加載時將主題設置為“深色”時，我必須以編程方式選中該複選框。
我選擇繪製一個相當簡單的設計，這樣我就可以將 SVG 程式碼直接放入 Web 元件中，並以程式設計方式變更填滿色。這樣，雛菊的背景顏色始終與主體相符。接下來，我使用不透明度：0；隱藏複選框並將其放置在圖像的中間。最後，我添加了懸停和焦點樣式。
// /components/toggle.js
class Toggle extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<label title="dark mode toggle">
<input type="checkbox" id="theme-toggle" class="theme-switch" />
<svg id="daisy">{SVG code removed for brevity}</svg>
</label>
`
this.setAttribute("class", "toggle-component");
}
connectedCallback() {
function switchTheme(e) {
if (e.target.checked) {
setTheme('dark');
return;
}
setTheme('light');
};
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.setAttribute('data-theme', themeName);
};
function setCheckBox(toggleSwitch, theme) {
toggleSwitch.checked = theme === 'dark' ? true : false;
}
function keepTheme() {
const toggleSwitch = document.querySelector('#theme-toggle');
toggleSwitch.addEventListener('change', switchTheme, false);
const theme = localStorage.getItem('theme');
if (theme) {
setTheme(theme);
setCheckBox(toggleSwitch, theme);
return;
};
const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
if (prefersLightTheme.matches) {
setTheme('light');
return;
};
setTheme('dark');
setCheckBox(toggleSwitch, 'dark');
};
document.addEventListener("DOMContentLoaded", keepTheme);
}
}
customElements.define("toggle-component", Toggle);
我需要做的就是在
中匯入我的樣式表和元件腳本。 HTML 頁面的。然後我可以呼叫/* /styles/styles.css */
[data-theme="light"] {
--toggle-background: #242D54;
}
[data-theme="dark"] {
--toggle-background: #282e53;
}
#daisy path {
fill: var(--toggle-background);
}
.theme-switch {
position: relative;
bottom: 30px;
left: 55px;
width: 1em;
height: 1em;
opacity: 0;
}
.theme-switch:focus + #daisy path,
.theme-switch:hover + #daisy path {
fill: white;
}
.theme-switch:focus + #daisy {
outline: 3px solid white;
outline-offset: 5px;
}
我很高興讓我的黑暗模式切換在 Web 元件中像在 React 中一樣工作。您可以在我的數位花園中即時查看此內容，並在 GitHub 儲存庫中查看完整程式碼。
以上是HTML Web 元件中的深色模式切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！
