browser/themes/ThemeVariableMap.sys.mjs

   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 export const ThemeVariableMap = [
   6   [
   7     "--lwt-accent-color-inactive",
   8     {
   9       lwtProperty: "accentcolorInactive",
  10     },
  11   ],
  12   [
  13     "--lwt-background-alignment",
  14     {
  15       isColor: false,
  16       lwtProperty: "backgroundsAlignment",
  17     },
  18   ],
  19   [
  20     "--lwt-background-tiling",
  21     {
  22       isColor: false,
  23       lwtProperty: "backgroundsTiling",
  24     },
  25   ],
  26   [
  27     "--tab-loading-fill",
  28     {
  29       lwtProperty: "tab_loading",
  30       optionalElementID: "tabbrowser-tabs",
  31     },
  32   ],
  33   [
  34     "--tab-selected-bgcolor",
  35     {
  36       lwtProperty: "tab_selected",
  37     },
  38   ],
  39   [
  40     "--tab-selected-textcolor",
  41     {
  42       lwtProperty: "tab_text",
  43     },
  44   ],
  45   [
  46     "--lwt-tab-line-color",
  47     {
  48       lwtProperty: "tab_line",
  49       optionalElementID: "TabsToolbar",
  50     },
  51   ],
  52   [
  53     "--lwt-background-tab-separator-color",
  54     {
  55       lwtProperty: "tab_background_separator",
  56     },
  57   ],
  58   [
  59     "--tabs-navbar-separator-color",
  60     {
  61       lwtProperty: "toolbar_top_separator",
  62     },
  63   ],
  64   [
  65     "--tabs-navbar-separator-style",
  66     {
  67       lwtProperty: "toolbar_top_separator",
  68       processColor(rgbaChannels) {
  69         // If the separator is transparent, we don't want it to take space.
  70         return rgbaChannels?.a === 0 ? "none" : null;
  71       },
  72     },
  73   ],
  74   [
  75     "--toolbarseparator-color",
  76     {
  77       lwtProperty: "toolbar_vertical_separator",
  78     },
  79   ],
  80   [
  81     "--chrome-content-separator-color",
  82     {
  83       lwtProperty: "toolbar_bottom_separator",
  84     },
  85   ],
  86   [
  87     "--toolbarbutton-icon-fill",
  88     {
  89       lwtProperty: "icon_color",
  90     },
  91   ],
  92   [
  93     "--lwt-toolbarbutton-icon-fill-attention",
  94     {
  95       lwtProperty: "icon_attention_color",
  96     },
  97   ],
  98   [
  99     "--toolbarbutton-hover-background",
 100     {
 101       lwtProperty: "button_background_hover",
 102     },
 103   ],
 104   [
 105     "--toolbarbutton-active-background",
 106     {
 107       lwtProperty: "button_background_active",
 108     },
 109   ],
 110   [
 111     "--urlbarView-highlight-background",
 112     {
 113       lwtProperty: "popup_highlight",
 114     },
 115   ],
 116   [
 117     "--urlbarView-highlight-color",
 118     {
 119       lwtProperty: "popup_highlight_text",
 120     },
 121   ],
 122   [
 123     "--sidebar-background-color",
 124     {
 125       lwtProperty: "sidebar",
 126       processColor(rgbaChannels) {
 127         if (!rgbaChannels) {
 128           return null;
 129         }
 130         const { r, g, b } = rgbaChannels;
 131         // Drop alpha channel
 132         return `rgb(${r}, ${g}, ${b})`;
 133       },
 134     },
 135   ],
 136   [
 137     "--sidebar-text-color",
 138     {
 139       lwtProperty: "sidebar_text",
 140     },
 141   ],
 142   [
 143     "--sidebar-border-color",
 144     {
 145       lwtProperty: "sidebar_border",
 146     },
 147   ],
 148   [
 149     "--tabpanel-background-color",
 150     {
 151       lwtProperty: "ntp_background",
 152       processColor(rgbaChannels) {
 153         if (
 154           !rgbaChannels ||
 155           !Services.prefs.getBoolPref("browser.newtabpage.enabled")
 156         ) {
 157           // We only set the tabpanel background to the new tab background color
 158           // if the user uses about:home for new tabs. Otherwise, we flash a
 159           // colorful background when a new tab is opened. We will flash the
 160           // newtab color in new windows if the user uses about:home for new
 161           // tabs but not new windows. However, the flash is concealed by the OS
 162           // window-open animation.
 163           return null;
 164         }
 165         // Drop alpha channel
 166         let { r, g, b } = rgbaChannels;
 167         return `rgb(${r}, ${g}, ${b})`;
 168       },
 169     },
 170   ],
 171 ];
 172
 173 export const ThemeContentPropertyList = [
 174   "ntp_background",
 175   "ntp_card_background",
 176   "ntp_text",
 177   "sidebar",
 178   "sidebar_highlight",
 179   "sidebar_highlight_text",
 180   "sidebar_text",
 181   "zap_gradient",
 182 ];