CSS theme - Ohmine Dark Theme v3

Thankd both of you for the answer. Yeah, that seems logic. I forgott about the colapsing part. I may have to stuck with that as it is. It would be only a nice to have (As I had it on Evernote in the last legacy Programm). So, comes new software comes new habits :slight_smile:

Cheers
Urs

1 Like

OhmineDT-v3.0.0 updates ( 22-FEB-2022 tested on Joplin v2.6.10)

Github Repo

Export PDF Sample: export_pdf_v3.0.0 (22-FEB-2022)

Export HTML Sample: export_html_v3.0.0 (22-FEB-2022)

  • Render Viewer:
    • New: add new custom element: Key Point
      • New: Art Gallery is now supporting up to 12 columns
    • New: new horizontal line style
    • New: new heading border style
    • New: new codeblock style
    • New: new style for Spoiler plugin: spoiler block > span
    • New: new style for search text
    • Fix: Markdown TOC- list token colors wrong
  • Markdown Editor:
    • New: new style for all special text
    • New: new style for Markdown Table Colorize plugin
    • Fix: Abstract Content Bar- text in square brackets is considered a link
  • Rich Text Editor:
    • Fix: Rich Text Editor- the top toolbar style is broken
  • Print & Export
    • New: abbreviation text description will be appear next to the abbreviation
    • Fix: some CSS effects missing when export notes to html
  • Joplin UI:
    • New: you can now using [shift] + [Mouse wheel] to scroll for check out the overflow text on notebook panel and notelist panel
    • New: notebook panel is now supporting up to 15 levels of subdirectories
    • New: new style for notelist panel
    • New: new style for editor top toolbar
    • New: new style for editor bottom tag bar
    • New: new style for option page
    • New: new style for button hover effect
    • New: new sync button style in notebook panel
  • Source Code:
    • Change: rewrite all CSS codes
    • Change: Footnote Reference Number- moved to the monospace font group
    • Change: inline code is now moved to the special text group
    • Change: eye-protector is separated into two switchers "Mermaid Charts" and "Images" - You can now turn off only one of them
    • Change: Print / Export PDF- restyle all elements
    • New: add new switcher to show/hide border line of all headings
    • New: add new switcher to show/hide the bracket of the link
    • New: add new switcher to turn on/off the notebook item overflow limit
    • New: add new switcher to turn on/off the justify effect of paragraph / list / footnote content
    • New: add new switcher to turn on/off the small-caps effect on h1 heading
    • New: add new switcher to turn on/off the max height limit of code block - default: 60% viewport height
2 Likes

Thanks for your great theme. I just installed v3.0, but I notice one undesirable change.
Screenshot_1

  1. What are those lines above "All notes" for?
  2. How can I get rid of them?

Hi! I don't have this problem but I'm checking on it, can you tell me more details? Did you made any change to the source code?


Ok, I think it might related to this line of code:

--switcher-jui-all-note-button-display: flex; /* SHOW: "flex;" | HIDE: "none;" | the top left all notes button */

The default value is flex;. If you want to hide it then set it to "none;" please don't forget the semicolon at the end of the value and double check the spelling. This problem can be recreate while the value is wrong or empty.

For reference: userchrome.css > line 37

No luck yet. I've changed it to be none as follows
--switcher-jui-all-note-button-display: none; /* SHOW: β€œflex;” | HIDE: "none;" | the top left all notes button */

But there's no change after restarting Joplin.

I haven't made any changes to the source code. I've been using the Ohmine Dark Theme without any issues until now. I'm using Joplin 2.6.10 in Windows 11.

Would you mind to copy all the source code from your userchrome.css and paste it here? Let me test it for you.


Or, you can check this line of code:

/* notebook panel: hiding the "All Notes" button ----------- */
.all-notes {
  display: var(--switcher-jui-all-note-button-display) !important;
}

userchrome.css > line 973 to 976

Please make sure it's exactly the same to your userchrome.css, if there is any misspelling would cause the Switcher doesn't work and the format broken.

If it still does not work for you, you better provide me with all the source code within your userchrome.css

userchrome.css (53.2 KB)
I've attached it because it was too big to paste.

Lines 973 to 976 were the same as what you posted, so the issue persists.

Ok, it's finally fixed. Just two problems inside your userchrome.css:

  1. line 31: the comment code is broken and affects other source code. CSS comments should be always stay within the /* and */, if losing one of them, it will cause problem.

problem:

--switcher-mde-h1-font-variant: "small-caps;" | OFF: "none;" | */

Fix:

--switcher-mde-h1-font-variant: small-caps; /* ON: "small-caps;" | OFF: "none;" | */
  1. line 41: There is an unexpected letter "j", and it may also affect other source code. Just delete that "j"

I've fixed it for you, but I don't know why I can't upload the file here. So, you may need to fix it yourself.

1 Like

Thanks. It's working now.

But I did have to change one other thing to get it to be how I like it.

After I fixed line 31 and 41 the way you suggested, I ended up losing the "All notes" choice altogether--which is not what I wanted.

So I changed the switcher-jui-all-note-button-display: value from none to flex.

Now, it looks perfect without those two unnecessary "blank" lines:

Thanks for all your help. Much appreciated.

Screenshot_2

1 Like

Well done! Thank you for supporting OhmineDT! Hope that you enjoy using the new custom elements Key Point too!

I just read the explanation for Key Point. Indeed, I think I'll find it useful for my workflow/writing process. Stick Notes looks useful, too. Thanks!

1 Like

