// ABOUT ME Site: https:/..." --- My new favorite Obsidian theme ![rw-book-cover](https://i.ytimg.com/vi/7-SOwxpZQNI/maxresdefault.jpg) ## 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.