firefox theme file to follow system theme in devtools

userContent.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 * IMPORTANT NOTE
 * This file is parsed in js (see client/shared/theme.js)
 * so the formatting should be consistent (i.e. no '}' inside a rule).
 */

:root {
  --theme-focus-border-color-textbox: #0675d3 !important;
  --theme-textbox-box-shadow: rgba(97, 181, 255, 0.75) !important;

  /* Text sizes */
  --theme-body-font-size: 11px !important;
  --theme-code-font-size: 11px !important;
  --theme-code-line-height: calc(15 / 11) !important;

  /* Toolbar size (excluding borders) */
  --theme-toolbar-height: 24px !important;

  /* For accessibility purposes we want to enhance the focus styling. This
   * should improve keyboard navigation usability. */
  --theme-focus-outline: 1px dotted var(--theme-focus-outline-color) !important;
  --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow) !important;

  /* The photon animation curve */
  --animation-curve: cubic-bezier(0.07, 0.95, 0, 1) !important;

  /*
   * Photon Colors CSS Variables v3.3.2
   * - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
   * - We only add Photon color variables that we are actually using !important; unused
   *   variables will fail browser/base/content/test/static/browser_parsable_css.js
   * - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
   *   and lighter variants for the dark theme (e.g. Red 20, Red 40).
   */
  --magenta-50: #ff1ad9 !important;
  --magenta-65: #dd00a9 !important;
  --magenta-70: #b5007f !important;

  --purple-50: #9400ff !important;
  --purple-60: #8000d7 !important;

  --blue-30: #75baff !important;
  --blue-40: #45a1ff !important;
  --blue-50: #0a84ff !important;
  --blue-50-a30: rgba(10, 132, 255, 0.3) !important;
  --blue-55: #0074e8 !important;
  --blue-60: #0060df !important;
  --blue-70: #003eaa !important;
  --blue-80: #002275 !important;

  --teal-60: #00c8d7 !important;
  --teal-70: #008ea4 !important;

  --green-50: #30e60b !important;
  --green-60: #12bc00 !important;
  --green-70: #058b00 !important;

  --yellow-50: #ffe900 !important;
  --yellow-60: #d7b600 !important;
  --yellow-65: #be9b00 !important;
  --yellow-70: #a47f00 !important;
  --yellow-80: #715100 !important;

  --red-20: #ffb3d2 !important;
  --red-40: #ff3b6b !important;
  --red-50: #ff0039 !important;
  --red-60: #d70022 !important;
  --red-70: #a4000f !important;

  --grey-10: #f9f9fa !important;
  --grey-10-a15: rgba(249, 249, 250, 0.15) !important;
  --grey-10-a20: rgba(249, 249, 250, 0.2) !important;
  --grey-10-a25: rgba(249, 249, 250, 0.25) !important;
  --grey-10-a30: rgba(249, 249, 250, 0.3) !important;
  --grey-20: #ededf0 !important;
  --grey-25: #e0e0e2 !important;
  --grey-30: #d7d7db !important;
  --grey-35: #c3c3c6 !important;
  --grey-40: #b1b1b3 !important;
  --grey-43: #a4a4a4 !important;
  --grey-45: #939395 !important;
  --grey-50: #737373 !important;
  --grey-55: #5c5c5f !important;
  --grey-60: #4a4a4f !important;
  --grey-70: #38383d !important;
  --grey-80: #2a2a2e !important;
  --grey-85: #1b1b1d !important;
  --grey-90: #0c0c0d !important;
  --grey-90-a05: rgba(12, 12, 13, 0.05) !important;
  --grey-90-a10: rgba(12, 12, 13, 0.1) !important;
  --grey-90-a15: rgba(12, 12, 13, 0.15) !important;
  --grey-90-a20: rgba(12, 12, 13, 0.2) !important;
  --grey-90-a30: rgba(12, 12, 13, 0.3) !important;
}

