I recently stumbled across an evolutionary note-taking app called Obsidian. So I have migrated my design from my Typora theme Obsidian to Obsidian. Amazing right? We used the same name!
So I have made a new name for my theme in Obsidian, let’s call it
This theme focused on generating the feel of obsidian in the galaxy. It has futuristic neon colorings, as well as the feel of “Obsidian” power.
Hope you all note-takers out there like it. Happy note-taking!
Recommended font: Rubik (which is a free google font, can be downloaded here)
Optional font: OperatorMonoSSmLig-Book (Yes this is a paid font, works better with the theme, but not a must, if you have it. Make sure you install it on your computer. ) This theme is designed on
MacOS and hasn’t been tested on Windows. If anyone bumps into any problems in Windows, let me know in the comments!
This theme also includes a few special styled tags (You can change them if you use a different set of special tags.)
working-draft —— For those things that you still want to continue work on or refractor on.
notes —— For tagging daily notes or temporary notes.
knowledge —— For tagging notes that are stores into our permanent knowledge, aka “Permanent Notes”
article —— I also store articles I wrote about in my knowledge database, so I use this for those articles that I wrote.
ideas —— For tagging ideas and thoughts.
Version 2.0 (Oct 9, 2022)
As I have been busy and stopped maintaining this repo for almost 2 years. I am so surprised that a lot of you had still been using and supporting this theme.
I had updated the theme to 2.0 to support the latest
live preview mode so that all those Obsidianite lovers can use the theme and be happy again!
Thanks for all your support over these 2 years! Love you all!
Note: I will look into those old issue tickets and fix those long waited bugs during the weekend each week, hope you all continue to support the theme! Thanks!
Removed all the old
Cluster Free code (please move to
live preview mode)
Added support for
live preview mode [
Supporting all the features that is there before for the live preview
Problem with code block should no longer exist with
live preview [
Images now align to left, fixed issue with image having no spaces between list items [
Fixed issue with strange block that hides top of the page in edit mode with
live preview [
Fixed bullet point not visible in view mode [
Fixed bullet lists in edit mode not compatible with different fonts [
Oh what?! Gradient headers? Wow. This theme is so cool
Thanks! I will keep adding magic to it.
November 4, 2020, 1:29pm
@TriDiamond: have you seen @death.au’s recommendation for your gradient lines?
@Klaas Yes I did, will be updating it with that recommendation in the next version.
November 4, 2020, 1:42pm
@TriDiamond: @death.au is unequalled in terms of CSS.
@Klaas: I approve that. Totally agree.
Thanks for the feedback!
The first one is an issue with the css I use for the links. I need to rework on that. Will get it fixed!
On the second part, are you referring to the font ligatures? Yeah Rubik does not support the font ligatures, you can customize the CSS to use a different font if you want to use ligatures. Fonts like Fira Code, Operator Mono will support this.
Simply change this line, and replace the Rubik font with a font that supports font ligatures:
--default-font: 'Rubik', 'Glow Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
Hope these helps!
November 6, 2020, 5:47pm
Thanks for the reply!
I found the font ‘Rubik’ so nice that I could give up ligrature for it
And I tried this tool
a better ligaturizer (shared by @greenmanspirit from discord) to ligaturize the font, but failed. However, it’s not a big deal XD
November 7, 2020, 10:34pm
Hi! Love the theme! Thanks so much for posting this.
I do have a quick question. I added Andy Mode and it works like a charm in conjunction with your theme, with only one catch.
If I have several panes open with Andy Mode and I’m typing not in the most left-ward pane, the dropdown menu for tag and page autocompletion gets shifted far to the right side. It’s still functional, but a bit of a hassle. Any way you can think of to fix this?
First of all, I am glad that you love this theme, and enjoy using it! Thanks!
Anyway, could you post an screenshot for me to take a clearer look at the problem? That would help me identify or debug the problem thanks.
it’s fixed in the new update of sliding panes plugin.
New update to Sliding Panes:
Update the link suggestion container position (thanks again, Eric Hall)
Add the option (and command palette command) to turn stacking off (i.e. slide-off mode, like the v1 of Andy’s Mode CSS)
Add the option (and command palette command) to make the rotated header titles face the other direction
Add a command palette command to toggle rotated headers
Allow pane resizing (except the last pane, because it doesn’t have a handle currently)
Fix an issue with switching to…
November 14, 2020, 8:00am
Another small thing: Bold LaTeX disappears in the preview
Alrighty, I will look into that one too in the next version. Thanks for reporting!
I love this font so much, but I am a bit confused on exactly how to customize the fonts/options. Sorry super new to CSS
Hi! New to Obsidian and discovered your Theme today. I noticed the rotated § when using a line. It would be rreally cool to use a
Fleuron ❦ instead of the simple §. Is this possible?
February 8, 2021, 3:44am
@WhiteHotaru: in the css of the theme find the code block that starts with:
Copy the whole code block (which is more than those few lines) into a new plaintext editor, and replace § with the fleuron.
Save that file as a css file in your snippets folder, and enable the snippet.
Incidentally, there are many css tweaks for newbies
Hey, I love this theme! I would like to change one thing though - I would like for the Editor to view to use a monospace font “B612 Mono Regular” instead of the Rubik font. I tried editing “–font-family-editor: ‘B612 Mono Regular’;” but the editor is still proportional.
Is there somewhere else in the .css file I need to edit?