<!-- This Source Code Form is subject to the terms of the Creative Commons - Attribution-NonCommercial-ShareAlike International License, v. 4.0. - If a copy of the CC BY-NC-SA 4.0 was not distributed with this - file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ - or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. -->

uc.css.js

<p align="center"> <a href="https://github.com/aminomancer/uc.css.js/archive/HEAD.zip" title="Download the latest release package" aria-label="Download the latest release package"><img src=".readme/download.png" alt="Download" height="32"></a> <a href="https://github.com/aminomancer/uc.css.js/subscription" title="Get update notifications" aria-label="Get update notifications"><img src=".readme/watch.png" alt="Watch" height="32"></a> <a href="https://github.com/aminomancer/uc.css.js/issues/new/choose" title="Report a bug or request a new feature" aria-label="Report a bug or request a new feature"><img src=".readme/issue.png" alt="Issue" height="32"></a> <a href="https://github.com/aminomancer/uc.css.js/discussions" title="Ask a question or discuss with other users" aria-label="Ask a question or discuss with other users"><img src=".readme/discuss.png" alt="Discuss" height="32"></a> <a href="https://github.com/aminomancer/uc.css.js/fork" title="Make your own copy of this project" aria-label="Make your own copy of this project"><img src=".readme/fork.png" alt="Fork" height="32"></a> <a href="https://github.com/aminomancer" title="Follow my work" aria-label="Follow my work"><img src=".readme/follow.png" alt="Follow" height="32"></a> <!-- <a href="https://github.com/sponsors/aminomancer" title="Become a sponsor" aria-label="Become a sponsor"><img src=".readme/sponsor.png" alt="Sponsor" height="32"></a> --><br/> A Firefox theme (duskFox) and a variety of privileged scripts to add new behaviors and functions. </p> <p> <img src="preview/prev-window-small.webp"> </p> <p> <img src="preview/prev-navbar.gif"/> </p> <p> <img src="preview/prev-search.gif"/> </p>

Index:

• 📌 Introduction
• ⚙️ Recommended settings
• 🎨 Theme (CSS)
  • 💾 Setup
    • 📦 Resources & manifest
  • 📐 Design conventions
  • 🔍 Details
    • 🆎 Fonts
    • 🧪 Further modification
    • 🌏 Language packs
    • 📥 Updating
• 📜 Scripts
  • 🔌 Installation
  • 💻 Usage
    • 🏆 Special stylesheets
    • 🧰 Styling browser toolbox windows
  • 📚 Script conventions
  • 🏷 Script descriptions & links
• 💝 Sponsors
• 🔗 Other useful links
• 🎫 License

Introduction:

<details><summary>📌 <b><i>If you don't have much experience with modding Firefox, click to expand...</i></b></summary> <br/>

Installing this theme is a bit more involved and requires more decisions than pure CSS themes. So, I'm going to explain what this is, introduce the major moving parts, and define some jargon to ensure that anyone can follow the instructions, regardless of prior experience or knowledge. More advanced users can just skip ahead to Recommended settings.

Because [theme addons][] are restricted to changing colors and other variables, many Firefox users continue to use other, unsupported approaches to customizing the browser. By far the most common is [userChrome customization][], wherein you use [CSS files][] to customize the browser visually. To be clear, a CSS file is called a stylesheet, not a script. For the purposes of this theme, a stylesheet is a file ending in .css. However, just like theme addons are restricted by the theme API, userChrome customization is restricted by the CSS language, which only allows us to style existing elements.

Firefox's frontend uses JavaScript (a human-readable, interpreted scripting language) for a huge variety of dynamic/interactive features. A JavaScript file is typically called a script. For the purposes of this theme, a script is a file ending in .js or .jsm. As it happens, Firefox exposes a mechanism for loading custom scripts. That mechanism involves giving Firefox an [autoconfig file][autoconfig], which Firefox reads like a JavaScript file. At runtime, the autoconfig file has access to the same powers as some of Firefox's internal scripts. We can use it to run JavaScript code or even load additional script files. So, whereas most other themes are purely visual, this theme can and does create new elements, shortcuts, and dynamic behavior.

