Firefox Viewsource CSS
Updated on
Last site update: 8 May 2024
So the idea was to change the CSS when viewing the source code of a web page in Firefox into a darker theme.
The easiest and best way to do this was to use a plugin called Nightviewer.
So this requires several steps:
- Locate the right folder
- Edit CSS
- Enable Legacy Profile Customizations
- Restart Firefox
I couldn’t get this to work but anyway here goes.
1. Locate the folder
In the firefox address bar type about:support
Look for Profile Folder and click on Open Folder.
Look for the file userContent.css
2. Edit the CSS
This is the CSS which comes from Mozilla Support question:
1@-moz-document url-prefix(view-source:) {
2
3 *|*:root {
4 background: none !important;
5 }
6
7 #viewsource {
8 font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
9 line-height: 1.5em;
10 background-image:
11 url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
12 linear-gradient(to right, #002b36d0, #002b36d0, #000000d0),
13 linear-gradient(#00000040 50%, transparent 50%);
14 background-size: cover, cover, auto 3em;
15 background-position: center, center, top 10px left 0;
16 background-attachment: fixed, fixed, scroll;
17 background-repeat: no-repeat, no-repeat, repeat-y;
18 background-blend-mode: overlay, normal, normal;
19 color: #839496;
20 }
21
22 pre[id]:before,
23 span[id]:before {
24 width: 6ch !important;
25 color: #586e75 !important;
26 margin-left: -7ch !important;
27 }
28 pre {
29 padding-left: 1ch;
30 margin-left: 6ch !important;
31 border-left: 2px solid #073642;
32 }
33 pre > :first-child {
34 padding-right: 1ch;
35 }
36
37 .highlight .start-tag {
38 color: #d33682 !important;
39 }
40 .highlight .end-tag {
41 color: #d33682 !important;
42 }
43 .highlight .comment {
44 color: #586e75 !important;
45 }
46 .highlight .cdata {
47 color: #cb4b16 !important;
48 }
49 .highlight .doctype {
50 color: #268be2 !important;
51 }
52 .highlight .pi {
53 color: #268be2 !important; /* orchid -> blue */
54 }
55 .highlight .entity {
56 color: #b58900 !important; /* violet -> yellow */
57 }
58 .highlight .attribute-name {
59 color: #93a1a1 !important;
60 }
61 .highlight .attribute-value {
62 color: #2aa198 !important;
63 text-shadow: 1px 1px 2px black;
64 }
65 .highlight .markupdeclaration {
66 color: #859900 !important;
67 }
68 .highlight .error,
69 .highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
70 .pi, .entity, .attribute-name, .attribute-value) {
71 color: #002b36 !important;
72 background-color: #dc322f !important;
73 }
74}
3. Enable Legacy Profile Customizations
Open about:config and make sure this setting:
toolkit.legacyUserProfileCustomizations.stylesheets is set to true
4. Restart Firefox
And you’re done. Except it hasn’t worked for me.