/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/content/auto_devtools_theme.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make devtools use dark theme if your OS is in dark mode. Set devtools to Light-theme for this style to work */
/* For Responsive Design Mode you need to use ../chrome/auto_devtools_theme_for_rdm.css in userChrome.css */

@-moz-document url("about:devtools-toolbox"), url-prefix("chrome://devtools/content/"){
  @media(prefers-color-scheme: dark){
    :root {
      --badge-active-background-color: var(--blue-60) !important;
      --badge-active-border-color: #FFF6 !important;
      --badge-background-color: var(--grey-80) !important;
      --badge-border-color: var(--grey-50) !important;
      --badge-color: var(--grey-40) !important;
      --badge-hover-background-color: var(--grey-80) !important;
      --badge-interactive-background-color: var(--grey-70) !important;
      --badge-interactive-color: var(--grey-30) !important;
      --badge-scrollable-color: #B98EFF !important;
      --badge-scrollable-background-color: transparent !important;
      
      --tab-line-hover-color: rgba(255,255,255,.2) !important;
      --toggle-thumb-color: var(--grey-40) !important;
      --toggle-track-color: var(--grey-60) !important;
      --searchbox-no-match-background-color: #402325 !important;
      --searchbox-no-match-stroke-color: var(--red-50) !important;
      
      --bezier-diagonal-color: #eee !important;
      
      --bezier-grid-color: rgba(0, 0, 0, 0.2) !important;
      --theme-tooltip-color: var(--theme-text-color-strong) !important;
      --theme-tooltip-background: var(--theme-popup-background) !important;
      --theme-tooltip-shadow: rgba(25, 25, 25, 0.76) !important;
      --theme-tooltip-icon-dimmed-color: rgb(255, 255, 255) !important;
      --theme-arrowpanel-background: var(--theme-popup-background) !important;
      --theme-arrowpanel-color: var(--theme-popup-color) !important;
      --theme-arrowpanel-border-color: var(--theme-popup-border-color) !important;
      --theme-arrowpanel-separator: rgba(249,249,250,.1) !important;
      --theme-arrowpanel-dimmed: var(--theme-popup-dimmed) !important;
      --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15) !important;
      --theme-arrowpanel-disabled-color: rgba(249,249,250,.5) !important;
      
      --theme-body-background: #232327 !important;
      --theme-body-emphasized-background: var(--grey-70) !important;
      --theme-sidebar-background: #18181a !important;

      /* Toolbar */
      --theme-tab-toolbar-background: var(--grey-90) !important;
      --theme-toolbar-background: #18181a !important;
      --theme-toolbar-color: var(--grey-40) !important;
      --theme-toolbar-selected-color: white !important;
      --theme-toolbar-highlighted-color: var(--green-50) !important;
      --theme-toolbar-background-hover: #232327 !important;
      --theme-toolbar-background-alt: var(--grey-85) !important;
      --theme-toolbar-hover: #232327 !important;
      --theme-toolbar-hover-active: #252526 !important;
      --theme-toolbar-separator: var(--grey-10-a20) !important;

      /* Toolbar buttons */
      --toolbarbutton-background: var(--grey-70) !important;
      --toolbarbutton-hover-background: var(--grey-70) !important;
      --toolbarbutton-focus-background: var(--grey-60) !important;
      --toolbarbutton-focus-color: var(--grey-30) !important;
      --toolbarbutton-checked-background: #204e8a !important;
      --toolbarbutton-checked-focus-background: var(--blue-60) !important;
      --toolbarbutton-checked-color: #ffffff !important;

      /* Buttons */
      --theme-button-background: rgba(249, 249, 250, 0.1) !important;
      --theme-button-active-background: rgba(249, 249, 250, 0.15) !important;

      /* Accordion headers */
      --theme-accordion-header-background: #232327 !important;
      --theme-accordion-header-hover: #2a2a2e !important;

      /* Selection */
      --theme-selection-background: #204e8a !important;
      --theme-selection-background-hover: #353b48 !important;
      --theme-selection-focus-background: var(--grey-60) !important;
      --theme-selection-color: #ffffff !important;

      /* Border color that splits the toolbars/panels/headers. */
      --theme-splitter-color: var(--grey-70) !important;
      --theme-emphasized-splitter-color: var(--grey-60) !important;
      --theme-emphasized-splitter-color-hover: var(--grey-50) !important;

      /* Icon colors */
      --theme-icon-color: rgba(249, 249, 250, 0.7) !important;
      --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9) !important;
      --theme-icon-checked-color: var(--blue-30) !important;
      --theme-icon-error-color: var(--red-40) !important;
      --theme-icon-warning-color: var(--yellow-60) !important;

      /* Text color */
      --theme-comment: var(--grey-45) !important;
      --theme-body-color: var(--grey-40) !important;
      --theme-text-color-alt: var(--grey-45) !important;
      --theme-text-color-inactive: var(--grey-50) !important;
      --theme-text-color-strong: var(--grey-30) !important;
      --theme-stack-trace-text: var(--red-50) !important;

      --theme-highlight-green: #86de74 !important;
      --theme-highlight-blue: #75bfff !important;
      --theme-highlight-purple: #b98eff !important;
      --theme-highlight-red: #ff7de9 !important;
      --theme-highlight-yellow: #fff89e !important;

      /* These theme-highlight color variables have not been photonized. */
      --theme-highlight-bluegrey: #5e88b0 !important;
      --theme-highlight-lightorange: #d99b28 !important;
      --theme-highlight-orange: #d96629 !important;
      --theme-highlight-pink: #df80ff !important;
      --theme-highlight-gray: #e9f4fe !important;

      /* For accessibility purposes we want to enhance the focus styling. This
       * should improve keyboard navigation usability. */
      --theme-focus-outline-color: #ced3d9 !important;

      /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
      --theme-graphs-green: #70bf53 !important;
      --theme-graphs-blue: #46afe3 !important;
      --theme-graphs-bluegrey: #5e88b0 !important;
      --theme-graphs-purple: #df80ff !important;
      --theme-graphs-yellow: #d99b28 !important;
      --theme-graphs-orange: #d96629 !important;
      --theme-graphs-red: #eb5368 !important;
      --theme-graphs-grey: #757873 !important;
      --theme-graphs-full-red: #f00 !important;
      --theme-graphs-full-blue: #00f !important;

      /* Common popup styles(used by HTMLTooltip and autocomplete) */
      --theme-popup-background: var(--grey-60) !important;
      --theme-popup-color: rgb(249, 249, 250) !important;
      --theme-popup-border-color: #27272b !important;
      --theme-popup-dimmed: rgba(249, 249, 250, 0.1) !important;

      /* Styling for devtool buttons */
      --theme-toolbarbutton-background: none !important;
      --theme-toolbarbutton-color: var(--grey-40) !important;
      --theme-toolbarbutton-hover-background: var(--grey-10-a15) !important;
      --theme-toolbarbutton-checked-background: var(--grey-10-a20) !important;
      --theme-toolbarbutton-checked-color: var(--grey-30) !important;
      --theme-toolbarbutton-checked-hover-background: var(--grey-10-a25) !important;
      --theme-toolbarbutton-checked-hover-color: var(--grey-30) !important;
      --theme-toolbarbutton-active-background: var(--grey-10-a30) !important;
      --theme-toolbarbutton-active-color: var(--grey-30) !important;

      /* Used for select elements */
      --theme-select-background: var(--grey-60) !important;
      --theme-select-color: #fff !important;
      --theme-select-hover-border-color: var(--grey-50) !important;

      /* Warning colors */
      --theme-warning-background: hsl(42, 37%, 19%) !important;
      --theme-warning-border: hsl(60, 30%, 26%) !important;
      --theme-warning-color: hsl(43, 94%, 81%) !important;

      /* Flashing colors used to highlight updates */
      --theme-contrast-background: #4f4b1f !important; /* = Yellow 50-a20 on body background */
      --theme-contrast-background-alpha: rgba(255, 233, 0, 0.15) !important; /* Yellow 50-a15 */
      --theme-contrast-color: white !important;
      --theme-contrast-border: var(--yellow-65) !important;
      
      --markup-hidden-attr-name-color: #787878 !important;
      --markup-hidden-attr-value-color: #a4a4a4 !important;
      --markup-hidden-punctuation-color: #787878 !important;
      --markup-hidden-tag-color: var(--grey-45) !important;
      --markup-outline: var(--theme-selection-background) !important;
      --markup-drag-line: var(--grey-55) !important;
      --markup-drop-line: var(--blue-50) !important;
      --markup-overflow-causing-background-color: rgba(148, 0, 255, 0.38) !important;
      
      --console-input-background: var(--theme-tab-toolbar-background) !important;
      --console-message-background: var(--theme-body-background) !important;
      --console-message-border: var(--theme-splitter-color) !important;
      --console-message-color: var(--theme-text-color-strong) !important;
      --console-error-background: hsl(345, 23%, 24%) !important;
      --console-error-border: hsl(345, 30%, 35%) !important;
      --console-error-color: var(--red-20) !important;
      --console-navigation-color: var(--theme-highlight-blue) !important;
      --console-navigation-border: var(--blue-60) !important;
      --console-indent-border-color: var(--theme-highlight-blue) !important;
      --console-repeat-bubble-background: var(--blue-60) !important;
      --error-color: var(--red-20) !important;
      --console-output-color: white !important;
      
      scrollbar-color: var(--grey-50) var(--theme-splitter-color) !important;
    }
  }
}