switch to librewolf & finish its theme

This commit is contained in:
Sean Kovacs 2026-01-15 09:21:06 -05:00
commit 719ec8949c
Signed by: sckova
GPG key ID: 00F325187C68651A
4 changed files with 143 additions and 165 deletions

View file

@ -1,109 +1,56 @@
/* Dark theme */ @import "../colors.css";
@media (prefers-color-scheme: dark) { @media {
#nav-bar, #nav-bar,
#PersonalToolbar { #PersonalToolbar {
background-color: rgb(24, 24, 37) !important; background-color: var(--mantle) !important;
} }
:root { :root {
.tabbrowser-tab[selected="true"] .tab-background { .tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid #313244 !important; border: 1px solid var(--surface0) !important;
} }
--toolbar-bgcolor: rgb(24, 24, 37) !important; --toolbar-bgcolor: var(--mantle) !important;
--toolbox-non-lwt-bgcolor: rgb(17, 17, 27) !important; --toolbox-non-lwt-bgcolor: var(--crust) !important;
--toolbox-non-lwt-textcolor: rgb(205, 214, 244) !important; --toolbox-non-lwt-textcolor: var(--text) !important;
--input-bgcolor: rgb(17, 17, 27) !important; --input-bgcolor: var(--crust) !important;
--toolbar-field-background-color: var(--input-bgcolor) !important; --toolbar-field-background-color: var(--input-bgcolor) !important;
--input-color: rgb(205, 214, 244) !important; --input-color: var(--text) !important;
--toolbar-field-color: var(--input-color) !important; --toolbar-field-color: var(--input-color) !important;
.tab-background[selected]:not([multiselected]) { .tab-background[selected]:not([multiselected]) {
outline: 1px solid rgb(49, 50, 68); outline: 1px solid var(--surface0);
outline-offset: -1px; outline-offset: -1px;
} }
.tab-background[multiselected] { .tab-background[multiselected] {
--focus-outline-color: rgb(49, 50, 68); --focus-outline-color: var(--surface0);
} }
--arrowpanel-background: rgb(49, 50, 68) !important; --arrowpanel-background: var(--surface0) !important;
--arrowpanel-color: rgb(205, 214, 244) !important; --arrowpanel-color: var(--text) !important;
--toolbarbutton-active-background: rgb(108, 112, 134) !important; --toolbarbutton-active-background: var(--overlay0) !important;
&:where([tabsintitlebar]) { &:where([tabsintitlebar]) {
--toolbox-non-lwt-bgcolor-inactive: rgb(17, 17, 27) !important; --toolbox-non-lwt-bgcolor-inactive: var(--crust) !important;
} }
--toolbarbutton-icon-fill-attention: rgb(205, 214, 244) !important; --toolbarbutton-icon-fill-attention: var(--text) !important;
--toolbarbutton-icon-fill: rgb(205, 214, 244) !important; --toolbarbutton-icon-fill: var(--text) !important;
--arrowpanel-border-color: rgb(49, 50, 68) !important; --arrowpanel-border-color: var(--surface0) !important;
--urlbarView-highlight-color: rgb(205, 214, 244) !important; --urlbarView-highlight-color: var(--text) !important;
--urlbarView-highlight-background: rgb(108, 112, 134) !important; --urlbarView-highlight-background: var(--overlay0) !important;
#tabbrowser-tabs { #tabbrowser-tabs {
--tab-loading-fill: rgb(205, 214, 244) !important; --tab-loading-fill: var(--text) !important;
} }
--tab-selected-bgcolor: rgb(30, 30, 46) !important; --tab-selected-bgcolor: var(--base) !important;
--tab-selected-textcolor: rgb(205, 214, 244) !important; --tab-selected-textcolor: var(--text) !important;
--chrome-content-separator-color: rgb(49, 50, 68) !important; --chrome-content-separator-color: var(--surface0) !important;
--toolbar-field-focus-border-color: rgb(49, 50, 68) !important; --toolbar-field-focus-border-color: var(--surface0) !important;
--input-border-color: rgb(24, 24, 37) !important; --input-border-color: var(--mantle) !important;
--toolbar-field-border-color: var(--input-border-color) !important; --toolbar-field-border-color: var(--input-border-color) !important;
--toolbar-field-focus-background-color: rgb(30, 30, 46) !important; --toolbar-field-focus-background-color: var(--base) !important;
#urlbar-input:focus::selection, #urlbar-input:focus::selection,
.searchbar-textbox:focus::selection { .searchbar-textbox:focus::selection {
color: rgb(49, 50, 68); color: var(--surface0);
} }
#urlbar-input:focus::selection, #urlbar-input:focus::selection,
.searchbar-textbox:focus::selection { .searchbar-textbox:focus::selection {
background-color: rgb(205, 214, 244); background-color: var(--text);
} }
--toolbarseparator-color: rgb(205, 214, 244) !important; --toolbarseparator-color: var(--text) !important;
}
}
/* Light theme */
@media (prefers-color-scheme: light) {
:root {
.tabbrowser-tab[selected="true"] .tab-background {
border: 1px solid #ccd0da !important;
}
--toolbar-bgcolor: rgb(230, 233, 239) !important;
--toolbox-non-lwt-bgcolor: rgb(220, 224, 232) !important;
--toolbox-non-lwt-textcolor: rgb(76, 79, 105) !important;
--input-bgcolor: rgb(220, 224, 232) !important;
--toolbar-field-background-color: var(--input-bgcolor) !important;
--input-color: rgb(76, 79, 105) !important;
--toolbar-field-color: var(--input-color) !important;
.tab-background[selected]:not([multiselected]) {
outline: 1px solid rgb(76, 79, 105);
outline-offset: -1px;
}
.tab-background[multiselected] {
--focus-outline-color: rgb(76, 79, 105);
}
--arrowpanel-background: rgb(239, 241, 245) !important;
--arrowpanel-color: rgb(76, 79, 105) !important;
--toolbarbutton-active-background: rgb(156, 160, 176) !important;
&:where([tabsintitlebar]) {
--toolbox-non-lwt-bgcolor-inactive: rgb(220, 224, 232) !important;
}
--toolbarbutton-icon-fill-attention: rgb(76, 79, 105) !important;
--toolbarbutton-icon-fill: rgb(76, 79, 105) !important;
--arrowpanel-border-color: rgb(76, 79, 105) !important;
--urlbarView-highlight-color: rgb(76, 79, 105) !important;
--urlbarView-highlight-background: rgb(156, 160, 176) !important;
#tabbrowser-tabs {
--tab-loading-fill: rgb(76, 79, 105) !important;
}
--tab-selected-bgcolor: rgb(239, 241, 245) !important;
--tab-selected-textcolor: rgb(76, 79, 105) !important;
--chrome-content-separator-color: rgb(239, 241, 245) !important;
--toolbar-field-focus-border-color: rgb(76, 79, 105) !important;
--input-border-color: rgb(230, 233, 239) !important;
--toolbar-field-border-color: var(--input-border-color) !important;
--toolbar-field-focus-background-color: rgb(239, 241, 245) !important;
#urlbar-input:focus::selection,
.searchbar-textbox:focus::selection {
color: rgb(204, 208, 218);
}
#urlbar-input:focus::selection,
.searchbar-textbox:focus::selection {
background-color: rgb(76, 79, 105);
}
--toolbarseparator-color: rgb(76, 79, 105) !important;
} }
} }

