// ABOUT ME
Site: https:/..."
---
My new favorite Obsidian theme

## Metadata
- Author: [[Nicole van der Hoeven]]
- Full Title: My new favorite Obsidian theme
- Category: #articles
- Document Note: The author describes their new favorite Obsidian theme, AnuPpuccin, which is highly customizable. It includes options like Style Settings with the minimal theme, Rainbow Folders, Color Overrides, Custom Callout Colors, Custom Headings, Text Decorations, Custom Backgrounds, Colorful Frames, Tab Styles, Safari-style options, and Cards. The author also talks about how they use the extended-colorschemes CSS snippet to extend the Dark and Light themes, and how they can also use the card CSS snippet to use cards in their main vault.
- Summary: I have a new favorite Obsidian theme, and it's called AnuPpuccin! Anup is as pretty and feature-packed as it is hard to spell/say. Didn't know themes could have features? Anup comes with custom callouts, checkboxes, speech bubbles, and lots of color options.
// RESOURCES MENTIONED
AnuPpuccin on GitHub: https://github.com/AnubisNekhet/AnuPpuccin
Support the developer, AnubisNekhet: https://buymeacoffee.com/AnubisNekhet
How to make your notes visual in Obsidian: https://www.youtube.com/watch?v=9ELqSWucVYo
Gist with cards.css by Stephan Ango: https://gist.githubusercontent.com/nicolevanderhoeven/c2bd31e863f27a92eece98c19c757aaa/raw/572174ed490fae23d3218f564739b9b0ce50b673/cards.css
Patreon: https://patreon.com/nicolevdh
// TIMESTAMPS
00:00 Intro
00:59 Installing AnuPpuccin
01:33 Installing Style Settings
04:22 Custom checkboxes and speech bubbles
05:25 Rainbow folders
07:17 Typography, headings, decorations
09:48 Cards layout
10:40 Extended color schemes
13:16 Minimal Cards in Anup
---
// ABOUT ME
Site: https:/...
- URL: https://www.youtube.com/watch?v=7-SOwxpZQNI&ab_channel=NicolevanderHoeven
- One of the reasons I've
moved from Notion to Obsidianis that Notion encouraged me
to make things look pretty.So I spent way more time
rearranging how something lookedthan actually taking notes.Obsidian is more minimalist
so I could really focuson the writing, but I do
also really seek novelty.So I appreciate that
Obsidian has community themesthat I can switch out whenever I want,and in fact, I've been
pretty guilty in the pastof switching themes every few days.However, for the last few months
now, I've managed to stick
to one theme across all of my vaults.Today I wanna talk to youabout the theme that has kept
me interested for this long.It's called AnuPpuccin.AnuPpuccin isn't like other themes.There's a lot to it,and that also means that
there's a lot more to customize.So I'm going to show you my
Patreon vault, and install iton that so that you can also
see how to do it for yourself.So first we'll go into
Settings and then Appearance.
You'll see I have the minimal themewhich is just a nice basic themebut sometimes I just want a
little bit of color, you know?So I'm going to go manage here,and then I'm going to type
Anup, and then install and use.Now when you first install Anupthere won't be really
much of a difference.You'll see that it's a
little bit more purple here,but it's still looking quite minimalist.
But that's because you also
have to install another pluginthat is called Style Settings.Style Settings isn't just for anuPpuccin,you can use it with any theme.And what it does is it basically
exposes a lot of the CSSvariables that you could changeby going into the CSS yourself.Or you could just install Style Settingsand then change how
things look from there.After installing, I'm going to enable it,and you'll see it already kind of changed
and I'm going to go right into Options.And you'll see Style Settings here.And then AnuPpuccin should
also have its own section here.Because Anup used minimal
as partial inspiration,it'll look pretty much like minimalwith a few slight changesuntil you go through these options.So I wanna go through
some of these optionsand show you the ones that I like to use.But you can really change it yourself.So first in Colors here,
I'm using the Light Theme right nowbecause it shows it better on video,although I prefer dark themesbut you can change it slightly.There are two options here.And then for the dark
theme, there are four.I'm gonna leave it on Latte for now.And then you can also choose the accent.So you can choose like Flamingo.You'll see that it's a deeper peach.I always like Red of course,
that actually looks pretty goodto me, so I'm going to leave it there.And then there are also color overrides.
If you want to change the
specific accent colorswhich I don't.In the File Editor $ Markdown Elements,you'll see there support for
a bunch of different things,including Callouts.So you can also enable Callout Stylingso that it's going to be differentfrom the standard one
that comes with Obsidian.So let's say it is, I
don't really like Vanillaso let's say Block.And also Enable Styling for
Non-Collapsible Callouts,
and Custom Callout Colors.And might as well toggle that as well.So let's look at the Callouts.Now let's create a callout.I opened up the command
Pallete using command Por control P,and then I'll insert a callout.Let's say this is a warning,
Install Style, Settings.Let's just see what that looks like.So this is what a callout
looks like on AnuPpuccin.If we go back into Settings though
and back into Style
Settings for AnuPpuccin,there are also other elements
in here like check boxes.Now the custom check boxes look a lotlike the custom check boxes that I coveredfor my video on Rapid Logging in Obsidian.I was using the minimal theme, but a lotof those custom check boxes
are included here as well.So let's have a look at those.So here are some of the custom check boxesthat AnuPpuccin comes with.If you're on Patreon, I'm going
to leave this in the vault.So you can have like a cheat sheet
of what you need to type on AnuPpuccinto get these different icons.Some of them are very similarto what was in the
Minimal Custom Check boxesand then other ones are just new.And AnuPpuccin also comeswith these things called Speech Bubbles.So if you've enabled
them like I have here,then in addition to the check boxes,you can have speech bubbles
and they look like this.So they're numbered from zero to nine,
so you can test them
out for yourself here.This is zero, and that
one obviously is red.And this is one, and we can
keep going on like this.So these are the speech bubbles
that are as far as I know,only in AnuPpuccin.And I really love this rainbow palettethat it's got going on, and
there's more to that as well.So if we go back to Style settings,we can go down to Workspace.I'm jumping ahead a little bit here.
And I'm gonna enable Rainbow Foldersbecause they are awesome.Now what this does is you can already seefrom behind there.If you're on the Files
tab here, you'll seethat all of the folders have
now been colored accordingto rainbow colors.And you can have it be simple
as well, which is not as nice.So I'm just going to do full,
and you can do simple as well.So here in the Simple Folder Settings,
you can select exactly which
ones you want to recolor,but those aren't actually
as interesting I think.So I've always turned on
the full rainbow colors.So I'm going to hit Full here.And then there's some more
options for Full Folder Settings.But now look, now it's
like just this pop of colorevery time I open that.So it's just, I love that
it can look so plain hereand then can open that in Baam.
Just makes me happy.Other things that are
awesome about AnuPpuccin,you can also have
numbering for code blockswhich is really good for
any developers out there.So for example, if you
have code blocks here,you see how they're now numbersjust within the code blocks.So you can turn on numbering
for the entire markdown filefor this entire note, but this
one just does code blocks.
You can also choose whether
the code block wraps textor whether it just stays in one line,which can also be useful.I also just like enabling
the Lists, Tables,I just enable all of the
styles because I thinkthey're pretty awesome.Scrolling down to typography here,you can also change the font faces,the font families at least,but really I just leave those the same.I do however, enable the Custom
Heading colors and margins
and you can actually change
each one individuallyif you'd like, but I just
leave it at the default.This is just so I have many
different colors for headings.I don't like when they're
all the same colorbecause then I can't tell
whether something is an H1or an H2, except for size which sometimesif you have six different heading levels,it's not always easy to just
spot the differences in sizes.I also always turn on the Decoration,so I'm gonna turn that on right now.
And this changes the
colors for bold and italic.So let's see some of the
headings and text decorations.Headings.So that was already heading
2, so this is heading 3.So here are the different
heading colors justfrom enabling that one thing.I'm also going to check
out text decoration.So now this is italic text
and it's nice and green.And then to do bold, this is bold text
which is my favorite color, red.I think this solves a lot of the issuesfor visual differentiationwhen you just have a block of text.Back in Settings, you can
darken the canvas backgroundwhich is always a good thing
for extra contrast I think.You can also include a custom background.I haven't tried this myself
because I think, I don't know,it's just a little bit busy,but you can select your own
image, so I'll disable that.
And then you can also
enable colorful frames.So I always like this because
it just gives a nice popof color and I often have
multiple vaults open.So this is an example of the
notes that I'm working throughand that was a different
color scheme entirelybut it's also using AnuPpuccin.That's colorful frames.We already talked about
the Rainbow Browser.So there are also some Tab styles here.You can choose depthto have it be more obvious
which ones are in the background
and which ones are
selected or minimalisticwhere you don't really see
it except for this line.And then some Safari-style things.There's the animated
one and the vanilla one.I honestly just prefer
the default on this one.And then under Workspace Layout
is a little bit more hidden,but it is an option called Cards.And this is the default
that I'm looking at nowbut if I turn on Cards, then
it adds this kind of border
around every frame.I really love this,
especially since this is red.So let's see how that looks.So for example, if I have
two notes side by side here,it makes it this just nicely
bordered two pain thingand there's just a bit more
of a separation between notes,which I really love.So here it is with three
pains, it just looks so good.And this also extends
to the side pains here.Now let's talk about some
of the more advanced things
that you can do with anup,because as of this was not advanced enoughthere are some other options
that you can use to extend it.For example, this is the GitHub repofor the AnuPpuccin theme.You can go down to Snippets hereand then select extended-colorschemes.Now there are a bunch of other onesbut my favorite one is
the extended-colorschemes.This is a CSS, so I am
just going to copy thatand then open up any text editors.
So this could be vs code,
Adam, this is some Lyme textthat I've got here, or even Notepad++.And then just paste everything
that was in that snippet,and then save it.When saving it, navigate
to the folder of the vault.And then you may have
to show hidden folders.I'm on a Mac and I'm just
going to hit command shift.to show this .Obsidian folder.And then there isn't a
snippets folder in here yetso I'm going to create one.
And within that snippets folder,I'm just going to call it
whatever they called itin the theme repo.And then I'll hit Save.Now going back to the Obsidian vault now,I can click on Settings
and then Appearance.Scrolling down here.It looks like in the CSS snippets sectionthe extended-colorschemes filethat I saved is already being detected,but it isn't enabled yet.So then I'm going to enable that.And what that does is now
when I go into Style Settings,
there's gonna be yet another
section for AnuPpuccinwhich is called AnuPpuccin
Themes Extended.So now I can extend the
Dark and Light themes.This gives me more options.So without thisI just have the two that
were here in colors, right?Latte and Rose Pine, and
then I could select accents.But in AnuPpuccin Themes Extended,if I enable the Light Theme,
then there are more flavors
of the Light Theme that are
just automatically done for you.And the cool thing is that
some of these might be familiarbecause there are other
themes that are alreadypresent in Obsidian.Like I used this one for a while,the dark versions of all of these anywayand I just think it's
cool, like a little nod.This developer is playing
off of other developer stuff.There's also this Notion onewhich I actually don't like too much.And then you can also just disable that
whenever you want to.I like the red so I'm going
to leave it off for nowbut you can switch between
them whenever you want.They're actually even more
flavors just for the dark theme.And you can also toggle
this like deep blackthe amoled black on all themes.One of the things I really
loved about the Minimal themeand also one of the reasons I stayedwith it so long, is that it
has this cool cards featurewhere this is actually a dataview querybut it is just presented
in a different way.
And that's because it's
using different CSS classesthat are also provided
by the minimal developerand now CEO of Obsidian
incidentally Kepano or Stephan Ango.So it's just a different way to presentDataview query results.And all I had to do was have
this CSS classes listed here.I do this a lot for my TTRPGsas you can see here are
all of the sessions here,and I'd just like for
each one to have an imagefor me to remember that game session by.
Now the cool thing is that was on anupand you can do cards
on AnuPpuccin as well.Here's how.Going back to the AnuPpuccin
Style Setting section,I can scroll down to Integrations,
click on Minimal Cards,and there is a link to
download the snippetfrom Kepano's GitHub via a link.So I'm going to click on thatand I'm going to do the same
thing except now take notethat this is a .scss.
So I'm not gonna get
into what all that means.I'm also not a front end developer,so I'm just gonna show
you what to do with thatbecause you can't do the
same thing that we just didwith the other snippet.So if you're wondering why
that snippet is now a .scssinstead of a css, that's
because it has to be compiledinto a css, and we need it to
be a css in order to be ableto use it with Obsidian.Rather than go into this and
teach you how to compile thisin vs \*code or something,
I'm just going to give you
the css.So check out the link
in the description belowwhere you can get a snippetand you'll just be able to copy it,and drop it into your vault.If you're on Patreon though,
it'll already be in the vault.So here is the Obsidian vault,and within Obsidian and
Snippets, I'm just going to pastethat cards css.And let me show you what that looks like.Here it is in Sublime Text.This is the CSS version.
Now that we've got that,
we can go back to Obsidian,and go to Appearance and scroll down.And now the card CSS
snippet is there as well.Now that it's enabled,
we can actually use it.So for example, if I go
back to the AnuPpuccin note,I'll type cards here.So I have some items here
in a sample database.I've got new item and second item.So it looks like they have type DV item.
So I'm just going to try to pull these inin a dataview query.So dataview, table, type from sampledb,and let's see what that looks like.Since I didn't specify conditions,I'm getting all of them, that's fine.That will mean that I have
more to work with anyway.So this is what it would
normally look like.If instead I went up to the top here,
and entered some YAML
frontmatter with a CSS class.When I scroll down,
you'll see that the cardsare now displayed horizontally
rather than vertically.And I can also control what
is actually shown in them.Right now I only said that
I wanted to see the typeand they have status and dates,so maybe I can put that in as well.So I can put status and date.And now it's showing those three fields.So some of them obviously
don't have that stuff.
So this is a way that you can use cards.And as you can see in my main vault,you can use images with it as well.And it actually works really wellfor TTRPG sessions and characters.So that's my current
favorite theme AnuPpuccin.As you can see, it comes
with a lot of optionsespecially with the Style Settings plugin,and also a lot of integrationsfor some of my favorite themesand some of my favorite
other plugins like Canand\*which I didn't even get to show you.
If you like this idea of a
theme that is super flexible,it really just provides you the frameworkand you can change so much about it,then maybe consider buying
the developer a coffee.The developer's name is Anubis Nekhet.And I'm gonna leave a
link in the pin commentto their buy me a coffee link.If you're interested in other waysthat you can make your
notes more appealing,then check out this video
where I go over how to createa visual title casted.
Also, shout out to Germ and
Hebba, two super cool engineers,and viewers of this channel
that I met recently in Monacoof all places.It's so great meeting peoplefrom the other side of the cameraand just connecting
with them in real life.Grazie per aver guardato!Thanks for watching., My new favorite Obsidian theme, Nicole van der Hoeven, 01gt2tvzdt115w6jd0ycd56vhf.