Quartz 原生支持暗黑模式,能够自动适配用户的系统主题偏好。用户后续手动切换暗黑模式的操作会被保存在浏览器本地存储中,以便在后续页面加载时保持设置。
自定义
- 移除暗黑模式:删除
quartz.layout.ts
中所有Component.Darkmode()
的调用。 - 组件文件:
quartz/components/Darkmode.tsx
- 样式文件:
quartz/components/styles/darkmode.scss
- 脚本文件:
quartz/components/scripts/darkmode.inline.ts
您可以通过监听 themechange
事件来实现主题切换时的自定义逻辑。
document.addEventListener("themechange", (e) => {
console.log("Theme changed to " + e.detail.theme) // either "light" or "dark"
// your logic here
})