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
})