Quartz Themes

PLEASE USE THE PINNED DISCUSSION FOR THEME REQUESTS

A collection of Obsidian.md themes adapted for Quartz.

Quartz using Catppuccin Frappe theme

Installation

First install

Setup submodule

From your Quartz root folder, clone as submodule into the styles folder:

git submodule add https://github.com/saberzero1/quartz-themes.git quartz/styles/quartz-themes

If you've already added the submodule before, you can restore it with:

git submodule update --init --recursive --remote

Link submodule

Add the following line to your custom.scss file:

@use "quartz-themes";

Your custom.scss should look something like this:

@use "./base.scss";
@use "quartz-themes";

// put your custom CSS here!

Setting themes and layout

Copy layout.scss, dark.scss and light.scss from the quartz-themes root folder to quartz/styles.

The resulting structure should look something like this:

quartz/
  styles/
    quartz-themes/
    custom.scss
    dark.scss
    layout.scss
    light.scss

To set the desired layout and theme, see below.

Updating

Pull the submodule from upstream by running the following from your Quartz repository:

git submodule update --init --recursive --remote

Developing

To develop, clone a copy of Quartz and clone into quartz-themes folder instead of as submodule.

git clone https://github.com/saberzero1/quartz-themes.git quartz/styles/quartz-themes

git pull

Usage

You need to set a layout. You can set a separate theme for light mode and dark mode.

Layout

Default Layout

⬛ Default Dark Preview

⬜ Default Light Preview

To use the default Quartz layout, set the following in layout.scss:

// Copy this file into the quartz/styles
// You can change the path of the import to point to the desired layout.
@import "quartz-themes/layouts/default";

Minimal Layout

⬛ Minimal Dark Preview

⬜ Minimal Light Preview

If you want something closer to Obsidian Publish's layout, set the following in layout.scss:

// Copy this file into the quartz/styles
// You can change the path of the import to point to the desired layout.
@import "quartz-themes/layouts/minimal";

Light Mode

Add your desired dark theme to light.scss.

// light.scss
// Use Catppuccin Latte for light mode
@import "quartz-themes/themes/catppuccin/latte";

Dark Mode

Add your desired dark theme to dark.scss.

// dark.scss
// Use Catppuccin Frappe for dark mode
@import "quartz-themes/themes/catppuccin/frappe";

FAQ

GitHub Pages throws error during deploy

Error: R] Can't find stylesheet to import.
  ╷
2 │ @use "quartz-themes";
  │ ^^^^^^^^^^^^^^^^^^^^
  ╵

To solve, add submodule:recursive to your deploy.yml like below:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Fetch all history for git info
          submodules: recursive # <<<<<< ADD THIS LINE
      - uses: actions/setup-node@v4
      - name: Install Dependencies
        run: npm ci
      - name: Build Quartz
        run: npx quartz build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: public

Supported Themes

This list is ever expanding.

Theme	Flavors	Original Obsidian Theme
Catppuccin	Frappe, Latte, Macchiato, Mocha	Obsidian Catppuccin
Obsidian	Dark, Light	Obsidian.md
Quartz	Dark, Light	Quartz
Tokyo Night	Day, Moon, Night, Storm	Obsidian and Tokyonight