View file

@ -3,50 +3,47 @@
{ {
pkgs, pkgs,
config, config,
lib,
... ...
}: { }: {
home.file.".mozilla/firefox/default/chrome/theme" = { home.file.".librewolf/default/chrome/" = {
source = ./chrome/theme; source = ./chrome;
force = true; force = true;
recursive = true; recursive = true;
}; };
home.file.".mozilla/firefox/default/chrome/userChrome.css" = { home.file.".librewolf/default/chrome/colors.css" = let
source = ./chrome/userChrome.css; color = pkgs.catppuccin.rgb.${config.catppuccin.flavor};
force = true; accent = color.${config.catppuccin.accent};
}; in {
home.file.".mozilla/firefox/default/chrome/colors.css" = {
text = '' text = ''
* { * {
--accent: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.${config.catppuccin.accent}}; --accent: ${accent};
--rosewater: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.rosewater}; --rosewater: ${color.rosewater};
--flamingo: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.flamingo}; --flamingo: ${color.flamingo};
--pink: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.pink}; --pink: ${color.pink};
--mauve: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.mauve}; --mauve: ${color.mauve};
--red: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.red}; --red: ${color.red};
--maroon: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.maroon}; --maroon: ${color.maroon};
--peach: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.peach}; --peach: ${color.peach};
--yellow: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.yellow}; --yellow: ${color.yellow};
--green: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.green}; --green: ${color.green};
--teal: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.teal}; --teal: ${color.teal};
--sky: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.sky}; --sky: ${color.sky};
--sapphire: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.sapphire}; --sapphire: ${color.sapphire};
--blue: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.blue}; --blue: ${color.blue};
--lavender: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.lavender}; --lavender: ${color.lavender};
--text: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.text}; --text: ${color.text};
--subtext1: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.subtext1}; --subtext1: ${color.subtext1};
--subtext0: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.subtext0}; --subtext0: ${color.subtext0};
--overlay2: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.overlay2}; --overlay2: ${color.overlay2};
--overlay1: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.overlay1}; --overlay1: ${color.overlay1};
--overlay0: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.overlay0}; --overlay0: ${color.overlay0};
--surface2: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.surface2}; --surface2: ${color.surface2};
--surface1: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.surface1}; --surface1: ${color.surface1};
--surface0: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.surface0}; --surface0: ${color.surface0};
--base: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.base}; --base: ${color.base};
--mantle: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.mantle}; --mantle: ${color.mantle};
--crust: ${pkgs.catppuccin.rgb.${config.catppuccin.flavor}.crust}; --crust: ${color.crust};
} }
''; '';
force = true; force = true;
@ -91,9 +88,9 @@
}; };
}; };
}; };
firefox = { librewolf = {
enable = true; enable = true;
package = pkgs.firefox.override { package = pkgs.librewolf.override {
nativeMessagingHosts = with pkgs; [ nativeMessagingHosts = with pkgs; [
firefoxpwa firefoxpwa
]; ];
@ -105,39 +102,20 @@
# Valid strings for installation_mode are "allowed", "blocked", # Valid strings for installation_mode are "allowed", "blocked",
# "force_installed" and "normal_installed". # "force_installed" and "normal_installed".
ExtensionSettings = { ExtensionSettings = {
"*" = { "*".installation_mode = "blocked";
"installation_mode" = "blocked"; "uBlock0@raymondhill.net".installation_mode = "allowed";
}; "gdpr@cavi.au.dk".installation_mode = "allowed";
"uBlock0@raymondhill.net" = { "{5cce4ab5-3d47-41b9-af5e-8203eea05245}".installation_mode = "allowed";
installation_mode = "allowed"; "plasma-browser-integration@kde.org".installation_mode = "allowed";
}; "jid1-MnnxcxisBPnSXQ@jetpack".installation_mode = "allowed";
"gdpr@cavi.au.dk" = { "firefoxpwa@filips.si".installation_mode = "allowed";
installation_mode = "allowed"; "sponsorBlocker@ajay.app".installation_mode = "allowed";
}; "{7a7a4a92-a2a0-41d1-9fd7-1e92480d612d}".installation_mode = "allowed";
"{5cce4ab5-3d47-41b9-af5e-8203eea05245}" = { "{aecec67f-0d10-4fa7-b7c7-609a2db280cf}".installation_mode = "allowed";
installation_mode = "allowed"; "{446900e4-71c2-419f-a6a7-df9c091e268b}".installation_mode = "allowed";
}; "CanvasBlocker@kkapsner.de".installation_mode = "allowed";
"plasma-browser-integration@kde.org" = { "shinigamieyes@shinigamieyes".installation_mode = "allowed";
installation_mode = "allowed"; # "".installation_mode = "allowed";
};
"jid1-MnnxcxisBPnSXQ@jetpack" = {
installation_mode = "allowed";
};
"firefoxpwa@filips.si" = {
installation_mode = "allowed";
};
"sponsorBlocker@ajay.app" = {
installation_mode = "allowed";
};
"{7a7a4a92-a2a0-41d1-9fd7-1e92480d612d}" = {
installation_mode = "allowed";
};
"{aecec67f-0d10-4fa7-b7c7-609a2db280cf}" = {
installation_mode = "allowed";
};
"{446900e4-71c2-419f-a6a7-df9c091e268b}" = {
installation_mode = "allowed";
};
}; };
DisableTelemetry = true; DisableTelemetry = true;
DisableFirefoxStudies = true; DisableFirefoxStudies = true;
@ -176,6 +154,8 @@
pwas-for-firefox pwas-for-firefox
control-panel-for-twitter control-panel-for-twitter
bitwarden bitwarden
canvasblocker
shinigami-eyes
]; ];
settings = { settings = {
"{7a7a4a92-a2a0-41d1-9fd7-1e92480d612d}".settings = { "{7a7a4a92-a2a0-41d1-9fd7-1e92480d612d}".settings = {
@ -240,16 +220,22 @@
# Vertical tabs # Vertical tabs
"sidebar.verticalTabs" = true; "sidebar.verticalTabs" = true;
"sidebar.verticalTabs.dragToPinPromo.dismissed" = true; "sidebar.verticalTabs.dragToPinPromo.dismissed" = true;
# these are ordered right to left for some fucking reason
"browser.uiCustomization.navBarWhenVerticalTabs" = [ "browser.uiCustomization.navBarWhenVerticalTabs" = [
"back-button"
"forward-button"
"stop-reload-button"
"reload-button"
"urlbar-container"
"downloads-button"
"unified-extensions-button" "unified-extensions-button"
"fxa-toolbar-menu-button" "fxa-toolbar-menu-button"
"downloads-button"
"urlbar-container"
"stop-reload-button"
"forward-button"
"back-button"
]; ];
"privacy.resistFingerprinting" = false;
"privacy.clearOnShutdown.history" = false;
"privacy.clearOnShutdown.downloads" = false;
"webgl.disabled" = false;
"privacy.clearOnShutdown_v2.cookiesAndStorage" = false;
}; };
bookmarks = { bookmarks = {
force = true; force = true;
@ -270,12 +256,58 @@
} }
]; ];
}; };
search = { search = let
nixIcon = "${pkgs.colloid-icon-theme}/share/icons/Colloid/apps/scalable/nix-snowflake.svg";
googleIcon = "${pkgs.colloid-icon-theme}/share/icons/Colloid/apps/scalable/google.svg";
in {
force = true; force = true;
default = "google"; default = "google";
order = [ order = [
"google" "google"
]; ];
engines = {
nix-packages = {
name = "Nix Packages";
urls = [
{
template = "https://search.nixos.org/packages";
params = [
{
name = "type";
value = "packages";
}
{
name = "query";
value = "{searchTerms}";
}
];
}
];
icon = nixIcon;
definedAliases = ["@np"];
};
nixos-wiki = {
name = "NixOS Wiki";
urls = [{template = "https://wiki.nixos.org/w/index.php?search={searchTerms}";}];
icon = nixIcon;
definedAliases = ["@nw"];
};
google = {
name = "Google";
urls = [{template = "https://google.com/search?q={searchTerms}";}];
icon = googleIcon;
definedAliases = ["@go"];
};
wikipedia = {
name = "Wikipedia";
urls = [{template = "https://en.wikipedia.org/w/index.php?search={searchTerms}";}];
definedAliases = ["@wi"];
};
};
}; };
}; };
}; };

