Dark / black background for View Source page?
It has been asked before, but I wasn't able to find a webpage providing coplete and working instructions.
Here's what I did so far:
1) I set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config 2) I added a folder called chrome and a file called userChrome.css for both the Root Directory and the Local Directory in about:profiles
/home/user-linux/.mozilla/firefox/ /home/user-linux/.cache/mozilla/firefox/
3) I added the following code to these files (I got it from https://gist.github.com/abelcheung/0229ee3ab896feac8126f40eb1405996 )
@-moz-document url-prefix(view-source:) {
*|*:root {
background: none !important;
}
#viewsource {
font-family: "Roboto Mono", Inconsolata, "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, -moz-fixed !important;
line-height: 1.5em;
background-image:
url(https://farm9.staticflickr.com/8536/8680613751_71ef92bbdb_o_d.jpg),
linear-gradient(to right, #002b36d0, #002b36d0, #000000d0),
linear-gradient(#00000040 50%, transparent 50%);
background-size: cover, cover, auto 3em;
background-position: center, center, top 10px left 0;
background-attachment: fixed, fixed, scroll;
background-repeat: no-repeat, no-repeat, repeat-y;
background-blend-mode: overlay, normal, normal;
color: #839496;
}
pre[id]:before,
span[id]:before {
width: 6ch !important;
color: #586e75 !important;
margin-left: -7ch !important;
}
pre {
padding-left: 1ch;
margin-left: 6ch !important;
border-left: 2px solid #073642;
}
pre > :first-child {
padding-right: 1ch;
}
.highlight .start-tag {
color: #d33682 !important;
}
.highlight .end-tag {
color: #d33682 !important;
}
.highlight .comment {
color: #586e75 !important;
}
.highlight .cdata {
color: #cb4b16 !important;
}
.highlight .doctype {
color: #268be2 !important;
}
.highlight .pi {
color: #268be2 !important; /* orchid -> blue */
}
.highlight .entity {
color: #b58900 !important; /* violet -> yellow */
}
.highlight .attribute-name {
color: #93a1a1 !important;
}
.highlight .attribute-value {
color: #2aa198 !important;
text-shadow: 1px 1px 2px black;
}
.highlight .markupdeclaration {
color: #859900 !important;
}
.highlight .error,
.highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
.pi, .entity, .attribute-name, .attribute-value) {
color: #002b36 !important;
background-color: #dc322f !important;
}
}
4) I restarted Firefox and was expexcting a nice black theme for the View-Source page, but nothing changed. What am I missing?
That being asked, why hasn't Firefox implemented a standard dark theme approved by the majority of users which has all these elements covered? For most people it would make much more sense to switch with the press of a button than spend hours of research and experiments to get a dark theme working.
Also, is this the official Firefox community forum or am I mistaken?
Upravil(a) cor-el dňa
Vybrané riešenie
Gotcha.
so just to clarify, the path to your userContent.css file is:
/<username>/home/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css ? (this is the correct location)
after re-reading your original post it sounds like it may be in in the folder above that:
/<username>/home/.mozilla/firefox/chrome/userContent.css
this would explain why it's not working.
Also, I confirmed all your .css works for view-source pages in my own userContent file so we can rule the code itself out.
Čítať túto odpoveď v kontexte 👍 1Všetky odpovede (5)
In regards to the first part of your question, it sounds like there a couple of small issues:
- the destination of the chrome folder in which you put your custom .css files should be your default profile folder (the "Profile Folder" listed in about:support). on linux it should look something like this:
/home/<username>/.mozilla/firefox/xxxxxxxx.default
- the name of the file should be "userContent.css" rather than "userChrome.css" for what you are looking to do. Styling defined in userChrome will only apply to browser components such as the urlbar, tabs etc. It won't affect any of the content inside of the web pages themselves including pages such as generated by "view-source" , that is where userContent.css comes into play.
that being said, I can't telling just by looking whether all your rules will achieve the desire results but the basic syntax looks correct.
In regards to the second part of you question, the Mozilla dark theme (View --> Toolbars --> Customize --> Themes) affects most browser-related aspects (menus, toolbars, settings pages) but the view-source widget has not been incorporated yet. You could try suggesting this over at https://bugzilla.mozilla.org/
As for official forums related specifically to custom user styling, none exist to my knowledge, however unofficial forums, such as https://reddit.com/r/FirefoxCSS are quite helpful and active
Upravil(a) d.mattera dňa
Hi d.mattera, thanks for the quick reply.
I forgot to mention that I tried both userChrome.css and userContent.css, because according to different instructions I was supposed to name the file either as one or as the other. And the directory is the one I have, except that <username> comes before /home/ - so the issue is somewhere else.
Vybrané riešenie
Gotcha.
so just to clarify, the path to your userContent.css file is:
/<username>/home/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css ? (this is the correct location)
after re-reading your original post it sounds like it may be in in the folder above that:
/<username>/home/.mozilla/firefox/chrome/userContent.css
this would explain why it's not working.
Also, I confirmed all your .css works for view-source pages in my own userContent file so we can rule the code itself out.
Upravil(a) d.mattera dňa
This code for styling web page content should be in userContent.css and not in userChrome.css as you can see in the first line of your linked page.
Open (or create) chrome/userContent.css under your Firefox profile folder Append attached CSS content and save file Restart Firefox
userContent.css (and userChrome.css) need to be in the chrome folder in the main profile folder (i.e. root location; ~/.mozilla/firefox/<profile>/chrome/userContent.css).
You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.
- Help -> Troubleshooting Information -> Profile Folder/Directory:
Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder - https://support.mozilla.org/en-US/kb/Profiles
Hi d.mattera,
I put the file in /home/user-linux/.mozilla/firefox/u63c6tu3.default/chrome/ and now it works!
I'm not entirely happy with the colours and the background, but that's outside of the scope of this question - I'll search for other codes or try to figure out how to change it.
Thanks for the help!