A comprehensive Firefox customization project providing a highly customized browser experience with vertical tabs, custom toolbars, and extensive UI modifications.
-
Enable userChrome CSS support:
- Navigate to
about:config - Set
toolkit.legacyUserProfileCustomizations.stylesheetstotrue
- Navigate to
-
Install the theme:
- Copy all files to your Firefox profile's
chrome/directory - Restart Firefox
- Copy all files to your Firefox profile's
-
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
- 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.
