[Feature Request] Match toolbar color with current webpage

[0xCUB3]

Similar functionality to Safari 15+. This has been done in this repo so I know it's possible. I'm wondering if you would be open to implementing such functionality in your project? Thanks :)

[datguypiko]

You will need to use the plugin https://addons.mozilla.org/en-US/firefox/addon/adaptive-tab-bar-colour/

Add this code at the end in userChrome.css

/* ADAPTIVE TAB BAR COLOR */
/* Bookmarks bar background color */
#PersonalToolbar {
  background-color: var(--lwt-accent-color) !important;
}

/* Whole Main Toolbar */
#navigator-toolbox {
  background-color: var(--lwt-accent-color) !important;
}

#urlbar {
  --autocomplete-popup-highlight-background: var(
    --firefoxcss-url-autocomplete-highlight
  ) !important;
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
  box-shadow:none !important;
}

/* Megabar */
#urlbar[breakout][breakout-extend][open] {
  background-color: var(--toolbar-field-background-color) !important;
}

/* Styling Extra search bar that you can add to firefox */
 #search-container #searchbar {
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
  box-shadow:none !important;
} 

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  background-color:  color-mix(in srgb, currentColor 6%, transparent) !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs
  .tabbrowser-tab:hover
  > .tab-stack
  > .tab-background:not([selected]) {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;

}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

:root {
    --firefoxcss-new-tab-button-active: color-mix(in srgb, currentColor 10%, transparent) !important;
    --firefoxcss-new-tab-button-hover: color-mix(in srgb, currentColor 14%, transparent) !important;
}

And you can set the color of toolbar for the main home page in plugin settings

and you can set the color for bright websites here

[yujinlin0224]

But when "Allow light tab bar" or "Allow dark tab bar" option of Adaptive-Tab-Bar-Colour plugin is checked, some icons, background and text colors of tabs and menu are not correct when Adaptive-Tab-Bar-Colour plugin changed light/dark theme according too web page's background.

I fix some by my self but not perfect.

/* ADAPTIVE TAB BAR COLOR */
/* Bookmarks bar background color */
#PersonalToolbar {
  background-color: var(--lwt-accent-color) !important;
}

/* Whole Main Toolbar */
#navigator-toolbox {
  background-color: var(--lwt-accent-color) !important;
  border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid var(--lwt-accent-color) !important;
}

#urlbar {
  --autocomplete-popup-highlight-background: var(
    --firefoxcss-url-autocomplete-highlight
  ) !important;
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
}

/* Megabar */
#urlbar[breakout][breakout-extend][open] {
  background-color: var(--lwt-accent-color) !important;
}

/* Styling Extra search bar that you can add to firefox */
#search-container #searchbar {
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
  border-bottom: 1px solid #ffffff08 !important;
  border-top: 1px solid var(--lwt-accent-color) !important;
}

/* Menu Colors */
:not(#ContentSelectDropdown) > menupopup {
  --panel-color: var(--lwt-text-color) !important;
}

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  background-color: color-mix(in srgb, currentColor 6%, transparent) !important;
}

.tabbrowser-tab:not([selected]):not([multiselected]):not(:hover) .tab-label-container .tab-label {
  color: var(--toolbox-non-lwt-textcolor) !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

:root {
  --firefoxcss-main-bg-color: var(--lwt-accent-color) !important;
  --firefoxcss-url-box-shadow-color: none !important;
  --firefoxcss-normal-tabs-box-shadow: none !important;
  --firefoxcss-new-tab-button-active: color-mix(in srgb, currentColor 10%, transparent) !important;
  --firefoxcss-new-tab-button-box-shadow-active: none !important;
  --firefoxcss-new-tab-button-hover: color-mix(in srgb, currentColor 14%, transparent) !important;
  --firefoxcss-new-tab-button-box-shadow-hover: none !important;
}

#PanelUI-menu-button {
  list-style-image: url('chrome://browser/skin/menu.svg') !important;
}

:root[privatebrowsingmode='temporary'] #PanelUI-menu-button {
  list-style-image: url('chrome://browser/skin/menu.svg') !important;
}

#find-button {
  list-style-image: url('chrome://global/skin/icons/search-glass.svg') !important;
}

#privatebrowsing-button {
  list-style-image: url('chrome://browser/skin/privateBrowsing.svg') !important;
}

#forward-button,
menugroup > #context-forward,
#search-container #searchbar .search-go-button,
#urlbar-go-button {
  list-style-image: url('chrome://browser/skin/forward.svg') !important;
}

#back-button,
menugroup > #context-back {
  list-style-image: url('chrome://browser/skin/back.svg') !important;
}

#firefox-view-button {
  list-style-image: url('chrome://browser/skin/firefox-view.svg') !important;
}

I temp. reversed icons to original, probably change fill="#fbfbfe" and fill="#5b5b66" to fill="context-fill" can fixed, and light and dark theme can share the same files. https://github.com/mozilla/gecko-dev/blob/6e2e933cd6b7931e1d4e8bd8af8daa9788b27760/browser/themes/shared/icons/back.svg#L4

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">

[Aneeqasif]

not working anymore

[datguypiko]

not working anymore

Should work now, had some code error at the end of userchrome.