Noctalia automatically discovers Zen Browser profiles and configures them to load its generated CSS.

Setup

When the Noctalia theming script runs, it automatically:

• Finds Zen profiles by locating their prefs.js files.
• Creates the profile’s chrome directory when necessary.
• Adds the Noctalia imports to userChrome.css and userContent.css.
• Enables custom profile stylesheets through the profile’s user.js.
• Enables the browser chrome debugging preference required by the integration.

No manual changes in about:config are required.

Set website appearance

Open Settings → Appearance and set Website Appearance to Auto. This allows websites to follow the color scheme generated by Noctalia.

Apply changes

Restart Zen Browser after the initial setup. A restart may also be required after color changes for the updated theme to appear.

Troubleshooting

• Some colors look wrong: Try disabling all mods at Settings → Zen Mods, then restart Zen. Some mods may override the template colors. For example, Better Tab Indicators can make the selected tab highlight barely visible. The solution is to disable that mod, or set a custom color in the mod settings. For more details, see the issue here.

• Dark/Light mode text is unreadable: Try also enabling the Noctalia GTK template. Make sure your system’s GTK color scheme (prefer-dark or prefer-light) matches the Noctalia/Zen theme mode (dark or light).

Remove the theme

Remove the following imports from the profile’s chrome/userChrome.css and chrome/userContent.css files:

@import "/home/YOURUSERNAME/.cache/noctalia/zen-browser/zen-userChrome.css";

@import "/home/YOURUSERNAME/.cache/noctalia/zen-browser/zen-userContent.css";

The setup script also adds these preferences to the profile’s user.js:

user_pref("devtools.chrome.enabled", true);
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

They may also be removed if they are not needed by other customizations. Restart Zen Browser after removing the theme.