Firefox theming (w/ Home-manager) doesn't want to change color scheme

Help
1

I’m trying to figure out what the culprit is, but essentially something is preventing custom theming of firefox. It looks like the settings menu colors can change and the css is getting pulled in from userChrome.css, but I can’t seem to put it into dark mode. I ran a console command to test if the prefer-dark-mode was true and it showed true, but I can’t get the colors to actually change. Here’s my config related to firefox:

home.file.".mozilla/firefox/laozi/chrome" = {
        source = ../config/firefox/chrome;
        recursive = true;
};
programs.firefox.profiles.default.userChrome = builtins.readFile ../config/firefox/chrome/userChrome.css;
programs.firefox.profiles.default.settings = {
                "browser.search.defaultenginename" = "Kagi";
                "browser.search.order.1" = "Kagi";
                "browser.startup.homepage" = "https://kagi.com";
                "extensions.autoDisableScopes" = 0;
                "toolkit.legacyUserProfileCustomizations.stylesheets" = true;
                "layout.css.prefers-color-scheme.content-override" = 0;
};

I’m using the catppuccin cascade firefox theme btw. The color scheme looks like it supports both light and dark mode. Let me know if there’s anything else I should provide. I’m new to this forum.

2

I don’t know if it will help your problem, but there should be no need to set home.file.".mozilla/firefox/laozi/chrome". Each CSS file imports other CSS files relative to itself + that’s a different profile. Also, programs.firefox.profiles.default.userChrome can be set to a path directly instead of using readFile.

You can view the userChrome CSS and how it’s being applied to the browser UI using the browser toolbox. It works the same as the web developer tools, if you’re familiar with them. Also, make sure to keep in mind in general the difference between the browser CSS (userChrome) and the content (web pages + some other stuff) CSS (userContent). The browser toolbox is the tool to use for checking userChrome stuff.

# For browser toolbox/live editing user CSS
"devtools.chrome.enabled" = true;
"devtools.debugger.remote-enabled" = true;

Personally, for my theming I use"extensions.activeThemeID" = "firefox-compact-dark@mozilla.org"; as a base. That or manually setting some other options may be necessary to get the browser UI to be in dark mode.

3

So I think I was having issues with it due to some environment variable that I had set earlier for a a theme I pulled from someone’s dotfiles. It was preventing any changes to my firefox theme colors. To be honest I don’t know which one, but it was one of these:

        # GTK_USE_PORTAL = "1";
        # QT_QPA_PLATFORM = "wayland-egl";
        # QT_WAYLAND_DISABLE_WINDOWDECORATION = "1";
        # QT_AUTO_SCREEN_SCALE_FACTOR = "1";
        # GTK_CSD = "0";
        # QT_QPA_PLATFORMTHEME = "gtk3";
        # QT_SCALE_FACTOR = "1";

Likely GTK_CSD but it doesn’t really make sense if it was set to 0. Either way, I unset those environment variables and was able to apply a theme. I ended up using stylix, but it likely would have worked with the other methods I was using.

PS: I didn’t want to use the “activeThemeID” because I wanted a more custom setup.

4

Does that prevent an especially custom setup? I did my style from scratch and didn’t run into any issues.

5

From my understanding, this will only allow for themes downloaded from Firefox (I’m probably wrong). I wanted to change the css and overall appearance of Firefox which (from my understanding) requires directly modifying the userChrome. Either way, after removing those environment variables, I was able to do everything with stylix.

6

Glad you got it working. Builtin Firefox themes don’t prevent custom userChrome theming. It just changes some of the details of how the CSS is customized. I personally found some of the ways the non-system themes are handled internally helpful for CSS customization.