Theme: obsidian-pisum (Dark)

MooddooM · June 9, 2020, 11:50pm

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.

MooddooM · June 12, 2020, 1:03pm

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

MooddooM · June 12, 2020, 4:17pm

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

malecjan · June 18, 2020, 11:35pm

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?~~
- Solved in post #15 ↓

MooddooM · June 20, 2020, 8:22pm

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

Rishi · June 26, 2020, 3:00pm

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%;
}

bernardo_v · June 27, 2020, 6:26pm

Nice!

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

My favorite right now, by far.

MooddooM · June 28, 2020, 7:57pm

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.

Rishi · June 29, 2020, 7:13am

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?

MooddooM · June 29, 2020, 3:03pm

Using above style, it gives:

Screenshot 2020-06-29 at 15.50.12316×1308 38.8 KB
Then I change it slightly

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

Rishi · June 29, 2020, 4:23pm

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!

malecjan · July 11, 2020, 9:45pm

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.

Without custom CSS, “#” displays correctly.
Edit: thank you for the clarification.

MooddooM · July 13, 2020, 10:53pm

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;
}

malecjan · August 25, 2020, 7:09pm

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;
}

malecjan · November 22, 2020, 1:14pm

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

malecjan · November 22, 2020, 1:15pm

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.

Deinos · April 19, 2021, 3:44pm

@MooddooM

I love Pisum – thanks so much for making it available.

I do wonder if you can help with the following issue. In the screenshot below, you can see that using emojis breaks the CSS. It seems to add an arbitrary newline or carriage return in the preview mode. This does not happen when I use the standard theme for Obsidian. Is there anything that can be done to address this?

Thanks again,
Jack

Deinos · April 22, 2021, 11:55am

Replying to myself… Found the issue.

I had installed the emoji toolbar plugin a while back. According to @pjeby over in Discord, “It’s emoji toolbar, yeah? If Twitter Emoji is turned on, it replaces emojis with HTML.” To fix the issue, they suggest: “You might not need to disable it entirely, just turning off its Twitter Emoji feature.”

This solved my issue.

Kullenej · May 27, 2021, 11:10am

I wonder if anyone can help me here with some CSS editing. I really really love this theme, but I also really want to remove the active line color. I attach a picture to make sure that you know what I’m talking about (No expert on CSS whatsoever)

Rishi · May 27, 2021, 11:25am

You can use this CSS snippet,

.CodeMirror-activeline .CodeMirror-linebackground {
    background-color: transparent !important;
}