4. Extension Icons

Import icons/extension-icons.css to enable Flyingfox's extension icon handling which are changed in two ways:

• CSS Filter: A mask is applied to extension icons to help them blend better with rest of the theme. For both normal and private mode, this mask is to be based on the light-base color(same color as Flyingfox defined icons). This mask is included in app generated config.css.

• Custom icons: Most common apps' icons will be replaced with the ones from Flyingfox that give navbar a seamless look. These icons will have to be manually set for each extension and therefore there are only handful of them as of now but list will likely increase over time.

Adding icon for extension

The idea is to set an icon for each "category" of extensions. For example, a key icon will be set for any and all password managers since an understanding assumption is that no one would be using lastpass and bitwarden.

• get data-extensionid for the extension's .webextension-browser-action class.
• Flyingfox gets almost all the icons from Remix icons. Select an appropriate icon from there and place it in chrome/icons/ directory.
• Go to chrome/icons/extension-icons.css and set the icon to .webextension-browser-action class similar to others.

.webextension-browser-action[data-extensionid="<EXTENSION ID>"] {
    list-style-image: url(<ICON NAME>.svg) !important;
}

• get the toolbarbutton id for this extension's icon.
• add it to the list of :not selectors for .webextension-browser-action

Currently supported extensions: uBlock Last Pass Privacy Dark Reader