Compatibility Issues Solution

Tabs and toolbars to have different colors theme

Remove follow lines:

https://github.com/black7375/Firefox-UI-Fix/blob/4948226abe1c93e716e6b690e6098eda1223c706/userChrome.css#L101-L105

  /** Selected Tab - Color like toolbar ***************************************/
  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
    background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }

Unselected Tab Separators - Color

Try to change background-color #4

• --tabs-border-color
• --lwt-selected-tab-background-color

  /** Unselected Tab - Divide line ********************************************/
  #tabbrowser-arrowscrollbox:not([overflowing]) tab.tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
  tab.tabbrowser-tab:not(:hover):not([visuallyselected]):not([multiselected]):not(:first-child) .tab-background::before {
    /*codes*/
    background-color: var(--toolbarseparator-color) !important;
  }

Unselected Tab Separators - Don't show

Try to add box-shadow

  /** Unselected Tab - Divide line ********************************************/
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before,
  .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before,
  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
    /*codes*/
    box-shadow: 0 0 1px 0 color-mix(in srgb, currentColor 60%, transparent);
  }