Quartz supports darkmode out of the box that respects the user’s theme preference. Any future manual toggles of the darkmode switch will be saved in the browser’s local storage so it can be persisted across future page loads.

Customization

  • Removing darkmode: delete all usages of Component.Darkmode() from quartz.layout.ts.
  • Component: quartz/components/Darkmode.tsx
  • Style: quartz/components/styles/darkmode.scss
  • Script: quartz/components/scripts/darkmode.inline.ts