Αναζήτηση υποστήριξης

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Dark / black background for View Source page?

  • 5 απαντήσεις
  • 1 έχει αυτό το πρόβλημα
  • 350 προβολές
  • Τελευταία απάντηση από SusseLinuxx

more options

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?

Τροποποιήθηκε στις από το χρήστη cor-el

Επιλεγμένη λύση

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.

Ανάγνωση απάντησης σε πλαίσιο 👍 1

Όλες οι απαντήσεις (5)

more options

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

Τροποποιήθηκε στις από το χρήστη d.mattera

more options

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.

more options

Επιλεγμένη λύση

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.

Τροποποιήθηκε στις από το χρήστη d.mattera

more options

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.

more options

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!