A collection of Obsidian themes adapted for Quartz.
&color=444)
&color=444){kind=icon}
Add the following linte to your deploy.yml before the permissions section:
env:
THEME_NAME: <THEME-NAME>And add the following lines to your deploy.yml before the build step:
- name: Fetch Quartz Theme
run: curl -s -S https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh | bash -s -- $THEME_NAMEImportant
Replace <THEME-NAME> with your desired theme name. See Compatibility List
Tip
Example for Tokyo Night:
env:
THEME_NAME: tokyo-nightThe full script would look like this:
name: Deploy Quartz site to GitHub Pages
on:
push:
branches:
- v4
env:
THEME_NAME: <THEME-NAME>
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build:
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Fetch all history for git info
- uses: actions/setup-node@v4
with:
node-version: 22
- name: Install Dependencies
run: npm ci
- name: Fetch Quartz Theme
run: curl -s -S https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh | bash -s -- $THEME_NAME
- name: Build Quartz
run: npx quartz build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: public
deploy:
needs: build
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4Tip
This installation method is recommended for users who want to install themes into their Quartz repository directly. This method is also recommended for user who cannot fetch dependencies during compilation.
Download the latest version of the action.sh script or run the following to download it:
curl -s -S -o action.sh https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.shNote
Windows users should use action.bat instead, unless they also access to the bash shell (git-bash, etc.) or WSL.
curl -s -S -o action.bat https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.bat
action.bat tokyo-nightThen run the action.sh script with the desired theme to install it into your Quartz repository:
# Example: installing Tokyo Night...
./action.sh tokyo-night
# ...should output:
# Quartz root succesfully detected...
# Input theme: tokyo-night
# Parsing input theme...
# Theme tokyo-night parsed to tokyo-night
# Validating theme...
# Cleaning theme directory...
# Creating theme directory...
# Fetching theme files...
# Installing theme files...
# Applying patches...
# Verifying setup...
# Added import line to custom.scss...
# Finished fetching and applying theme 'tokyo-night'.Manually download the _index.scss file from the themes directory of your choice in this repository, and place it in your Quartz repository's at quartz/styles/themes/_index.scss. (Create the themes directory if it doesn't exist.)
Then, add the following line to your src/styles/custom.scss file after the @use "base"; line:
@use "themes";[!IMPORTANT] For dark-only or light-only themes, remember to remove
Component.Darkmode()from yourquartz.config.tsfile.
Important
This setup method is not yet available. It is currently being tested and will be released in the future.
Glossary
| Status | Description |
|---|---|
 |
Fully supported |
 |
Partially supported (see theme page for details) |
 |
This theme contains information for the Style Settings plugin. See the table for the configured sub-themes. |
 |
Testing compatibility |
 |
Waiting for upstream fixes |
 |
Not started |
 |
Won't support |
 |
Broken or removed from Obsidian |
| Theme Modes | Description |
|---|---|
 |
Both dark and light theme |
 |
Light theme only |
 |
Dark theme only |