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

thanks for the appreciation of the theme.

I agree that Obsidian offers a more streamlined and ‘clean’ experience compared to TW, but I really love the filtering features of tiddlywiki, how you can make queries on specific fields and tags at the same time to organize your content into different modes. But the flexibility and too many features also make TW feel a bit bloated and not very intuitive.

David Gifford’s TW-based Stroll is impressive, but in my modest opinion Obsidian with the Andy Mode is better and much easier, user-friendly to use.

Nevertheless, overall it is probably possible to do more things with TW, if you have the HTML/JavaScript/CSS expertise.

Right now community themes is pulling the Obsdn-Dark-Rmx.png image, if you replace that it would automatically update. Or if you’d like to change it to another filename, just upload it and let me know.

I’ve updated the list to indicate your theme is compatible with light mode as well! :partying_face:

I don’t believe we have rules for that, I personally quote on person in each reply to avoid confusion. But you can do it however you want.

thanks for the update, I didn’t know you were pulling the image directly from GitHub. I’ve updated the image as you suggested.

Is it possible to have different preview images for light & dark ? (say use https://raw.githubusercontent.com/cannibalox/Obsdn-dark-rmx/master/Obsdn-Dark-Rmx_LIGHT.png for the light theme and https://raw.githubusercontent.com/cannibalox/Obsdn-dark-rmx/master/Obsdn-Dark-Rmx.png for Dark ?)
Maybe define some file naming convention for theme makers to have that functionnality ?

btw: thank you for the backlinks in Dynalist !

Thanks for the great theme, @_ph !

This feels like a dumb question, but I’ve tried to change the color of the code block text and can’t seem to do it. If someone could tell me what line the variable is on, I’d much appreciate it. Pretty sure I changed every color in the .css and couldn’t change it.

EDIT: ah, nevermind! I found a reference on here about appending a line of code to the bottom of the css file. Problem solved.

2020 08 07 New update . tested with obsidian 0.8.2


most notable changes :

  • 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)
    Obsidian_OQf6BAeptI
  • search pane : fixed selected icons color + better separation between search results (thin line)
3 Likes

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

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.

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)

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

1 Like

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

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

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

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… :stuck_out_tongue: )

2 Likes

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?

Hi Kevzen, thanks for reporting the issue. It’s right on time as I was updating the theme :slight_smile:
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.

1 Like

new update v20200826(compatible with Obsidian 0.8.8)

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)

6 Likes

Nice !

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!

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.

1 Like

Thanks