Theme: Obsdn-Dark-Rmx (now with Light & Dark) - updated 2020-09-11

_ph · June 20, 2020, 3:00pm

updated on 2020-09-11, see the changelog below

download

tested with Obsidian v0.8.8 - now in light + dark mode

important : press CTRL+R to refresh after switching from dark to light to avoid issues.

WHY IT EXISTS

This is a theme designed to style transclusions as **inline blocks / seamless paragraphs**. This should make it easier to work on master documents composed of multiple transcluded items.

It was designed as an answer to small issues I had with the base obsidian theme :

in base obsidian theme, transclusions disrupt the flow of the document, slowing down readability (long block have scrolling bars, the block have an outline that breaks the flow of the text)
the transcluded title is too big, it doesn’t work well with long titles

features :

better transclusions :
- more seamless inline transclusion
- transcluded items are fully displayed without scrollbars
- transclusions can still be identified by a thin quote line on the left border
- the transclusion icon is on the top left of each transcluded block, easier to reach
- smaller titles for transcluded items that act as links to the reference doc
NEW: popover previews tweaks :
- more contents is displayed in the popover previews
- removed the bottom gradient
tags pill styling + special colors for important/inprogress/complete tags
GUI :
- flattened + removed rounded corners
- aligned tabs / icons for a cleaner top header
- the active pane icon is now colored with the accent color instead of b&w (easier to see when you have multiple documents opened)
- NEW: file explorer pane in columns mode // this is experimental ! read post #53
- faster animations
- diplay margins in edit view
- indentation lines by Death_au 7
- dark status bar + accented stats
improved readability for backlinks pane
new color theme
fonts (should be installed separatelyon your system) :
- default font is now Barlow : https://fonts.google.com/specimen/Barlow?query=barlow and monospace is Fira Code : https://github.com/tonsky/FiraCode

you might also be interested in the companion scripts to enhance the transclusion/referencing workflow (it also has a webclipper + quick notepad):

changelog :

202009102355 / see post #63
202008260647 : see post #53
202008070050 : see post #43
202007102000 : see this post
20200630xxxx