OhmineDT-v3.0.10 updates ( 23-FEB-2022 tested on Joplin v2.6.10)

  • Render Viewer:
    • Fix: wrong brightness value of eye-protector
    • Fix: wrong size of h1 > span
    • Fix: inline code styles missing
  • Markdown Editor:
    • New: change the caret color to red when using Mardown Table Colorize to create table
  • Joplin UI:
    • Fix: notebook panel items margin gap
    • Fix: notelist panel items margin gap
    • Fix: "all notes" button selected status color
  • Source Code:
    • New: add --math-notation-font-size to root section
    • New: add --inline-code-text-shadow to root section
    • New: add --export-html-background-color to root section

OhmineDT-v3.1.28 updates ( 26-FEB-2022 tested on Joplin v2.7.13)

Export PDF Sample: export_pdf_v3.1.28 (26-FEB-2022)

Export HTML Sample: export_html file_v3.1.28 (26-FEB-2022)

  • Render Viewer:
    • New: new floating styles for Markdown TOC
  • Joplin UI:
    • Fix: bottom tag bar styles missing
  • Print/Export PDF:
    • Fix: code block unexpected text shadow
    • Fix code block margin & padding
    • Fix: footnote styles missing
    • Fix: wrong size of h1 > span
    • Fix: custom title block title color change
    • Fix: spoiler block margin
  • Source Code- userstyle.css:
    • Change: renamed --export-note-title as --export-note-title-text-color
    • Change: removed --mt-border-color
    • Change: add link bracket to the monospace font group
    • New: add --mt-title-background-color
    • New: add --mt-title-box-shadow
    • New: add --mt-title-text-color-hover
    • New: add --mt-title-background-color-hover
    • New: add --mt-title-box-shadow-hover
    • New: add --print-mt-link-text-color
    • New: add --print-mt-title-font-size
  • Source Code- userchrome.css:
    • Fix: 2 wrong variable names

OhmineDT-v3.1.40 updates ( 2-MAR-2022 tested on Joplin v2.7.13)

  • Render Viewer:
    • Improve: Reduce the size of the Markdown TOC button
  • Joplin UI:
    • New: add a horizontal scrollbar for overflow text on each notebook item
    • Fix: note count label overlapping the notebook item text
    • Change: removed overflow scroll effect from notelist panel - there is a problem I can't fix at the moment
  • Font:
    • Change: new font for both Simplified and Traditional Chinese - Chiron HK Pro ExtraLight
  • Source Code: userchrome.css:
    • Change: renamed 1 variable
    • New: add --np-notebook-item-scrollbar-color
    • New: add --np-note-count-label-text-color
    • New: add --nlp-list-item-text-color
    • New: add --nlp-list-item-border-color
    • New: add --nlp-header-search-bar-placeholder-text-color
    • New: add --ett-button-icon-color
2 Likes

OhmineDT-v3.1.41 updates ( 5-MAR-2022 tested on Joplin v2.7.13)

  • Joplin UI:
    • Fix: notebook item visual broken when adding an emoji
2 Likes

Hi @Nacandev

Did you to make this theme as a plugin ? :wink:

Not yet, but soon... :saluting_face:

1 Like

Great ! No stress :wink:

1 Like

OhmineDT-v3.1.61 updates ( 5-May-2022 tested on Joplin v2.7.15)

  • Render Viewer:

    • Fix: The chinese font family was not applied to the table.
  • Markdown Editor:

    • Change: Abstract Content Bar - list, blockquote, and table, color changed.
    • New: add background color to horizontal line markdown syntax.
    • Fix: Abstract Content Bar - blockquote didn't showing on the color bar.
  • Joplin UI:

    • Improve: tag manager modal dialog styles.
  • Source Code: userchrome.css:

    • Change: renamed 1 switcher.
    • Change: renamed 7 variables.
    • Change: removed 1 invalid variable --codeblock-text-color.
    • New: add --switcher-mde-horizontal-line-background-color for turn on/off the background color of horizontal line markdown syntax.
    • New: add --hr-background-color.
    • New: add --hr-text-color.
    • New: add custom code section to the bottom.
    • Fix: the value of --np-notebook-item-text-color: and --np-notebook-item-border-color: are affects to the notelist panel unexpectedly.
    • Improve: edit unclear comments.
  • Source Code: userstyle.css:

    • Change: renamed 1 variable.
    • New: add --switcher-markdown-toc-position-left You can now position the Markdown TOC button to the left/right.
    • New: add --mt-body-background-color-hover.
    • New: add --mt-body-border-color-hover.
    • New: add --mt-list-border-color.
    • New: add custom code section to the bottom.
    • Improve: edit unclear comments.
1 Like

OhmineDT-v3.1.75 updates ( 9-May-2022 tested on Joplin v2.7.15)

  • Render Viewer:
    • New: add hover effects on Markdown TOC's links.
    • Improve: enlarged the click area of Markdown TOC's links.
    • Improve: codeblock background color changed.
  • Markdown Editor:
    • Improve: hroizontal line markdown syntax style.
  • Rich Text Editor:
    • Fix: editor top toolbar visual broken.
  • Print/Export PDF:
    • Fix: unexpected border on the table.
  • Joplin UI:
    • Fix: white background splash once when startup.
    • Fix: bottom tag bar visual broken.
  • Source Code: userchrome.css:
    • Change: renamed 1 switcher-related value.
    • New: add general-body-background-color
    • New: add --hr-background-gradient
  • Source Code: userstyle.css:
    • New: add new switcher --switcher-markdown-toc-link-text-wrap for the wrap text effect of the markdown toc link text.
    • New: add --mt-link-text-color-hover
    • New: add --mt-link-background-color-hover
1 Like