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-shadow-color",
  60     {
  61       lwtProperty: "toolbar_top_separator",
  62     },
  63   ],
  64   [
  65     "--toolbarseparator-color",
  66     {
  67       lwtProperty: "toolbar_vertical_separator",
  68     },
  69   ],
  70   [
  71     "--chrome-content-separator-color",
  72     {
  73       lwtProperty: "toolbar_bottom_separator",
  74     },
  75   ],
  76   [
  77     "--toolbarbutton-icon-fill",
  78     {
  79       lwtProperty: "icon_color",
  80     },
  81   ],
  82   [
  83     "--lwt-toolbarbutton-icon-fill-attention",
  84     {
  85       lwtProperty: "icon_attention_color",
  86     },
  87   ],
  88   [
  89     "--toolbarbutton-hover-background",
  90     {
  91       lwtProperty: "button_background_hover",
  92     },
  93   ],
  94   [
  95     "--toolbarbutton-active-background",
  96     {
  97       lwtProperty: "button_background_active",
  98     },
  99   ],
 100   [
 101     "--urlbarView-highlight-background",
 102     {
 103       lwtProperty: "popup_highlight",
 104     },
 105   ],
 106   [
 107     "--urlbarView-highlight-color",
 108     {
 109       lwtProperty: "popup_highlight_text",
 110     },
 111   ],
 112   [
 113     "--sidebar-background-color",
 114     {
 115       lwtProperty: "sidebar",
 116       processColor(rgbaChannels) {
 117         if (!rgbaChannels) {
 118           return null;
 119         }
 120         const { r, g, b } = rgbaChannels;
 121         // Drop alpha channel
 122         return `rgb(${r}, ${g}, ${b})`;
 123       },
 124     },
 125   ],
 126   [
 127     "--sidebar-text-color",
 128     {
 129       lwtProperty: "sidebar_text",
 130     },
 131   ],
 132   [
 133     "--sidebar-border-color",
 134     {
 135       lwtProperty: "sidebar_border",
 136     },
 137   ],
 138   [
 139     "--tabpanel-background-color",
 140     {
 141       lwtProperty: "ntp_background",
 142       processColor(rgbaChannels) {
 143         if (
 144           !rgbaChannels ||
 145           !Services.prefs.getBoolPref("browser.newtabpage.enabled")
 146         ) {
 147           // We only set the tabpanel background to the new tab background color
 148           // if the user uses about:home for new tabs. Otherwise, we flash a
 149           // colorful background when a new tab is opened. We will flash the
 150           // newtab color in new windows if the user uses about:home for new
 151           // tabs but not new windows. However, the flash is concealed by the OS
 152           // window-open animation.
 153           return null;
 154         }
 155         // Drop alpha channel
 156         let { r, g, b } = rgbaChannels;
 157         return `rgb(${r}, ${g}, ${b})`;
 158       },
 159     },
 160   ],
 161 ];
 162
 163 export const ThemeContentPropertyList = [
 164   "ntp_background",
 165   "ntp_card_background",
 166   "ntp_text",
 167   "sidebar",
 168   "sidebar_highlight",
 169   "sidebar_highlight_text",
 170   "sidebar_text",
 171   "zap_gradient",
 172 ];