diff --git a/src/app.css b/src/app.css
index b5856796e4..a99b1a8624 100644
--- a/src/app.css
+++ b/src/app.css
@@ -451,9 +451,10 @@
/* pink polyfills */
--transition: 0.2s;
- /* color hues */
+ /* color hues (pink by default) */
--color-pink-hue: 343;
--color-secondary-hue: 351;
+ --brand-accent-rgb: 253 54 110;
--color-red-hue: 3;
--color-orange-hue: 18;
--color-mint-hue: 177;
@@ -478,6 +479,38 @@
--color-subtle: var(--color-greyscale-850);
}
+body.brand-green {
+ --color-pink-hue: 151;
+ --color-secondary-hue: 165;
+ --color-pink-500: hsl(151 72% 38%);
+ --color-pink-600: hsl(151 66% 32%);
+ --color-accent: var(--color-pink-500);
+ --color-accent-darker: var(--color-pink-600);
+ --brand-accent-rgb: 15 166 95;
+}
+
+body.brand-green .light {
+ --color-pink-hue: 151;
+ --color-secondary-hue: 165;
+ --color-pink-500: hsl(151 72% 38%);
+ --color-pink-600: hsl(151 66% 32%);
+ --color-accent: var(--color-pink-500);
+ --color-accent-darker: var(--color-pink-600);
+ --brand-accent-rgb: 15 166 95;
+}
+
+body.brand-pink {
+ --color-pink-hue: 343;
+ --color-secondary-hue: 351;
+ --brand-accent-rgb: 253 54 110;
+}
+
+body.brand-pink .light {
+ --color-pink-hue: 343;
+ --color-secondary-hue: 351;
+ --brand-accent-rgb: 253 54 110;
+}
+
.dark {
--color-primary: var(--color-greyscale-100);
--color-secondary: var(--color-greyscale-300);
diff --git a/src/app.html b/src/app.html
index 362d674ba4..32bd894f5c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -42,7 +42,7 @@
/>
%sveltekit.head%
-
+