From c19e66fc62ce6c4d0c3a54c34e446f4c7fd28c39 Mon Sep 17 00:00:00 2001
From: Butterscotch! <bscotchvanilla@gmail.com>
Date: Tue, 22 Oct 2024 20:28:48 -0400
Subject: [PATCH] Add asexual theme

---
 .../settings/pages/InterfaceSettings.tsx      |  6 +++++
 gui/src/index.scss                            | 26 +++++++++++++++++++
 gui/tailwind.config.ts                        |  7 +++++
 3 files changed, 39 insertions(+)

diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index 5ce0fefbb9..576a86e52f 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -352,6 +352,12 @@ export function InterfaceSettings() {
                   value={'trans'}
                   colors="!bg-trans-flag"
                 ></ThemeSelector>
+                <ThemeSelector
+                  control={control}
+                  name="appearance.theme"
+                  value={'asexual'}
+                  colors="!bg-asexual-flag"
+                ></ThemeSelector>
               </div>
             </div>
 
diff --git a/gui/src/index.scss b/gui/src/index.scss
index e70ede1692..354e141bdc 100644
--- a/gui/src/index.scss
+++ b/gui/src/index.scss
@@ -316,6 +316,32 @@ body {
   --default-color: 0, 0, 0;
 }
 
+:root[data-theme='asexual'] {
+  --background-10: 255, 255, 255;
+  --background-20: 230, 230, 230;
+  --background-30: 200, 200, 200;
+  --background-40: 120, 120, 120;
+  --background-50: 90, 90, 90;
+  --background-60: 60, 60, 60;
+  --background-70: 30, 30, 30;
+  --background-80: 15, 15, 15;
+  --background-90: 0, 0, 0;
+
+  --accent-background-10: 230, 0, 230;
+  --accent-background-20: 210, 0, 210;
+  --accent-background-30: 150, 0, 150;
+  --accent-background-40: 130, 0, 130;
+  --accent-background-50: 70, 0, 70;
+
+  --success: 100, 230, 10;
+  --warning: 220, 200, 50;
+  --critical: 220, 40, 110;
+  --special: 230, 0, 230;
+  --window-icon-stroke: 200, 130, 200;
+
+  --default-color: 255, 255, 255;
+}
+
 #root {
   height: 100%;
 }
diff --git a/gui/tailwind.config.ts b/gui/tailwind.config.ts
index 6d8d6bbb60..d612158bf7 100644
--- a/gui/tailwind.config.ts
+++ b/gui/tailwind.config.ts
@@ -150,6 +150,12 @@ const colors = {
     700: '#b3b3b3',
     900: '#d8d8d8',
   },
+  'asexual': {
+    100: '#000000',
+    200: '#A3A3A3',
+    300: '#FFFFFF',
+    400: '#800080',
+  },
 };
 
 const config = {
@@ -229,6 +235,7 @@ const config = {
         dark: `linear-gradient(135deg, ${colors['dark-accent'][100]} 50%, ${colors['dark-background'][700]} 50% 100%)`,
         light: `linear-gradient(135deg, ${colors['light-accent'][100]} 50%, ${colors['light-background'][700]} 50% 100%)`,
         'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`,
+        'asexual-flag': `linear-gradient(135deg, ${colors['asexual'][100]} 30%, ${colors['asexual'][200]} 30% 50%, ${colors['asexual'][300]} 50% 70%, ${colors['asexual'][400]} 70% 100%)`,
       },
     },
     data: {