Theme: Blue Topaz

Hi edgirishan,

I am sorry for any inconvenience caused by the embed style I used before. Now you can choose “To Fix Height of Embedded Content” by using the Style Settings plugin as shown below. Moreover, you can adjust the height yourself.


I am sorry that it is not possible to style unresolved .md links under existing software versions.

I have improved the performance of lists. They now look the same in the reading and the live preview modes. Besides, you can change their color in the Style Settings plugin.

Hi, Wonderful theme.

For the checkboxes options it will be great if Not completed/done/canceled items are not crossed off.

For example, don’t cross out:

  • [!] WARNING

and others…

But only cross out:

  • [x] Done
  • [-] Canceled
1 Like

Hey thank you for your reply. I was watching and enjoying the changes to the Theme over the last weeks. Thank you very much for the implementation of the mentioned points.
I personaly am very pleased with the new checkboxes and i will tinker arround with the Rubik’s Cube-Setting.

The .css i was using prior to the changes was:

  font-family: "Recursive Sans Casual";

Thanks again for your work :slight_smile:

1 Like

:smile: amazing, thanks so much! (I had updated the colours using Style Settings, but after updating to get the changes you mentioned they look way nicer!)

Hi all

I was wondering if one could select/define custom colors for the folder style background? the built in 5 styles done fit my taste :slight_smile: or maybe i can shift assign these colors to the letter i want (currently it auto assigns colors based on ABC, right?)


thx so much


How to make Image grid work in Blue Topaz theme in Live Preview mode? It’s work in almost any another themes, but in Blue Topaz only in Preview mode.
I tried ; ; as snippets and part of Blue Topaz.css, but alas.
In Style Settings, 4. Built-in Style Intro said: “manually declare in the YAML area”. But what does it mean specifically? Thanks in advance.


Hi - In one of the recent updates of the Blue Topaz theme, the ability to recognize a custom font to Headings is now broken. I have added a specific font that I want it to use at the front of the list and it was working, but after I updated it doesn’t recognize it. The same font is being recognized for the Vault Name (so I know the font is recognized/installed). Here’s the value for that one:

 'Architects Daughter', 'Lucida Handwriting', 'Segoe UI Emoji'

I updated again today to see if it had been fixed, but no such luck. Not sure if it’s a Style Settings problem or a Blue Topaz problem.

Thanks for taking a look ( and I love the theme - appreciate all your hard work)!

Awesome theme!
I’ve seen Blue topaz is able to modify the title bar, but i only wanna change its color.
So i tried to use css, but this didn’t apply another color :neutral_face:

.titlebar-inner {
    -webkit-app-region: drag;
    display: flex;
    flex-grow: 1;
    color: var(--background-secondary);

Thank you for liking the theme!
I am assuming that you want to change the color of titlebar text. So, you may use the selector .titlebar-text instead.

To be honest, I am not sure how to fix it. Maybe you can try to download and reinstall the Obsidian from the website and update the theme.

Blue Topaz has two built-in image grid approaches. You may find them from the demo vault (example vault, GitHub - cumany/Blue-topaz-examples: Blue topaz themes example vault for Obsidian).

In brief, you can add |+grid at the end of your image; or you may type a YAML cssclass to grid your images.

Unfortunately, we are not able to provide all the custom options for all the colors in Style Settings (30+ colors). In this case, you may create a CSS snippet to custom them yourself.

Sorry for the very late reply.

For your css snippet, you can add a !important to make it work.

.markdown-preview-view.calligraphic-journal {
  font-family: "Recursive Sans Casual" !important;

If you also want to change font family of Live Preview or Edit mode, you may use the following snippet:

.markdown-source-view.calligraphic-journal .cm-scroller,
.markdown-source-view.mod-cm6.calligraphic-journal .cm-scroller {
  font-family: "Recursive Sans Casual" !important;

I’ve found if I list only one single font for the heading (the one I want) it works. But the Vault name font value works when there are multiple fonts listed so I’m a bit baffled. Seeing this issue on multiple computers (macs - one with Big Sur and another with Monterey). If I have time I’ll see if I can poke around in how the css is being interpreted to see if there’s something there (I’m not very good with css though so might not yield any good info).

Was curious if others are seeing the same issue.

Hello @whyI
No, i only wanted to change the color of the title bar

Adding a background image to the title bar is an awesome and luxurious feature but i like more a simple, seamless color transition with my main color scheme

Hi Jopp,

Thank you for your explanation. You can use the following code to change the background color of the title bar when you active a background image.

body.background-settings-workplace-background-image .titlebar::before {
  display: none;
body.background-settings-workplace-background-image .titlebar {
  background-color: var(--background-secondary);

Thanks for your answer :+1:t2:
Meanwhile i tried around myself and got mixed results, myy own code worked just once.
Because i was trying around, so i deactivated and reactivated my css, but then my css didn’t work anymore at all

It seems that Mac os + Electron is causing issues… Unluckily, your code doesn’t work either, what i did was: I quit Obsidian, restarted, tried to switch your css on and off, logged out from my computer, logged in… But nothing did change.