X
點擊此處開啟此網站的行動版。

技術支援討論區

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?

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?

由 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
引用

額外的系統細節

已安裝的外掛程式

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

應用程式

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0

更多資訊

d.mattera 3 個解決方法 17 個答案

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

由 d.mattera 於 修改

這篇文章有幫助嗎? 0
引用

提出問題者

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.
這篇文章有幫助嗎?
引用
d.mattera 3 個解決方法 17 個答案

選擇的解決方法

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.

由 d.mattera 於 修改

這篇文章有幫助嗎? 1
引用
cor-el
  • Top 10 Contributor
  • Moderator
17774 個解決方法 160751 個答案

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
這篇文章有幫助嗎?
引用

提出問題者

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!
這篇文章有幫助嗎?
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題