View file

@ -269,8 +269,7 @@
{ {
iconTasks = { iconTasks = {
launchers = [ launchers = [
"applications:firefox.desktop" "applications:librewolf.desktop"
# "applications:helium.desktop"
"applications:org.kde.dolphin.desktop" "applications:org.kde.dolphin.desktop"
"applications:vesktop.desktop" "applications:vesktop.desktop"
"applications:kitty.desktop" "applications:kitty.desktop"

View file

@ -7,7 +7,7 @@
}: { }: {
nixpkgs.overlays = lib.mkIf (config.nixpkgs.hostPlatform.isLinux) [ nixpkgs.overlays = lib.mkIf (config.nixpkgs.hostPlatform.isLinux) [
(final: prev: { (final: prev: {
wrapFirefox = browser: opts: let wrapLibrewolf = browser: opts: let
extraPrefs = extraPrefs =
(opts.extraPrefs or "") (opts.extraPrefs or "")
+ '' + ''
@ -21,7 +21,7 @@
widevineCdmDir = "${final.widevine-cdm}/share/google/chrome/WidevineCdm"; widevineCdmDir = "${final.widevine-cdm}/share/google/chrome/WidevineCdm";
widevineOutDir = "$out/gmp-widevinecdm/system-installed"; widevineOutDir = "$out/gmp-widevinecdm/system-installed";
in in
(prev.wrapFirefox browser (opts // {inherit extraPrefs;})).overrideAttrs (previousAttrs: { (prev.wrapLibrewolf browser (opts // {inherit extraPrefs;})).overrideAttrs (previousAttrs: {
buildCommand = buildCommand =
previousAttrs.buildCommand previousAttrs.buildCommand
+ '' + ''