Minimal Theme

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

[Gorgonzola]

I ran into this cool idea yesterday while doing research into mapping BuJo methods onto plain text:

Source

I’m using the minimal theme and I was wondering if there’s any way to change the text colour of alternate checkboxes? For instance, I see that - [-] has the text greyed out, so I’m assuming there’s a way to do that with other types of alternate checkboxes, too.

Thanks in advance!

[ariehen]

Looking at how Minimal does it, you could make a CSS snippet to override Minimal’s color: var(--text-faint); for the canceled checklists.

/* [-] Canceled */
input[data-task="-"]:checked,
li[data-task="-"] > input:checked,
li[data-task="-"] > p > input:checked {
  color: hotpink;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); }

body:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]),
body:not(.tasks) .markdown-preview-view ul li[data-task="-"].task-list-item.is-checked,
body:not(.tasks) li[data-task="-"].task-list-item.is-checked {
  color: hotpink;
  text-decoration: line-through solid var(--text-faint) 1px; }

[holroy]

You beat me to it, @ariehen. I was going to be a little lazy and refer to my own answer from some time ago:

Alternative Checkboxes (Icon Bullets) - Copy and paste

Based upon using Minimal theme in default, I played around and found what I needed to add my own custom icons as alternative checkboxes, and I found that I need two sections with a total of 6 CSS selectors to properly define them. Getting started You need to add some CSS, like shown below, into a CSS file, and enable this. To do this follow this procedure: Go to Settings > Appearance > CSS snippets, and click on the folder icon on the far right. This opens the folder where you should store …

[ariehen]

That’s great info as well!

[Gorgonzola]

Thanks to both of you!

[ryadaj]

Does the image grids feature work with external images? I have it enabled in Minimal Theme Settings and the images are arranged consecutively.

edit 2024-03-20: never mind due to Is there a way to use image grid with standard markdown syntax · Issue #657 · kepano/obsidian-minimal · GitHub

edit 2024-04-06: never mind again due to recent update which allows for expanded image grid functions including Markdown links; thanks Kepano!! Release 7.5.4 · kepano/obsidian-minimal · GitHub