Notation theme (dark and light - more customisable)

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

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

2 Likes

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

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.

1 Like

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);
}
4 Likes

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