Theme : Ono-Sendai_obsdn (dark/light) update: 2020/09/25 for 0.9.1

Ono-Sendai_obsdn (light/dark, compatible with 0.9.1) v202009250100

description

a cyberpunkish terminal retro-look for Obsidian, compatible with translucency plugin (dark mode preferred)


features:

  • anti distraction-free theme with a terminal flavor
  • inline transclusions
  • tab icons replaced by text
  • bigger popover previews with more content displayed
  • images scaled down with hover zoom
  • visible margins in edit mode
  • file explorer: columns view
  • file explorer: wrap long file names
  • aligned footnotes suptext for consistent leading
  • compatible with the translucency plugin
  • new : edit mode wysiwym headings
  • focus mode by Death.au

it shares most features of the theme Obsdn-dark-rmx

protips :

  • full dark mode : enable dark mode & change around line 19 --background-primary: #000000 to enable the full dark mode
  • disable file explorer columns view by commenting out lines[1505-1509] in case of bugs (experimental feat.)
  • theme has been designed for dark mode, however a light mode is also available.
  • for the file explorer : you can replace the backslash with a slash at line 560 : replace content: "\\" with content: "\/"
  • enable dark mode + translucency and loop the sounds of the esper machine

warning :

  • user-unfriendly UI, not recommended for obsidian beginners
  • for now, the theme is compatible with ENGLISH and CHINESE TRAD (ZH), you can contribute to translating the text icons to your language (see post #64)

installation :

  • will be coming to the community themes soon, meanwhile you can grab it from github and manually copy/paste the obsidian.css
  • first backup your current css theme / css snippets
  • copy the file obsidian.css in the root of your obsidian folder
  • the font used in the screenshots is Cairo : Cairo - Google Fonts, fonts should be installed locally

grab it from my github :

changelog:

20200914
20200912
20200911
20200908

14 Likes

fix 202009062339 :

  • added the download link
  • fixed issues with svg (selector was too broad causing issues)
  • fixed mermaid bug causing a scrollbar to appear (thanks to Dubinin Dmitry for the tip)
2 Likes

update 2020/09/08 : compatibility with obsidian 0.8.13

  • styling section for translucency plugin
  • colors for the new top bar / buttons
  • fixed tabs and borders spacing for a cleaner look

demo of the new translucency effect in obsidian 0.8.13:

PotPlayerMini64_eB9w2iEDls

3 Likes

2020/09/11 : updated for obsidian 0.8.14

  • updated the titlebar class name for 0.8.14 compatibility
  • fixed the titlebar buttons on the right side (minimize/maximize/close) : adjusted the stroke and fill color for a cleaner look

install from github for now (it should be available in the community theme in the near future) :

bug reports & issues are welcome.

image
A small bug of display.
Maybe this bug occurred for the reason that I used a big screen with high definition.

hi,

have you tried to refresh with CTRL R to see if the problem persists ?

The top icons (folder and starred) should be hidden/replaced by text, and the icons below should be red like the image below :
image

Can you please provide more details on your system and resolution ? also, do you have any additionnal css mod installed aside from the theme (if so, which ones, as some classes may be overruled) ?
so far, I’ve only tested it on windows 1920x1080 up to 3820x2160 without notable issues, so any hint would be useful to fix the issue.
thanks !

I got this bug, I set up Simplified Chinese as OB’s default language. Maybe some problems occured when I changed default langugae to non-en language. I post them as follow.

You could try changing your OB’s default language to other language and checking what happened.

EN:
image

NON-EN:
Simplified Chinese
image

French:
image

PS: It works well when I use English as default language. Sorry I blamed it on high resolution.

PPS: It is definitly cool. So cyberpunk.

Thanks for the feeback, it’s indeed linked to the language settings. Good news is that it’s easy to fix, bad news is it will require modifcations for all languages, as I’m targeting aria-label to replace icons by the appropriate text.

I’ve fixed it for simplified chinese (zh) for now, BUT the text icons will still displayed in english. Grab the new version here:

the new version also has a couple of new features activated by default :

  • focus mode by death.au (with opacity mod)
  • wysiwym headings mode (in edit mode, #,##,###… hadings markup are replaced by H1-H6 text in the gutter), see gif below

these features can be disabled by commenting out/deleting the lines in the css file.

I will not provide updates for other languages, my main focus is ENGLISH. However you are welcome to localize the theme in your own language. I will be happy to incorporate your modifications if you share them here of make a fork/pull request via github.

To this effect, here is a small guide on how to make the translations :

as there are no classes available to select individual icons, the theme relies on targeting aria-label which is language dependant and MAY evolve with different versions. Thus currently, the theme breaks if you are not using ENGLISH or CHINESE SIMPLIFIED.

by default, the theme is designed for english language and text icons will de displayed in english (eg. files, search, star,tags, backlinks,outline)

when using another obsidian language, you need to tweak the css or else the icons will be crooked (see the posts above).

the explanation is lenghty, but it’s actually pretty simple and quicker to do than to read

how to make the theme compatible with your language (other than english) :

open obsidian.css in a text editor/code editor and look for /*======== replace icons in tab header with text =========*/
image

1. get correct spacing of the icons:

  • just above this section, where it says

    div[aria-label="文件管理器"],
    div[aria-label="File explorer"],
    

    you need to duplicate the line and replace the label with the correct translation, eg div[aria-label*="Explorateur de fichiers"], for french language.

    don’t forget the , (comma) at the end of the line if you add it above

  • to find the exact aria-label to use, look in the obsidian-translation github and open the json file corresponding to your language, for instance :

    • es.json for spanish
    • fr.json for french
    • zh-tw.json for canto, etc…,

    it’s important to get the correct names for each [aria-label*=…], or else it will fail !
    using [arial-label*=…] should be better than [aria-label=…] (note the *, for more info google css selector contains)

  • then look in your language json file around line 273, where it says

    "plugins": {
      	"name": "...
    
  • in the json file, search for the section for file-explorer (line 275) and use what’s after "name:" as the [aria-label] content, so for french it looks like:

      "file-explorer": {
      		"name": "Explorateur de fichiers",
      		"desc": "Voir tous les fichiers de votre projet.",
      		...
    
  • thus you would use “Explorateur de fichiers” and add this to the obsidian.css around line 1140:

    div[aria-label="Explorateur de fichiers"],
    div[aria-label="文件管理器"],
    div[aria-label="File explorer"],
    
  • repeat the same process for the search and starred lines.

2. replace icons by text icons

around line 1149-1310 of the obsidian css.

  • following the same process that I described above, you need to add definitions for your language everywhere you see a div[aria-label...

  • so for french, where it’s currently (around line 1150):

    div[aria-label="文件管理器"] .workspace-tab-header-inner-icon,
    div[aria-label="File explorer"] .workspace-tab-header-inner-icon {
    display: none;
    }
    div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
    div[aria-label="File explorer"] .workspace-tab-header-inner:after {
    content: "FILES";
    font-size:12px;
    font-weight: 700;
    margin-left:-8px;
    }
    

    it should become :

    div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner-icon,
    div[aria-label="文件管理器"] .workspace-tab-header-inner-icon,
    div[aria-label="File explorer"] .workspace-tab-header-inner-icon {
    display: none;
    }
    div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner:after,
    div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
    div[aria-label="File explorer"] .workspace-tab-header-inner:after {
    content: "FILES";
    font-size:12px;
    font-weight: 700;
    margin-left:-8px;
    }
    
  • in the exemple above, line content: "FILES"; defines the text for the text-icon.
    This is where you can change the text to anything you want, eg:

     div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner:after,
     div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
     div[aria-label="File explorer"] .workspace-tab-header-inner:after {
     content: "檔案管理器";
     font-size:12px;
     font-weight: 700;
     margin-left:-8px;
     }
    

    will produce (note the top left text label in trad.chinese) :

  • rinse and repeat, look for lines with div[aria-label..., duplicate and replace with the correct translation. Just make sure to copy/paste each line individually while preserving all the content, make sure there is a comma at the end and doucle-check the aria-label content with the translation files from the obsidian translation github.

  • if you make the modifications for other languages, please share :slight_smile:

1 Like

That’s enough, man. Thanks for such wonderful theme.

1 Like

Maybe another bug:

when I want to fold line by clicking the triangle near my content, it doesn’t work.

PS: I tried this with English as default language.

thanks for the bug report, I’ll try to fix it asap.
Meanwhile, you can fold by clicking on the left of the arrow (approx. 10 px to the left, where the line number 1 is displayed on the gif below).
gFojDgIBZJ
sorry for the inconvenience :confused:

2020/09/14 Update Bug fixes ~ Maintenance

  • bug fix : folding in editor mode should work
  • aligned the right collapse-btn & the close button
  • changed the color of the border of the left ribbon (looks better in dark+translucency)
  • changed the bg-color of the local graph’s range slider (black with opacity)
  • darker & less saturated green overlay when the ‘settings’ modal prompt is opened
  • slightly changed the line numbers in the gutter

let me know if it’s ok !

Absolutely loving the theme!

Small bug I’ve found when having a local graph in the sidebar:

Notice that:

  1. the icon is intended more to the left that it should be;
  2. the colour of connected notes is black (or nearly black), the name of the linked notes should be visible. They’re visible in the bright red colour in the global graph.

EDIT: Huh, looks like the second issue was somehow resolved when I restarted Obsidian, which just leaves the first one.

Looks Great, will this be part of the Community Themes soon?

@input_sh thanks for the nice words!

  • About the bug, I’m not sure which icon you are referring to ? Could you explain it a bit more please ? is the problem always visible or does it occur in a specific situation ?
  • it’s sometimes necessary to refresh obsidian with CTRL R (or restart it) after switching themes or when going for dark mode to light mode (or vice versa) to avoid bugs in the graph view.

@Hibiscus it should be available within obsidian’s settings now, SIlver added it yesterday ! Don’t forget to backup your css snippets/customizations before switching themes, and refresh once it’s installed (CTRL R)

The one on the top left, above the slider.

2020/09/25 update - compatible with obsidian 0.9.1

  • new : graph colors for obsidian 0.9.0+ (tags, atachments, arrows)
  • new : graph options menu : smaller & more compact
  • new: removed the right ribbon since it’s useless (the right side bar is still accessible via the button on the top right corner)
  • new: different settings for translucency between light and dark modes
  • new : the linked panes icon is now red to improve legibility, it should be easier to spot linked panes
  • modified : linked images default size is now contained within a 500x250px container, hover images to display in document’s max size.
  • fix: fixed the tabs styling margins/padding etc. : should now work with most fonts without degradation and be more consistent
  • fix : removed annoying 1 pixel transparent line at the top of the titlebar in fullscreen translucent mode
  • fix : images should not be burned out when using translucency
  • fix : in light mode, translucency should look better (smoother, more consistent)



4 Likes

Hi,

are any further updates planned or is it down?

Just came across this theme and love it! However, I’m seeing a weird glitch when I use it: it seems to cut off the first bits of each line. Below is a screenshot. Is this a bug, or am I doing something wrong?