Last active 1745938994

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

Revision c9bf517094a072a3033e05c4ea9266904cbb8b04

userContent.css Raw
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}
93