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     "--lwt-tab-text",
  35     {
  36       lwtProperty: "tab_text",
  37     },
  38   ],
  39   [
  40     "--lwt-tab-line-color",
  41     {
  42       lwtProperty: "tab_line",
  43       optionalElementID: "TabsToolbar",
  44     },
  45   ],
  46   [
  47     "--lwt-background-tab-separator-color",
  48     {
  49       lwtProperty: "tab_background_separator",
  50     },
  51   ],
  52   [
  53     "--toolbar-bgcolor",
  54     {
  55       lwtProperty: "toolbarColor",
  56     },
  57   ],
  58   [
  59     "--toolbar-color",
  60     {
  61       lwtProperty: "toolbar_text",
  62     },
  63   ],
  64   [
  65     "--lwt-tabs-border-color",
  66     {
  67       lwtProperty: "toolbar_top_separator",
  68       optionalElementID: "navigator-toolbox",
  69     },
  70   ],
  71   [
  72     "--toolbarseparator-color",
  73     {
  74       lwtProperty: "toolbar_vertical_separator",
  75     },
  76   ],
  77   [
  78     "--chrome-content-separator-color",
  79     {
  80       lwtProperty: "toolbar_bottom_separator",
  81     },
  82   ],
  83   [
  84     "--toolbarbutton-icon-fill",
  85     {
  86       lwtProperty: "icon_color",
  87     },
  88   ],
  89   [
  90     "--lwt-toolbarbutton-icon-fill-attention",
  91     {
  92       lwtProperty: "icon_attention_color",
  93     },
  94   ],
  95   [
  96     "--toolbarbutton-hover-background",
  97     {
  98       lwtProperty: "button_background_hover",
  99     },
 100   ],
 101   [
 102     "--toolbarbutton-active-background",
 103     {
 104       lwtProperty: "button_background_active",
 105     },
 106   ],
 107   [
 108     "--lwt-selected-tab-background-color",
 109     {
 110       lwtProperty: "tab_selected",
 111     },
 112   ],
 113   [
 114     "--autocomplete-popup-highlight-background",
 115     {
 116       lwtProperty: "popup_highlight",
 117     },
 118   ],
 119   [
 120     "--autocomplete-popup-highlight-color",
 121     {
 122       lwtProperty: "popup_highlight_text",
 123     },
 124   ],
 125   [
 126     "--sidebar-background-color",
 127     {
 128       lwtProperty: "sidebar",
 129       optionalElementID: "sidebar-box",
 130       processColor(rgbaChannels, element) {
 131         if (!rgbaChannels) {
 132           element.removeAttribute("lwt-sidebar");
 133           return null;
 134         }
 135         const { r, g, b } = rgbaChannels;
 136         element.setAttribute("lwt-sidebar", "true");
 137         // Drop alpha channel
 138         return `rgb(${r}, ${g}, ${b})`;
 139       },
 140     },
 141   ],
 142   [
 143     "--sidebar-text-color",
 144     {
 145       lwtProperty: "sidebar_text",
 146       optionalElementID: "sidebar-box",
 147     },
 148   ],
 149   [
 150     "--sidebar-border-color",
 151     {
 152       lwtProperty: "sidebar_border",
 153       optionalElementID: "browser",
 154     },
 155   ],
 156   [
 157     "--tabpanel-background-color",
 158     {
 159       lwtProperty: "ntp_background",
 160       processColor(rgbaChannels) {
 161         if (
 162           !rgbaChannels ||
 163           !Services.prefs.getBoolPref("browser.newtabpage.enabled")
 164         ) {
 165           // We only set the tabpanel background to the new tab background color
 166           // if the user uses about:home for new tabs. Otherwise, we flash a
 167           // colorful background when a new tab is opened. We will flash the
 168           // newtab color in new windows if the user uses about:home for new
 169           // tabs but not new windows. However, the flash is concealed by the OS
 170           // window-open animation.
 171           return null;
 172         }
 173         // Drop alpha channel
 174         let { r, g, b } = rgbaChannels;
 175         return `rgb(${r}, ${g}, ${b})`;
 176       },
 177     },
 178   ],
 179 ];
 180
 181 export const ThemeContentPropertyList = [
 182   "ntp_background",
 183   "ntp_card_background",
 184   "ntp_text",
 185   "sidebar",
 186   "sidebar_highlight",
 187   "sidebar_highlight_text",
 188   "sidebar_text",
 189   "zap_gradient",
 190 ];