Make Text, Icon & Accent Color Configurable

Love this extension!! I noticed that there are some theme properties which are hardcoded right now and it would be really awesome if you could make them configurable.

Specifically the following:

Accent Color: toolbar_field_border_focus
- Currently Dark: rgb(70, 118, 160) Light: rgb(130, 180, 245)
Text Color: ntp_text toolbar_text toolbar_field_text popup_text sidebar_text tab_background_text
- Currently Dark: rgb(255, 255, 255) Light: rgb(0, 0, 0)
Icon Color: icons
- Currently Dark: rgb(255, 255, 255) Light: rgb(0, 0, 0)

These obviously need to be set for light and dark theme independently (same as Homepage color and Fallback color) and the current hardcoded values should become the defaults.

The final two theme properties which can't be controlled right now are button_background_active & button_background_hover which could be handled using sliders in the Customization section of the Options page.

Workaround

The colors can be manually overridden in the userChrome.css, e.g.:

@media (prefers-color-scheme: light) {
  :root {
    --ctp-accent: #1e66f5;
    --ctp-text: #4c4f69;
    --ctp-icon: #4c4f69;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ctp-accent: #8aadf4;
    --ctp-text: #cad3f5;
    --ctp-icon: #cad3f5;
  }
}
:root {
  --toolbar-field-focus-border-color: var(--ctp-accent) !important;
  --toolbarbutton-icon-fill: var(--ctp-icon) !important;
  --newtab-text-primary-color: var(--ctp-text) !important;
  --toolbar-color: var(--ctp-text) !important;
  --toolbar-field-color: var(--ctp-text) !important;
  --arrowpanel-color: var(--ctp-text) !important;
  --sidebar-text-color: var(--ctp-text) !important;
  --lwt-text-color: var(--ctp-text) !important;
}

easonwong-de / Adaptive-Tab-Bar-Colour

Make Text, Icon & Accent Color Configurable #88

Workaround