Minimal Theme

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;

Yep. This is what I meant. Definitely.

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;
} {
    --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:


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 :slight_smile:

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.

1 Like

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

Thank’s :slight_smile:

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?

nevermind, I found it in style settings

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!

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

1 Like

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.


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.

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?

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);
1 Like

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


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!

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 */
li[data-task="-"] > input:checked,
li[data-task="-"] > p > input:checked {
  color: hotpink;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='' 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="-"],
body:not(.tasks) li[data-task="-"] {
  color: hotpink;
  text-decoration: line-through solid var(--text-faint) 1px; }

Screenshot 2024-02-17 at 9.53.45


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


That’s great info as well!

1 Like

Thanks to both of you!

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!! :smiley: Release 7.5.4 · kepano/obsidian-minimal · GitHub