How to Use Obsidian.app CSS Themes in Obsidian Publish

Share & showcase
1

I posted this in a different thread: How to apply custom css snippets to Obsidian Publish? - #4 by Duhkha. But, that is technically about snippets not themes.

I don’t know CSS, but I figured out how to use Obsidian.app themes in Obsidian Publish. For those that don’t know CSS, Voila!

For macOS:

  1. In Finder, navigate to your vault, and open this folder. I’ll name it “Life’s Work” for this example.
  2. Press Command + Shift + . (period) to see hidden files
  3. Go to folder .obsidian > themes
  4. Copy desired theme, Comfort Color Dark for example, and paste (or Option + drag) in or to the vault folder, “Life’s Work.”
  5. Rename this file, Comfort color dark.css in my example, to publish.css
  6. Then in Obsidian.app, press/click “Publish changes” in side ribbon. Select publish.css from New row, then press Publish.

Now your favorite or preferred app theme is also used for Obsidian Publish without knowing or customizing a jot of CSS.

Hope this helps.

5 Likes
2

Hi, thank you for posting this, but when I follow your instructions, I see no changes. I’ve tried clearing the cache, private window etc, but nada. The file is in the root directory, Obsidian prefixes the file with a CSS label and I have named the file publish.css and published that file.

I must be missing something? Any ideas. Thanks

1 Like
3

@adamantski Sorry for delay. I don’t check forums enough. If helpful, see screenshot. For this “Test” vault, I copied .obsidian > themes > Comfort color dark.css to “Test”–just copied it from hidden directory to main vault. I then renamed it “publish.css” as you’ll see. Then reopened Obsidian and this vault. Pressed Publish changes, chose this “publish.css” file in New row (perhaps check Changed), clicked Publish. Then cleared browser cache and reloaded page.

I’ve duplicated this with success three times now for different published vaults. I do hope this helps. Please let me know. Kind regards,

-John

Screen Shot 2021-11-11 at 1.36.06 PM
Screen Shot 2021-11-11 at 1.36.06 PM590×884 85 KB

1 Like
4

Hey, thanks for this detailed workflow.

I was wondering about just this thing, then came across your example and it worked perfectly!

5

Thanks. Great info but doesn’t work in my case, using the Typomagical theme. I did rename a copy of it ‘publish.css’ and put it in the vault’s top-level folder before re-publishing. I emptied the cache in two browsers (Edge Chromium and Safari) to be sure.

6

@MarkCameronHarris Sorry this didn’t work for you. Unfortunately, I don’t know if I can help beyond what I’ve already posted here. Perhaps others, experts, in the forum can help. I know nothing about CSS or themes. etc. so I just kept trying and troubleshooting until it worked. This really should be default behavior, eg. Obsidian Publish uses users’ themes.

2 Likes
7

Hi! I was having this same issue. In the theme (I used Pink Topaz) go advanced and CSS Snippets. Copy a file of the css theme and rename it publis.css and paste it there. Then go to the main folder where you have everything and make another copy of the theme and rename it as publish.css.

Then reload and it should work :slight_smile: