Theme: Obsdn-Dark-Rmx (now with Light & Dark) - updated 2020-09-11

[_ph]

2020 08 07 New update . tested with obsidian 0.8.2

most notable changes :

• default font is now Barlow : https://fonts.google.com/specimen/Barlow?query=barlow
  and monospace is Fira Code : https://github.com/tonsky/FiraCode
• links popup preview is bigger and let us see more content (see below : before/after, that’s the same content in the popup)

• edit pane : line numbers are faintly accented
• file explorer : more compact and long filenames wrap instead of overflowing
• file explorer : the name of the vault is now bold, easier to distinguish from the folders
• tag pane : more compact, tweaked some alignments
• the active pane icon is now colored with the accent color instead of b&w (easier to see when you have multiple documents opened)
  
• search pane : fixed selected icons color + better separation between search results (thin line)
  
  

[Klaas]

Another great improvement and jump forward. Many thanks for that.

I have a question about the CSS. In Preview mode, when there is an indication of a footnote, the is a small number in superscript in the main body text like so, e.g. text¹

When one clicks on it, one is taken down to the relevant footnote at the bottom of the page. At the end of the footnote at the bottom of the page there is a small return arrow, clicking on which takes you back to the relevant section in the main body text.

What that return click also does is, when one gets back to the main body text, the original superscript notes briefly lights up for 1-2 secs. At the mo that “lighting up” is in white. I would like it to be be in a more noticeable colour (e.g. red or purple).

I tried to find which part of the CSS code I need to adjust to achieve that, but could not find it. Please advise.

[_ph]

hmm, you’re right… on the dark theme, the footnote accent is a bit too subtle (it’s ok on the light theme though).

To avoid issues when switching between light and dark modes, I think it’s better to introduce a new variable for the text color of search results, so I’ve just pushed a small update on Github for that (v202008071640) : https://github.com/cannibalox/Obsdn-dark-rmx/releases/tag/v202008071640

it looks like this:

if you want to tweak it yourself, add :

/* =========== footnotes ========= */
.markdown-preview-view .mod-highlighted {
    color: #0cf32b;  /* <---- pick your color  
}

.footnotes-list {
    font-size: 12px /* I like smaller footnotes */
}

(make sure the color works for both light & dark modes, or just grab the latest version on github)

[_ph]

I forgot that there is now a section for Mermaid graphs at the end of the css…It’s mostly WIP. It looks ok-ish for both light & dark mode (I had issues with mermaid & dark mode previously) BUT it will probably override any inline style (I’ve put !important tags everywhere as a quick hack). I plan to improve that later on, with specific colors for mermaid (currently, it’s using the theme colors)

so if you don’t style your mermaid inline, you’re fine, otherwise, you may consider to delete everything under the mermaid section of the css ( it has a big mermaid ascii art to mark its beginning).

without the mermaid css:

with the mermaid css:

Dark without the mermaid css (= standard obsidian):

Dark with the mermaid css (not very nice but slightly better though):

[Klaas]

That, sir, is exactly what I was after. Many thanks, also for putting the code snippet here.

[y.h]

Thank you for putting this all together!

Here are some snippets I added, seen elsewhere in the forum.

Tags in editor: Meta Post - Common CSS Hacks

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
content: '#';
}

.tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
  background-color: var(--text-accent);
  border: none;
  color: white !important;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none !important;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

And a nicer blockquote, slightly modified version of this : Meta Post - Common CSS Hacks

/* Add quotation character before quote */
blockquote:before {
    font: 14px/20px italic Times, serif;
    content: "“";
    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -0.4em;
  }
  blockquote p { display: block; 
    padding-inline-start: 2em;
    position: relative;
    top:-1em}
  /* Remove blockquote left margin */
blockquote {
    margin-inline-start: 0;
  }

[Klaas]

@y.h: I love this theme too. Thanks for providing the quotation snippet.

[_ph]

Thanks for trying the theme and for the snippets !
I might add the quotation mod in the next release… usually I 'd rather not embed extra snippets thought
I think it’s easy enough to manually add them (see Getting comfortable with Obsidian CSS or Mixing and Matching CSS Snippets with SASS) and it’s less time consuming for me (I don’t have to check for snippets updates myself and in case they are updated, I don’t have to release a new version of the theme… )

[Kevzen]

This is the best theme I have found here. Thank you!

I especially like the bigger popup preview. One small issue I have with it is that the text in the popup note is not very sharp and missing some contrast (especially in light mode).

Am I the only one having this issue?
I am not that familiar with CSS but maybe I could tweak that myself somehow?

[_ph]

Hi Kevzen, thanks for reporting the issue. It’s right on time as I was updating the theme
I’ve tried to add small tweaks to the popover in hope to make the text more readable, but it will never be as crisp as the normal fonts, since it’s a scaled down zoom effect. the easiest way to fix, is to make the zoom a bit bigger and to add a thiny outline/stroke on the text.

[_ph]

new update v20200826(compatible with Obsidian 0.8.8)

Releases · cannibalox/Obsdn-dark-rmx

changelog

• new feature: file explorer column view (disable it by removing lines [870-874])
• new feature: added faint margin lines to delimit the writing space in the Edit view
• fix : adjusted the footnotes to get consistent line heights
• new: the default Editing font is now monospaced (install Fira Code to match the demo) - you can comment out lines [9-12] to revert the modification
• popover preview : changed zoom x0.8 > x0.85 and added a thin stroke on the text to improve readability
• popover preview : removed the bottom gradient
• preview mode : text is now justified except in code blocks
• styled the quote blocks as alert boxes, academic block quotes should be inserted using <blockquote style="rq">...</blockquote>
• added class “rq” for academic quote blocks with quotes
• reduce the max-width of embedded media (search for /* reduce size of embedded files */ to remove it), all images will be smaller
• modified the bullets (disc then circles for all sub lists, no squares)
• modified some borders and alignements for v0.8.8
• cleaned up some errors in the mermaid section

demos :

file explorer pane column mode (experimental and somewhat buggy but I find it useful)

the file list may jump/flicker when scrolling, resize the pane to fix the issue. you can disable the modification by removing/commenting out lines 870-874

new quote blocks

new default edit view with monospace font & margins

tweaked the popover preview (changed scale + added a thin stroke to improve readability)

[Klaas]

Nice !

[ajstont]

This is awesome, by far my favorite theme. Will it automatically update if iv’e added it through the Obsidian interface, or do I need to go to GitHub to get the latest?

Many thanks, great work!

[Silver]

You’ll need to add it through community themes again (click on “Use”). Should be easier than manually doing it via GitHub. There’s a search bar in community theme interface.

[ajstont]

Thanks

[Kevzen]

Awesome! Really great work. The popover looks super nice now!

[aja2488]

Love the theme! For those using SASS to update the theme with other snippets, there is an extra */ on line 596 that needs to be removed prior to running the update command:

Edit: Fixed if you pull latest build (thanks!)

  border-top: 1px solid var(--background-modifier-border);*/

[y.h]

Thanks for the update!

I’m having a bug with the pop-up : it’s not positioned correctly.
I’m using Andy mode, but with the previous theme’s version, it worked perfectly.

edit: it’s also possible that I hadn’t noticed this bug before

[_ph]

thanks for the feedbacks ! I’m glad it’s of use for someone besides of me.

@aja2488 nice catch ! thank you, I’ve updated the repo.

@y.h yup, I can reproduce it, it seems there is an offset of the popover preview depending on the x position of the document… unfortunately, it seems to be coming from the Andy mod (same behavior with other themes I’ve tried). Maybe you could drop a note to @death.au ?

[death.au]

Yeah, that’s a bug with Andy’s Mode. It’s been reported here previously: https://forum.obsidian.md/t/andy-matuschak-mode-v2-7-updated-for-0-7-new-panes/170/3?u=death.au And unfortunately not something I’ve been able to fix with CSS.