Getting comfortable with Obsidian CSS

Share & showcase
,
14

Also from @death.au, how to handle dark and light elements in your CSS

a) Create a CSS variable for your colour in .theme-light and .theme-dark blocks and use that variable where you need it:

.theme-dark {
  --title-color: black;
}
.theme-light {
  --title-color: white;
}
.view-header-title {
    font-size: 22px;
    color: var(--title-color);
}

Or b) you can just add .theme-light or .theme-dark to the start of your selector:

.view-header-title {
    font-size: 22px;
}
.theme-light .view-header-title {
    color: white;
}
.theme-dark .view-header-title {
    color: black;
}
4 Likes
15

Thanks. I prefer the variable method, myself because you can use the variable in multiple places and just tweak the colour in two.

But the latter approach is equally valid and could be useful in some cases (say if in dark mode the text needed to be bolder to stand out)

1 Like
16

A global user.css file that overrides specific elements would be a nice thing, other Markdown tools such as Typora has this as well. Sometimes it’s a small thing like larger font sizes.

3 Likes
19

Keyboard shortcut to bring up developer window on Mac with Obsidian v0.6.7 is Alt-Cmd-I.

2 Likes
20

Is there a starter template or similar to use when developing a new theme? Or is it normal to just start with an empty obsidian.css file?

3 Likes
21

Normal to start with empty CSS file. I think someone may be working on documentation that includes that. But it may be awhile because the program is in early development. I’d recommend checking out the Hulk theme, I believe they have the code laid out nicely to edit it the way you want.

2 Likes
22

Thanks for the tip to checkout Hulk theme. I’ll do that.

For anyone else interested, the Hulk theme is here:
https://github.com/pgalliford/Obsidian-theme-Incredible-Hulk

3 Likes
23

Complete noob to css here, I’ve made some changes in the developer window (heading and code block colours) but when I exit the app it reverts to the default. Could anyone advise me how to make it stick?

24

As an Electron app, Obsidian operates within a quasi-browser—so you must mean that you edited the CSS or HTML of that browser’s developer tools pane/settings. Indeed, those would not save, as it’s similar to editing the CSS or HTML of any page you visit on the web—when you quit and reopen, you’ve essentially refreshed the page, so Obsidian calls its actual style code to inform how everything should look.

You should save your settings to a file called obsidian.css and keep that file at the root of your Vault.

You can create obsidian.css anew, but it may be easier to turn on a community theme and edit the one that appears with it.

25

I’ve been using Comfort Color Dark by ezs and tried editing the css file. Found the headers to change colours but I can’t find any reference to the code blocks anywhere. Probably missing something simple.

26

@andybyers I don’t see that theme in the forum or my CSS list, so I’m not sure. Try searching for the word Code. If you don’t find it then just append your own code at the bottom with !important at the end.

Here is the selector

.markdown-preview-view code {
color: red !important;
background-color: green !important;
}
1 Like
27

Just some notes on the CSS specific to 0.7+ that came up on the Discord:

divs with .workspace-leaf-content have a data-type (e.g. “markdown”) and they also have a data-mode="preview" when in preview mode (and corresponding data-mode="editor" for the editor).

Within the main container, there is div with class .workspace which contains:

  • the ribbons ( .workspace-ribbon.side-dock-ribbon.mod-left and .workspace-ribbon.side-dock-ribbon.mod-right )
  • the sidebars ( .workspace-split.mod-left-split and .workspace-split.mod-right-split )
  • and the main “root” workspace ( .workspace-split.mod-root ).

So, if you’re looking to target a note in a sidebar specifically, you’d probably be looking for something like .mod-left-split .workspace-leaf-content[data-type="markdown"]

5 Likes
28

It’s wried, I can’t open the developer window in Mac OS.

1 Like
29

@Jedi did you try “option+cmd+i” ?

1 Like
30

:+1: it works, thank you so much, now I can customize my theme.

31

Thank you for this! I was going crazy pressing Cmd-Shift-I and wondering why it wouldn’t work.

32

I have an obsidian.css now that’s based on a theme from someone else, plus, at the bottom, several additional customizations I’ve gradually accumulated.

I like to try new theme’s occasionally as they are posted here.

The issue is, it gets a little tedious each time to have to copy/paste in all my accumulating customizations on top of the new theme and then swap it in for my prev obsidian.css. Gets worse if I have more than 1 vault, using diff themes.

I thought probably there is a way in CSS to be more modular, and discovered there is in fact an @import statement.

So I tried making my obsidian.css consist soley of:

@import "obsidian-theme.css";
@import "my-customizations.css";

…so that I could easily swap in new themes, as well as easily adjust my customizations.

But not only did Obsidian not render any of the referenced styling, it seemed to confuse the parser - the cursor jumping around strangely.

Is a modular strategy like this viable, and if so, any tips on how can I get it to work?

Thanks!

3 Likes
33

I thought I was the only one who wanted this! Felt frivolous for me to ask for it, but seems like a few of us Theme Addicts are thinking in the same direction. However, you’re the second person to say the @import technique doesn’t work. I’m interested to see if anyone HAS gotten it to work by using a particular coding syntax. My research this morning said the @import stuff has to go at the top of the sheet, though – maybe that’s the issue? I haven’t dug into it yet because I’m still organizing my theme snippets for future import calls.

Edit: Just tried it, I can’t get it to work either. Thought maybe it was a file access permissions thing, but doesn’t appear to be.

2 Likes
34

Doesn’t that @import depend on the app you use for css?