A third, lesser known avenue for customization is Firefox's [component registrar][]. This is a pretty arcane object called an XPCOM interface, so don't worry about the details — Firefox uses this system to organize itself. Instead of using absolute paths, the Firefox frontend usually uses special URLs to reference its internal files. For example, the "new tab" icon is located at chrome://browser/skin/new-tab.svg. This corresponds to a local path that's been registered to this URL. We can use the registrar to do the same thing: to register chrome:// URLs or override existing ones. If I don't like Firefox's "new tab" icon, I can just replace it by loading a manifest file. That means we don't need to use CSS to modify every element that uses the icon and update that CSS every time one of them is changed. For the purposes of this theme, a manifest file is a file ending in .manifest.

Firefox also has a preferences system, which can be managed by navigating to about:config. A preference (or pref) is simply a key-value pair. Pref keys are always [strings][], and their values can be strings, integers, or [Boolean][] (they can also be floating-point numbers, but these are encoded like strings). Firefox has several thousands of prefs, which are used for all sorts of things from major configurations to obscure mods and even simply counting events. Firefox's UI can be visually customized to some extent using prefs. Since we can make our own prefs, I also use them to make customizing this theme easier. The most important prefs are listed below in the settings section. Some individual scripts have prefs as well, which will be listed in their descriptions.

So, for the purposes of this theme, a "stylesheet" is a .css file used to visually customize the browser UI or content; a "script" is a .js or .jsm file used to functionally customize the browser, and in this theme, usually a .uc.js file placed in the JS folder; a "manifest" is a .manifest file used to register or override the browser's internal URLs. When I use the term "resources" I'm usually referring to the resources folder, where the theme stores its icons and content stylesheets (among other things). These terms may have other meanings outside of this context, but within this readme, that's what they mean.

</details>

Recommended settings:

For best results, set density mode to Normal and theme to Dark in the customization menu. (right click on the navbar and click "Customize Toolbar...") I strongly recommend using this on [Firefox Nightly][] and updating the theme at least weekly. To that end, you might find it easier to clone the repo to your chrome folder so you can pull updates quickly.

I also recommend setting the following prefs in about:config. There are two preset user.js files in the prefs directory that can automatically set the prefs for you and prevent Firefox from changing them on update. Just choose one, rename it to user.js, and move it to your profile folder, not your chrome folder. The first of these files, required.js contains just the bare minimum prefs to ensure functionality, omitting most of the prefs that represent aesthetic choices. The second, recommended.js, includes the required prefs and some other more subjective prefs that compliment the theme — this is the preset I would personally recommend. There are also OS-specific prefs that are not in either file, so you should still check the list below. The following are in alphabetical order, not in order of importance. Most are optional, but the few that are required are in italics and are marked in the Notes column.<details><summary>⚙ Click for a full list.</summary> | Pref name | Type | Value | Notes (optional unless otherwise noted) | |- |- |- |- | | accessibility.mouse_focuses_formcontrol | Number | 0 | Don't focus elements on click, only on tab. Helps to eliminate ugly 1px dotted outline | | browser.display.background_color.dark | String | #19191b | Default background color for color-scheme: dark pages like about:blank | | browser.display.use_system_colors | Boolean | false | | | <i>browser.display.windows.non_native_menus</i> | Number | 1 | | | browser.privatebrowsing.enable-new-indicator | Boolean | false | Remove the "Private browsing" window label | | <i>browser.startup.blankWindow</i> | Boolean | false | These two settings eliminate the blank white window during startup | | <i>browser.startup.preXulSkeletonUI</i> | Boolean | false | | | browser.tabs.tabMinWidth | Number | 90 | User preference, but mine is 90 | | browser.tabs.tabmanager.enabled | Boolean | true | Enables "all tabs menu" | | browser.urlbar.accessibility.tabToSearch.announceResults | Boolean | false | The following disable some urlbar results | | browser.urlbar.quicksuggest.enabled | Boolean | false | | | browser.urlbar.richSuggestions.tail | Boolean | false | | | br