PLEASE USE THE PINNED DISCUSSION FOR THEME REQUESTS
A collection of Obsidian.md themes adapted for Quartz.
Quartz using Catppuccin Frappe theme
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
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!
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.
Pull the submodule from upstream by running the following from your Quartz repository:
git submodule update --init --recursive --remote
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
You need to set a layout. You can set a separate theme for light mode and dark mode.
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";
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";
Add your desired dark theme to light.scss
.
// light.scss
// Use Catppuccin Latte for light mode
@import "quartz-themes/themes/catppuccin/latte";
Add your desired dark theme to dark.scss
.
// dark.scss
// Use Catppuccin Frappe for dark mode
@import "quartz-themes/themes/catppuccin/frappe";
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
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 |