Notation theme (dark and light - more customisable)

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

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.

Amazing, thank you for your work!

1 Like

@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


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.

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 !!! */

this is a great theme! 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%;
  background-color: (--background-secondary);

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 */
.cm-s-obsidian {
  color: var(--interactive-accent);

/* internal link */
.markdown-preview-view .internal-link, .popover.hover-popover .markdown-embed .internal-link,
.cm-s-obsidian {
  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 */
.cm-s-obsidian {
  color: var(--interactive-accent);

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

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)

1 Like


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. :grinning:

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


Thanks :slight_smile:

1 Like

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

1 Like

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

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.

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

1 Like I love this theme but found a bug. When creating especially wide notes (e.g. using larger tables) the theme prevents Obsidian from showing the edge at the edge of the note.

I’ve included a sample markdown table to demonstrate:
| Slot | Planned | Actual | Posture | Notes |
| ---------- | ---------- | ---------- | ---------- | ---------- |
| 09:00 AM | | | standing | |
| 09:15 AM | #OUR-team-meeting | #OUR-team-meeting | | integrating the interstitial diary format with GTD to understand planned v. actual use of time |
| 09:30 AM | ----------- | ----------- | | |
| 09:45 AM | | | | |

^ hopefully this will show up correctly in here.

If pasted into Obsidian, you’ll see that the text cuts off at the right (to be expected):

However, when I scroll all the way to the right, I can’t see the very end of my table:

^ in other words, the theme doesn’t let me edit / see the far end of my sentence.

The last screenshot shows the behaviour of vanilla obsidian in this context:

I’m seeing these with other themes as well. I’m starting to wonder if this is a bug introduced at an Obsidian level :thinking:

1 Like

The easiest way to check is to turn the custom CSS plugin off (and reload obsidian, just in case).
In this case, it looks like you can see the whole line with the default theme.
I imagine it’s some sort of quirk of CodeMirror.

Interestingly, if you turn “Readable line length” off in the settings, it’s not cut off, even when you do scroll.
I’ll keep poking around and see if I can find anything


@flatline, @kiriappeee - I’m still not 100% what the issue is, but I did find a fix for now:

.CodeMirror-scroll {
  margin-right: -10px;

This fix feels hacky to me. The default value there is -30px and I’m not sure why everything would be shifted over 20px (or 20px wider?). But hey, it works.

I’ve pushed the change to the Notation theme, so if you reapply the theme it should be good (or if you’ve got your own customisations you don’t want to lose, just copy-paste the above)