From 24d8905ef2f6ea406f5e7a8732f59add8c012ce2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 6 Jul 2025 02:20:11 +0200
Subject: [PATCH] feat: woke theme

---
 app.vue                                       |  1 +
 layouts/client.vue                            |  3 ++-
 nuxt.config.ts                                |  2 +-
 .../[serverId]/channels/[channelId].vue       |  1 +
 pages/settings.vue                            |  2 ++
 public/themes/woke.css                        | 24 +++++++++++++++++++
 public/themes/woke.json                       |  6 +++++
 7 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 public/themes/woke.css
 create mode 100644 public/themes/woke.json

diff --git a/app.vue b/app.vue
index a0a0ed6..7af306b 100644
--- a/app.vue
+++ b/app.vue
@@ -33,6 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
+	background: var(--optional-chat-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }
diff --git a/layouts/client.vue b/layouts/client.vue
index 4a6ac73..a1ee86d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -40,7 +40,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
-	
 }
 
 .hidden {
@@ -58,6 +57,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
@@ -98,6 +98,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	padding-left: .5dvw;
 	padding-right: .5dvw;
 	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
 	padding-top: 1.5dvh;
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 489e1b8..380fcae 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,7 +31,7 @@ export default defineNuxtConfig({
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
       defaultThemes: [
-        "light", "ash", "dark"
+        "light", "ash", "dark", "woke"
       ]
     }
   },
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 01e89f0..6bdcc7c 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -86,6 +86,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
+	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 17558b1..c3db3d1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -124,6 +124,7 @@ onMounted(() => {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
+  background: var(--optional-channel-list-background);
   background-color: var(--sidebar-background-color);
   color: var(--text-color);
   padding: 1dvh 1dvw;
@@ -157,6 +158,7 @@ onMounted(() => {
 }
 
 .sidebar-focus {
+  background: var(--optional-topbar-background);
   background-color: var(--sidebar-highlighted-background-color);
 }
 
diff --git a/public/themes/woke.css b/public/themes/woke.css
new file mode 100644
index 0000000..9f6eb98
--- /dev/null
+++ b/public/themes/woke.css
@@ -0,0 +1,24 @@
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+
+    --chat-background-color: #808080;
+    --chat-highlighted-background-color: #808080;
+	--sidebar-background-color: #808080;
+	--sidebar-highlighted-background-color: #808080;
+	--topbar-background-color: #808080;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
+	--optional-sidebar-background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc);
+	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+}
\ No newline at end of file
diff --git a/public/themes/woke.json b/public/themes/woke.json
new file mode 100644
index 0000000..0fe2071
--- /dev/null
+++ b/public/themes/woke.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Woke",
+	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
+	"complementaryColor": "white",
+	"themeUrl": "woke.css"
+}
\ No newline at end of file