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

Copy 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
    light.scss

To set the desired theme, see below.

Updating

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

git submodule update --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 can set a separate theme for light mode and dark mode.

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";

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