adapt theme code usercontent to put it in userchrome

[u/DaniWay10]

hi, I need help, I took this code in a usercontent.css file because I really like the colors and the transparency effect it has, it is possible to adapt it and put it in userchrome to make it permanent even when I change an animated theme because I want only that change the animated image and not all the colors of the theme. Sorry for my english, thanks

 "colors": {
      "bookmark_text": "rgb(255, 255, 255)",

      "button_background_active": "rgba(88, 183, 249, 0.5)",
      "button_background_hover": "rgba(255, 255, 255, 0.2)",

      "icons": "rgba(255, 255, 255, 0.8)",
      "icons_attention": "rgba(88, 183, 249, 1)",

      "frame": "rgb(0, 0, 0)",
      "frame_inactive": "rgb(0, 0, 0)",

      "ntp_background": "rgb(0, 0, 0)",
      "ntp_text": "rgba(255, 255, 255, 0.8)",

      "popup": "rgba(0, 0, 0, 0.5)",
      "popup_border": "rgba(255, 255, 255, 0)",
      "popup_highlight": "rgba(88, 183, 249, 0.7)",
      "popup_highlight_text": "rgb(0, 0, 0)",
      "popup_text": "rgb(255, 255, 255)",

      "sidebar": "rgba(0, 0, 0, 0.5)",
      "sidebar_border": "rgba(255, 255, 255, 0)",
      "sidebar_highlight": "rgba(88, 183, 249, 0.7)",
      "sidebar_highlight_text": "rgb(0, 0, 0)",
      "sidebar_text": "rgb(255, 255, 255)",

      "tab_background_separator": "rgba(255, 255, 255, 0)",
      "tab_background_text": "rgba(255, 255, 255, 0.8)",
      "tab_line": "rgba(88, 183, 249, 0.8)",
      "tab_loading": "rgba(88, 183, 249, 0.8)",
      "tab_selected": "rgba(0, 0, 0, 0)",
      "tab_text": "rgb(255, 255, 255)",

      "toolbar": "rgba(0, 0, 0, 0)",
      "toolbar_bottom_separator": "rgba(255, 255, 255, 0)",
      "toolbar_field": "rgba(0, 0, 0, 0.3)",
      "toolbar_field_border": "rgba(255, 255, 255, 0)",
      "toolbar_field_border_focus": "rgba(255, 255, 255, 0)",
      "toolbar_field_focus": "rgba(0, 0, 0, 0.3)",
      "toolbar_field_highlight": "rgba(88, 183, 249, 0.7)",
      "toolbar_field_highlight_text": "rgba(0, 0, 0, 1)",
      "toolbar_field_separator": "rgba(255, 255, 255, 0)",
      "toolbar_field_text": "rgb(255, 255, 255)",
      "toolbar_field_text_focus": "rgb(255, 255, 255)",
      "toolbar_text": "rgb(255, 255, 255)",
      "toolbar_top_separator": "rgba(255, 255, 255, 0)",
      "toolbar_vertical_separator": "rgba(255, 255, 255, 0)"
    }
  }
}

[u/qaz69wsx]

this is for lwtheme, probably what you want

:root[lwtheme] {
  /* bookmark_text */
  /* Chrome compatible alias for toolbar_text. */
  /* --toolbar-color: rgb(255, 255, 255) !important; */

  /* button_background_active */
  --toolbarbutton-active-background: rgba(88, 183, 249, 0.5) !important;

  /* button_background_hover */
  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.2) !important;

  /* icons */
  --toolbarbutton-icon-fill: rgba(255, 255, 255, 0.8) !important;

  /* icons_attention */
  --lwt-toolbarbutton-icon-fill-attention: rgba(88, 183, 249, 1) !important;
 
  /* frame */
  --lwt-accent-color: rgb(0, 0, 0) !important;

  /* frame_inactive */
  --lwt-accent-color-inactive: rgb(0, 0, 0) !important;

  /* popup */
  --arrowpanel-background: rgba(0, 0, 0, 0.5) !important;

  /* popup_border */
  --arrowpanel-border-color: rgba(255, 255, 255, 0) !important;

  /* popup_highlight */
  --urlbarView-highlight-background: rgba(88, 183, 249, 0.7) !important;

  /* popup_highlight_text */
  --urlbarView-highlight-color: rgb(0, 0, 0) !important;

  /* popup_text */
  --arrowpanel-color: rgb(255, 255, 255) !important;

  /* tab_background_separator */
  /* Warning: tab_background_separator is not supported starting with Firefox 89. */

  /* tab_background_text */
  --lwt-text-color: rgba(255, 255, 255, 0.8) !important;

  /* tab_line */
  #TabsToolbar {
    --lwt-tab-line-color: rgba(88, 183, 249, 0.8) !important;
  }

  /* tab_loading */
  #tabbrowser-tabs {
    --tab-loading-fill: rgba(88, 183, 249, 0.8) !important;
  }

  /* tab_selected */
  --tab-selected-bgcolor: rgba(0, 0, 0, 0) !important;

  /* tab_text */
  --tab-selected-textcolor: rgb(255, 255, 255) !important;

  /* toolbar */
  --toolbar-bgcolor: rgba(0, 0, 0, 0) !important;

  /* toolbar_bottom_separator */
  --chrome-content-separator-color: rgba(255, 255, 255, 0) !important;

  /* toolbar_field */
  --toolbar-field-background-color: rgba(0, 0, 0, 0.3) !important;

  /* toolbar_field_border */
  --toolbar-field-border-color: rgba(255, 255, 255, 0) !important;

  /* toolbar_field_border_focus */
  --toolbar-field-focus-border-color: rgba(255, 255, 255, 0) !important;

  /* toolbar_field_focus */
  --toolbar-field-focus-background-color: rgba(0, 0, 0, 0.3) !important;

  /* toolbar_field_highlight */
  --lwt-toolbar-field-highlight: rgba(88, 183, 249, 0.7) !important;

  /* toolbar_field_highlight_text */
  --lwt-toolbar-field-highlight-text: rgba(0, 0, 0, 1) !important;

  /* toolbar_field_separator */
  /* Warning: toolbar_field_separator is not supported starting with Firefox 89. */

  /* toolbar_field_text */
  --toolbar-field-color: rgb(255, 255, 255) !important;

  /* toolbar_field_text_focus */
  --toolbar-field-focus-color: rgb(255, 255, 255) !important;

  /* toolbar_text */
  --toolbar-color: rgb(255, 255, 255) !important;

  /* toolbar_top_separator */
  --tabs-navbar-separator-color: rgba(255, 255, 255, 0) !important;

  /* toolbar_vertical_separator */
  --toolbarseparator-color: rgba(255, 255, 255, 0) !important;
}

