Obsidianite Theme — Version 2.0.0 (Oct 9, 2022)

Share & showcase
,
1

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 Obsidianite!

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!

Before using:

  • 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!

Special Tags:

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.

Latest Changes

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! :heart:

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!

New Diamonds :gem:

  • Removed all the old Cluster Free code (please move to live preview mode)

  • Added support for live preview mode [#44]

  • Supporting all the features that is there before for the live preview

Fixes

  • Problem with code block should no longer exist with live preview [#52]

  • Images now align to left, fixed issue with image having no spaces between list items [#50][#34]

  • Fixed issue with strange block that hides top of the page in edit mode with live preview [#47]

  • Fixed bullet point not visible in view mode [#45]

  • Fixed bullet lists in edit mode not compatible with different fonts [#32]

Download

image
image1920×1181 128 KB

26 Likes
3

Oh what?! Gradient headers? Wow. This theme is so cool

2 Likes
4

Thanks! I will keep adding magic to it. :blush:

5

@TriDiamond: have you seen @death.au’s recommendation for your gradient lines?

1 Like
6

@Klaas Yes I did, will be updating it with that recommendation in the next version.

1 Like
7

@TriDiamond: @death.au is unequalled in terms of CSS.

1 Like
8

@Klaas: I approve that. Totally agree. :clap:

1 Like
9

Two small feedbacks:

  • Bold wiki links like **[[test]]** in editor don’t display well.
  • Symbol combinations are no longer automatically converted to image symbols. For example, => won’t be converted to something like ⇨. I guess it’s because the font “Rubik” ?

:beers::beers::beers:

10

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:

:root {
  --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! :beers::beers::beers:

11

Thanks for the reply!

I found the font ‘Rubik’ so nice that I could give up ligrature for it :joy::joy::joy:

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

1 Like
12

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?

1 Like
13

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.

1 Like
14

Thanks! Here you go –

screenshot1
screenshot11914×728 168 KB

1 Like
15

it’s fixed in the new update of sliding panes plugin.

1 Like
16

Another small thing: Bold LaTeX disappears in the preview :dizzy_face:

1 Like
17

Alrighty, I will look into that one too in the next version. Thanks for reporting!

1 Like
18

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

19

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?

20

@WhiteHotaru: in the css of the theme find the code block that starts with:

.markdown-preview-view hr::after,
div:not(.CodeMirror-activeline)>.HyperMD-hr-bg::after {
  content: '§';

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 here.

1 Like
21

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?

Thank you.