Obsidian CSS Snippets Collection

A collection of beautiful and functional CSS snippets to enhance your Obsidian experience with colorful folders, glass effects, animations, and improved visual interactions.

☕ Support Me

Did you find these snippets useful? A little support goes a long way. Thank you!

📦 What's Included

🌈 Rainbow Glass Folders ⭐ NEW & ENHANCED

• Rainbow Glass Folders - The most advanced folder styling with glass effects, full opacity modes, and extensive customization
• Complete Style Settings integration with 15+ customizable options
• Three display modes: Default (no background), Glass Effect, and Solid Background
• Theme-aware colors with separate light/dark mode text colors
• Advanced hover effects and typography controls

🗂️ Rainbow Folder Enhanced

• Rainbow Folder Enhanced - Original gradient folders with Style Settings support
• Static and animated gradient options with performance controls
• Configurable through Obsidian's Settings panel
• Optimized for performance with toggle options

📅 Calendar Animations

• Calendar Animations - Interactive calendar day hover effects with dot pulse animations
• Lift and scale effects for calendar days
• Sequential dot pulse animations creating wave effects
• Compatible with Svelte-based calendar plugins

✨ Features Overview

🌈 Rainbow Glass Folders (Recommended)

• 🎨 Three Visual Modes:
  • Default: Clean folders without custom backgrounds
  • Glass Effect: Semi-transparent folders with blur effects
  • Solid Background: Full opacity colorful folders
• ⚙️ Comprehensive Style Settings: 15+ customizable options
• 🌓 Theme Awareness: Separate text colors for light and dark modes
• 🎭 Advanced Hover Effects: Configurable lift distance and shadows
• 💨 Performance Optimized: No heavy animations, smooth interactions
• 🔤 Typography Control: Adjustable font weights from 100-900
• 📐 Precise Spacing: Control padding, margins, and corner roundness
• 🎯 Hierarchy Support: Different styling for main vs. sub-folders
• 📁 11 Color Variations: Beautiful gradient cycles through folder hierarchy

🗂️ Rainbow Folder Enhanced Features

• 🎨 Colorful Gradients: 11 different color variations
• ⚙️ Style Settings Integration: Full customization support
• 🎭 Hover Effects: Configurable lift and shadow animations
• 💨 Performance Options: Toggle animations on/off
• 🔤 Typography Control: Adjustable font weight
• 📐 Spacing Controls: Customizable padding and margins
• 🎯 Animation Controls: Adjustable speed and effects
• 📁 Subfolder Support: Transparent subfolders with hierarchy

📅 Calendar Animations Features

• 🚀 Lift Effect: Calendar days lift and scale on hover
• 💫 Dot Pulse Animation: Task indicator dots pulse sequentially
• 🌊 Staggered Timing: Multiple dots animate in wave patterns
• 🎯 Smooth Transitions: Eased timing for natural feel
• 📱 Svelte Compatible: Works with modern calendar plugins

🚀 Installation

Prerequisites

• Style Settings Plugin (highly recommended)
  • Install from Obsidian Community Plugins
  • Required for easy customization of Rainbow Glass Folders and Rainbow Folder Enhanced
• Calendar Plugin (for calendar animations)

Installation Steps

1. Download the CSS files from this repository
2. Open Obsidian and go to Settings → Appearance
3. Scroll down to "CSS Snippets" section
4. Click the folder icon to open your snippets folder
5. Copy the CSS files into the snippets folder
6. Return to Obsidian and refresh the snippets list
7. Toggle on the snippets you want to use

Style Settings Configuration

1. Enable Style Settings plugin (if not already installed)
2. Navigate to Settings → Style Settings
3. Find your enabled snippet in the plugin list
4. Customize your preferences using the available options

📁 File Descriptions

Rainbow Glass Folders.css ⭐ RECOMMENDED

• Most Advanced Option: Latest and most feature-rich folder styling
• Style Settings Compatible: Full integration with 15+ customizable options
• Three Display Modes: Default, Glass Effect, and Solid Background
• Theme Aware: Automatic adaptation to light/dark themes
• Performance Optimized: No heavy animations, smooth interactions
• Advanced Customization: Comprehensive control over all visual aspects

Rainbow Folder Enhanced.css

• Original Enhanced Version: Solid gradient backgrounds with animations
• Style Settings Compatible: Full integration with customizable options
• Animation Support: Toggle between static and animated gradients
• Performance Options: Choose static mode for better performance
• Advanced Controls: Border radius, lift distance, animation speed

calander animations.css

