Share your Minimal Theme screenshots/configuration

[Fanshu]

Wow, this looks very good

[ryanjamurphy]

Easy to install yourself—just add the CSS to the Minimal theme! (Or, in the upcoming update, add it as a snippet so that it’s easy to keep whenever you get @kepano’s latest update.)

[Daveb08]

@Ryan314> How did you get the ‘yellow’ shades?

[Joschua]

Big fan of your work @kepano.

I’ve only made a couple of tweaks, lightly colouring headers for better distinction and adding @ryanjamurphy’s beautiful transclusion snippet.

Light mode

Dark mode

Again, thanks for all you do. The minimal theme makes working in Obsidian a joy.

[FranciscoBricio]

Can you please share your CSS tweaks? In particular how you changed H1,H2… colors. I love how your theme looks either in dark or light mode!

[jacklaing]

If anyone wants to create their own custom color scheme for Minimal, I made a Dracula skin with variables for pretty much every element, which should be quite easy to modify to your own taste.

Dracula Skin Snippet for @kepano’s Minimal Theme

[nhdhung]

Thanks a lot for making the theme @kepano

I did add some css to mimic the WYSISYG editor (not perfect but kind of ok for my workflow)

Here is my CSS snippet

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task,
div:not(.CodeMirror-activeline) > pre:not(.HyperMD-table-row) span.cm-formatting-link,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-code,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-strikethrough,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-strong,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-em,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-header,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-quote,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link-string,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link-string ~ span.cm-url {
    display: none !important;
    position: relative;
}

.external-link::before {
    display: none !important;
}

.cm-hmd-indent-in-quote {
    padding-left: 0.8em;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-code-block,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr {
    font-size: 0%;
}

span.cm-hr:before {
    content: "";
    display: block;
    background: var(--text-faint);
    height: 1px;
    opacity: 30%;
}

.collapse-indicator,
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
    visibility: hidden;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-1::before,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-2::before,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-3::before {
    content: "●";
    color: var(--text-faint) !important;
}

div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-1::before,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-2::before,
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-3::before {
    content: "○";
    color: var(--text-muted) !important;
}

div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-1::before,
div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-2::before,
div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-property + .cm-list-3::before,
div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-1::before,
div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-2::before,
div.CodeMirror-activeline > .CodeMirror-line span.cm-formatting-task.cm-meta + .cm-list-3::before {
    content: "";
}

.view-header-title-container:after,
.view-action[aria-label^="Preview"],
.view-action[aria-label^="Close"],
.view-action[aria-label^="More options"] {
    display: none;
}

[ryanjamurphy]

Shout out to Donella! Systems work is my main area of research & practice.

[gandalfthegrey]

I like how you’re displaying your daily tasks on the left. How are you doing it? Is that using todoist sync plugin?

[nhdhung]

@gandalfthegrey Thanks. I just drag the daily node (in edit mode) to the left pane and let the “Minimal Theme” of @kepano takes care of the rest. I also added some CSS for cm-header-6 which I used only to mark date and time.

[mgmeyers]

Hey friends, I’ve made some extensive updates to the minimal theme to get it as close to the native macOS UI as I could. It’s still a work in progress, but you can find all my snippets here: https://github.com/mgmeyers/obsidian-california-coast-theme

[tward09]

This is fantastic! I loaded up the snippets and it works like a charm. Although, I can’t figure out how you changed the opacity of the workspace leaf, and I definitely want to do that. What line do I need to change?

[mgmeyers]

It should work out of the box using the core translucency plugin. HOWEVER, this is currently broken in 0.9.22. Should be fixed again in the next release.

[lokiirrationalis]

It’s not completely broken here, I just have to refresh Obsidian (⌘ R on Mac, as usual) each time I start it up to make the sidebar translucent again. Maybe that helps until the next release?

[jojag]

I love your theme!
Would you be happy to share your theme?

[mnvwvnm]

[daveine]

hi, could you share how you got the arrow to be an actual arrow instead of two lines and a triangle (–>)?

[Klaas]

@daveine: it depends on the font you use. Obsidian’s default font, Inter, turns --> into -->.

[daveine]

thanks for the quick reply!!

[ldebritto]

Cool! Which font is that?