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!

• White (page-white)
• Manila/Tan (page-manila)
• Blueprint (page-blueprint)

• Black (pen-black)
• Gray (pen-gray)
• Red (pen-red)
• Green (pen-green)
• Blue (pen-blue)
• Purple (pen-purple)
• White (pen-white)

• 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.

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!