Minimal Theme

[gerry-keith]

I just recently started using Obsidian (love it!) and have a question regarding the current Minimal theme and screenshots displayed on the Minimal Guide website.

I completed the following steps outlined on the website:

• Installed “Minimal” theme
• Installed companion plugin “Minimal Theme Settings”
• Installed plugin “Hider”

I then Configured Obsidian for a more “macOS-native appearance”:

• Obsidian Appearance settings
• Hider plugin settings
• Minimal Theme Settings plugin settings

However, for the Minimal Theme Settings plugin, when I turned on “Text labels for primary navigation” the interface does not look the same as the screenshots displayed on the Minimal Guide website.

Instead of a House icon labeled “Notes” … I have a Folder icon labeled “Files”.

The Magnifying Glass icon labeled “Search” is next.

Instead of a Star icon labeled “Starred” … I have a Document icon with no label … and clicking on that icon displays a message “Plugin no longer active. The plugin that created this view (starred) has gone away.”

Below that is a Bookmark icon labeled “Bookmarks” and I’m wondering if that provides the same function as the non-existent Starred icon/label?

Is this difference due to the passing of time? Since it appears that the Minimal Theme was created in 2020.

And how do I remove the non-functional Document icon?

(screenshots attached)

Thanks for your help!

Gerry

[kepano]

The screenshots are old and have not been updated so that’s the reason for the Notes/Files discrepancy.

The Starred plugin has been deprecated, it is now called Bookmarks. See Obsidian Release v1.2.6 (Insider build)

To remove the File icon right click and close pane. This is probably a remnant of a plugin you installed and removed.

[gerry-keith]

Thank you for the confirmation. Much appreciated!

[TwoPointNo]

Hey everyone, is there any way to pinpoint the css bits that render the code blocks in the reading view? I quite like them and I am trying to replicate them in a simple website project of mine.

[evanjohnson]

Hi all, I’ve combed through the Style Settings and tried almost all of them, but can’t seem to figure out how to change the color of the line that separates the main viewer window and the sidebar, does anyone have insight into how to change this?

[ScottKillen]

The selector for those elements appears to be hr.workspace-leaf-resize-handle. You can change the color using CSS in a snippets, such as:

hr.workspace-leaf-resize-handle {
  background-color: red;
}

[kepano]

The color is set in Style Settings → Interface colors → Border color

if you want to create a snippet for it, the better approach is to target the variable directly, which needs to be done separately for light and dark mode:

.theme-light {
--divider-color: red;
}
.theme-dark {
--divider-color: yellow;
}

[ScottKillen]

Yep. This is what I meant. Definitely.

[peters]

Really loving minimal! Just one quick question, would it be possible to change the background color of the right sidebar like in fig. A?(like the default theme, but also with the tab bar as well)

fig. A

on a side note, both answers above don’t answer @evanjohnson’s question, @ScottKillen’s snippet only changes some of the borders (fig. B) and @kepano’s setting doesn’t change anything related to the question (fig. C)

Fig. B. Note the top tab ‘line’ with no red

Fig. C. This is the setting in style settings, the css snippet didn’t do anything for some reason

Edit: I made a CSS Snippet that accomplished this, plus changing the the top tab bar as well

.sidebar-toggle-button, .workspace-tabs.mod-top {
    --tab-container-background: var(--background-secondary) !important;
}

.workspace-tab-header-container {
    --titlebar-background-focused: var(--background-secondary) !important;
}


body.is-focused {
    --titlebar-background-focused: var(--background-secondary) !important;
}

body:not(.sidebar-color) .mod-right-split {
    --background-secondary: var(--background-secondary) !important;
}

body:not(.sidebar-color) .mod-right-split {
    --background-secondary: var(--bg2) !important;
}

body:not(.sidebar-color) .mod-right-split :not(.mod-top) .workspace-tab-header-container {
    --tab-container-background: var(--background-secondary);
}

which looks like this:

[kepano]

You can accomplish this using a snippet. It’s not something I am prioritizing because it’s part of the identity of the theme, and what makes it unique

[ScottKillen]

If you type Ctrl-Shft-I, the inspection dialog will open. You can your the selector pointer (top left of the inspector window) to select the element you want to change. Then you can replace the element in the snippets we provided.

[ironhak]

Hello @kepano, is there any way to fix this?

The bottom of Tables did not show in minimal theme

The bottom border of my tables did not show in minimal theme, as shown in the following picture. [image] What’s reason and how to fix it?

Thank’s

[remi]

Hi! I’m having a problem with how minimal theme invers colors for pdf files, which for me is undesirable behaviour as it messes out images inside. Is it possible to disable this color-inversion for pdfs without switching the whole theme to light mode?

[remi]

nevermind, I found it in style settings

[psychotronic]

@kepano

Images in dark mode are set to reduced opacity, hover for full opacity

Hi kepano! I’m back on the Minimal theme yet again because I need cards. How do I disable the reduced opacity of images in dark mode, please? I’m a sewist so I need to be able to match fabric colors by their images. Thank you for your awesome work!

[ush]

Style Settings > Minimal > Images > Image opacity in dark mode

[Tau-8]

Hi! Here’s an improvement for spacing of list elements I’d like to share. It involves a concept in visual design which tells that inner spacing of an element must not be equal or greater than its outer spacing.

So this CSS does exactly that:

body.minimal-theme {
    --list-spacing: 0!important;
    --list-spacing-1: 0.4rem;
    --list-spacing-2: 0.3rem;
    --list-spacing-3: 0.2rem;
}

div > * > li:not(:last-child) { /* All level 1, excluding last */
    margin-bottom: var(--list-spacing-1);
}

div > * > li > * > li:first-child { /* All first level 2 */
    padding-top: var(--list-spacing-2);
}

div > * > li > * > li:not(:last-child) { /* All level 2, excluding last */
    margin-bottom: var(--list-spacing-2);
}

div > * > li > * > li > * > li:first-child { /* All first level 3 */
    padding-top: var(--list-spacing-3);
}

div > * > li > * > li > * > li:not(:last-child) { /* All level 3, excluding last */
    margin-bottom: var(--list-spacing-3);
}

Now all list items have spacing based on their hierarchy. I did 3 levels, because further you simply have your line height (that prevents list items from collapsing). It may not look like much, but in the long run this actually helps traversing through large nested lists.

You can fiddle with the variables for greater effect. Mine are hand-tuned to match fonts I use and the rest of my settings.

[Malnormalulo]

Would you ever consider making block width an optional feature, then? I’m finding it very difficult to use Vim bindings when I can’t easily see which lines of text line up with which numbers. This theme does a lot of things I really like – the checkbox icons especially are indispensable – but this one limitation is impactful enough that I’m facing the unhappy prospect of disabling the theme and cobbling together the features I need out of a heap of CSS snippets.

[rbanks88]

For some reason, the numerals in ordered lists are being controlled by the “Faint text color” setting. I noticed this because the numbers were so much darker than the text. I can lighten “Faint text color,” but then it wouldn’t have the dim color for empty checkboxes, disable statuses, etc.

Assuming something is wrong, how can I fix this?

Is there some reason why the number color is not controlled by the “normal text color” setting?

[spacewitches]

It’s not wrong, that’s just how the theme is set up. you can change it with a css snippet:

.theme-dark, .theme-light {
    --list-marker-color: var(--text-normal);
}