X
Thinta lapha ukuze uye kuveshini yamakhalekhukhwini kusayithi.

Isithangami Sabeseki

Dark / black background for View Source page?

Kuphostiwe

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?

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 ) <pre><nowiki>@-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; } } </nowiki></pre> 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?

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 1
Isicaphuno

Eminye Imininingwane Yohlelo

Fakela amapulagi

Open H265 Video Codec by CISCO - that's all in the list, I think the black theme came with the package but I don't remember and I'm also on KDE Plasma

Isisebenziso

  • I-ejenti Engumsebenzisi: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

Eminye Imininingwane

d.mattera 3 izisombululo 17 izimpendulo
Kuphostiwe

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

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

Okulungisiwe ngu d.mattera

Ingabe lokhu kube usizo kuwena? 0
Isicaphuno

Umnikazi wombuzo

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.

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.
Ingabe lokhu kube usizo kuwena?
Isicaphuno
d.mattera 3 izisombululo 17 izimpendulo
Kuphostiwe

Isisombululo Esikhethiwe

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.

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.

Okulungisiwe ngu d.mattera

Ingabe lokhu kube usizo kuwena? 1
Isicaphuno
cor-el
  • Top 10 Contributor
  • Moderator
17758 izisombululo 160617 izimpendulo
Kuphostiwe

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.

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. *https://gist.github.com/abelcheung/0229ee3ab896feac8126f40eb1405996 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/&lt;profile&gt;/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 <b>about:profiles</b> page. *Help -> Troubleshooting Information -> Profile Folder/Directory:<br>Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder *https://support.mozilla.org/en-US/kb/Profiles
Ingabe lokhu kube usizo kuwena?
Isicaphuno

Umnikazi wombuzo

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!

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!
Ingabe lokhu kube usizo kuwena?
Isicaphuno
Buza umbuzo

Kufanele ulogele ukungena ku-akhawunti yakho ukuze uphendule amaphosti. Uyacelwauqale umbuzo omusha, uma ungekabi nayo i-akhawunti namanje.