├── chrome
├── image
│ └── firefox.svg
├── userChrome.css
├── userContent.css
└── window
│ ├── close-hover.svg
│ ├── close.svg
│ ├── inactive.svg
│ ├── maximize-hover.svg
│ ├── maximize-restore.svg
│ ├── maximize.svg
│ ├── minimize-hover.svg
│ └── minimize.svg
├── readme.md
├── screenshot.png
└── spacings.png
/chrome/image/firefox.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | image/svg+xml
7 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
34 |
35 |
41 |
42 |
47 |
48 |
53 |
54 |
59 |
60 |
67 |
68 |
74 |
75 |
84 |
85 |
91 |
92 |
97 |
98 |
103 |
104 |
--------------------------------------------------------------------------------
/chrome/userChrome.css:
--------------------------------------------------------------------------------
1 | * {
2 | --color1: #13161d;
3 | --color2: #1f2430;
4 | --color3: #2b3242;
5 | --color4: #384055;
6 | }
7 |
8 | /* ----- Remove tab bar spacer ----- */
9 | .titlebar-spacer { display: none !important;}
10 |
11 | /* ----- Avoids white flash ----- */
12 | #tabbrowser-tabpanels {background-color: var(--uc-light-bkgnd-color, var(--color1)) !important;}
13 |
14 | /* ----- bookmarks items centering ----- */
15 | #PlacesToolbarItems {
16 | display: flex !important;
17 | justify-content: center !important;
18 | }
19 |
20 | /* order of bars */
21 | #navigator-toolbox #nav-bar {
22 | -moz-box-ordinal-group: 0 !important;
23 | background-color: transparent !important;
24 | }
25 | #navigator-toolbox #toolbar-menubar {
26 | -moz-box-ordinal-group: 1 !important;
27 | }
28 | #titlebar {
29 | -moz-box-ordinal-group: 2 !important;
30 | }
31 | #PersonalToolbar {
32 | -moz-box-ordinal-group: 3 !important;
33 | }
34 |
35 | /* fullscreen nav errors */
36 | :root[tabsintitlebar][sizemode="maximized"] #navigator-toolbox {
37 | -moz-appearance: none !important;
38 | padding-top: 8px !important;
39 | }
40 |
41 | /* fullscreen padding */
42 | :root[tabsintitlebar][sizemode="maximized"] #titlebar {
43 | -moz-appearance: none !important;
44 |
45 | }
46 |
47 | #navigator-toolbox {
48 | padding-top: 0px !important;
49 | padding-bottom: 0px !important;
50 | }
51 |
52 | /* height fixes */
53 |
54 | /* tabs height */
55 | :root {--tab-min-height: 28px !important;}
56 | :root #tabbrowser-tabs {--tab-min-height: 28px !important;}
57 |
58 | /* menu bar height */
59 | #toolbar-menubar {
60 | margin-top: 0px !important;
61 | margin-bottom: 0px !important;
62 | padding-top: 0px !important;
63 | padding-bottom: 0px !important;
64 | line-height: 22px !important;
65 | max-height: 22px !important;
66 | }
67 |
68 | /* close/min/max fix */
69 | #toolbar-menubar .titlebar-button{ padding-block: 0px !important; }
70 |
71 | /* non active tabs have darker text */
72 | .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover) {
73 | color: #ffffffa8 !important;
74 | }
75 |
76 | /* icons */
77 | #PanelUI-menu-button {
78 | list-style-image: url(image/firefox.svg) !important;
79 | }
80 |
81 | #back-button > .toolbarbutton-icon {
82 | border: none !important;
83 | border-radius: 0 !important;
84 | background: none !important;
85 | width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
86 | height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
87 | padding: var(--toolbarbutton-inner-padding) !important;
88 | border-radius: var(--toolbarbutton-border-radius) !important;
89 | }
90 |
91 | #back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
92 | box-shadow: none !important;
93 | background-color: var(--toolbarbutton-hover-background) !important;
94 | }
95 |
96 | #nav-bar #PanelUI-button .toolbarbutton-icon {
97 | opacity: 0.8 !important;
98 | }
99 |
100 | #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
101 | background-color: var(--toolbarbutton-active-background) !important;
102 | }
103 |
104 | /* url bar */
105 | #urlbar-background {
106 | display: none !important;
107 | }
108 |
109 | #nav-bar:not([customizing="true"])
110 | > #nav-bar-customization-target
111 | > #urlbar-container:not(:hover)
112 | > #urlbar:not([focused])
113 | > #urlbar-input-container
114 | > #page-action-buttons {
115 | opacity: 0;
116 | }
117 | #page-action-buttons {
118 | transition: opacity 0.15s ease;
119 | }
120 | #nav-bar:not([customizing="true"])
121 | > #nav-bar-customization-target
122 | > #urlbar-container:not(:hover)
123 | > #urlbar:not([focused])
124 | > #urlbar-input-container
125 | > #identity-box {
126 | opacity: 0;
127 | }
128 |
129 | #nav-bar:not([customizing="true"])
130 | > #nav-bar-customization-target
131 | > #urlbar-container:not(:hover)
132 | > #urlbar:not([focused])
133 | > #urlbar-input-container
134 | > #tracking-protection-icon-container {
135 | opacity: 0;
136 | }
137 | #tracking-protection-icon-container {
138 | transition: opacity 0.15s ease;
139 | }
140 |
141 | /* url bar */
142 | #urlbar {
143 | --autocomplete-popup-highlight-background: transparent !important;
144 | }
145 |
146 | #urlbar-container {
147 | border-radius: 10px 10px 10px 10px !important;
148 | }
149 | #urlbar-input-container,
150 | #searchbar {
151 | border-radius: 10px 10px 10px 10px !important;
152 | }
153 |
154 | .urlbarView-body-inner {
155 | border-top: 0px !important;
156 | }
157 |
158 | #urlbar-input-container {
159 | padding-left: 7px;
160 | padding-right: 7px;
161 | }
162 | #navigator-toolbox {
163 | --lwt-toolbar-field-border-color: transparent !important;
164 | --lwt-toolbar-field-focus: transparent !important;
165 | --toolbar-field-focus-border-color: #77777773 !important;
166 | }
167 |
168 | #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme,
169 | #urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme:hover {
170 | border-color: transparent;
171 | }
172 | #urlbar {
173 | border: 0 !important;
174 | border-radius: 10px 10px 10px 10px !important;
175 | background-color: var(--color3);
176 | }
177 |
178 | #urlbar {
179 | box-shadow: none !important;
180 | }
181 | #urlbar[breakout] {
182 | height: auto !important;
183 | }
184 |
185 | #tracking-protection-icon-container {
186 | border-inline-end: none !important;
187 | border-image: none !important;
188 | }
189 |
190 | /* megabar */
191 | #urlbar[breakout][breakout-extend][open] {
192 | background-color: #1f2430 !important;
193 | -webkit-backdrop-filter: blur(32px) !important;
194 | backdrop-filter: blur(32px) !important;
195 | }
196 |
197 | #urlbar[breakout][breakout-extend] > #urlbar-input-container,
198 | #urlbar-input-container {
199 | height: var(--urlbar-height) !important;
200 | padding-block: 0px !important;
201 | padding-inline: 0px !important;
202 | transition: none !important;
203 | }
204 | #urlbar[breakout][breakout-extend] {
205 | top: calc(
206 | (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2
207 | ) !important;
208 | left: 0 !important;
209 | width: 100% !important;
210 | }
211 | #urlbar .urlbar-input-box {
212 | text-align: center;
213 | }
214 |
215 | #wrapper-urlbar-container #urlbar{
216 | height: var(--urlbar-height) !important;
217 | }
218 |
219 | /* new tab icon 16 */
220 | #tabs-newtab-button .toolbarbutton-icon,
221 | #new-tab-button .toolbarbutton-icon {
222 | width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
223 | height: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
224 | }
225 |
226 | /* plus/newtab button */
227 | toolbar
228 | #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
229 | > .toolbarbutton-icon,
230 | toolbar
231 | #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover
232 | > .toolbarbutton-icon {
233 | border: 0 !important;
234 | border-radius: 20px 20px 20px 20px !important;
235 | background-image: none !important;
236 | background-color: #404040d9 !important;
237 | }
238 |
239 | toolbar
240 | #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
241 | > .toolbarbutton-icon,
242 | toolbar
243 | #new-tab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active)
244 | > .toolbarbutton-icon {
245 | border: 0 !important;
246 | border-radius: 20px 20px 20px 20px !important;
247 | background-image: none !important;
248 | background-color: rgb(0, 0, 0) !important;
249 | }
250 |
251 | /* main bar */
252 | #navigator-toolbox {
253 | background-color: #1f2430 !important;
254 | --tabs-border-color: none !important;
255 | --my-tab-min-width: 100px !important;
256 | --tabs-navbar-shadow-size: 0px !important;
257 | }
258 |
259 | #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
260 | margin-inline-start: 2px !important;
261 | }
262 |
263 | /* remove fill when loading on the tab which isnt formated for different border radius */
264 | #tabbrowser-tabs {
265 | --tab-loading-fill: transparent !important;
266 | margin-left: 2px !important;
267 | }
268 |
269 | /* width of the tabs. */
270 | .tabbrowser-tab[fadein]:not([pinned]) {
271 | max-width: 135px !important;
272 | min-width: var(--my-tab-min-width) !important;
273 | }
274 |
275 | .tabbrowser-tab:not([visuallyselected="true"]):not([multiselected]):not(:hover)
276 | .tab-icon-image {
277 | opacity: 0.8 !important;
278 | }
279 |
280 | /* fix the height of a tab because if you change --tab-min-height it doesnt work for fullcreen */
281 | #TabsToolbar {
282 | padding-top: 0px !important;
283 | padding-bottom: 2px !important;
284 | }
285 |
286 | /* remove line between the tabs / seperators */
287 | #tabbrowser-tabs .tabbrowser-tab::before,
288 | #tabbrowser-tabs .tabbrowser-tab::after {
289 | border: 0 !important;
290 | }
291 |
292 | /* select tabs */
293 | .tabbrowser-tab .tab-background[selected="true"] {
294 | border: 0 !important;
295 | border-radius: 10px 10px 10px 10px !important;
296 | background-image: none !important;
297 | background-color: rgba(0,0,0,0.35) !important;
298 | }
299 |
300 | .tabbrowser-tab .tab-background:not([selected]) {
301 | border: 0 !important;
302 | border-radius: 10px 10px 10px 10px !important;
303 | background-image: none !important;
304 | background-color: var(--color3) !important;
305 | }
306 |
307 | /* tabs on hover */
308 | #tabbrowser-tabs
309 | .tabbrowser-tab:hover
310 | > .tab-stack
311 | > .tab-background:not([selected="true"]) {
312 | border: 0 !important;
313 | border-radius: 10px 10px 10px 10px !important;
314 | background-image: none !important;
315 | background-color: var(--color3) !important;
316 | }
317 |
318 | /* multiselect tabs on hover */
319 | #tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected="true"] {
320 | border: 0 !important;
321 | border-radius: 10px 10px 10px 10px !important;
322 | background-image: none !important;
323 | background-color: var(--color3) !important;
324 | }
325 | /* fixing multiselect */
326 | .tab-background[multiselected="true"]:not([selected="true"])
327 | > .tab-background-inner {
328 | background: none !important;
329 | }
330 |
331 |
332 | /* tab close button on hover */
333 | .tabbrowser-tab:not([pinned]) .tab-close-button {
334 | display: -moz-box !important;
335 | opacity: 0;
336 | visibility: collapse !important;
337 | transition: opacity 0.25s, visibility 0.25s ease-in !important;
338 | }
339 | .tabbrowser-tab:not([pinned]):hover .tab-close-button {
340 | opacity: 1;
341 | visibility: visible !important;
342 | border-radius: 20px 20px 20px 20px !important;
343 | }
344 |
345 | #titlebar #TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-background {
346 | margin-block: 2px !important;
347 | }
348 |
349 | /* bookmark menu >:( */
350 | #PersonalToolbar {
351 | --uc-bm-height: 24px;
352 | --uc-bm-padding: 6px;
353 | padding: 1px 6px !important;
354 | position: absolute;
355 | }
356 |
357 | #PlacesToolbarItems > .bookmark-item {
358 | padding-block: var(--uc-bm-padding) !important;
359 | padding-left: 6px !important;
360 | padding-right: 6px !important;
361 | }
362 |
363 | /* to use blur enable layout.css.backdrop-filter.enabled */
364 | #PersonalToolbar {
365 | background-color: #1f2430 !important;
366 | -webkit-backdrop-filter: blur(32px) !important;
367 | backdrop-filter: blur(32px) !important;
368 | }
369 |
370 |
371 | :root:-moz-lwtheme-brighttext {
372 | --arrowpanel-background: var(--color3) !important;
373 | --panel-separator-zap-gradient: linear-gradient(90deg, rgba(11,11,11,1) 0%, rgba(193,118,40,1) 39%, rgba(52,12,48,1) 100%) !important;
374 | --button-hover-bgcolor: rgba(159, 159, 159, 0.35) !important;
375 | --button-active-bgcolor: rgba(113, 113, 113, 0.35) !important;
376 | --button-bgcolor: rgba(117, 117, 117, 0.9) !important;
377 | --toolbarbutton-icon-fill-opacity: 0.8 !important;
378 | }
379 |
380 | #back-button:not([disabled="true"]):is([open], [checked], :hover:active) > .toolbarbutton-icon {
381 | background-color: var(--toolbarbutton-active-background) !important;
382 |
383 | }
384 |
385 | :root:-moz-lwtheme-brighttext menupopup {
386 | --dark-menu-background-color: rgba(34, 34, 36, 0.98) !important;
387 | }
388 |
389 | /* move left close/min/max buttons */
390 |
391 | .titlebar-buttonbox-container { -moz-box-ordinal-group: 0 !important;
392 | }
393 |
394 | #nav-bar {
395 | padding-left: 105px;
396 | }
397 |
398 | #TabsToolbar .titlebar-buttonbox-container {
399 | visibility: visible !important;
400 | position: absolute !important;
401 | top: 5px;
402 | left: 0;
403 | }
404 | .titlebar-buttonbox-container {
405 | display: block;
406 | }
407 |
408 | #TabsToolbar .titlebar-buttonbox-container .titlebar-button{
409 | border-radius: 4px !important;
410 | }
411 |
412 | .titlebar-button > .toolbarbutton-icon {
413 | height: 13x !important;
414 | min-height: 13px !important;
415 | width: 13px !important;
416 | min-width: 13px !important;
417 | }
418 |
419 | .titlebar-button {
420 | padding-left: 8px !important;
421 | padding-right: 8px !important;
422 | margin-left: 4px !important;
423 | }
424 |
425 | :root[sizemode="maximized"] .titlebar-buttonbox-container{
426 | padding-top: 8px !important;
427 | }
428 |
429 |
430 | .titlebar-min {
431 | -moz-box-ordinal-group:2 !important;
432 | }
433 |
434 | .titlebar-max, .titlebar-restore {
435 | -moz-box-ordinal-group:1 !important;
436 | }
437 |
438 | .titlebar-close {
439 | -moz-box-ordinal-group:0 !important;
440 | }
441 |
442 | /* Move left close/min/max buttons - COMMENT THIS ALL OF THE WAY DOWN TO GET RID OF MACOS ICONS */
443 | #nav-bar {padding-left: 90px;}
444 |
445 | #TabsToolbar .titlebar-buttonbox-container, :root[inFullscreen="true"] #window-controls {
446 | -moz-box-ordinal-group: 0 !important;
447 | position: absolute !important;
448 | top: 12px;
449 | left: 0;
450 | }
451 |
452 | :root[inFullscreen="true"] #window-controls {
453 | display: -webkit-box;
454 | }
455 |
456 | .titlebar-buttonbox-container {
457 | display: block;
458 | }
459 |
460 | :root[sizemode="maximized"] .titlebar-buttonbox-container{
461 | padding-top: 8px !important;
462 | }
463 |
464 | :root:-moz-window-inactive:not([customizing])
465 | :is(.titlebar-buttonbox, #window-controls)
466 | > toolbarbutton:not(:hover) {
467 | opacity: 0.65 !important;
468 | list-style-image: url(window/inactive.svg) !important;
469 | }
470 |
471 | :is(.titlebar-buttonbox, #window-controls) .toolbarbutton-icon {
472 | opacity: 1 !important;
473 | appearance: none !important;
474 | }
475 |
476 | .titlebar-button > .toolbarbutton-icon,
477 | #window-controls > toolbarbutton > .toolbarbutton-icon {
478 | width: 14px !important;
479 | min-width: 14px !important;
480 | min-height: 14px !important;
481 | height: 14px !important;
482 | stroke: none !important;
483 | }
484 |
485 | .titlebar-buttonbox, #window-controls {
486 | margin-right: 6x !important;
487 | margin-left: 0 !important;
488 | }
489 |
490 | .titlebar-close,
491 | #close-button {
492 | appearance: none !important;
493 | padding: 0px !important;
494 | padding-left: 8px !important;
495 | padding-right: 8px !important;
496 | margin: 0px !important;
497 | background-color: transparent !important;
498 | -moz-box-ordinal-group: 0 !important;
499 | }
500 |
501 | .titlebar-min,
502 | #minimize-button {
503 | appearance: none !important;
504 | padding: 0px !important;
505 | padding-left: 8px !important;
506 | padding-right: 8px !important;
507 | margin: 0px !important;
508 | background-color: transparent !important;
509 | -moz-box-ordinal-group:1 !important;
510 | }
511 |
512 | .titlebar-max,
513 | .titlebar-restore,
514 | #restore-button {
515 | appearance: none !important;
516 | padding: 0px !important;
517 | padding-left: 8px !important;
518 | padding-right: 8px !important;
519 | margin: 0px !important;
520 | background-color: transparent !important;
521 | -moz-box-ordinal-group: 2 !important;
522 | }
523 |
524 | #TabsToolbar #window-controls > toolbarbutton,
525 | #TabsToolbar .titlebar-buttonbox .titlebar-button {
526 | list-style-image: url(window/inactive.svg) !important;
527 | }
528 |
529 | #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-close,
530 | #TabsToolbar #window-controls:hover #close-button {
531 | list-style-image: url(window/close.svg) !important;
532 |
533 | }
534 |
535 | #TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover,
536 | #TabsToolbar #window-controls #close-button:hover {
537 | list-style-image: url(window/close-hover.svg) !important;
538 | }
539 |
540 |
541 | #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-min,
542 | #TabsToolbar #window-controls:hover #minimize-button {
543 | list-style-image: url(window/minimize.svg) !important;
544 | }
545 |
546 | #TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover,
547 | #TabsToolbar #window-controls #minimize-button:hover {
548 | list-style-image: url(window/minimize-hover.svg) !important;
549 | }
550 |
551 | #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-max,
552 | #TabsToolbar .titlebar-buttonbox-container:hover .titlebar-restore,
553 | #TabsToolbar #window-controls:hover #restore-button {
554 | list-style-image: url(window/maximize.svg) !important;
555 | }
556 |
557 | #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover {
558 | list-style-image: url(window/maximize-hover.svg) !important;
559 | }
560 |
561 | :root[sizemode="maximized"] #TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover,
562 | #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover,
563 | #TabsToolbar #window-controls #restore-button:hover {
564 | list-style-image: url(window/maximize-restore.svg) !important;
565 | }
--------------------------------------------------------------------------------
/chrome/userContent.css:
--------------------------------------------------------------------------------
1 |
2 | * {
3 | --color1: #13161d;
4 | --color3: #2b3242;
5 | --color5: #785eab;
6 | --color6: #444e67;
7 |
8 | scrollbar-width: thin !important;
9 | scrollbar-color: var(--color3) var(--color1) !important;
10 | }
11 |
12 | @-moz-document url("about:privatebrowsing"){
13 | html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
14 | background-color: var(--color1) !important;
15 | }
16 | #search-handoff-button {
17 | background-color: #0000004d !important;
18 | border: none !important;
19 | box-shadow: none !important;
20 | border-bottom: 1px solid var(--color5) !important;
21 | border-radius: 10px 10px 10px 10px !important;
22 | }
23 |
24 | .fake-caret {background: rgb(255, 255, 255) !important;}
25 | .logo-and-wordmark .wordmark {
26 | fill: var(--color5) !important;
27 |
28 | }
29 | }
30 |
31 | @-moz-document url("about:home"),url("about:blank"),url("about:newtab"){
32 | html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
33 | background-color: var(--color1) !important;
34 | }
35 |
36 | .search-wrapper .search-handoff-button {
37 | background-color: #0000004d !important;
38 | color: var(--color6) !important;
39 | border: none !important;
40 | box-shadow: none !important;
41 | border-bottom: 1px solid var(--color1) !important;
42 | border-radius: 10px 10px 10px 10px !important;
43 | }
44 | .search-wrapper .logo-and-wordmark {
45 | opacity: 0.8 !important;
46 | }
47 |
48 | .search-wrapper input:focus {
49 | color: white !important;
50 | }
51 | .search-wrapper .search-button {
52 | fill: #ffffff5e !important;
53 | }
54 | .search-wrapper .search-button:focus,
55 | .search-wrapper .search-button:hover {
56 | background-color: transparent !important;
57 | fill: white !important;
58 | }
59 | .outer-wrapper.newtab-experience .search-wrapper .search-handoff-button .fake-caret {
60 | top: 12px !important;
61 | }
62 |
63 | .outer-wrapper.newtab-experience .search-wrapper .search-inner-wrapper {
64 | min-height: 42px !important;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/chrome/window/close-hover.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome/window/close.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome/window/maximize-restore.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome/window/maximize.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome/window/minimize-hover.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/chrome/window/minimize.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
nightfox
3 |
4 | `nightly version 91` / [`install guide`](https://github.com/synthicy/nightfox/blob/master/readme.md#installation) / [`nightfall theme`](https://github.com/nghtfall)
5 |
6 | 
7 |
8 |
9 |
10 | ## Installation
11 |
12 | 1. Go to *`about:config`* and enable *`toolkit.legacyUserProfileCustomizations.stylesheets`*.
13 |
14 | 2. Locate your profile location by going to *`about:support`* and clicking *`Open folder`* in *`Profile folder`*.
15 |
16 | 3. Clone this repository by running `git clone https://github.com/synthicy/nightfox`.
17 |
18 | 4. Paste the `chrome` folder into the correct profile folder.
19 |
20 | For the blur style to work enable `layout.css.backdrop-filter.enabled` in `about:config`.
21 |
22 | 5. Copy these customization settings to get the exact spacing and look you see in the preview. You can use the `Flexible Spaces` for the gaps.
23 |
24 | 
25 |
26 | ## DuckDuckGo
27 |
28 | Want to get this DuckDuckGo theme? Go to [`https://duckduckgo.com/settings#theme`](`https://duckduckgo.com/settings#theme`) and enter the password **`nightfall`**.
29 |
30 | 
31 |
32 | ## Credits
33 |
34 | **`Nightfox is based off of:`** [`https://github.com/datguypiko/Firefox-Mod-Blur`](https://github.com/datguypiko/Firefox-Mod-Blur)
35 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snthcy/nightfox/18243d6d2ccc0ed1e6947b301035b52c06d309fd/screenshot.png
--------------------------------------------------------------------------------
/spacings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/snthcy/nightfox/18243d6d2ccc0ed1e6947b301035b52c06d309fd/spacings.png
--------------------------------------------------------------------------------