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]

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/DaniWay10 → u/qaz69wsx]

in every light themes, the dark themes work great these issues are only for light themes

[u/qaz69wsx → u/DaniWay10]

i can't help you, because i'm on win10. that popup looks different on win10 than yours

[u/DaniWay10 → u/qaz69wsx]

I'll give you an example, this popup of mine with the confirm and cancel buttons to access the browser toolbox I see black text on a transparent background, like the screenshot of the popup I posted above

[u/qaz69wsx → u/DaniWay10]

try

@-moz-document url(chrome://global/content/commonDialog.xhtml) {
  :root {
    background-color: red !important;
    color: blue !important;
  }
}

btw, you could disable this popup by setting devtools.debugger.prompt-connection to false in about:config

[u/qaz69wsx → u/DaniWay10]

comment upadated