A comprehensive Firefox customization project providing a highly customized browser experience with vertical tabs, custom toolbars, and extensive UI modifications.

Firefox Theme Screenshot

1. Enable userChrome CSS support:

   • Navigate to about:config
   • Set toolkit.legacyUserProfileCustomizations.stylesheets to true

2. Install the theme:

   • Copy all files to your Firefox profile's chrome/ directory
   • Restart Firefox

3. For JavaScript functionality (optional):

   • Install fx-autoconfig
   • Follow the installation guide

• Installation Guide - Step-by-step setup instructions
• Configuration Guide - Customize settings and appearance
• Troubleshooting Guide - Common issues and solutions

• Architecture Overview - Project structure and design patterns
• CSS Components - Detailed CSS system documentation
• JavaScript Modules - UserChrome.js and ES module system
• Preferences Reference - All about:config preferences and their descriptions

• Development Guide - Contributing and development setup
• API Reference - Complete documentation index

• 🔄 Vertical Tabs: Custom vertical tab implementation with drag-and-drop support
• 📊 Second Sidebar: Advanced sidebar system with web panels (like Vivaldi/Floorp)
• 🎨 Custom Toolbars: Redesigned toolbar layout framing the browser window
• 🌙 Theme Support: Light/dark mode with blur effects and custom styling
• ⚡ JavaScript Extensions: Enhanced functionality through UserChrome.js scripts
• 📱 Responsive Design: Adapts to different window sizes and screen resolutions
• 🔧 Highly Customizable: Extensive configuration options via CSS variables

This theme is designed for users who:

• Want a clean, efficient browser interface
• Prefer vertical tab management for better space utilization
• Use many browser extensions and need quick access
• Appreciate customizable, keyboard-friendly workflows
• Want advanced sidebar functionality with web panels

firefox-theme/
├── userChrome.css # Main CSS entry point
├── userContent.css # Content page styling 
├── css/ # CSS modules
│ ├── chrome/ # Browser UI styling
│ ├── common/ # Shared variables and utilities
│ └── content/ # Web content styling
├── JS/ # JavaScript modules
│ ├── second_sidebar/ # Advanced sidebar system
│ └── *.uc.js # UserChrome.js scripts
├── resources/ # Assets and configurations
└── .github/documentation/ # Comprehensive documentation

• Firefox: Version 100+ (tested with latest stable, ESR, Beta, and Nightly)
• Operating Systems: Windows 10/11, macOS 10.15+, Linux (most distributions)
• Optional: fx-autoconfig for JavaScript functionality

NixOS Users: This configuration integrates with NixOS declarative configurations. See the "imperative" branch for non-declarative installation methods.

JavaScript Features: The second sidebar and advanced features require fx-autoconfig script loader. The theme works with CSS-only installation but with reduced functionality.

We welcome contributions! Please see our Development Guide for:

• Setting up a development environment
• Code style guidelines and best practices
• Testing procedures
• Pull request process

This project is released under the Mozilla Public License.

• fx-autoconfig - Script loading framework
• aminomancer - Comprehensive userChrome.js documentation
• MrOtherGuy - Firefox CSS resources and tools
• Firefox userChrome.css community - Inspiration and code examples

• Tree Style Tab - Alternative vertical tab solution
• Sidebery - Another sidebar extension
• userChrome.org - Community CSS resources
• Firefox CSS Hacks - CSS modification collection

Need help? Check our troubleshooting guide or browse the complete documentation.