main
1{lib, ...}: {
2 flake.modules.homeManager.dev = {
3 config,
4 pkgs,
5 ...
6 }: let
7 tomlFormat = pkgs.formats.toml {};
8 in {
9 programs.jjui = {
10 enable = true;
11 settings = {
12 ui.theme = "stylix";
13 };
14 };
15
16 home.file."${config.programs.jjui.configDir}/themes/stylix.toml".source = tomlFormat.generate "jjui-theme-stylix" (let
17 colors = config.lib.stylix.colors.withHashtag;
18 isLight = config.lib.stylix.colors.variant == "light";
19 in {
20 # Base16/Base24 Colors Theme of JJUI - Stylix
21 # Modified from the template in https://github.com/vic/tinted-jjui
22 # I modified the border colors to base03 for better visibility
23 # Because for some reason JJUI uses border colors for preview pane texts
24 # =========================================
25 # Global Styles (apply throughout application)
26 # =========================================
27 text = {
28 fg = colors.base05;
29 bg = colors.base00;
30 };
31 dimmed = {
32 fg = colors.base03;
33 bg = colors.base00;
34 };
35 title = {
36 fg = colors.base0D;
37 bold = true;
38 };
39 shortcut = {fg = colors.base0E;};
40 matched = {fg = colors.base13;};
41 border = {fg = colors.base03;};
42 selected = {
43 bg = colors.base01;
44 fg = colors.base05;
45 bold = true;
46 };
47 # =========================================
48 # Operation-Specific Styles
49 # =========================================
50 source_marker = {
51 bg = colors.base10;
52 fg = colors.base00;
53 bold = true;
54 };
55 target_marker = {
56 bg = colors.base11;
57 fg = colors.base00;
58 bold = true;
59 };
60 # =========================================
61 # Status Bar (Bottom)
62 # =========================================
63 status = {bg = colors.base01;};
64 "status title" = {
65 fg = colors.base00;
66 bg = colors.base16;
67 bold = true;
68 };
69 # =========================================
70 # Revset (Top Bar Input)
71 # =========================================
72 "revset title" =
73 {
74 fg = colors.base0D;
75 bold = true;
76 }
77 // lib.optionalAttrs isLight {bg = colors.base01;};
78 "revset text" = {
79 fg = colors.base05;
80 bold = true;
81 };
82 "revset completion text" = {fg = colors.base05;};
83 "revset completion matched" = {
84 fg = colors.base13;
85 bold = true;
86 };
87 "revset completion dimmed" = {fg = colors.base03;};
88 "revset completion selected" =
89 if isLight
90 then {
91 bg = colors.base06;
92 fg = colors.base02;
93 }
94 else {
95 bg = colors.base02;
96 fg = colors.base05;
97 };
98 # =========================================
99 # Revisions / Oplog (Main List)
100 # =========================================
101 revisions = {fg = colors.base05;};
102 "revisions selected".bg =
103 if isLight
104 then colors.base02
105 else colors.base01;
106 "revisions dimmed" = {fg = colors.base03;};
107 "revisions details selected".bg =
108 if isLight
109 then colors.base04
110 else colors.base02;
111 "oplog selected" = {bold = true;};
112 # =========================================
113 # Evolog (Sub-List View)
114 # =========================================
115 evolog = {fg = colors.base05;};
116 "evolog selected" =
117 if isLight
118 then {
119 bg = colors.base06;
120 fg = colors.base01;
121 bold = true;
122 }
123 else {
124 bg = colors.base02;
125 fg = colors.base05;
126 bold = true;
127 };
128 # =========================================
129 # Menus (Git, Bookmarks, etc.)
130 # =========================================
131 menu = {bg = colors.base00;};
132 "menu title" = {
133 fg = colors.base00;
134 bg = colors.base17;
135 bold = true;
136 };
137 "menu shortcut" = {fg = colors.base17;};
138 "menu matched" = {
139 fg = colors.base13;
140 bold = true;
141 };
142 "menu dimmed" = {fg = colors.base03;};
143 "menu border" = {fg = colors.base03;};
144 "menu selected" =
145 if isLight
146 then {
147 bg = colors.base06;
148 fg = colors.base01;
149 }
150 else {
151 bg = colors.base02;
152 fg = colors.base05;
153 };
154 # =========================================
155 # Help Window
156 # =========================================
157 help = {bg = colors.base00;};
158 "help title" = {
159 fg = colors.base14;
160 bold = true;
161 underline = true;
162 };
163 "help border" = {fg = colors.base03;};
164 # =========================================
165 # Preview (Side Pane)
166 # =========================================
167 preview = {fg = colors.base05;};
168 "preview border" = {fg = colors.base03;};
169 # =========================================
170 # Confirmation Dialog
171 # =========================================
172 confirmation = {bg = colors.base00;};
173 "confirmation text" = {
174 fg = colors.base0D;
175 bold = true;
176 };
177 "confirmation dimmed" = {fg = colors.base03;};
178 "confirmation border" = {
179 fg = colors.base12;
180 bold = true;
181 };
182 "confirmation selected" =
183 if isLight
184 then {
185 bg = colors.base06;
186 fg = colors.base01;
187 }
188 else {
189 bg = colors.base02;
190 fg = colors.base05;
191 };
192 # =========================================
193 # Undo Operations
194 # =========================================
195 undo = {bg = colors.base00;};
196 "undo confirmation dimmed" = {fg = colors.base03;};
197 "undo confirmation selected" =
198 if isLight
199 then {
200 bg = colors.base06;
201 fg = colors.base01;
202 }
203 else {
204 bg = colors.base02;
205 fg = colors.base05;
206 };
207 # =========================================
208 # Additional commonly used selectors from Fire theme example
209 # =========================================
210 success = {
211 fg = colors.base14;
212 bold = true;
213 };
214 error = {
215 fg = colors.base12;
216 bold = true;
217 };
218 "revisions rebase source_marker" = {bold = true;};
219 "revisions rebase target_marker" = {bold = true;};
220 "status shortcut" = {fg = colors.base17;};
221 "status dimmed" = {fg = colors.base03;};
222 # =========================================
223 # Additional intermediate styles to improve inheritance
224 # =========================================
225 details = {fg = colors.base05;};
226 "details selected" = {bold = true;};
227 completion = {fg = colors.base05;};
228 "completion selected" = {bold = true;};
229 rebase = {bold = true;};
230 # =========================================
231 # Enhanced Base24 color utilization for better visual hierarchy
232 # =========================================
233 workspace = {fg = colors.base16;};
234 branch = {fg = colors.base15;};
235 commit = {fg = colors.base14;};
236 file = {fg = colors.base13;};
237 change = {fg = colors.base12;};
238 bookmark = {fg = colors.base17;};
239 });
240 };
241}