Share your Minimal Theme screenshots/configuration

That looks awesome! I have been meaning to try moving the headings into the gutter. I’ll be curious to see how you did it.

Two questions: do you also use the Settings plugin? Do you try to bring the latest changes into your fork?

2 Likes

Thanks!

I haven’t yet had a chance to fully reconcile this yet with your new plugins but I would love to work together to do that. I copied over some of your latest chromeless styling from github into my CSS but haven’t done much beyond that. Excuse the mess in my css file, I am a designer and haven’t written so many lines of CSS in a long time.

I am really happy with the headings in the gutter but it has some quirks, it is not 100% pixel perfect and it did break foldable headings in edit mode. I could not figure out for the life of me how to fix this so I simply disabled it for now. I am hoping this is something that we can either refine with CSS or ask the developers to support more natively as an option.

I feel like with your settings plugins, it might not be too bad to support a visual spectrum between your default minimal style and something more like what I have above with

  • a choice of font
  • variable font size
  • headings in gutter on/off
  • full screen search on/off
  • etc
1 Like

Out of curiosity, have you styled the Settings modal to go full screen as well?

No but I did use a different font there that made it a bit nicer: Inter

Have not spent as much time styling the settings as I don’t go there so often.

1 Like

Wow, this looks very good

1 Like

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.)

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

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.

12 Likes

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!

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

5 Likes

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;
}
8 Likes

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

2 Likes

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

@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.

2 Likes

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

14 Likes

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?

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.

1 Like

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?

1 Like

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

3 Likes