Notation theme (dark and light - more customisable)

[death.au]

It still needs a bit of work, but the bones are there. Let me know if you have any ideas on things that should be changed.

deathau/Notation-for-Obsidian

(yeah, I used @kard32’s split light/dark screenshot idea)

Update: Customisations!

I revamped all the colours with my learnings from my Base2Tone theme. By default, you shouldn’t notice much of a difference (if you do, and it’s too noticeable, let me know).

However, right near the top of the CSS file, there are hue and saturation values you can play with that will recolour the whole interface.

I’ve also made it simple to change the lightness values (variables L0-L3) and/or text-colour for light and dark themes separately.

Finally, if you want to use this theme with AndyV2 (or just don’t like the look of the in-body-style header and want the Obsidian-style headers back) just delete everything below the comment:
/* !!! Remove from here down if you want to use with Andy Matuschak mode V2 !!! */

[death.au]

Please note, this theme is incompatible with Andy Matuschak mode - V2 (I know a lot of people like that mode).
It should work fine with the older Andy Matuschak mode though

[bolle]

Looking good but please have a look at the graph-view of the dark version. The font color is way too dark in front of the background.

[death.au]

Yep. I’ve neglected the graph view in this version, sorry about that! I will fix it up for the next version

[XMach]

Will this be updated to be compatible or will there be a new revision? Theme looks fantastic and this would round it off well

[death.au]

It might take me a few days to get around to it, but I will fix it up in the GitHub repo.

The community theme picker in Obsidian will get the latest version from GitHub, so once I do fix things, I think all you have to do is select the theme again in the picker.

[XMach]

Amazing, thank you for your work!

[death.au]

@XMach, @bolle, etc… I’ve fixed up the graph view and folding issues that were happening with this theme - reapplying from the settings should be enough to get you the latest version

[death.au]

FYI I’ve renamed this theme to “Notation”, just to prevent any possible bad blood with Notion people. Not that I expect any trouble, but it’s better to be safe than sorry.

[death.au]

Colour Revamp!

I revamped all the colours with my learnings from my Base2Tone theme. By default, you shouldn’t notice much of a difference (if you do, and it’s too noticeable, let me know).

However, right near the top of the CSS file, there are hue and saturation values you can play with that will recolour the whole interface.

I’ve also made it simple to change the lightness values (variables L0-L3) and/or text-colour for light and dark themes separately.

Finally, if you want to use this theme with AndyV2 (or just don’t like the look of the in-body-style header and want the Obsidian-style headers back) just delete everything below the comment:
/* !!! Remove from here down if you want to use with Andy Matuschak mode V2 !!! */

[tobyshorin]

this is a great theme death.au! I made a few improvements to the dark mode ui, you can see here:

In dark mode interfaces, a standard pattern is to have the lightest background be “closest” to the user (i.e. the main area the user reads or works with), with the darkest background “furthest away” (the area most peripheral to the main workspace).

.theme-dark {
  --L0: 0%;
  --L1: 20%;
  --L2: 16%;
  --L3: 12%;

.side-dock{
  background-color: (--background-secondary);
}

[death.au]

Thanks @tobyshorin! I’m happy to see people making use of the customisation features!

The defaults in this theme attempt to copy Notion closely, and they don’t seem to follow that pattern, but I tried to make it easy for you to make it your own.

Here’s mine at the moment:

body.theme-dark {
  --hue: 231;
  --sat: 8%;
  --interactive-accent-rgb: 127, 109, 209;
  /* --L1: 35%;
  --L2: 40%;
  --L3: 45%; */
}

/* tag */
a.tag,
.cm-s-obsidian span.cm-hashtag {
  color: var(--interactive-accent);
}

/* internal link */
.markdown-preview-view .internal-link, .popover.hover-popover .markdown-embed .internal-link,
.cm-s-obsidian span.cm-hmd-internal-link {
  color: var(--interactive-accent);
  border-bottom-color: var(--interactive-accent);
}

/* interal link nifty arrow */
.internal-link::before, .markdown-embed-link::before {
  background-color: var(--interactive-accent);
}

/* external link text */
.external-link,
.cm-s-obsidian span.cm-link {
  color: var(--interactive-accent);
}

/* external link url (editor) */
.cm-s-obsidian span.cm-url {
  color: var(--interactive-accent);
}

[death.au]

I’ve just pushed an update which fixes some issues that were happening with 0.7+
I’ve also removed the code which added the margins to the left and right, because Obsidian supports this out of the box now (and you can toggle it on or off in the settings)

[apppsntips]

Hey,

Thanks for making this theme. I tried all the themes and this is the one that hit home for me.

There’s just a tiny problem that I want to solve. When linking to a header in note, in the preview mode, the text overlaps with the line. (see picture).

If you get time, please update the theme to solve this problem or just comment here with the change.

Thanks again for this awesome theme.

[death.au]

@apppsntips Sorry that it’s taken a while to get around to this, but I’ve just fixed that issue. It should look the same now, no matter if you’re embedding an entire page, or just one header). To update, just apply it again from the community themes.

[apppsntips]

Thanks

[kiriappeee]

Enabled this on my Obsidian instance today. Just wanted to say thank you as a person migrating from Notion to Obsidian. This is making it significantly easier for my brain to process information the way I’m used to seeing it. I made a few edits to the titles to make them a bit smaller and to have some separation using a small border. Outside of that I’m super happy with how it feels

[death.au]

Thanks! I’m glad you like it!

Just out of curiosity - obviously you made those changes because you like them better, but was that also to make it more Notion-like? Or are your changes a departure from Notion?

I ask because I’m trying to keep this as Notion-like as possible and wondering if I should make some changes

[kiriappeee]

Made the changes for readability. There are some things in Notion that took a little more space than needed in Obsidian. Most notably, The size of titles

This is the default theme (without scrolling)

This is with the change applied

I don’t have the greatest design sense, so these are very personal (the borders vanish when the panes have not been divided.

There was also some indentation looks that I felt could be changed.

Without changes:

With changes

Again, all very personal choices. I tend to like more compact information sometimes I guess.

[death.au]

Thanks for the reply.
Yeah, Notion’s very big on space, and I definitely see the benefits of making it more compact.

Now that you point it out, the bullet indentation is overly large (even compared to Notion), so this is something I might take a look at. Thanks.

(Edit: I’ve made some fixes to the bullet indentation as well as the size of checkboxes to better align them with how Notion looks.)