#1

I recently stumble across a 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 having the feel of “Obsidian” power.

Hope you all note takers out there likes 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, haven’t being testing on Windows. If anyone bump 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 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 —— Nov 17, 2020

Version 1.1.1

Improvements :zap:

  • Taking the suggesting from the community, removing the clutter free editor mode’s headings h1, h2, h3, now just hide the # completely instead.

Fixes :wrench:

  • Fixed the clutter free editor mode for list that are not displaying correctly if spaces are added in front or at the back of the + sign.
  • Fixed the clutter free editor mode destroyed the display of numbers for ordered lists.

See all changes here!

Download

demo1
demo13730×2414 377 KB

demo2
demo23730×2414 332 KB

demo3
demo33730×2414 429 KB

23 Likes
Meta Post - CSS Themes Showcase
Best of 2020 Awards results
Meta Post - Common CSS Hacks
#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.