CSSAny theme
# Obsidian-Notebook-Themes v2.2.3
## A Series of Notebook Theme CSS Snippets for Obsidian.
These a few CSS classes that mimic a few of my real-world notebook pages and pen colors.
Go ahead and try it out! You can change or add new color variables or entire new
classes and combinations. Inside Obsidian, apply a page class with an optional
pen color class to see the effects. Add the `recolor-images` class to recolor
the images in your notes, too! *(for images with transparency).*
Check out the full video going over the process [here](https://youtu.be/9T9VL8_i1Tg)!
### Page Background Colors
- White (`page-white`)
- Manila/Tan (`page-manila`)
- Blueprint (`page-blueprint`)
### Pen Colors
- Black (`pen-black`)
- Gray (`pen-gray`)
- Red (`pen-red`)
- Green (`pen-green`)
- Blue (`pen-blue`)
- Purple (`pen-purple`)
- White (`pen-white`)
### Other Classes
- `recolor-images`: Recolors all images on the page to match the current pen color.
- `page-grid`: Adds grid lines to the page background.
- `embed-<PAGE-COLOR>`: Adds the specified page color as a background for all embedded images on a page.
*Image Effects generated with https://angel-rs.github.io/css-color-filter-generator.*
## How to Install and use the CSS Snippet
1. Download `Notebook Backgrounds.css` from this repo.
2. Open the settings panel in Obsidian and click the Appearance tab.
3. Scroll to "CSS snippets" and click the folder icon.
4. Drop `Notebook Backgrounds.css` into the folder that appears.
5. Now back in Obsidian, next to "CSS snippets", click the "Reload snippets" button.
6. You should now see `Notebook Backgrounds` in the list. Toggle it on and you're ready to go!
How to Install
- Download the CSS file below
- Move it to your vault's
.obsidian/snippets/folder - Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Stats
Stars
510
Forks
34
License
MIT
Last updated 24mo ago
Categories
Tags
obsidian