DEV Community
·
HTML Web 组件中的暗模式切换
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
作者设计了一个暗模式切换组件，使用SVG绘制图标，并通过自定义元素API定义<toggle-component>。组件考虑用户颜色偏好，并在页面重载时保持选择。通过焦点和悬停样式确保无障碍访问，使用事件监听器设置主题。样式表和脚本在HTML中导入，完整代码在GitHub上可查看。
🎯
关键要点
-
作者设计了一个暗模式切换组件，使用SVG绘制图标。
-
组件通过自定义元素API定义<toggle-component>，考虑用户颜色偏好。
-
组件在页面重载时保持用户选择的主题。
-
为了无障碍访问，切换组件的屏幕阅读器公告必须合理。
-
使用事件监听器设置主题，确保用户交互体验。
-
组件的HTML结构包括一个<label>和一个<input type='checkbox'>。
-
connectedCallback函数用于在组件插入DOM时执行代码。
-
localStorage用于保存用户的主题选择，确保在重载后保持一致。
-
组件样式通过CSS变量动态调整，确保背景色与主题匹配。
-
只需在HTML页面的<head>中导入样式表和脚本即可使用组件。
➡️
