Dracula Skin Snippet for @kepano's Minimal Theme

[jacklaing]

This snippet applies a new coat of paint to @kepano’s Minimal Theme.

Just add this css file to your Snippets folder and turn it on in the Appearance settings while Minimal is selected.

With only color modifications, this snippet simply acts like a skin on top of the Minimal theme and should therefore stay compatible with future iterations of Minimal (unless new variables are added). As far as I’m aware, this should also technically work with any other theme that uses the same core variables.

The Minimal settings plugin still works for things like borders and focus mode, but not for colors (obviously) or some font options (for some reason).

Lastly, I’ve abstracted everything into a set of variables at the beginning of the file, which means it should be pretty easy for you to apply your own custom color scheme to the Minimal framework.

minimal_dracula_skin.css (13.6 KB)

[gregxvx]

This is amazing! Thank you so much for this

[geewiz]

I love Dracula! But I can’t find for the life of me where the “Snippets folder” is. There’s also no mention of it under “Appearance”, even though I have installed both the Minimal theme and plugin. Can you give me a pointer?

[geewiz]

Found it, it’s the CSS Snippets plugin. Awesome skin, thanks!

[jacklaing]

It’s not actually the third-party CSS Snippets plugin I’m using. It’s a core feature that comes with the v0.9.18 Insider build, which lets you create a snippets folder in your hidden .obsidian folder, add any .css files, then activate/deactivate them from the Appearance settings.

I didn’t realize this hasn’t been pushed to a public build yet, otherwise I’d have made the instructions clearer.

[icebear]

Are there suggested colors for this skin in light mode? I really love how it looks in dark mode, but sometimes like switched to a white background. Any chance that will be incorporated eventually?

[jacklaing]

This is what the creators of Dracula have to say about a Dracula light mode: “Nope. Dracula can’t stand the light.”

dracula/dracula-theme

Regardless, I was curious so I tried inverting only the background and main font colors (leaving the other colors as is), and I think I understand why they’ve ruled out a light mode. I think it just doesn’t work with the main color palette given how bright the non-background colors are.

Maybe the fault is with inverting it to achieve the light colors. Maybe it would look better to use a light grey/purple color. Feel free to play around with it, you should only need to modify these variables in the file.

[porings]

hello, thank you for making this skin!! this is a look i really enjoy
i don’t know much about css, however i’d like to make some modifications here and there
is there a way to make the highlighted text white like without the skin? is this something i’d have to change within the minimal.css file? thank you in advance

[Klaas]

@porings: just as a general piece of advice: do NOT make changes to a theme css file, you’ll regret it for the 1 simple reason: when the theme gets updated (and Minimal does get updated regularly) your changes will get overwritten.

So it is best to compile snippets for what you want to achieve because they don’t get overwritten.

[jacklaing]

Unless I’m mistaken, you want to find this within the Dracula Skin snippet

  /* Highlight */

.markdown-preview-view mark {
  background-color: var(--highlight);
  color: var(--background-primary);
  opacity: 80%;
  }
.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
  background-color: var(--highlight);
  color: var(--background-primary);
  opacity: 80%;
  }

And edit the color variables.

[icebear]

Is it possible to edit this snippet so that for the heading, bold, italic and highlight color it uses the focus color from the Minimal Settings plugin, if that exists?

[jacklaing]

If it is possible I don’t know how. You’d have to ask the creator of the Minimal Settings plugin.

[porings]

it worked, thank you!

[obsidian337]

Thank you for sharing this nice skin.

Could you please let me know where I can change the font-sizes for H1~H6.

I put

	--h1:1.5em;
	--h2:1.25em;
	--h3:1.125em;
	--h4:1em;
	--h5:0.9735em;
	--h6:0.875em;

inside .root { }/

But, it doesn’t work. All the font-sizes looks like the same.

[Klaas]

@obsidian337: check out the Github repository, file Headers.md, then scroll all the way down to Change header size in Edit mode, then Change header size in Edit mode.

You’ll find the link to the repository here.

[jacklaing]

Also when you figure out the exact CSS, apply it at the snippet level. This will help ensure it overrides something at the theme level.

[Klaas]

@jacklaing

This will help ensure it overrides something at the theme level.

This will help ensure it overrides something at the theme level, AND does NOT get overridden itself with a theme update.

[obsidian337]

Klaas & jacklaing

Thank you for your help. There is some progress in my level.

[TIaraju9]

Thank you for sharing! As a total CSS newbie, I really appreciate the help.

[ScottKillen]

Thanks for this skin.

I made one tweak. Warning buttons (like on the delete file confirmation) are styled awkwardly, so I added a variable to :root: --text-on-accent-warning: #000; and the following style:

button.mod-warning {
  color: var(--text-on-accent-warning);
}

Warning pop-up messages (like when I try to use am unacceptable character in a filename) are still styled awkwardly, but I am trying to hunt them down also.