https://github.com/cyanvoxel/obsidian-notebook-themes

A Series of Notebook Theme CSS Snippets for Obsidian.
https://github.com/cyanvoxel/obsidian-notebook-themes

obsidian obsidian-md obsidian-notes obsidian-snippet obsidian-theme

Last synced: 6 days ago
JSON representation

A Series of Notebook Theme CSS Snippets for Obsidian.

• Host: GitHub
• URL: https://github.com/cyanvoxel/obsidian-notebook-themes
• Owner: CyanVoxel
• License: mit
• Created: 2024-02-01T10:25:39.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-04-13T17:55:46.000Z (8 months ago)
• Last Synced: 2024-12-08T11:51:44.325Z (15 days ago)
• Topics: obsidian, obsidian-md, obsidian-notes, obsidian-snippet, obsidian-theme
• Language: CSS
• Homepage:
• Size: 17.6 KB
• Stars: 333
• Watchers: 9
• Forks: 19
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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-`: 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!