Git Product home page Git Product logo

firefox-uwp-style's Introduction

Firefox UWP Style

A theme that follows UWP styling.

Install

Select the appropriate file:

Copy the content inside the folder where userChrome.css file is located into your chrome folder.

Toggle toolkit.legacyUserProfileCustomizations.stylesheets pref in about:config and restart Firefox.

Styles

MDL2

The original 2015 UWP design. Follows MDL2 styling with the accent color and gray-on-black or gray-on-white elements.

Enabled by default.

Sun Valley

The 2021 Fluent Design refresh. Features heavy use of rounded corners and smoother colors.

Create boolean uwp.sun-valley pref to enable.

Create boolean uwp.sun-valley.font pref to enable Segoe UI Variable.

Create boolean uwp.sun-valley.round-tabs pref to enable rounded tabs.

Create boolean uwp.sun-valley.colored-tabs pref to enable colored tabs. It uses the container color or the accent color in default tabs. Only works with rounded tabs since the default ones have the tab line.

Customize

Toggle layout.css.backdrop-filter.enabled pref to enable acrylic blur in some menus.

Toggle widget.non-native-theme.use-theme-accent pref to enable accent color in all about:* pages.

Mica (WIP)

Not supported after Firefox 116

Requires MicaForEveryone and only works with Sun Valley style

In MicaForEveryone create a process rule and select firefox then set the backdrop type to your preferred one and titlebar to System.

Create boolean uwp.sun-valley.mica pref to enable.

Custom CSS

If you want to change any rules use customChrome.css and customContent.css.

All the theme vars --uwp-* can be overridden, Firefox vars too but only if they are not set using !important.

Accent Color

If you want to override the accent color create two new prefs, both string type set to RGB Hex values.

Firefox 102 and older

ui.-moz-accent-color=#FF00FF Accent color

ui.-moz-accent-color-foreground=#FFFFFF Text color when the background is the accent color.

Firefox 103 and newer

ui.accentcolor=#FF00FF Accent color

ui.accentcolortext=#FFFFFF Text color when the background is the accent color.

Screenshots (Sun Valley)

01 02 04 05 05 06

09

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.