@media(prefers-color-scheme: light) {
:root.theme-light, :root.theme-dark {
  --theme-body-background: white !important;
  --theme-sidebar-background: white !important;

  /* Toolbar */
  --theme-tab-toolbar-background: var(--grey-10) !important;
  --theme-toolbar-background: var(--grey-10) !important;
  --theme-toolbar-color: var(--grey-90) !important;
  --theme-toolbar-selected-color: var(--blue-60) !important;
  --theme-toolbar-highlighted-color: var(--green-60) !important;
  --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66) !important;
  --theme-toolbar-background-alt: #f5f5f5 !important;
  --theme-toolbar-hover: var(--grey-20) !important;
  --theme-toolbar-hover-active: var(--grey-20) !important;
  --theme-toolbar-separator: var(--grey-90-a10) !important;

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

  /* Buttons */
  --theme-button-background: rgba(12, 12, 13, 0.05) !important;
  --theme-button-active-background: rgba(12, 12, 13, 0.1) !important;

  /* Accordion headers */
  --theme-accordion-header-background: var(--theme-toolbar-background) !important;
  --theme-accordion-header-hover: var(--theme-toolbar-hover) !important;

  /* Selection */
  --theme-selection-background: var(--blue-55) !important;
  --theme-selection-background-hover: #f0f9fe !important;
  --theme-selection-focus-background: var(--toolbarbutton-hover-background) !important;
  --theme-selection-color: #ffffff !important;

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

  /* Icon colors */
  --theme-icon-color: rgba(12, 12, 13, 0.8) !important;
  --theme-icon-dimmed-color: rgba(135, 135, 137, 0.9) !important;
  --theme-icon-checked-color: var(--blue-60) !important;
  --theme-icon-error-color: var(--red-60) !important;
  --theme-icon-warning-color: var(--yellow-65) !important;

  /* Text color */
  --theme-comment: var(--grey-50) !important;
  --theme-body-color: var(--grey-70) !important;
  --theme-text-color-alt: var(--grey-50) !important;
  --theme-text-color-inactive: var(--grey-40) !important;
  --theme-text-color-strong: var(--grey-90) !important;

  --theme-highlight-green: var(--green-70) !important;
  --theme-highlight-blue: var(--blue-55) !important;
  --theme-highlight-purple: var(--blue-70) !important;
  --theme-highlight-red: var(--magenta-65) !important;
  --theme-highlight-yellow: #fff89e !important;

  /* These theme-highlight color variables have not been photonized. */
  --theme-highlight-bluegrey: #0072ab !important;
  --theme-highlight-lightorange: #d97e00 !important;
  --theme-highlight-orange: #f13c00 !important;
  --theme-highlight-pink: #b82ee5 !important;
  --theme-highlight-gray: #dde1e4 !important;

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

  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
  --theme-graphs-green: #85d175 !important;
  --theme-graphs-blue: #83b7f6 !important;
  --theme-graphs-bluegrey: #0072ab !important;
  --theme-graphs-purple: #b693eb !important;
  --theme-graphs-yellow: #efc052 !important;
  --theme-graphs-orange: #d97e00 !important;
  --theme-graphs-red: #e57180 !important;
  --theme-graphs-grey: #cccccc !important;
  --theme-graphs-full-red: #f00 !important;
  --theme-graphs-full-blue: #00f !important;

  /* Common popup styles(used by HTMLTooltip and autocomplete) */
  --theme-popup-background: -moz-field !important;
  --theme-popup-color: -moz-fieldText !important;
  --theme-popup-border-color: ThreeDShadow !important;
  --theme-popup-dimmed: hsla(0, 0%, 80%, 0.3) !important;

  /* Styling for devtool buttons */
  --theme-toolbarbutton-background: none !important;
  --theme-toolbarbutton-color: var(--grey-70) !important;
  --theme-toolbarbutton-hover-background: var(--grey-90-a05) !important;
  --theme-toolbarbutton-checked-background: var(--grey-90-a10) !important;
  --theme-toolbarbutton-checked-color: var(--grey-90) !important;
  --theme-toolbarbutton-checked-hover-background: var(--grey-90-a15) !important;
  --theme-toolbarbutton-checked-hover-color: var(--grey-90) !important;
  --theme-toolbarbutton-active-background: var(--grey-90-a20) !important;
  --theme-toolbarbutton-active-color: var(--grey-90) !important;

  /* Warning colors */
  --theme-warning-background: hsl(54, 100%, 92%) !important;
  --theme-warning-border: rgba(215, 182, 0, 0.28) !important; /* Yellow 60 + opacity */
  --theme-warning-color: var(--yellow-80) !important;

  /* Flashing colors used to highlight updates */
  --theme-contrast-background: #fff699 !important; /* = Yellow 50-a40 on white */
  --theme-contrast-background-alpha: rgba(255, 233, 0, 0.4) !important; /* Yellow 50-a40 */
  --theme-contrast-color: black !important;
  --theme-contrast-border: var(--yellow-60) !important;
}
}
/*
 * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
 * system colors.
 */
:root[platform="mac"].theme-light {
  --theme-popup-color: hsl(0, 0%, 10%) !important;
  --theme-popup-border-color: var(--grey-90-a20) !important;
}

@media (prefers-color-scheme: dark) {
:root.theme-dark, :root.theme-light {
  --theme-body-background: #232327 !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-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;

  /* 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;
}
}