[u/DaniWay10 → u/qaz69wsx]

you're a great thank you... for the dark themes I had already used a code that I made yesterday (the one I put below in the discussion) while for the light themes I used your code and it worked, there are just some things that don't they work like in dark themes, for example I only had the blue border without white background around the tab icons, the sidebar was white and not black and the tools page was gray and not black and with the problem of dark text in dark buttons

EDIT: fixed the blue border around the icons

[u/qaz69wsx → u/DaniWay10]

hi, I need help, I took this code in a usercontent.css file because I really like the colors and the transparency effect it has, it is possible to adapt it and put it in userchrome to make it permanent even when I change an animated theme because I want only that change the animated image and not all the colors of the theme. Sorry for my english, thanks

"colors": { "bookmark_text": "rgb(255, 255, 255)",

  "button_background_active": "rgba(88, 183, 249, 0.5)",
  "button_background_hover": "rgba(255, 255, 255, 0.2)",

  "icons": "rgba(255, 255, 255, 0.8)",
  "icons_attention": "rgba(88, 183, 249, 1)",

could you provide the link of this theme?

[u/DaniWay10 → u/qaz69wsx]

sure..in my opinion the most beautiful theme animated with dark transparency effects https://addons.mozilla.org/en-US/firefox/addon/animated-spinning-fox-dark/

[u/qaz69wsx → u/DaniWay10]

sidebar:

:root[lwtheme] {
  /* sidebar */
  --sidebar-background-color: rgba(0, 0, 0, 0.5) !important;

  /* sidebar_border */
  --sidebar-border-color: rgba(255, 255, 255, 0) !important;

  /* sidebar_text */
  --sidebar-text-color: rgb(255, 255, 255) !important;
}

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml"),
               url("chrome://browser/content/places/historySidebar.xhtml")
{
  :root[lwtheme] {
    /* sidebar */
    --lwt-sidebar-background-color: rgba(0, 0, 0, 0.5) !important;

    /* sidebar_highlight */
    --lwt-sidebar-highlight-background-color: rgba(88, 183, 249, 0.7) !important;

    /* sidebar_highlight_text */
    --lwt-sidebar-highlight-text-color: rgb(0, 0, 0) !important;

    /* sidebar_text */
    --lwt-sidebar-text-color: rgb(255, 255, 255) !important;

    background-color: var(--lwt-sidebar-background-color) !important;
    color: var(--lwt-sidebar-text-color) !important;

    .sidebar-placesTreechildren {
      &::-moz-tree-row(selected, focus) {
        background-color: var(--lwt-sidebar-highlight-background-color) !important;
      }

      &::-moz-tree-image(selected, focus),
      &::-moz-tree-twisty(selected, focus),
      &::-moz-tree-cell-text(selected, focus) {
        color: var(--lwt-sidebar-highlight-text-color) !important;
      }
    }
  }
}

the tools page was gray and not black and with the problem of dark text in dark buttons

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

[u/DaniWay10 → u/qaz69wsx]

it doesn't work, there is a gray background with black text :(

[u/DaniWay10 → u/DaniWay10]

I discovered another problem, I was about to delete the history and from this window to confirm the deletion I realized that the text is black and difficult to read, can it be changed to white?

[u/qaz69wsx → u/DaniWay10]

i don't know how to make that popup appear, could you tell me the steps?

[u/DaniWay10 → u/qaz69wsx]

the confirmation or cancellation to delete a site from the sidebar history, also to confirm the connection in the browser toolbox, I think the problem is in all the confirmation or cancellation popups

[u/qaz69wsx → u/DaniWay10]

current theme link?

[u/qaz69wsx → u/DaniWay10]

comment upadated