Catppuccin for Zen Browser

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

1. Create a chrome folder in your Zen Browser's profile directory.
2. Copy the userChrome.css, userContent.css, and zen-logo.svg files of your preferred theme from the themes/ directory in this repository to your chrome folder.

Note

If you're using the 🌻 Latte theme, set your browser to light mode. For 🪴 Frappé, 🌺 Macchiato, or 🌿 Mocha, enable dark mode to apply the theme correctly.

✨ Enhanced Features

This theme pack includes advanced interactive effects that bring your browser to life:

🎯 Centered Layout

• Centered bookmark toolbar for better visual balance
• Centered URL bar text for a clean, modern look

🎭 Browser UI Animations (userChrome.css)

• Bookmarks: Scale, float, and glow effects with backdrop blur on hover
• URL Bar: Dynamic scaling with gradient borders and enhanced focus states
• Tabs: Lift animations with brightness enhancement and continuous pulse effects for active tabs
• Toolbar Buttons: Scale and rotation with radial gradients and glow shadows
• Sidebar: Smooth gradient slides with blur effects on tree rows
• Workspace Button: Elegant glow and scale transformations with gradient backgrounds

🎪 Context Menu Magic

• Glass Morphism: Beautiful backdrop blur with gradient backgrounds
• Shimmer Effects: Animated light streaks across menu items using pseudo-elements
• Interactive Elements:
  • Icons rotate and scale on hover
  • Menu arrows slide and rotate
  • Text slides with theme-colored shadows
• Smart Animations: Smooth appearance with scale and slide effects
• Menu Separators: Continuous glow animation with gradient backgrounds
• Color-Adaptive: All effects automatically match each theme's primary color

🌐 About Pages Magic (userContent.css)

Magical effects that transform all internal browser pages with theme-adaptive animations:

🏠 about:newtab & about:home

• Top Sites: Floating hover effects with scale and lift plus gradient backgrounds
• Cards: 3D lift animations with backdrop blur and radial glow using pseudo-elements
• Search Box: Dynamic scaling with pulsing glow on focus and rounded borders
• Logo: Continuous floating animation with hover scale and rotation

⚙️ about:preferences

• Category Menu: Slide-in animations with gradient backgrounds and border accents
• Group Boxes: Shimmer borders with magical light streaks on hover using pseudo-elements
• Checkboxes & Radios: Scale and glow effects with continuous pulse animations when active
• Selected Items: Continuous pulse animation with enhanced shadows and glow

🧩 about:addons

• Extension Cards: Smooth lift animations with backdrop blur and gradient overlays
• Toggle Switches: Scale and glow effects with theme-adaptive colors
• Hover States: Gradient overlays with animated shimmer effects using diagonal gradients

🛡️ about:protections

• Protection Cards: Subtle lift effects with themed border highlights
• Statistics: Scale animations with color-changing text shadows
• Charts & Graphs: Gentle scaling with soft glow effects
• Interactive Elements: Smooth hover states with gradient backgrounds

🎨 Universal Enhancements

• Custom Scrollbars: Gradient themes with glow effects on hover
• Page Load Animation: Smooth slide-in entrance effects
• Text Selection: Theme-colored highlights with subtle glow
• Focus Outlines: Glowing borders that adapt to each theme's accent color
• Form Inputs: Clean focus states with theme-adaptive outer glow
• Buttons: Scale and shimmer effects with gradient backgrounds
• Links: Slide animations with text shadow and filter effects

🌈 Intelligent Color System

• Auto-Detection: Automatically extracts and adapts to each theme's primary color
• Dynamic Effects: All animations use theme-appropriate colors for perfect harmony
• 56 Variants: Every theme (Latte, Frappé, Macchiato, Mocha) across all 14 colors includes these effects
• RGB Precision: Accurate color conversion for smooth rgba animations

🎮 Performance Optimized

• CSS3 Transitions: Hardware-accelerated animations with smooth easing
• Lightweight: No JavaScript overhead - pure CSS magic
• Smooth 60fps: Optimized for fluid animations without performance impact
• Smart Animations: 5 keyframe animations (float, pulse, shimmer, glow, slideIn)

🚀 Pro Tip: These effects work seamlessly across all themes and automatically adapt to your chosen color scheme!

🙋 FAQ

• Q: What if I already have a userChrome.css and/or userContent.css configuration?

  A: You can copy and paste the content of our userChrome.css and/or userContent.css files into your existing ones. This way, you can keep your current configurations while applying the new theme settings.

• Q: Can I automatically switch flavors between light and dark mode?

  A: Yes! You can concatenate the userChrome.css and userContent.css files for 🌻 Latte (light mode) along with one of the dark mode themes like 🪴 Frappé, 🌺 Macchiato, or 🌿 Mocha. The browser will automatically switch between these themes when toggling between light and dark mode.

💝 Thanks to

• IAmJafeth

 

Copyright © 2021-present Catppuccin Org