fixed : location of the markdown-embed-link is now consistent between ![[file]]`` and ``![[file#section]]
tweaked margins of transclusions
transcluded file title should be sharper

20200622xxxx : fixed missing bracket, Andy mode works now.
20200621xxxx : disambiguation : removed internal links icon, fixed accent color for selected suggestions
20200620 : 1st public release

Klaas · June 21, 2020, 6:24am

Nice theme. I like the blue “house” colour; the unobtrusive link to parent of transcluded notes; the unobtrusive, thin line in the left margin to demarcate a transcluded notes; longer notes can be transcluded in their entirety (no extra scroll bar); the blue tag pillboxes; the connection lines of (indented) bullet points. The latter is nice to have, not essential because with indentation the bullet shape changes so it’s easy to see which bullet points are on the same level.

You obviously put a fair amount of thought into transclusions, which I find very good because I use them a lot for, among other things, my “story rivers”.

Points for improvement:

External links (= links to a website URL) show a little square with an arrow next to them. That square with arrow is the standard designation of an external website.
However, in your theme internal links (= links between notes) also show that little square with an arrow next to them. That is confusing. Internal links should not have anything next to them.
It might be useful to add

.suggestion-item.is-selected {
    background-color: var(--text-accent);

Text is not correctly aligned vertically with a checkbox.

_ph · June 21, 2020, 6:37pm

Thanks for the feedbacks! Glad you like the theme. I’ve updated the css on Github with your suggestions :

removed the styling for internal links
added the accented color for selected suggestion-item, good catch !

Regarding the checkboxes, I don’t really know what’s going on, mine look like this:
Obsidian_N3JQv8hKGy

Maybe you have another styling for checkboxes ?

Don’t hesitate to fork the repo and make your own improvements, I may not pursue work on this for a while asI’m considering switching back to using tiddlywiki, with Shiraz + Streams plugins, it’s giving me almost everything I need for my workflow.
After taking a look at the discord, it seems that your use case and mine share some similarities, I also rely on the “story river” concept inherited from TW. I like to have a visual history line to refer to.

Klaas · June 22, 2020, 4:18am

Many thanks for getting back to me.

I am surprised by our different text boxes because I took your css and did not change anything to it. Anyway, it’s no big deal.

I have made other changes, that is to say, I added some components from others, like e.g. Hulk. But again, nothing about check boxes.

I do have 1 other remark:

I downloaded your amended file and added the Andy mode to it, like I always do. Unfortunately, it does not work. I retried with again but to no avail. I then copied the raw code from the Github side, still no effect. Did you change anything that could affect Andy Mode?

I compared your latest code with the 1^st version that worked, and noticed you deleted

a.internal-link {
	font-size : 15px; /* PB changed it from 14px */
	background-position: center right;
    background-repeat: no-repeat;
	background-image: url("/public/images/fdc86034ba18de3558c8fa414a58f9e8.svg");
    background-size: 13px;
    padding-right: 16px;
    background-position-y: 4px;
    }

I deleted it on my copy that works well with the Any Mode, and found that Andy Mode still works and internal links no longer have that little arrow !!
So I am happy about that. Just thought I’d let you know.

I understand your thinking about TW. I used it for a few months, then decided the required HTML/JS/css knowledge is too much. Just after deciding to quit I found Obsidian, which for me fulfils things I liked about TW.

Another thing I was uncomfortable with was the 1 single HTML file - I prefer to have direct access to my individual notes.

Anyway, sorry to hear you’re leaving Obs. I like your theme. 1 day I’ll probably have to part with it when the development stage moves away from it, like we had with the 0.6.7 to 0.7 move.

_ph · June 22, 2020, 2:30pm

I fixed the file, you can redownload it from Github, there was a missing bracket… the auto-close brackets option wasn’t active on the laptop

Now it works with the Andy mode (it’s great btw, it actually creates a mini TW story river, thanks for getting me to finally install it).

I understand your thinking about TW. I used it for a few months, then decided the required HTML/JS/css knowledge is too much. Just after deciding to quit I found Obsidian, which for me fulfils things I liked about TW.

I really need dynalist-style outlining and more styling features than what obsidian currently offers. Also, TW has multi-levels inline transclusions which I find very handy, so for the time being, I’m sticking with TiddlyWiki.

Another thing I was uncomfortable with was the 1 single HTML file - I prefer to have direct access to my individual notes

You can also get individual notes in plain text with the nodeJS TW version, if you want more details regarding my TW setup you can PM me, I don’t want to derail the obsdian forums

Anyway, sorry to hear you’re leaving Obs. I like your theme. 1 day I’ll probably have to part with it when the development stage moves away from it, like we had with the 0.6.7 to 0.7 move.

I’m not leaving Obsidian, I’m just not using it as my primary pkm/2nd brain for now, so I will probably spend more time customizing TW than Obsdn.
I will try to update the theme once it breaks, I’m still curious to know how Obsidian will evolve (hopefully it will become my main pkm in the future).
If you use the them and fix errors or add more features to it, please post hem here or via github.

s-kyy · June 23, 2020, 1:25am

Hello! The transclusions work well for embeds pointing to a note, but the note title does not appear if I point the embed to a header

Create 2 notes A and B. B should have a header of any size Header
In note A write: ![[B#Header]]
Switch to Preview mode.

Expected result

B
Header
<contents of page>

Actual Result

[empty space]
Header
<contents of page>

Using Windows with Obsidian v0.7.3

Klaas · June 23, 2020, 2:59am

Yes, transclusions work well on a Mac too. But what does not work is 2^nd level transclusions and beyond.

So, if note A is transcluded in note B, then a transclusion of note B into note C will not also show note A’s text, it will only show note B.

I put in a feature request for multi-level, but there is not much interest, so I guess it won’t be implemented.

_ph · June 23, 2020, 3:50am

Hi s-kyy,

thanks for trying out the theme !

I may be wrong (if you know a theme where it works, I may steal the code), but I think it’s a “feature” of Obsidian, the styling of my theme just emphasizes this behavior :

. if the transclusion is a full doc, then it displays the name of the file as a header
. if the transclusion refers to a section/heading only, then it displays the section name as the header

In both cases, you can access the original link by clicking on the small link icon. (in my theme you get the benefit of having a full link for the title when it’s a doc + icon link on the side).

In the image below, I’ve used the default obsidian theme where I’ve transcluded the same doc named ‘Transclusion tester’, the first time as ![[Transclusion tester]], then as ![[Transclusion tester#1990's]]. it’s also ‘missing’ the name of the original file, it only shows the section heading, but since the styling is identical in both cases, it’s not so jarring (even though, I think it could be handled better from the start) :

For my workflow, the current Obsidian behavior was actually not optimal, as I needed to see the transclusions as seamless chapters or inline text blocks (but with subtle hints at their instantiated nature) :

I mostly use a small ahk script to create snippets of texts (crude block referencing) by copy/pasting from longer docs, and create meta-docs made of transclusions, that look like small chapters with their own headings (so I basically never use ![[transclusion#sections]], only transclusions from smaller files).

In order to make the styling work for this specific use, I may have introduced some side-effects and errors, which I may try to fix them unless they are out of the scope of my personnal workflow but I won’t be able to fix everything (sorry ), but you are very welcome to strip the theme apart and improve or rebuilt it.

That being said, I think the behavior you describe could be a legit request to the obsidian devs to include a textual link in all transclusions cases. It would require some thinking about styling and disambiguation though.

anyway, sorry for the wall of text and thanks again for trying out the theme. cheers.

Klaas · June 23, 2020, 9:44am

I think that is not quite true. Transclusions always show the note header, unless that is suppressed with something like

/* Hide the title of the embeds */
.markdown-embed-title {
  display: none;

I personally am very happy that when I transclude a header block, the note title is not shown. I looked through your css but could not discover how you did it - I have no css experience, je suis un null en css.

_ph · June 23, 2020, 5:59pm

well, sorry if I was wrong, I must say I’m lost here… I’ve tried to delete my css and do a test with the base obsidian theme, but still I can’t see the expected result where ![[B#Header]] outputs

B
Header
<contents of page>

I only get

Header
<contents of page>

as seen in the screenshot above.
Can you please upload a pic so I can see how it should look ?

s-kyy · June 23, 2020, 7:50pm

That’s true, my bad. I tried playing around with it to accommodate the ![[note#header]] style of embedding, but once I embed with this ![[note]] it breaks the look (too much spacing).

Thanks for looking into it, though!

jellishero · June 27, 2020, 2:15pm

This is, oddly enough, something I’ve wanted for my vault hahaha.

I use the same titles for both file and in editor so it works for my usage.

For the sake of understanding why its like this I’m curious as well as to how code leads to the missing file title in the transclusions.

_ph · June 28, 2020, 3:35am

Do you mean that usually, you always get the file title in transclusions in obsidian, even when you only transclude a section/heading ?

Maybe my obsidian is broken, but that’s not how mines behave : I get different results depending on what is being transcluded (full document=title is the filename, heading/block=I don’t see the file title, only the heading).

Afaik, I didn’t tweak the underlying behavior, I just modified its look : with the default theme, a transclusion’s file name and heading look more similar, whereas in my theme, they look more different : file name is smaller and a heading is … a heading.

actually I found the “default” behavior to be a bit inconsistent and weird, but I don’t really mind it now (I’ve switched to tiddlywiki since then).
I hope transclusions get a big overhaul in the next obsidian versions, in the current state, it doesn’t really fit my workflow.

jellishero · June 28, 2020, 4:06am

Yep I normally see it and its so annoying because its about as big as my header font, but now I feel like I can use transclusions.

BTW, I copied the transclusion code to one of my custom themes and found the file title but in very small font, which was also very useful, because its not so big that it was in the way. Thanks.

_ph · June 28, 2020, 9:53pm

glad you like the tweaks to the transclusions.
I also find it more useful and more pleasing to the eye this way.

Now I’m puzzled when you say:

You mean you ALWAYS see the file title ? in my case I can NOT see the file title when I transclude a section, it’s only displayed when I fully transclude a document. see example below (with the default obsidian theme).

if you have 2 minutes to spare could you test the 2 files 202002-VSP.zip (592 Bytes) and post a screenshot for me please ?

jellishero · June 28, 2020, 11:50pm

Oh no not always in the sense in every instance of transclusion, I mean for some notes I include the whole page, but my file title is big and annoying when I’m not trying to see all of that.

It becomes particularly problematic for atomic notes that I may have.

I could just make some compromises with the title, but in the case I end up changing them, I don’t want my note to rely on that as an identifier in transclusions.

_ph · June 30, 2020, 12:34am

aah, now I understand better, thanks for the screenshots !

I has the same issue as you, hence the css tweaks included in my theme to make the title to look more like a reference link rather than a heading.
It’s also possible to hide the title completely :

.markdown-embed-title { 
    display : none
    }

but it might break the alignement of the elements depending on your custom theme.

Since obsidian will reflect the modification internally, it shouldn’t be a problem though ? I did a bunch of renaming from xx_yyyyMMddhhssMsec to actual titles and never had issues with lost links so far.

_ph · June 30, 2020, 12:57am

I’ve pushed a small update to the css on 2020-06-30 :

fixed : location of the markdown-embed-link is now consistent when using ![[file]] and ![[file#section]]
tweaked margins of transclusions, more compact
transcluded file title should be sharper

(new version on the left side, previous on the right)

in the previous version, when using ![[file#section]], the red link icon ended up being too high and there were small inconsistencies in element spacing. This should be fixed with the latest version : now the red icon is aligned with the text block.
the spacing between blocks has been reduced to enforce consistency.
The transcluded file title (the small blue link) should look sharper.

It should work well if you are using inline transclusions a lot.

You can grab it on Github.

Don’t forget to backup your custom tweaks before replacing the obsidian.css !!

Klaas · June 30, 2020, 6:19am

Thanks for that. 1 observation:

if I am not mistaken you had included the Andy Mode in the previous version, not in this one.

randulfr · June 30, 2020, 11:18am

@_ph Thanks for this theme and your work on it

[Off-topic]

To address this:

…do you by chance have any thoughts on this post/question about how to make css more modular?