A collection of Obsidian themes adapted for Quartz.
&color=444)
&color=444){kind=icon}
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-NAME>Important
Replace <THEME-NAME> with your desired theme name. See Compatibility List
Tip
Example for Tokyo Night:
- name: Fetch Quartz Theme
run: curl -s -S https://raw.githubusercontent.com/saberzero1/quartz-themes/master/action.sh | bash -s -- tokyo-nightThe full script would look like this:
name: Deploy Quartz site to GitHub Pages
on:
push:
branches:
- v4
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'.Caution
This setup method is the previous installation method and is not recommended for new users.
Install script
Clone the project next to your Quartz repository.
git clone https://github.com/saberzero1/quartz-themes.git
cd quartz-themes
npm ciAdd the following line to your custom.scss file:
@use "./themes";Your custom.scss should look something like this:
@use "./base.scss";
@use "./themes";
// put your custom CSS here!Run the following from the Quartz Themes project root:
npm run theme <THEME-NAME>Run the following from the Quartz Themes project root to check for updates:
npm run checkRun the following from the Quartz Themes project root to update the themes:
npm run updateGlossary
| Status | Description |
|---|---|
 |
Fully supported |
 |
Partially supported (see theme page for details) |
 |
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 |
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
