Notation theme (dark and light - more customisable)

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

[flatline]

@death.au 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:

[kiriappeee]

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

[death.au]

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

[death.au]

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

[flatline]

Thanks @death.au and @kiriappeee! Hugely appreciate this. It might be worth raising a bug for the “readable line length” on the main forum if this issue is consistently reproducible in other themes.

I’ll update my daily notes to the new structure and will try squeezing in some further testing early next week.

[death.au]

I’ve made an update which has added some new features.
Firstly, I’ve added coloured blocks, which you can use via code blocks or html <div>s or <span>s

I’ve also styled tags, and made it easy to change the colour in CSS for your own custom tags with the same colours as the blocks above (or any other colours you wish), like this example for #important

/* 8.1. Tag custom colours */
/* As of Obsidian 0.9.0 there are custom classes for tags. 
 * this theme provides varibles of the form --background-<color> and --text-<color> for the following colours:
 * gray, brown, orange, yellow, green, blue, purple, pink, red
 * If you want your own colours for your own specific tags you can copy and utilize this: */
.cm-s-obsidian span.cm-hashtag.cm-tag-important,
.tag[href="#important"] {
  background-color: var(--background-red);
}

[thomas.neuburger]

Love this theme, but I’m stuck on one of the most basic instructions at GIT:

If you want to change your colours, just change the two hue values at the top of the file (--uno and --duo)

uno and duo are one-digit numbers. In the downloaded file, they read:

:root {
  /* change these hues for an entirely new look */
  --uno: 260;
  --duo: 28;

What are “260” and “28” wrt color values? All I want to do is change the two colors to get some of the other colors shown in the GIF:

I’d like to get some of the other pairs. What do I change these values to?

Thanks!

Thomas