Izimpendulo zakamuva ze-How to make the sidebar in Firefox Reader View Mode another (dark) color? Because I made a dark background and browser themes doesn't affect the color panel.https://support.mozilla.org/zu/questions/12544432019-03-27T05:57:39-07:00cor-el said
Try this code in userContent.css as a start...
You need to create a folder with the na2019-03-27T05:57:39-07:00dark8_Kittenhttps://support.mozilla.org/zu/questions/1254443#answer-1208867<p><em>cor-el <a href="#answer-1208805" rel="nofollow">said</a></em>
</p>
<blockquote>
Try this code in userContent.css as a start...
You need to create a folder with the name <u>chrome</u> in this folder (name is all lowercase).
In the <b>chrome</b> folder you need to create a text file with the name <u>userContent.css</u>...
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
</blockquote>
<p>And I created new style, like
</p>
<pre>@-moz-document url-prefix("about:reader") {
.toolbar{
background-color: #383C4A&nbsp;!important;
}
.button {
color: #ccc&nbsp;!important;
background-color: #383C4A&nbsp;!important;
}
}</pre>
<p>Now I comfort read, thank you.&nbsp;:)
</p>Try this code in userContent.css as a start.
I don't know that other elements need to be included an2019-03-27T03:19:13-07:00cor-elhttps://support.mozilla.org/zu/questions/1254443#answer-1208805<p>Try this code in userContent.css as a start.
I don't know that other elements need to be included and whether you want to add&nbsp;:hover and and pseudo class rules.
</p>
<pre>@-moz-document url-prefix("about:reader?"){
.toolbar.reader-toolbar {
background-color: #222 !important;
}
.toolbar.reader-toolbar :-moz-any(.button,.dropdown-popup) {
color: white !important;
background-color: #222 !important;
}
}</pre>
<p>See also this file for code that is used:
</p>
<ul><li>chrome://global/skin/aboutReader.css
</li></ul>
<pre>.button:hover,
.font-size-buttons &gt; button:hover,
.font-type-buttons &gt; button:hover,
.content-width-buttons &gt; button:hover,
.line-height-buttons &gt; button:hover {
background-color: #ebebeb;
}
.dropdown.open,
.button:active,
.font-size-buttons &gt; button:active,
.font-size-buttons &gt; button.selected,
.content-width-buttons &gt; button:active,
.content-width-buttons &gt; button.selected,
.line-height-buttons &gt; button:active,
.line-height-buttons &gt; button.selected {
background-color: #dadada;
}</pre>
<hr>
<p>It is not that difficult to create userContent.css if you have never used it.
</p><p>The first step is to open the "Help -&gt; Troubleshooting Information" page and find the button to access the profile folder.
</p>
<ul><li><a href="https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox" rel="nofollow">https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox</a>
</li></ul>
<p>You can find this button under the "Application Basics" section as "Profile Folder -&gt; Open Folder".
If you click this button then you open the profile folder in the Windows File Explorer.
You need to create a folder with the name <u>chrome</u> in this folder (name is all lowercase).
In the <b>chrome</b> folder you need to create a text file with the name <u>userContent.css</u> (name is case sensitive).
In this userContent.css text file you paste the text posted.
On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.
</p><p>In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named <i>userContent.css.txt</i>.
To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
</p><p>You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
</p>Hi, I think this will require using a custom style rule in a userContent.css file. If that was compl2019-03-27T02:08:17-07:00jscher2000https://support.mozilla.org/zu/questions/1254443#answer-1208789<p>Hi, I think this will require using a custom style rule in a userContent.css file. If that was complete gibberish to you, it's understandable, and volunteers can help.
</p><p>I have to leave the keyboard now, but for reference, this is the kind of style rule I have in mind:
</p>
<pre>@-moz-document url-prefix("about:reader"){
body.dark &gt; ul,
body.dark &gt; ul li,
body.dark &gt; ul button:not(.light-button):not(.sepia-button) {
color: #f8f8f8;
background-color: #111;
}
}
</pre>