#3

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?

#4

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

1 Like
#5

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.

image
image2080×1052 155 KB

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

#6

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?

#7

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

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.

image
image3160×1848 650 KB

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.

image

#8

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
image

#9

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

1 Like
#10

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.

#11

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?

#12

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

#13

it worked, thank you!

#14

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.

#15

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

#16

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.

#17

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

#18

Klaas & jacklaing

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

#19

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

#20

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.

#21

probably needs tweaking since colors in live-preview (obs v0.13) do not show properly in headings.

difficult to change?
y.

#22

Perfect! Love it, thank you