• Interactive Calendar Effects: Hover animations for calendar days
• Dot Pulse Animations: Task indicator dots animate sequentially
• Svelte Calendar Support: Compatible with Svelte-based calendar plugins
• Manual Customization: Currently requires manual CSS editing for customization

🎨 Rainbow Glass Folders Settings

Main Folder Display

• Enable Folder Background: Toggle custom folder backgrounds on/off
• Use Solid Background: Disable glass effect for opaque backgrounds
• Enable Hover Effect: Toggle lift and shadow effects on hover

Style & Color Options

• Text Color (Light Mode): Custom text color for light theme (default: #000000)
• Text Color (Dark Mode): Custom text color for dark theme (default: #FFFFFF)
• Glass Opacity: Transparency level for glass effect mode (0.1-1.0, default: 0.55)
• Glass Blur: Blur intensity for glass effect (0-20px, default: 6px)
• Font Weight: Text thickness control (100-900, default: 500)
• Hover Lift: Lift distance on hover (0-10px, default: 2px)
• Corner Roundness: Border radius control (0-20px, default: 8px)
• Space Between Folders: Vertical spacing between folders (0-20px, default: 5px)
• Internal Padding: Top/bottom padding inside folders (1-20px, default: 5px)

🎨 Rainbow Folder Enhanced Settings

Animation Controls

• Enable Gradient Animation: Toggle smooth gradient animations (CPU intensive)
• Enable Hover Effects: Toggle lift and shadow effects on hover

Styling Options

• Folder Name Font Weight: Control font weight (100-900, default: 400)
• Hover Lift Distance: Lift distance on hover (0-10px, default: 2px)
• Border Radius: Corner roundness control (0-20px, default: 10px)
• Animation Speed: Gradient animation speed (2-15 seconds, default: 7s)
• Vertical Space Between Folders: Spacing control (0-20px, default: 6px)
• Vertical Padding Inside Folders: Internal padding (1-20px, default: 5px)

🎨 Color Palette

Both folder snippets use a carefully curated 11-color rainbow palette:

• Pink/Rose: rgb(243, 139, 168) variants
• Coral: rgb(235, 160, 172) variants
• Peach: rgb(250, 179, 135) variants
• Yellow: rgb(249, 226, 175) variants
• Green: rgb(166, 227, 161) variants
• Teal: rgb(148, 226, 213) variants
• Light Blue: rgb(137, 220, 235) variants
• Blue: rgb(116, 199, 236) variants
• Indigo: rgb(135, 176, 249) variants
• Purple: rgb(180, 190, 254) variants
• Lavender: rgb(203, 166, 247) variants

⚙️ Manual Customization

Calendar Animations (Manual Only)

Since calendar animations don't have Style Settings support yet, you can manually customize:

Adjusting Animation Speed

animation: dot-pulse 1s infinite ease-in-out; /* Change 1s to your preferred duration */

Modifying Hover Effects

transform: translateY(-5px) scale(1.02); /* Adjust -5px and 1.02 as needed */

Changing Dot Animation Delays

animation-delay: 0.10s; /* Adjust delay for staggered effect */

Advanced Manual Customization

For both folder snippets, you can still manually edit colors:

Custom Colors Example

.nav-files-container > div > .nav-folder:nth-child(11n + 2) {
    background: linear-gradient(90deg, rgb(255, 180, 200), rgb(243, 139, 168), rgb(220, 100, 140));
}

🔧 Compatibility

Rainbow Glass Folders

• ✅ Style Settings Plugin: Full integration and support
• ✅ All Obsidian Themes: Works with any theme
• ✅ Light/Dark Mode: Automatic theme detection and adaptation
• ✅ Custom Folder Structures: Compatible with nested folders
• ✅ Performance Optimized: No heavy animations
• ✅ Responsive Design: Adapts to different screen sizes

Rainbow Folder Enhanced

• ✅ Style Settings Plugin: Full integration and support
• ✅ All Obsidian Themes: Works with any theme
• ✅ Custom Folder Structures: Compatible with nested folders
• ✅ Performance Optimized: Configurable animations
• ✅ Responsive Design: Adapts to different screen sizes

Calendar Animations

• ✅ Calendar Plugin: Works with official Calendar plugin
• ✅ Periodic Notes: Compatible with Periodic Notes plugin
• ✅ Svelte-based Calendars: Requires Svelte calendar implementation
• ⚠️ Custom Calendar Plugins: May need adjustment for non-standard plugins

🐛 Troubleshooting

Rainbow Glass Folders

• Colors Not Appearing: Check if snippet is enabled and Style Settings plugin is installed
• Glass Effect Not Working: Ensure "Enable Folder Background" is turned on
• Text Hard to Read: Adjust text colors for your theme in Style Settings
• Performance Issues: Try solid background mode instead of glass effect

Rainbow Folder Enhanced

• Colors Not Appearing: Check if snippet is enabled and Style Settings plugin is installed
• Settings Not Showing: Ensure Style Settings plugin is installed and active
• Performance Issues: Disable gradient animations in Style Settings
• Folders Not Styling: Clear Obsidian cache and restart

Calendar Animations

• Animations Not Working: Verify compatible calendar plugin is installed
• Dots Not Pulsing: Check that calendar uses Svelte components
• Performance Issues: Reduce animation duration in CSS manually

General Issues

• Snippet Not Loading: Refresh snippets list in Appearance settings
• Conflicts with Theme: Try disabling other CSS snippets temporarily
• Performance Problems: Use Style Settings to reduce effects

📋 Requirements

Essential

• Obsidian: Latest version recommended
• CSS Snippets Support: Built into Obsidian

Highly Recommended

• Style Settings Plugin: For easy customization of folder snippets
• Calendar Plugin: For calendar animations to work
• Periodic Notes Plugin: Enhances calendar functionality

Optional

• Iconize Plugin: For enhanced folder icons
• Custom themes: All snippets work with any theme

🎯 Performance Tips

For Best Performance

1. Use Rainbow Glass Folders: Most optimized option without heavy animations
2. Choose Solid Background Mode: Instead of glass effect for better performance
3. Disable Gradient Animations: In Rainbow Folder Enhanced if using both

For Slower Devices

1. Use Default Mode: In Rainbow Glass Folders (no custom backgrounds)
2. Disable All Animations: Turn off hover effects and animations
3. Reduce Blur Effects: Lower glass blur settings
4. Use Lower Font Weights: Choose 400 or below for text

General Optimization

1. Enable Hardware Acceleration: In Obsidian settings
2. Close Unnecessary Plugins: Reduce overall resource usage
3. Restart Obsidian: After making significant changes
4. Update Regularly: Keep Obsidian and plugins updated

🆚 Which Snippet Should I Choose?

Choose Rainbow Glass Folders If:

• ✅ You want the most advanced features
• ✅ You prefer subtle, professional glass effects
• ✅ You need theme-aware automatic color adaptation
• ✅ You want maximum customization options
• ✅ Performance is important to you

Choose Rainbow Folder Enhanced If:

• ✅ You prefer solid, vibrant gradient backgrounds
• ✅ You want animated gradient effects
• ✅ You like the original rainbow folder style
• ✅ You don't mind potentially higher CPU usage

Choose Calendar Animations If:

• ✅ You use calendar plugins regularly
• ✅ You want interactive visual feedback
• ✅ You enjoy subtle micro-animations
• ✅ You have a Svelte-compatible calendar plugin

🔄 Future Updates

Planned Features

• Style Settings support for Calendar Animations
• Additional color schemes and themes
• More glass effect customization options
• Enhanced theme integration
• Additional animation options

Contribution Ideas

• Custom color palette suggestions
• Performance optimization improvements
• New animation effects
• Theme-specific optimizations
• Accessibility improvements

📝 Credits

Created for the Obsidian community to enhance the visual experience of note-taking and organization.

Special thanks to:

• Style Settings Plugin developers for making customization accessible
• Obsidian community for feedback and suggestions
• Calendar plugin developers for creating compatible interfaces
• Theme developers for inspiration and compatibility testing

🤝 Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

• Report Issues: Found a bug? Let us know!
• Suggest Features: Have ideas for improvements?
• Submit Pull Requests: Code improvements and new features
• Share Customizations: Show off your modifications
• Test Compatibility: Help test with different themes and plugins

Development Guidelines

• Comment Your Code: Make it easy for others to understand
• Test Thoroughly: Ensure compatibility across different setups
• Follow CSS Best Practices: Maintain clean, efficient code
• Document Changes: Update README with new features
• Respect Performance: Consider impact on different devices

📜 License

MIT License - These CSS snippets are provided as-is for the Obsidian community. Feel free to modify, distribute, and build upon them.

🆘 Support

Need help? Here are your options:

1. Check Troubleshooting Section: Common issues and solutions above
2. Style Settings Documentation: For plugin-specific help
3. Obsidian Community: Discord and forum support
4. GitHub Issues: Report bugs and request features

---

Enjoy your enhanced Obsidian experience! 🎉

Pro Tip: Start with Rainbow Glass Folders for the best balance of features and performance, then explore the other snippets based on your specific needs!