Obuntu Theme

Share & showcase
#1

A theme for Obsidian, inspired by and borrowing elements from Ubuntu for deeper integration with this popular Linux distribution.

Theme available in community theme page in Obsidian

screenshot
screenshot1921Ă—1017 459 KB

Page on GitHub: https://github.com/DubininDmitry/Obuntu-theme-for-Obsidian

This topic was created to inform everyone who uses my theme about important, global changes. Any criticism and suggestions are also welcomed to make Obuntu as convenient as possible.
The entire changelog is located here: https://github.com/DubininDmitry/Obuntu-theme-for-Obsidian/commits/master

All changes will be added to comments

11 Likes
Resize embedded content
Obsidian Theme of the Year 2020 nomination thread
#2

Primary changelog from release:

2020.09.06:

  • change text selection color, now its the same in preview and edit mode
  • add custom tags look in panel, thanks Klaas
  • add List styling (numbering) for outline pane

2020.09.07:

  • add border in settings page + some visual changes
  • change behavior in file manager: color and animation in hover and select
  • change tooltip background and color for more theme integration
  • change highlight h1 in text from outline panel or search

2020.09.08:

  • fixed search in file panel in dark mode
  • change font and font-size in edit mode: now the font the same as preview

2020.09.09:

1 Like
The light theme is very hard to see, and I don't like the dark theme at all. All apps uses light themes. Please fix eventually. thx
#3

The quality of the text in popovers is not good. Any chance to improve that?

#4

Do you have suggestions? I can do different things: for example, increase the font, change the size of the pop-up block, or change the design.
I need to understand how bad quality is expressed in your opinion.

#5

Look at this example:
popover

In the actual popover the letters are smaller than on this screenshot, but you can see the quality is poor. I tried to increase the transform scale a bit, but that did not do much.

#6

I will looking on it

#7

I hope I am not bothering you too much. I have found something else, not big.
In the screenshot the are 2 blockquotes:

  • a regular one, and
  • a transcluded one.

You can see that the transcluded one is slightly offset (indented) relative to the “normal” one.

block
block56Ă—567 4.44 KB

#8

I can’t see the problem in Linux OS. Did you install Roboto and Fira Code fonts for better experience? This fonts are default in this theme and I tested on this fonts
image

It may also depend on the screen resolution.

#9

I think its because your blocks is embedded in each other. Or I’m wrong? I see that text under blockquote in different nesting. And as far as I understand this is the standard editor behavior. More natality means more space for visual display. The text on your screenshot is also visible that is nested (more indentation).

If I’m wrong, correct

#10

No, I did not install Robot and Fira code, so the issue is entirely on my side because in your screenshot the text looks fine.

#11

No, the quote blocks are not nested in each other.

The 1st quote block is in “normal” text, i.e. the way it is.
The 2nd block is a transcluded block, but it is not nested, unless you call transclusion as being nested.

#12

Please post an example so that I can better understand the reason

#13

Update by 2020.09.10:

  • Clutter Free edit mode: inline formatting, link targets, header hashes disappears if not active line. Code blocks, list markers and html tags have old behavior to better visually distinguish them from regular text (update: disable in links and images, because it have problem of selection link ).
    Since this is a custom style change, in some cases, it may be difficult to select text or correctly position the cursor. Please write in the comments about the problems
    Before:

    free-clutter-off
    free-clutter-off742Ă—531 33.4 KB

    After:
    free-clutter-on
    free-clutter-on797Ă—541 30.1 KB

  • Change heading size and colors in edit mode for better looking after enable clutter free edit mode (the screenshots above shows the difference)

  • Remove borders in iframe for better visual integration with active theme

1 Like
A WYSIWYM (Typora-like) editing mode
#14

If you are referring to block quotes, there is an example above. If you are referring to something else, what do you mean?

#15

Dmitry, this is a very nice update. I tried clutter free myself on the basis of css code, but was not too happy with it. I don’t know how hyou’ve done it, but your version is much cleaner, I like really it !

I also use some inline HTML tags like <br>, <font color="color:darkviolet">bla text</font>, <small>some text</small: is there any way to also hide this with clutter free in the Edit mode?

#16

What is the best site to download Roboto and Fira Code fonts?

#17

In my previous answer names of fonts are links

#18

I am having trouble implementing this. In the editing mode, html tags are not fully rendered and, apparently, this cannot be implemented within the css styles. Perhaps when they open the api or the obsidian developers themselves implement this functionality (this is in their development roadmap).
The example below shows how it looks if you use css. More problems arise because the br is not visible at all, the colors are not displayed, only the tags themselves are hidden

clutter-free-html
clutter-free-html700Ă—500 348 KB

#19

OK, I understand.

#20

Problem with clutter-free !!

Now I remember what the problem was I had before. When you try to select text in a link it’s virtually impossible - se GIF below.
clutter

When I try to select the red text between the square brackets the cursor jumps away.

EDIT: I just noticed that even if I disable the clutter free edit mode, it still behaves the same way !!