Foreglow Theme for Firefox

Choose a theme for Firefox using userChrome.css, in four variants: Foreglow (dark, default), Afterglow (light), Airglow (twilight), and Alpenglow (rubescent).

Installation

With userChrome.css

1. Open Firefox and navigate to about:config
2. Set toolkit.legacyUserProfileCustomizations.stylesheets to true
3. Open your Firefox profile folder:
   • Type about:support in the address bar
   • Click "Open Folder" next to "Profile Directory"
4. Create a folder named chrome if it doesn't exist
5. Copy userChrome.css into the chrome folder (this installs the default Foreglow dark variant)
6. Restart Firefox

Switching variants

userChrome.css is the only file Firefox actually loads. To use a different variant, replace its contents with one of the other files:

cp afterglow.css ~/.mozilla/firefox/<profile>/chrome/userChrome.css

(swap afterglow.css for airglow.css or alpenglow.css as needed), then restart Firefox.

With Stylus Extension

1. Install the Stylus extension
2. Create a new style and paste the contents of whichever variant file you want
3. Save and enable

If native popups/menus still don't match

Firefox's own "Firefox Theme" setting (about:preferences → General → Firefox Theme) can override some native colors on top of userChrome.css on certain Firefox versions. If anything still looks off after installing, set it to "System default" or "Light"/"Dark" to match the variant you're using.

Color Palette

Palette source: base16-foreglow-scheme.

Token	Foreglow	Afterglow	Airglow	Alpenglow
Background	#161221	#F4EEE1	#0A1A1F	#1A0505
Alt Bg	#1D182A	#ECE5D5	#0F2024	#2D0A0A
Hover Bg	#281F3D	#E6D6C1	#163940	#3D1212
Foreground	#E8E3F2	#24163B	#E0F0F5	#F5E6DC
Dim Fg	#A49BBF	#574979	#7A9AA0	#C4A398
Border	#322C44	#CDAEA2	#2A4A50	#4D1818
Accent	#F471C8	#C3228E	#2EE8C8	#FF6B9D

License

MIT © Foreglow