quartz-themes
quartz-themes copied to clipboard
Obsidian 🤝 Quartz. Quartz compatible Obsidian Themes.
Quartz Themes
A collection of Obsidian themes adapted for Quartz.
Installation
GitHub Actions (Recommended)
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-night
The 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@v4
Local install
[!TIP] 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.sh
[!NOTE] Windows users should use
action.batinstead, 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-night
Then 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'.
Install script (Deprecated)
[!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 ci
Configure Quartz
Add 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!
Setting themes and layout
Run the following from the Quartz Themes project root:
npm run theme <THEME-NAME>
Updating
Run the following from the Quartz Themes project root to check for updates:
npm run check
Run the following from the Quartz Themes project root to update the themes:
npm run update
Supported Themes
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 |