Theme: obsidian-pisum (Dark)

This is my first trial to make my own theme aiming to a clean writing environment. Only the dark mode is available.

Again, there is a pseudo-focus mode if you only open one note. It also looks very clean and quiet when I only work with two notes. The trick is removing all the scrollbar.

Hope you enjoy!

update: 2020-06-14

  • A new color scheme inspired by obsidian_gruvbox and Qiita.
  • Only dark mode is available, but I set the light mode to be an Andy_Matuschak mode which must be a credit to death_au 's brilliant solution.
  • Scrollbar is put back considering the user using PC or Linux.
  • The css file is a bit big with detailed comments that are inspired by @Reggie 's Hulk theme.


7 Likes

Pisum is ready now for 0.7.1 insider version. Have a try :thinking:

A further update: I set the light mode to Andy mode according to brilliant solution by @death.au .

1 Like

Extending color-scheme from header-hierarchy to indentation-hierarchy:
Tip: each guide (= vertical line) could have different color, from rainbow palette, just like headers do.
Making it easy to visually distinguish indentation level.

Edit:

  • Colored indentation guides are requested also in Vertical lines for indents

  • Would it be possible to display “indentation guides” also in edit mode?

Don’t find a good solution yet. It will display differently if different tags - or * are used.

Hi, I’ve tried a lot of other themes but this and traffic signals seem to have become my favourites. I love the title bar from that theme but the overall colours seem much better in this one.

I see that you needed a solution for having the vertical lines in editor mode for lists, right now it only shows up in the preview. So I managed to fix that using the code below, perhaps you want to add it to the theme too!

.cm-hmd-list-indent-1::before, 
.cm-hmd-list-indent-2::before{
    content: ' ';
    border-left: 1px solid var(--border-color);
    position: absolute;
    height: 100%;
}
1 Like

Nice!

Same here, that is why I blended the two a bit:

My favorite right now, by far.

2 Likes

Thank you for the suggestion. I didn’t set the vertical lines in editor mode because all the solution I can find including yours is far from perfect. I am looking forward to a better one.

Could you point out what’s the issue with the code? I haven’t gotten to testing it a great deal as I don’t have many notes with lists many levels deep. Does it break something I’m not aware of?

.cm-hmd-list-indent .cm-tab::before{
    content: ' ';
    border-left: 1px solid var(--border-color);
    position: absolute;
    height: 100%;
}

which gives:

You can see it works for - but not for *

Oh I see. So mine only works one level down and yours works only for -. I’ll snatch that since I prefer using a hyphen anyways. Thanks for pointing the error!

windows7, Obsidian v0.7.6, obsidian-pisum, both dark and light mode.
Number sign “#” in obsidian-pisum before title has incorrect font size since Obsidian v0.7.6.
image
Without custom CSS, “#” displays correctly.
Edit: thank you for the clarification.

It is my setting making it small. Sorry for that. You can recover it by removing the following setting in the css:

/* Changing size/color of the header hashtags ## */
.cm-formatting-header {
  font-size: 0.6em !important;
}
1 Like

Observed issue: indented code block does not display it’s indentation in edit mode. Picture in edit mode, rendered (preview) mode, and in third party text editor:


Indentation disappears in both light and dark mode but is preserved when Custom CSS is off.
source text for reproducing:

- a
	- b
		- example: 
			```
			⚑ID.
			- q: ![[ID.q]]
			- a: ![[ID.a]]
			```
		- c
		

Edit: I solved this by commenting out padding: 1px !important; in:

/***************************************/
/*       Code block in Editor          */
/***************************************/
 /* Editor CodeBlock TEXT Appearance */
.cm-s-obsidian pre.HyperMD-codeblock {
  font-family: monaco !important;
  font-size: var(--font-size-code) !important;
  // padding: 1px !important; 
  display: block;
  color: var(--code-block) !important;
  font-weight: 500;
}

I tested issue with asterisks in Obsidian v0.9.15.
Indentation guides now render the same for hyphens and asterisks so it could now be included into this theme.


CSS used in screenshot:

/***************************************/
/*    at a rule line before ul list    */
/***************************************/

ul ul { position: relative; }
ul ul::before {
  content:'';
  border-left: 1px solid var(--border-color);
  position: absolute;
}
ul ul::before { left: -1em; top: 0; bottom: 0; }

/* rule line when there are checkboxes*/
ul .task-list-item ul::before {left: 0.15em !important}

/* indentation guides in edit mode */  /* enabled 2020-09-15 */
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
  content:'';
  border-left: 1px solid var(--border-color);
  position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0.5em; top: -5px; bottom: -4px; }
ul ul::before { left: -1em; top: 0; bottom: 0; }

Alternative code for indentation guides in edit mode: Vertical lines for indents
Issue with indentation by spaces is logged in Editor: inconsistent code with tabs vs spaces

1 Like

Andy Matuschak mode is now available as “Sliding panes” plugin so this theme could utilize it instead of corresponding CSS code.
Optionally, light mode can now be created to complement existing dark mode.