Turn Catppuccin userstyles into Firefox userContent.css with Base16 palettes.
readme & cleanup
+269
-165
+2
.gitignore
+2
.gitignore
+81
-56
README.md
+81
-56
README.md
···
1
1
<div align="center">
2
+
<img src="./assets/nix-logo.png" alt="Nix logo" width="112" />
3
+
<img src="./assets/screenshot.png" alt="nix-userstyles preview" width="560" />
2
4
3
-
# nix-userstyles
5
+
# nix-userstyles
4
6
5
-
This module generates CSS from the upstream Catppuccin userstyles and remaps
6
-
the Catppuccin Mocha palette to your own Base16-compatible palette.
7
+
Small flake library for generating Firefox userstyles from the upstream Catppuccin themes, then remapping them to any Base16-compatible palette.
7
8
8
-
[](https://github.com/adam01110/fzfish/actions/workflows/ci.yml)
9
+
[](https://github.com/adam01110/nix-userstyles/actions/workflows/ci.yml)
10
+
[](https://github.com/adam01110/nix-userstyles)
11
+
<br />
12
+
[](https://nixos.wiki/wiki/Flakes)
13
+
[](https://github.com/catppuccin/userstyles)
14
+
[](https://support.mozilla.org/en-US/kb/contributors-guide-firefox-advanced-customization)
9
15
16
+
[Overview](#overview) - [Usage](#usage) - [Library](#library) - [Development](#development) - [Notes](#notes)
10
17
</div>
11
18
12
-
19
+
This repository packages the upstream [`catppuccin/userstyles`](https://github.com/catppuccin/userstyles) themes, compiles them with Nix, and swaps the Catppuccin Mocha palette for your own Base16 palette. It also includes bundled support for the Catppuccin Discord theme.
13
20
14
-
## What it provides
21
+
## Overview
15
22
16
-
- `lib.mkUserStyles`: build the generated upstream CSS as a derivation
17
-
- `lib.withExtraCss`: append your own CSS to an existing stylesheet derivation
18
-
- `lib.mkUserContent`: build Firefox-ready `userContent.css` in one step
19
-
- bundled support for Catppuccin's Discord theme in addition to the main
20
-
`catppuccin/userstyles` repository
23
+
- Exposes three library helpers: `mkUserStyles`, `withExtraCss`, and `mkUserContent`.
24
+
- Builds upstream LESS and SCSS sources into a single stylesheet derivation.
25
+
- Replaces Catppuccin tokens with Base16 and derived Base24-style color slots.
26
+
- Marks generated declarations as `!important` so they win against site styles more reliably.
27
+
- Ships example package outputs for plain styles, Firefox-ready `userContent.css`, and appended custom CSS.
21
28
22
-
## How it works
29
+
## Usage
23
30
24
-
`nix-userstyles` compiles upstream LESS and SCSS sources, then replaces the
25
-
Catppuccin color tokens with values from your palette.
31
+
Add the flake as an input and use one of the exported helpers from `nix-userstyles.lib`.
26
32
27
-
The input palette must provide the standard Base16 keys:
28
-
29
-
`base00` `base01` `base02` `base03` `base04` `base05` `base06` `base07`
30
-
`base08` `base09` `base0A` `base0B` `base0C` `base0D` `base0E` `base0F`
31
-
32
-
Additional Base24-style slots used internally are derived automatically.
33
-
34
-
## Usage
33
+
```nix
34
+
{
35
+
inputs = {
36
+
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
37
+
nix-userstyles.url = "github:adam01110/nix-userstyles";
38
+
nix-colors.url = "github:misterio77/nix-colors";
39
+
};
40
+
}
41
+
```
35
42
36
43
### Build Firefox `userContent.css`
37
44
···
43
50
}:
44
51
let
45
52
nix-colors = builtins.getFlake "github:misterio77/nix-colors";
46
-
palette = nix-colors.outputs.colorSchemes.dracula.palette;
53
+
palette = nix-colors.outputs.colorSchemes.gruvbox-dark-medium.palette;
47
54
system = pkgs.stdenv.hostPlatform.system;
48
-
in
49
-
{
55
+
in {
50
56
home.file.".mozilla/firefox/default/chrome/userContent.css".source =
51
57
nix-userstyles.lib.mkUserContent system {
52
58
inherit palette;
···
54
60
"github"
55
61
"reddit"
56
62
"youtube"
57
-
"discord"
58
63
];
59
64
};
60
65
}
61
66
```
62
67
63
-
### Add your own CSS
64
-
65
-
`mkUserContent` accepts an `extraCss` string that is appended after the generated
66
-
userstyles.
68
+
### Append your own CSS
67
69
68
70
```nix
69
71
{
···
75
77
nix-colors = builtins.getFlake "github:misterio77/nix-colors";
76
78
palette = nix-colors.outputs.colorSchemes.dracula.palette;
77
79
system = pkgs.stdenv.hostPlatform.system;
78
-
in
79
-
{
80
+
in {
80
81
home.file.".mozilla/firefox/default/chrome/userContent.css".source =
81
82
nix-userstyles.lib.mkUserContent system {
82
83
inherit palette;
···
102
103
{
103
104
config,
104
105
lib,
105
-
pkgs,
106
106
nix-userstyles,
107
+
pkgs,
107
108
...
108
109
}:
109
110
let
···
111
112
112
113
palette = filterAttrs (name: _: hasPrefix "base0" name) config.lib.stylix.colors;
113
114
system = pkgs.stdenv.hostPlatform.system;
114
-
in
115
-
{
115
+
in {
116
116
home.file.".mozilla/firefox/default/chrome/userContent.css".source =
117
117
nix-userstyles.lib.mkUserContent system {
118
118
inherit palette;
119
119
userStyles = [
120
-
"brave-search"
121
-
"bsky"
122
-
"cinny"
123
-
"duckduckgo"
124
120
"github"
125
-
"google"
126
-
"hacker-news"
127
-
"lobste.rs"
128
-
"npm"
129
121
"reddit"
130
-
"spotify-web"
131
-
"stack-overflow"
132
-
"whatsapp-web"
133
-
"wikipedia"
134
122
"youtube"
135
-
"discord"
136
123
];
137
-
extraCss = ''
138
-
@-moz-document domain("example.com") {
139
-
body {
140
-
outline: 1px solid red !important;
141
-
}
142
-
}
143
-
'';
144
124
};
145
125
}
146
126
```
147
127
128
+
> [!NOTE]
129
+
> The palette must provide the standard Base16 keys: `base00` through `base0F`. Additional slots used internally for Catppuccin's palette mapping are derived automatically.
130
+
131
+
## Library
132
+
133
+
| Export | Role |
134
+
| --- | --- |
135
+
| `lib.mkUserStyles` | Build generated upstream CSS as a derivation |
136
+
| `lib.withExtraCss` | Append additional CSS to an existing stylesheet derivation |
137
+
| `lib.mkUserContent` | Build Firefox-ready `userContent.css` in one step |
138
+
139
+
The repository also exposes a few package outputs on each supported system:
140
+
141
+
| Output | Role |
142
+
| --- | --- |
143
+
| `packages.default` | Generated stylesheet using the bundled test style list |
144
+
| `packages.user-content` | Firefox-ready `userContent.css` |
145
+
| `packages.with-extra-css` | Generated stylesheet with appended custom CSS |
146
+
| `packages.test` | Same build used by CI checks |
147
+
148
+
## Development
149
+
150
+
From the repository root:
151
+
152
+
```bash
153
+
# Inspect flake outputs
154
+
nix flake show --all-systems
155
+
156
+
# Run CI-equivalent checks
157
+
nix flake check
158
+
159
+
# Format the repository
160
+
nix fmt
161
+
162
+
# Enter the dev shell
163
+
nix develop
164
+
```
165
+
166
+
Formatting is configured through `treefmt`.
167
+
168
+
## Notes
169
+
170
+
- Style names come from the upstream Catppuccin repositories. The bundled test list in `lib/testUserStyles.nix` is a good reference for known working names.
171
+
- `discord` is handled separately from the main `catppuccin/userstyles` tree and is compiled from the upstream SCSS theme.
172
+
- The generated CSS is post-processed so every declaration becomes `!important`.
173
+
148
174
## Credits
149
175
150
176
- [Original project (`knoopx/nix-userstyles`)](https://github.com/knoopx/nix-userstyles)
151
177
- [Catppuccin userstyles](https://github.com/catppuccin/userstyles)
152
178
- [Catppuccin Discord theme](https://github.com/catppuccin/discord)
153
179
- [nix-colors](https://github.com/misterio77/nix-colors)
154
-
- [tinted-theming/schemes](https://github.com/tinted-theming/schemes)
assets/nix-logo.png
assets/nix-logo.png
This is a binary file and will not be displayed.
assets/screenshot.png
assets/screenshot.png
This is a binary file and will not be displayed.
+20
-14
flake.nix
+20
-14
flake.nix
···
1
1
{
2
2
inputs = {
3
-
nixpkgs.url = "nixpkgs/nixpkgs-unstable";
3
+
# keep-sorted start block=yes newline_separated=yes
4
+
catppuccin-userstyles = {
5
+
url = "github:catppuccin/userstyles";
6
+
flake = false;
7
+
};
8
+
9
+
discord-userstyle = {
10
+
url = "github:catppuccin/discord";
11
+
flake = false;
12
+
};
4
13
5
14
flake-parts.url = "github:hercules-ci/flake-parts";
6
-
import-tree.url = "github:vic/import-tree";
7
-
systems.url = "github:nix-systems/default";
8
15
9
-
treefmt-nix = {
10
-
url = "github:numtide/treefmt-nix";
11
-
inputs.nixpkgs.follows = "nixpkgs";
12
-
};
16
+
import-tree.url = "github:vic/import-tree";
13
17
14
18
nix-colors = {
15
19
url = "github:misterio77/nix-colors";
16
20
inputs.nixpkgs-lib.follows = "nixpkgs";
17
21
};
18
22
19
-
catppuccin-userstyles = {
20
-
url = "github:catppuccin/userstyles";
21
-
flake = false;
22
-
};
23
+
nixpkgs.url = "nixpkgs/nixpkgs-unstable";
23
24
24
-
discord-userstyle = {
25
-
url = "github:catppuccin/discord";
26
-
flake = false;
25
+
systems.url = "github:nix-systems/default";
26
+
27
+
treefmt-nix = {
28
+
url = "github:numtide/treefmt-nix";
29
+
inputs.nixpkgs.follows = "nixpkgs";
27
30
};
31
+
# keep-sorted end
28
32
};
29
33
30
34
outputs = inputs @ {
35
+
# keep-sorted start
31
36
flake-parts,
32
37
import-tree,
33
38
systems,
39
+
# keep-sorted end
34
40
...
35
41
}:
36
42
flake-parts.lib.mkFlake {inherit inputs;} {
+100
-69
lib/catppuccin.nix
+100
-69
lib/catppuccin.nix
···
1
1
{
2
+
# keep-sorted start block=yes newline_separated=yes
2
3
palette = {
3
-
rosewater = "f5e0dc";
4
+
# keep-sorted start
5
+
base = "1e1e2e";
6
+
blue = "89b4fa";
7
+
crust = "11111b";
4
8
flamingo = "f2cdcd";
5
-
pink = "f5c2e7";
6
-
mauve = "cba6f7";
7
-
red = "f38ba8";
9
+
green = "a6e3a1";
10
+
lavender = "b4befe";
11
+
mantle = "181825";
8
12
maroon = "eba0ac";
13
+
mauve = "cba6f7";
14
+
overlay0 = "6c7086";
15
+
overlay1 = "7f849c";
16
+
overlay2 = "9399b2";
9
17
peach = "fab387";
10
-
yellow = "f9e2af";
11
-
green = "a6e3a1";
12
-
teal = "94e2d5";
18
+
pink = "f5c2e7";
19
+
red = "f38ba8";
20
+
rosewater = "f5e0dc";
21
+
sapphire = "74c7ec";
13
22
sky = "89dceb";
14
-
sapphire = "74c7ec";
15
-
blue = "89b4fa";
16
-
lavender = "b4befe";
17
-
text = "cdd6f4";
23
+
subtext0 = "a6adc8";
18
24
subtext1 = "bac2de";
19
-
subtext0 = "a6adc8";
20
-
overlay2 = "9399b2";
21
-
overlay1 = "7f849c";
22
-
overlay0 = "6c7086";
25
+
surface0 = "313244";
26
+
surface1 = "45475a";
23
27
surface2 = "585b70";
24
-
surface1 = "45475a";
25
-
surface0 = "313244";
26
-
base = "1e1e2e";
27
-
mantle = "181825";
28
-
crust = "11111b";
28
+
teal = "94e2d5";
29
+
text = "cdd6f4";
30
+
yellow = "f9e2af";
31
+
# keep-sorted end
29
32
};
30
33
31
34
replacements = [
35
+
# keep-sorted start block=yes newline_separated=yes
32
36
{
33
37
name = "base";
34
38
base = "base00";
35
39
}
40
+
36
41
{
37
-
name = "mantle";
38
-
base = "base01";
42
+
name = "blue";
43
+
base = "base0D";
39
44
}
45
+
40
46
{
41
-
name = "surface0";
42
-
base = "base02";
47
+
name = "crust";
48
+
base = "base11";
43
49
}
50
+
44
51
{
45
-
name = "surface1";
46
-
base = "base03";
52
+
name = "flamingo";
53
+
base = "base0F";
47
54
}
55
+
48
56
{
49
-
name = "surface2";
50
-
base = "base04";
57
+
name = "green";
58
+
base = "base0B";
51
59
}
60
+
52
61
{
53
-
name = "text";
54
-
base = "base05";
62
+
name = "lavender";
63
+
base = "base07";
55
64
}
65
+
56
66
{
57
-
name = "rosewater";
58
-
base = "base06";
67
+
name = "mantle";
68
+
base = "base01";
59
69
}
70
+
60
71
{
61
-
name = "lavender";
62
-
base = "base07";
72
+
name = "maroon";
73
+
base = "base12";
63
74
}
75
+
64
76
{
65
-
name = "red";
66
-
base = "base08";
77
+
name = "mauve";
78
+
base = "base0E";
67
79
}
80
+
68
81
{
69
-
name = "peach";
70
-
base = "base09";
82
+
name = "overlay0";
83
+
base = "base04";
71
84
}
85
+
72
86
{
73
-
name = "yellow";
74
-
base = "base0A";
87
+
name = "overlay1";
88
+
base = "base05";
75
89
}
90
+
76
91
{
77
-
name = "green";
78
-
base = "base0B";
79
-
}
80
-
{
81
-
name = "teal";
82
-
base = "base0C";
92
+
name = "overlay2";
93
+
base = "base06";
83
94
}
95
+
84
96
{
85
-
name = "blue";
86
-
base = "base0D";
97
+
name = "peach";
98
+
base = "base09";
87
99
}
100
+
88
101
{
89
-
name = "mauve";
90
-
base = "base0E";
102
+
name = "pink";
103
+
base = "base17";
91
104
}
105
+
92
106
{
93
-
name = "flamingo";
94
-
base = "base0F";
107
+
name = "red";
108
+
base = "base08";
95
109
}
110
+
96
111
{
97
-
name = "crust";
98
-
base = "base11";
112
+
name = "rosewater";
113
+
base = "base06";
99
114
}
115
+
100
116
{
101
-
name = "maroon";
102
-
base = "base12";
117
+
name = "sapphire";
118
+
base = "base16";
103
119
}
120
+
104
121
{
105
122
name = "sky";
106
123
base = "base15";
107
124
}
125
+
108
126
{
109
-
name = "sapphire";
110
-
base = "base16";
127
+
name = "subtext0";
128
+
base = "base05";
111
129
}
112
-
{
113
-
name = "pink";
114
-
base = "base17";
115
-
}
130
+
116
131
# extra colors not in catppuccin base24.
117
132
{
118
133
name = "subtext1";
119
134
base = "base06";
120
135
}
136
+
121
137
{
122
-
name = "subtext0";
123
-
base = "base05";
138
+
name = "surface0";
139
+
base = "base02";
124
140
}
141
+
125
142
{
126
-
name = "overlay2";
127
-
base = "base06";
143
+
name = "surface1";
144
+
base = "base03";
128
145
}
146
+
129
147
{
130
-
name = "overlay1";
148
+
name = "surface2";
149
+
base = "base04";
150
+
}
151
+
152
+
{
153
+
name = "teal";
154
+
base = "base0C";
155
+
}
156
+
157
+
{
158
+
name = "text";
131
159
base = "base05";
132
160
}
161
+
133
162
{
134
-
name = "overlay0";
135
-
base = "base04";
163
+
name = "yellow";
164
+
base = "base0A";
136
165
}
166
+
# keep-sorted end
137
167
];
168
+
# keep-sorted end
138
169
}
+2
lib/discord.nix
+2
lib/discord.nix
+23
-11
lib/mkUserStyles.nix
+23
-11
lib/mkUserStyles.nix
···
1
1
{
2
-
pkgs,
3
-
lib,
2
+
# keep-sorted start
4
3
catppuccin-userstyles,
5
4
discord-userstyle,
5
+
lib,
6
+
pkgs,
7
+
# keep-sorted end
6
8
...
7
9
} @ inputs: palette: userStyles: let
8
10
inherit
9
11
(builtins)
12
+
# keep-sorted start
10
13
concatStringsSep
11
14
elem
12
15
filter
16
+
# keep-sorted end
13
17
;
14
18
inherit (lib) getExe;
15
19
inherit (lib.attrsets) mapAttrsToList;
16
-
inherit
17
-
(lib.strings)
18
-
escapeShellArg
19
-
;
20
+
inherit (lib.strings) escapeShellArg;
20
21
importantize = pkgs.callPackage ./importantize.nix inputs;
21
22
catppuccinStyles = filter (s: s != "discord") userStyles;
22
23
23
24
catppuccin = import ./catppuccin.nix;
24
25
discord = import ./discord.nix {
25
-
inherit catppuccin concatStringsSep escapeShellArg palette24;
26
+
inherit
27
+
# keep-sorted start
28
+
catppuccin
29
+
concatStringsSep
30
+
escapeShellArg
31
+
palette24
32
+
# keep-sorted end
33
+
;
26
34
};
27
35
28
36
palette24 =
···
52
60
)
53
61
catppuccin.replacements;
54
62
flavors = [
55
-
"latte"
63
+
# keep-sorted start
56
64
"frappe"
65
+
"latte"
57
66
"macchiato"
58
67
"mocha"
68
+
# keep-sorted end
59
69
];
60
70
in ''
61
71
@catppuccin: {
···
64
74
'';
65
75
66
76
lessVars = {
77
+
# keep-sorted start
67
78
accentColor = "lavender";
68
79
additions = 0;
69
80
applyToDocument = 0;
···
72
83
checkColor = "red";
73
84
colorizeLogo = 0;
74
85
contrastColor = "@accentColor";
75
-
darkenShadows = 1;
76
86
darkFlavor = "mocha";
87
+
darkenShadows = 1;
77
88
graphUseAccentColor = 1;
89
+
hideColorSampleTint = 1;
78
90
hideProfilePictures = 0;
79
91
highlight-redirect = 0;
80
92
highlightColor = "@accentColor";
···
82
94
highlightColor2 = "green";
83
95
highlightColor3 = "peach";
84
96
highlightColor4 = "blue";
85
-
lighterMessages = 0;
86
97
lastMoveColor = "red";
87
98
lightFlavor = "mocha";
99
+
lighterMessages = 0;
88
100
logo = 1;
89
101
oled = 0;
90
102
sponsorBlock = 1;
···
94
106
styleVideoPlayer = 1;
95
107
urls = "localhost";
96
108
zen = 0;
97
-
hideColorSampleTint = 1;
109
+
# keep-sorted end
98
110
};
99
111
100
112
catppuccinStylesStr = concatStringsSep " " catppuccinStyles;
+4
-2
lib/testUserStyles.nix
+4
-2
lib/testUserStyles.nix
···
1
1
[
2
+
# keep-sorted start
2
3
"advent-of-code"
3
4
"alacritty.org"
4
5
"alternativeto"
···
23
24
"deepl"
24
25
"deepseek"
25
26
"desmos"
27
+
"dev.to"
26
28
"devdocs"
27
-
"dev.to"
29
+
"discord"
28
30
"docs.deno.com"
29
31
"docs.rs"
30
32
"duckduckgo"
···
133
135
"wikiwand"
134
136
"youtube"
135
137
"zen-browser-docs"
136
-
"discord"
138
+
# keep-sorted end
137
139
]
+3
-1
lib/withExtraCss.nix
+3
-1
lib/withExtraCss.nix
+24
-10
parts/packages.nix
+24
-10
parts/packages.nix
···
7
7
import ../lib/mkUserStyles.nix {
8
8
inherit pkgs;
9
9
inherit (pkgs) lib;
10
-
inherit (inputs) catppuccin-userstyles discord-userstyle;
10
+
inherit
11
+
(inputs)
12
+
# keep-sorted start
13
+
catppuccin-userstyles
14
+
discord-userstyle
15
+
# keep-sorted end
16
+
;
11
17
};
12
18
13
19
withExtraCssFor = pkgs:
···
17
23
};
18
24
19
25
mkUserContentFor = pkgs: let
26
+
# keep-sorted start
20
27
mkUserStyles = mkUserStylesFor pkgs;
21
28
withExtraCss = withExtraCssFor pkgs;
29
+
# keep-sorted end
22
30
in
23
31
{
32
+
# keep-sorted start
33
+
extraCss ? "",
24
34
palette,
25
35
userStyles,
26
-
extraCss ? "",
36
+
# keep-sorted end
27
37
}:
28
38
withExtraCss (mkUserStyles palette userStyles) extraCss;
29
39
in {
30
-
flake.lib.mkUserStyles = system: mkUserStylesFor (mkPkgs system);
31
-
32
-
flake.lib.withExtraCss = system: withExtraCssFor (mkPkgs system);
33
-
34
-
flake.lib.mkUserContent = system: mkUserContentFor (mkPkgs system);
40
+
flake.lib = {
41
+
# keep-sorted start
42
+
mkUserContent = system: mkUserContentFor (mkPkgs system);
43
+
mkUserStyles = system: mkUserStylesFor (mkPkgs system);
44
+
withExtraCss = system: withExtraCssFor (mkPkgs system);
45
+
# keep-sorted end
46
+
};
35
47
36
48
perSystem = {pkgs, ...}: let
49
+
# keep-sorted start
50
+
inherit (inputs.nix-colors.colorSchemes.gruvbox-dark-medium) palette;
51
+
mkUserContent = mkUserContentFor pkgs;
37
52
mkUserStyles = mkUserStylesFor pkgs;
38
53
withExtraCss = withExtraCssFor pkgs;
39
-
mkUserContent = mkUserContentFor pkgs;
40
-
inherit (inputs.nix-colors.colorSchemes.gruvbox-dark-medium) palette;
54
+
# keep-sorted end
41
55
in {
42
56
_module.args = {
57
+
inherit mkUserContent;
43
58
inherit mkUserStyles;
44
59
inherit withExtraCss;
45
-
inherit mkUserContent;
46
60
};
47
61
48
62
packages.default = mkUserStyles palette testUserStyles;
+3
-1
parts/tests.nix
+3
-1
parts/tests.nix
···
5
5
inherit (inputs.nix-colors.colorSchemes.gruvbox-dark-medium) palette;
6
6
testPackage = mkUserStyles palette testUserStyles;
7
7
in {
8
-
packages.test = testPackage;
8
+
# keep-sorted start
9
9
checks.test = testPackage;
10
+
packages.test = testPackage;
11
+
# keep-sorted end
10
12
};
11
13
}
+7
-1
parts/treefmt.nix
+7
-1
parts/treefmt.nix
···
4
4
perSystem = _: {
5
5
treefmt = {
6
6
programs = {
7
+
# keep-sorted start
7
8
alejandra.enable = true;
8
-
nixf-diagnose.enable = true;
9
9
deadnix.enable = true;
10
+
nixf-diagnose.enable = true;
10
11
statix.enable = true;
12
+
# keep-sorted end
11
13
12
14
biome.enable = true;
13
15
16
+
# keep-sorted start
14
17
yamlfmt.enable = true;
15
18
yamllint.enable = true;
19
+
# keep-sorted end
16
20
17
21
rumdl-format.enable = true;
22
+
23
+
keep-sorted.enable = true;
18
24
};
19
25
};
20
26
};
screenshot.png
screenshot.png
This is a binary file and will not be displayed.