Firefox css stylesheets for the dark space theme. Matching more UI elements with the theme.

  • By Sagar S
  • Last update: Dec 28, 2022
  • Comments: 2

StarryFox

Firefox css stylesheets for the dark space theme. Matching many more UI elements like sidebar, contextmenus, menupopups, dialog boxes, buttons, searchboxes, tooltips, etc.. with the theme. Reddit

To be used with the dark space theme.

  • Includes many changes such as auto-hide bookmarks bar, floating-compact findbar, newtab page with a starry sky, unread tabs indicator, new container tabs indicator, persistent sound icon on audio tab, ultra compact mode, HTML5 dark mode web notifs, rounded corners in many more menus, etc... It's all in the small details...

  • Works best in proton UI compact mode dark theme. Tested in Firefox Nightly, Windows 11.

  • How to use userChrome/userContent.css: https://www.userchrome.org/how-create-userchrome-css.html.

    • P.S: Use the same chrome folder which is in the repo, so that no files will be missing. Copy the the chrome folder to the Firefox profile folder that you want to modify. If the profile already has a chrome folder, then the chrome folders should merge. Otherwise the chrome folder will be created. The chrome folder should be in the profile root, as mentioned in the above guide.
  • For dark mode tooltips, fx-autoconfig userChrome.js manager must be setup. Codes for dark mode tooltips in chrome/resources/userChrome.ag.css

  • To match dark mode color of about:blank with the black color of the theme (#000000), following changes in about:config:

    • Change value of browser.display.background_color.dark to #000000
    • Change value of browser.display.use_system_colors to false
  • Unread tabs indicator functionality requires Tab Flag extension.

  • Minimalistic dark scroll bars using the Dark Scroll extension.

  • Starting from Nightly build 97.0a1 (18 dec 2021), scrollbar styles can be modified using widget.non-native-theme.scrollbar.style in about:config.

    • Corresponding values:
    0. Default platform scrollbar style.
    1. macOS scrollbars
    2. GTK scrollbars
    3. Android scrollbars
    4. Windows 10 scrollbars
    5. Windows 11 scrollbars
    
  • About config changes in user.js are optional. Modify with caution.

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot screenshot

Thanks to @xarantolus for the container-tabs indicator.
Thanks to @nicoth-in for the dark space theme.

Github

https://github.com/sagars007/starry-fox

Comments(2)

  • 1

    bookmark autohide

    where is the section in the user.js to set the bookmarks bar to stop auto hiding i do like how it auto hides and gives you more screen but i do like having them there at all times without having to hover to get them

  • 2

    Enhancement feature for oneline tab

    Could you make some changes so that the address bar and tab combine together in one line like some themes like this https://github.com/andreasgrafen/cascade.

    It's will save a lot of space and look much better in my opinion.

    Happy holiday!