4 files changed, 133 insertions, 0 deletions
diff --git a/browser/themes/addons/dark/experiment.css b/browser/themes/addons/dark/experiment.css
new file mode 100644
index 0000000000..be11bc1988
--- /dev/null
+++ b/browser/themes/addons/dark/experiment.css
@@ -0,0 +1,6 @@
+/* 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/. */
+
+/* Proton Dark theme */
+@import url("chrome://browser/skin/light-dark-overrides.css");
diff --git a/browser/themes/addons/dark/icon.svg b/browser/themes/addons/dark/icon.svg
new file mode 100644
index 0000000000..6d60850b77
--- /dev/null
+++ b/browser/themes/addons/dark/icon.svg
@@ -0,0 +1,12 @@
+<!-- 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/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#42414D"/>
+      <stop offset="1" stop-color="#1C1B22"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
new file mode 100644
index 0000000000..eb8242fbb8
--- /dev/null
+++ b/browser/themes/addons/dark/manifest.json
@@ -0,0 +1,97 @@
+{
+  "manifest_version": 2,
+
+  "applications": {
+    "gecko": {
+      "id": "firefox-compact-dark@mozilla.org"
+    }
+  },
+
+  "name": "Dark",
+  "description": "A theme with a dark color scheme.",
+  "author": "Mozilla",
+  "version": "1.2",
+
+  "icons": {"32": "icon.svg"},
+
+  "theme": {
+    "colors": {
+      "tab_background_text": "#fbfbfe",
+      "tab_selected": "rgb(66,65,77)",
+      "tab_text": "rgb(251,251,254)",
+      "icons": "rgb(251,251,254)",
+      "frame": "#1c1b22",
+      "popup": "rgb(66,65,77)",
+      "popup_text": "rgb(251,251,254)",
+      "popup_border": "rgb(82,82,94)",
+      "popup_highlight": "rgb(43,42,51)",
+      "tab_line": "transparent",
+      "toolbar": "rgb(43,42,51)",
+      "toolbar_top_separator": "transparent",
+      "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
+      "toolbar_field": "rgb(28,27,34)",
+      "toolbar_field_border": "transparent",
+      "toolbar_field_text": "rgb(251,251,254)",
+      "toolbar_field_focus": "rgb(66,65,77)",
+      "toolbar_text": "rgb(251, 251, 254)",
+      "ntp_background": "rgb(43, 42, 51)",
+      "ntp_card_background": "rgb(66,65,77)",
+      "ntp_text": "rgb(251, 251, 254)",
+      "sidebar": "#38383D",
+      "sidebar_text": "rgb(249, 249, 250)",
+      "sidebar_border": "rgba(255, 255, 255, 0.1)",
+      "button": "rgb(43,42,51)",
+      "button_hover": "rgb(82,82,94)",
+      "button_active": "rgb(91,91,102)",
+      "button_primary": "rgb(0, 221, 255)",
+      "button_primary_hover": "rgb(128, 235, 255)",
+      "button_primary_active": "rgb(170, 242, 255)",
+      "button_primary_color": "rgb(43, 42, 51)",
+      "input_background": "#42414D",
+      "input_color": "rgb(251,251,254)",
+      "input_border": "#8f8f9d",
+      "autocomplete_popup_separator": "rgb(82,82,94)",
+      "appmenu_update_icon_color": "#54FFBD",
+      "appmenu_info_icon_color": "#80EBFF",
+      "tab_icon_overlay_stroke": "rgb(66,65,77)",
+      "tab_icon_overlay_fill": "rgb(251,251,254)"
+    },
+    "properties": {
+      "color_scheme": "dark",
+      "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
+      "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
+      "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)",
+      "toolbar_field_icon_opacity": "1",
+      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
+    }
+  },
+
+  "theme_experiment": {
+    "stylesheet": "experiment.css",
+    "colors": {
+      "button": "--button-bgcolor",
+      "button_hover": "--button-hover-bgcolor",
+      "button_active": "--button-active-bgcolor",
+      "button_primary": "--button-primary-bgcolor",
+      "button_primary_hover": "--button-primary-hover-bgcolor",
+      "button_primary_active": "--button-primary-active-bgcolor",
+      "button_primary_color": "--button-primary-color",
+      "input_background": "--input-bgcolor",
+      "input_color": "--input-color",
+      "input_border": "--input-border-color",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "zoom_controls": "--zoom-controls-bgcolor",
+      "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
+      "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
+      "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",
+      "tab_icon_overlay_fill": "--tab-icon-overlay-fill"
+    },
+    "properties": {
+      "panel_hover": "--panel-item-hover-bgcolor",
+      "panel_active": "--arrowpanel-dimmed-further",
+      "panel_active_darker": "--panel-item-active-bgcolor",
+      "toolbar_field_icon_opacity": "--urlbar-icon-fill-opacity",
+      "zap_gradient": "--panel-separator-zap-gradient"
+    }
+  }
+}
diff --git a/browser/themes/addons/dark/preview.svg b/browser/themes/addons/dark/preview.svg
new file mode 100644
index 0000000000..7fd9cbcfa7
--- /dev/null
+++ b/browser/themes/addons/dark/preview.svg
@@ -0,0 +1,18 @@
+<!-- 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/. -->
+<svg width="680" height="92" viewBox="0 0 680 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="#1C1B22" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="#42414D" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="#FBFBFE" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="#B8B7BB" />
+  <rect y="44" width="680" height="48" fill="#2B2A33" />
+  <circle cx="24" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="#FBFBFE" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="#1C1B22" />
+  <circle cx="130" cy="68" r="6.25" stroke="white" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="white" />
+</svg>