browser/themes/shared/browser-custom-colors.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @namespace html url("http://www.w3.org/1999/xhtml");
   6
   7 @media not (prefers-contrast) {
   8   :root:not([lwtheme]) {
   9     --button-primary-bgcolor: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
  10     --button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255));
  11     --button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255));
  12     --button-primary-color: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
  13     --button-bgcolor: light-dark(
  14       rgba(207, 207, 216, .33),
  15       rgba(0, 0, 0, .33)
  16     );
  17     --button-hover-bgcolor: light-dark(
  18       rgba(207, 207, 216, .66),
  19       rgba(207, 207, 216, .20)
  20     );
  21     --button-active-bgcolor: light-dark(
  22       rgb(207, 207, 216),
  23       rgba(207, 207, 216, .40)
  24     );
  25     --button-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  26
  27     --focus-outline-color: var(--button-primary-bgcolor);
  28
  29     --arrowpanel-background: light-dark(white, rgb(66, 65, 77));
  30     --arrowpanel-color: light-dark(black, rgb(251, 251, 254));
  31     --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94));
  32
  33     --arrowpanel-dimmed: light-dark(
  34       color-mix(in srgb, currentColor 12%, transparent),
  35       color-mix(in srgb, currentColor 17%, transparent)
  36     );
  37     --arrowpanel-dimmed-further: light-dark(
  38       color-mix(in srgb, currentColor 20%, transparent),
  39       color-mix(in srgb, currentColor 14%, transparent)
  40     );
  41
  42     --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  43     --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d);
  44     --input-border-color: light-dark(color-mix(in srgb, currentColor 41%, transparent), #8f8f9d);
  45
  46     --tab-selected-bgcolor: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
  47     --tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  48     --tab-icon-overlay-stroke: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
  49     --tab-icon-overlay-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
  50     --tabs-navbar-separator-style: none;
  51
  52     --toolbox-non-lwt-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
  53     --toolbox-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  54     --toolbox-non-lwt-bgcolor-inactive: var(--toolbox-non-lwt-bgcolor);
  55     --toolbox-non-lwt-textcolor-inactive: var(--toolbox-non-lwt-textcolor);
  56
  57     &:where([tabsintitlebar]) {
  58       --toolbox-non-lwt-bgcolor-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
  59     }
  60
  61     --toolbar-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  62     --toolbar-non-lwt-bgcolor: light-dark(#f9f9fb, rgb(43, 42, 51));
  63     --toolbar-non-lwt-textcolor: var(--toolbar-color);
  64
  65     --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
  66     --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
  67     --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
  68
  69     --toolbar-field-border-color: transparent;
  70     --toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
  71     --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  72     --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
  73     --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
  74
  75     --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
  76     --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
  77     --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
  78     --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
  79     --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));
  80
  81     --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77));
  82     --urlbar-icon-fill-opacity: 0.72;
  83     @media (prefers-color-scheme: dark) {
  84       --urlbar-icon-fill-opacity: 1;
  85     }
  86
  87     --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
  88
  89     --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
  90     --attention-dot-color: light-dark(#2ac3a2, #54ffbd);
  91   }
  92 }