My personal snippets for obsidian.

  • By vainille
  • Last update: Dec 1, 2022
  • Comments: 1


Modded snippets for my personal Obsidian theme.


Daily Note

My template for my daily note, with a progress bar.

The html example is here, with a sample and the templater codes.

Adapted from some codepen snippets: progress bar, typography. Neumorphism style was very helpful.

Vainilla Style Settings

It works using the Style Settings Plugin. With it, is posible to define:

  • A different font family for the editor.
  • Headers (and H6) preview font family
  • Change the UI font size.
  • General text-align.

EDITOR settings:

  • Choose between the accent, mute and normal color for the markdown rendering color (**,__, [[]]) and footnotes.
  • The font-family and font-style for the [Text in brackets], the code font-family, the inline font-style and the code color.

PREVIEW settings:

  • Change the font-family, font-style and font-decoration of internal links, external links, code and tags.

MERMAID settings:

  • Change the mermaid font-family, font-color and node stroke, node stroke width and the fill-color of the nodes.
  • Select the mermaid scale.

Vainilla Style (snippets)

Here is where I made some visual changes.


  • I changed the background and foreground color, based in the Material Ocean color scheme.
	--color-black-rgb: 15, 17, 26;
	--color-white-rgb: 229,233,240;
  • I added some variables to work with shades of the accent color.
.theme-dark {
    --accent-90: hsla(var(--accent-hsl), 0.9);
    --accent-80: hsla(var(--accent-hsl), 0.8);
    --accent-70: hsla(var(--accent-hsl), 0.7);
    --accent-60: hsla(var(--accent-hsl), 0.6);
    --accent-50: hsla(var(--accent-hsl), 0.5);
    --accent-40: hsla(var(--accent-hsl), 0.4);
    --accent-30: hsla(var(--accent-hsl), 0.3);
    --accent-20: hsla(var(--accent-hsl), 0.2);
    --accent-10: hsla(var(--accent-hsl), 0.1);
    --accent-5: hsla(var(--accent-hsl), 0.05);
    --accent-3: hsla(var(--accent-hsl), 0.03);
    --accent-2: hsla(var(--accent-hsl), 0.02);

Nav&Tag pane

It's a mod from ITS-Theme. Tags have a bullet style only in preview mode. It doesn't affect the tag pane.

Header and horizontal lines

Centered, background image for the h1, I also added lines after each of the headings:

My previous style, Based on the horizontal gradient line in Preview source:

Quotes and Code blocks

I changed the quote style and code blocks

My previous style:


Admonition plus

I modified the title style and the shadow of the admonitions. The rest of the code is from Admonition-extras.

My previous style:

Aside blocks

I modified the ITS-Theme snippet. I changed the shadow style and the italic of the hiden note. This are an aside note and an inline aside note:

The aside hidden note shows when the bubble is hovered:

My previous style:

Bigger Preview

It isn't modified. Source.

Bullet Point Relationship Lines

I modified it so the starting color is the accent one. Also, I changed the line decoration into a dotted one. Original snippet: Point relationship lines - rainbow colors


This is the source. I just changed some colors.

Image flags

  • Image Flags Snippet by Lithou
  • Almost no modifications.

Inline block embeds

It isn't modified. From here


I changed some of the bullets of the Org-sidian bullets.

Pretty highlights

  • Original snippet here.
  • I added another mark class, the aqua one. I added some colors based Material Ocean palette. Here are some samples of how almost all the color options look.
  • Then, I added some color codes based on pastel highlighters.

Stylized buttons

This snippet complements the native style settings of the buton plugin. Source


This is how default tables look:

This is the Tables invisibile cssclass snippet. Adding cssclass: invisible to the YAML, it looks this way:

I modified the Tables that look like latex tables snippet so it matches with the accent colors. The YAML must contain: cssclass: academia:


Vim mode with line focus. Source No mod.

My fonts

  • UI font: Poppins Latin
  • Body Font: Atkinson Hyperlegible
  • Body font features: Niramit
  • Monospace font: Victor Mono
  • Headers: Bondi
  • Editor font: Victor Mono
  • [In brackets font]: Ticketing
  • Tag font: Unica One
  • Internal links: KG Hard Candy Striped
  • External links: Trochut
  • Mermaid font: Alegreya Sans SC


Newer updates july2021:



  • 1

    DailyNote quarter and year 'automation' suggestions

    Hi, instead of changing manually the start and end date of the quarter, I use startOf('quarter') and endOf('quarter')

    In the you can substitute this

    🝮 <% moment(moment('21-09-30', 'YY-MM-DD')).diff(moment(tp.file.title, 'YY-MM-DD'), 'days') %> days left

    with this:

    🝮 <% moment(moment(tp.file.title, 'YY-MM-DD').endOf('quarter')).diff(moment(tp.file.title,'YY-MM-DD'),'days') %> days left

    In a similar way, you can also use startOf('quarter') instead of '21-06-30'

    Also, instead of putting manually the number of days in a year (365 or 366), you can calculate them with endOf('year') and startOf('year')

    For example, I substituted this:

    <progress value='<% moment(tp.file.title, 'YYYY-MM-DD').dayOfYear() %>' max='365'>


    <progress value="<% moment(tp.file.title,'YYYY-MM-DD').dayOfYear() %>" max="<%moment(moment(tp.file.title,'YYYY-MM-DD').endOf('year')).diff(moment(tp.file.title,'YYYY-MM-DD').startOf('year'),'days') %>">

    Should this be not the right place to post this suggestion, please forgive me. I'm not used to github. Thanks, Alex