diff --git a/userChrome-breeze-dark.css b/userChrome-breeze-dark.css
new file mode 100644
index 0000000..3737d40
--- /dev/null
+++ b/userChrome-breeze-dark.css
@@ -0,0 +1,209 @@
+:root {
+ --tab-curve-width: 30px;
+ --tabs-border: transparent !important;
+}
+
+.arrowscrollbox-scrollbox {
+ padding-inline-start: 10px !important;
+}
+
+/* To be able to see the top border of the tab */
+.tab-stack {
+ margin-top: 2px !important;
+}
+
+/* When the window is maximized, the first pinned tab is properly displayed. */
+#TabsToolbar {
+ padding-inline-start: 15px !important;
+}
+
+.titlebar-placeholder {
+ border: none !important;
+}
+
+/* Remove unneeded styles from Photon */
+.tabbrowser-tab::before,
+.tabbrowser-tab::after {
+ border: none !important;
+}
+
+.tabbrowser-tab > .tab-stack > .tab-background {
+ background-image: none !important;
+ -moz-box-orient: horizontal !important;
+ background-color: transparent !important;
+ margin-top: 1px !important;
+}
+
+.tab-background[selected="true"] {
+ border: none !important;
+}
+
+.tab-line {
+ display: none !important;
+}
+
+.tab-bottom-line {
+ display: none !important;
+}
+
+/* Match height of new tab button (right svg) on hover */
+.tabs-newtab-button {
+ margin: 0 !important;
+}
+
+/* overlap the tab curves */
+.tab-background {
+ -moz-margin-end: -15px !important;
+ -moz-margin-start: -15px !important;
+}
+
+/* Begin tab background customizations */
+.tab-background[selected="true"]::before {
+ border: none !important;
+ content: "" !important;
+ width: 30px !important;
+ min-height: 30px !important;
+ display: -moz-box !important;
+ background-repeat: no-repeat !important;
+}
+
+.tab-background[selected="true"]::after {
+ border: none !important;
+ content: "" !important;
+ width: 30px !important;
+ min-height: 30px !important;
+ display: -moz-box !important;
+ background-repeat: no-repeat !important;
+}
+
+.tab-background[selected="true"] > spacer {
+ margin-top: 0px !important;
+}
+
+#new-tab-button,
+.tabs-newtab-button {
+ width: calc(36px + 30px) !important;
+ margin-inline-start: -15px !important;
+ margin-top: 1px !important;
+}
+
+/* Tab hover customizations */
+
+/* Regular tabs */
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
+ display: -moz-box !important;
+ background-repeat: no-repeat !important;
+ content: "" !important;
+ width: 30px !important;
+ min-height: 30px !important;
+ background-color: transparent !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
+ display: -moz-box !important;
+ background-repeat: no-repeat !important;
+ content: "" !important;
+ width: 30px !important;
+ min-height: 30px !important;
+ background-color: transparent !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+ margin-top: 0px !important;
+}
+
+#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
+.tabs-newtab-button:hover,
+.tabs-newtab-button:hover::before,
+.tabs-newtab-button:hover::after {
+ background-color: transparent !important;
+}
+
+/* New tab hover customizations */
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
+ background-position: 0px 2px, 30px 4px , 36px 2px !important;
+ background-repeat: no-repeat !important;
+ background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
+}
+
+.tabs-newtab-button:hover > .toolbarbutton-icon {
+ background: none !important;
+ background-color: transparent !important;
+}
+
+/* Color specific customizations */
+:root {
+ --svg-selected-before: url("data:image/svg+xml;utf8,");
+
+ --svg-selected-after: url("data:image/svg+xml;utf8,");
+
+ --background-selected-middle:
+ linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
+ linear-gradient(
+ transparent
+ 2px,
+ rgb(79, 83, 88) 2px,
+ rgb(79, 83, 88)
+ ),
+ none !important;
+
+ --svg-hover-before: url("data:image/svg+xml;utf8,");
+
+ --svg-hover-after: url("data:image/svg+xml;utf8,");
+
+ --background-hover-middle:
+ linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
+ linear-gradient(
+ transparent
+ 2px,
+ rgba(255,255,255,.1) 2px,
+ rgba(255,255,255,.1)
+ ),
+ none;
+
+ --newtab-hover: url("data:image/svg+xml;utf8,"),
+ linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
+ url("data:image/svg+xml;utf8,");
+}
+
+
+/* OS-specific color variables */
+@media screen and (-moz-windows-theme) {
+ :root {
+
+ }
+}
+
+@media not screen and (-moz-windows-theme) {
+ :root {
+
+ }
+}
+
+.tab-background[selected="true"]::before {
+ background-image: var(--svg-selected-before) !important;
+}
+.tab-background[selected="true"]::after {
+ background-image: var(--svg-selected-after) !important;
+}
+
+.tab-background[selected="true"] > spacer {
+ background-image: var(--background-selected-middle) !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
+ background-image: var(--svg-hover-before) !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
+ background-image: var(--svg-hover-after) !important;
+}
+
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+ background-image: var(--background-hover-middle) !important;
+}
+
+.tabs-newtab-button:hover {
+ background-image: var(--newtab-hover) !important;
+}
+