Quartz Sandbox

Custom SCSS Theming

Properties2
descriptionA small sandbox-only stylesheet that imports Quartz variables and uses theme CSS variables, so the same accent adapts to light and dark mode.
tagssandbox, experiment, styling

2 min read

Custom SCSS theming

What this demonstrates

The sandbox owns engine/quartz/styles/custom.scss. It is compiled together with Quartz’s base styles but is not present in the shared engine. The stylesheet imports the engine’s variables.scss for breakpoints and spacing, then uses Quartz’s CSS custom properties for colours. There are no hardcoded hex colours: var(--secondary), var(--tertiary) and var(--lightgray) change when the dark-mode component changes the theme.

Configuration used

configuration:
  theme:
    fontOrigin: googleFonts
    cdnCaching: true
    typography:
      header: Schibsted Grotesk
      body: Source Sans Pro
      code: IBM Plex Mono

The custom stylesheet is picked up by the pinned engine’s normal style pipeline; no config plugin entry is needed.

Content used

@use "./variables.scss" as *;
 
:root {
  --sandbox-accent: var(--tertiary);
}
 
.page-title {
  letter-spacing: 0.015em;
  color: var(--secondary);
}
 
.callout[data-callout="important"] {
  border-inline-start: 0.3rem solid var(--sandbox-accent);
}
 
@media #{$desktop} {
  .page-header {
    border-bottom: 1px solid var(--lightgray);
  }
}

Rendered result

The title and this page’s important callout use the sandbox accent. Toggle dark mode: the accent and border remain legible because they refer to Quartz’s mode-aware variables rather than a light-only literal colour. Resize above and below the $desktop breakpoint to see the header rule appear only on the wide layout.

Sandbox-only style

This callout is the visual marker for the data-callout="important" selector. The selector is intentionally narrow, and the property values all come from the theme.

What the rendered output proves

The page’s stylesheet contains the scoped .page-title, .callout[data-callout="important"] and desktop media-query rules, while the DOM still carries the standard Quartz theme variables. The observed behavior is a style-only change: route generation, search, graph, content indexing and all Markdown transforms remain unchanged.

safe_for_shared_engine

false — the SCSS is tiny and mode-safe, but it is intentionally a sandbox brand treatment; copying it into the shared engine would alter the appearance of all 51 wikis rather than only pages that opt in.

Graph View

Backlinks