Login
biscuide

biscuide / userContent.css

Last active 2 months ago

Like 0

Dark mode for the firefox built in pdf reader. Inspiration and setup guide: https://pncnmnp.github.io/blogs/firefox-dark-mode.html

biscuide revised this gist 1 year ago · eb64466

No changes

biscuide revised this gist 1 year ago · 5c6db0e

No changes

biscuide revised this gist 1 year ago · 16fdc4c

1 file changed, 50 insertions, 54 deletions

userContent.css
@@ -1,9 +1,21 @@
1 - @-moz-document regexp("^.*\.pdf(?:[?#].*)?$") {
2 - #viewerContainer > #viewer > .page > .canvasWrapper > canvas {
3 - filter: invert(100%);
1 + @-moz-document regexp("^.*\\.pdf(?:[?#].*)?$") {
2 + /* === Variables === */
3 + :root {
4 + --bg-color: #292D32;
5 + --input-bg-color: #2c2c2c;
6 + --text-color: #ccc;
7 + --border-color: #555;
8 + --loading-bar-color: #333;
9 + --icon-filter: invert(100%) brightness(200%);
4 10 }
5 11
6 - /* Dark background behind PDF pages */
12 + /* === Page Inversion (for PDF content) === */
13 + .page canvas {
14 + filter: invert(100%) !important;
15 + }
16 +
17 + /* === General Backgrounds === */
18 + body,
7 19 #outerContainer,
8 20 #mainContainer,
9 21 #viewerContainer,
@@ -12,81 +24,65 @@
12 24 #thumbnailView,
13 25 #outlineView,
14 26 #attachmentsView,
15 - #layersView {
16 - background-color: #292D32 !important;
27 + #layersView,
28 + .doorHangerRight,
29 + .menu,
30 + .editorParamsToolbar,
31 + .menuContainer,
32 + .dropdownToolbarButton select,
33 + .dialog,
34 + .dialog .mainContainer {
35 + background-color: var(--bg-color) !important;
36 + color: var(--text-color) !important;
17 37 }
18 38
19 - /* Dark toolbar */
39 + /* === Toolbar Styling === */
20 40 #toolbarContainer,
21 41 .toolbar,
22 42 #toolbarSidebar {
23 - background-color: #292D32 !important;
24 - color: #ccc !important;
43 + background-color: var(--bg-color) !important;
44 + color: var(--text-color) !important;
25 45 }
26 46
27 - .toolbarButton > svg path {
28 - fill: #ffffff !important;
47 + .toolbarButton {
48 + background-color: transparent !important;
49 + color: var(--text-color) !important;
29 50 }
30 51
31 - /* Make toolbar icons white */
32 52 .toolbarButton > svg,
33 53 .toolbarButton::before,
34 54 .toolbarButton::after {
35 - filter: invert(100%) brightness(200%) !important;
55 + filter: var(--icon-filter) !important;
36 56 }
37 57
38 - /* Toolbar buttons */
39 - .toolbarButton {
40 - background-color: transparent !important;
41 - color: #ccc !important;
58 + .toolbarButton > svg path {
59 + fill: #ffffff !important;
42 60 }
43 61
44 - /* Dropdowns and inputs */
62 + /* === Inputs and Dropdowns === */
45 63 .toolbarField,
46 - select {
47 - background-color: #2c2c2c !important;
48 - color: #ccc !important;
49 - border: 1px solid #555 !important;
50 - }
51 -
52 - /* Dialogs (e.g., password prompt) */
53 - .dialog,
54 - .dialog .mainContainer {
55 - background-color: #292D32 !important;
56 - color: #ccc !important;
64 + select,
65 + #scaleSelect option,
66 + .dropdown button,
67 + .editorParamsLabel {
68 + background-color: var(--input-bg-color) !important;
69 + color: var(--text-color) !important;
57 70 }
58 71
59 - /* Optional: Adjust loading bar (hidden usually) */
60 - #loadingBar {
61 - background-color: #333 !important;
72 + /* Hover effects */
73 + .dropdown button:hover {
74 + background-color: var(--loading-bar-color) !important;
62 75 }
63 76
77 + /* === Labels, Page Counters === */
64 78 .toolbarLabel,
65 79 #numPages,
66 80 #pageNumber {
67 - color: #ccc !important;
81 + color: var(--text-color) !important;
68 82 }
69 83
70 - /* Darken popup menus and drawers */
71 - .doorHangerRight,
72 - .menu,
73 - .editorParamsToolbar,
74 - .menuContainer,
75 - .dropdownToolbarButton select {
76 - background-color: #292D32 !important;
77 - color: #ccc !important;
78 - border: 1px solid #555 !important;
79 - }
80 -
81 - /* Fix labels and inputs inside menus */
82 - .editorParamsLabel,
83 - .dropdown button,
84 - #scaleSelect option {
85 - color: #ccc !important;
86 - }
87 -
88 - /* Better dark hover for dropdown buttons */
89 - .dropdown button:hover {
90 - background-color: #333 !important;
84 + /* === Loading Bar === */
85 + #loadingBar {
86 + background-color: var(--loading-bar-color) !important;
91 87 }
92 88 }

biscuide revised this gist 1 year ago · c9bf517

No changes

biscuide revised this gist 1 year ago · 9b5402d

1 file changed, 92 insertions

userContent.css (file created)
@@ -0,0 +1,92 @@
1 + @-moz-document regexp("^.*\.pdf(?:[?#].*)?$") {
2 + #viewerContainer > #viewer > .page > .canvasWrapper > canvas {
3 + filter: invert(100%);
4 + }
5 +
6 + /* Dark background behind PDF pages */
7 + #outerContainer,
8 + #mainContainer,
9 + #viewerContainer,
10 + #sidebarContainer,
11 + #sidebarContent,
12 + #thumbnailView,
13 + #outlineView,
14 + #attachmentsView,
15 + #layersView {
16 + background-color: #292D32 !important;
17 + }
18 +
19 + /* Dark toolbar */
20 + #toolbarContainer,
21 + .toolbar,
22 + #toolbarSidebar {
23 + background-color: #292D32 !important;
24 + color: #ccc !important;
25 + }
26 +
27 + .toolbarButton > svg path {
28 + fill: #ffffff !important;
29 + }
30 +
31 + /* Make toolbar icons white */
32 + .toolbarButton > svg,
33 + .toolbarButton::before,
34 + .toolbarButton::after {
35 + filter: invert(100%) brightness(200%) !important;
36 + }
37 +
38 + /* Toolbar buttons */
39 + .toolbarButton {
40 + background-color: transparent !important;
41 + color: #ccc !important;
42 + }
43 +
44 + /* Dropdowns and inputs */
45 + .toolbarField,
46 + select {
47 + background-color: #2c2c2c !important;
48 + color: #ccc !important;
49 + border: 1px solid #555 !important;
50 + }
51 +
52 + /* Dialogs (e.g., password prompt) */
53 + .dialog,
54 + .dialog .mainContainer {
55 + background-color: #292D32 !important;
56 + color: #ccc !important;
57 + }
58 +
59 + /* Optional: Adjust loading bar (hidden usually) */
60 + #loadingBar {
61 + background-color: #333 !important;
62 + }
63 +
64 + .toolbarLabel,
65 + #numPages,
66 + #pageNumber {
67 + color: #ccc !important;
68 + }
69 +
70 + /* Darken popup menus and drawers */
71 + .doorHangerRight,
72 + .menu,
73 + .editorParamsToolbar,
74 + .menuContainer,
75 + .dropdownToolbarButton select {
76 + background-color: #292D32 !important;
77 + color: #ccc !important;
78 + border: 1px solid #555 !important;
79 + }
80 +
81 + /* Fix labels and inputs inside menus */
82 + .editorParamsLabel,
83 + .dropdown button,
84 + #scaleSelect option {
85 + color: #ccc !important;
86 + }
87 +
88 + /* Better dark hover for dropdown buttons */
89 + .dropdown button:hover {
90 + background-color: #333 !important;
91 + }
92 + }