A silhouette of a dragon flying

The Den

Quartz Customization Log

5 min read🌙 growing / wip

A list of all most of the changes I’ve made to this quartz instance and how I did them. Inspired by Eilleen’s digital garden doing the same thing.

wippy ahead

Same as usual, this page is a work in progress right now. Currently I’m backlogging the changes I’ve made to this site onto this page. This will take a while lmao.

Custom Callouts

[2025-12-26] These are fairly simple to add, actually! Both obsidian and quartz allow you to define new callouts in CSS. Within obsidian I use the callout manager plugin, and this is the process I took to port them to quartz.

In obsidian, on a page with a custom callout, press ctrl + shift + I to open devtools. Open the <head>, and scroll down to the <style> block that looks like this.

<style data-source-plugin="callout-manager" data-source-id="0" data-callout-manager="style-overrides">
	.callout[data-callout="rose"] {
		--callout-color: 245, 77, 149;
		--callout-icon: lucide-flower
	}
	
	/* ... more callouts here */
</style>

You’ll want to copy the contents of this and put it in either your custom.scss, or… if you like organization, put it in a separate custom-callouts.scss file that you then import in your custom.scss.

Anyhow, this format isn’t entirely compatible with quartz yet. So let’s make some changes!

.callout[data-callout="rose"] {
	--bg: rgb(245, 77, 149);
	--callout-icon: var(--lucide-flower);
}

Replace --callout-color with --bg, wrap the three numbers in rgb() turn the icon into a var().

Quartz does not have all of obsidian’s icons built into it, so we’ll need to specify them.

Go to https://lucide.dev/icons/, look for the name inside that var() for each callout. Then copy the data URL (you can find this on the little ^ notch next to “copy SVG”).

Then, at the very top of the file…

.callout {
	--lucide-flower: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZsb3dlci1pY29uIGx1Y2lkZS1mbG93ZXIiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz48cGF0aCBkPSJNMTIgMTYuNUE0LjUgNC41IDAgMSAxIDcuNSAxMiA0LjUgNC41IDAgMSAxIDEyIDcuNWE0LjUgNC41IDAgMSAxIDQuNSA0LjUgNC41IDQuNSAwIDEgMS00LjUgNC41Ii8+PHBhdGggZD0iTTEyIDcuNVY5Ii8+PHBhdGggZD0iTTcuNSAxMkg5Ii8+PHBhdGggZD0iTTE2LjUgMTJIMTUiLz48cGF0aCBkPSJNMTIgMTYuNVYxNSIvPjxwYXRoIGQ9Im04IDggMS44OCAxLjg4Ii8+PHBhdGggZD0iTTE0LjEyIDkuODggMTYgOCIvPjxwYXRoIGQ9Im04IDE2IDEuODgtMS44OCIvPjxwYXRoIGQ9Ik0xNC4xMiAxNC4xMiAxNiAxNiIvPjwvc3ZnPg==");
}

Create a variable with the same name as below, paste the data URL inside an url(), and you should be good to go.

If you’re confused, you can cross reference my own custom-callouts.scss over here!

Additional Theme Colors

[2025-12-26] TBA.

[2025-12-26] Any non-existent file links show up as a different text color (in my case, red), this doesn’t exist in quartz by default.

This one’s a bit of a doozy, and doesn’t always work perfectly.

It doesn’t take too much code to add, this is how I did it! Just make sure you add the relevant import from “fs” at the top, and that you do actually add a class to the link for CSS to use if the file doesn’t actually exist.

The real trickiness with this implementation lies with how you link to some special files. Like folder indexes require you to link to Folder/index, instead of just Folder.

This implementation also breaks if any of your file names contain a normal - dash. Since there’s not an easy way to differentiate between a - and a blank space with the way I did it.

Dark Sidebars

[2024-12-26] I made my sidebars dark by default, regardless of theme. This one’s actually a nightmare to properly implement and I don’t know if I even caught all the edge cases.

The way quartz implements dark/light mode is by having a bunch of pre-set colors that change with the theme. I added some custom colors on top of that, and used those as the background colors for the sidebars. Problem is… the text.

The text changes with the theme too. Meaning on light mode, all the text is dark by default.

You’ll have to make sure the text looks right on both light and dark mode and ignore the demons that tell you to remove light mode altogether.

There’s also the issue of the desktop layout not being full width. I had to make various CSS changes to push the sidebars to the side while also not making the center text too wide.

I’m… not even going to provide a to-do on how to do this. My own implementation is a mess, there’s better ways to do it. Ideally don’t be me and make the sidebars dark. This is your warning.

That little rainbow thingy at the side of your screen

[2024-12-27] This one is fairly simple, thankfully. You’ll have to adjust the margin/padding on the center div to 0, set its position to relative, and add another div inside the center div. The latter can be done from RenderPage.tsx

Other than that, it’s just this!

.page > #quartz-body .center {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: none;
}
 
.page > #quartz-body .center::after {
  content: "";
  top: 0;
  bottom: 0;
  width: 6px;
  position: fixed;
  background-image: linear-gradient(
    180deg in oklch,
    rgb(var(--custom-accent-1)),
    rgb(var(--custom-accent-2)),
    rgb(var(--custom-accent-3)),
    rgb(var(--custom-accent-4)),
    rgb(var(--custom-accent-5))
  );
}

The css variables you can replace with just colors. in oklch means that the gradient uses the oklch colorspace instead of rgb. Resulting in much more pleasant gradients between colors.

Tangent incoming!

oklch and oklab are some pieces of tech that have a really interesting writeup by their creator here. It’s pretty funny. The guy wanted to solve a problem and did it in a way that he considered “pretty OK, I guess”. And then it proceeded to become one of the standards for both web and image processing in general. As you do.

position: fixed; will fix the gradient in place. I haven’t yet figured out how to get it to shrink with the .center div instead of the entire page height. This causes the gradient to be covered by the sidebars on mobile. It’s not a huge deal, though.

Header Image

[2025-12-27] TBA.

Page Statuses

[2025-12-27] TBA.

Graph color changes

[2025-12-27] TBA.

There’s definitely other things I am forgetting. Woo.

Graph View

Backlinks