From 8033fd27e1523e7383a428ac7afeddbe9dfcadf5 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 2 Jul 2025 23:50:09 +0200
Subject: [PATCH] feat: Add theming, no settings menu yet

---
 app.vue                                       | 22 +++++++++----------
 components/Button.vue                         | 19 +++++++++++-----
 components/Channel.vue                        |  2 +-
 components/Message.vue                        |  4 ++--
 components/MessageArea.vue                    | 10 +++++----
 components/Settings/UserSettings/Account.vue  |  4 ++--
 components/UserPopup.vue                      | 10 ++++-----
 layouts/client.vue                            | 10 +++++----
 .../[serverId]/channels/[channelId].vue       |  5 +++--
 pages/settings.vue                            | 10 ++++-----
 public/themes/dark.css                        | 19 ++++++++++++++++
 public/themes/default-themes.json             |  4 ++++
 public/themes/light.css                       | 19 ++++++++++++++++
 13 files changed, 96 insertions(+), 42 deletions(-)
 create mode 100644 public/themes/dark.css
 create mode 100644 public/themes/default-themes.json
 create mode 100644 public/themes/light.css

diff --git a/app.vue b/app.vue
index fbc6572..c0c5700 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <link :href="'/themes/' + current_theme + '.css'" rel="stylesheet" type="text/css"></link>
     <Banner v-if="banner" />
     <NuxtPage :keepalive="true" />
   </div>
@@ -9,21 +10,20 @@
 
 const banner = useState("banner", () => false);
 
+let current_theme = "dark" // default theme
+const saved_theme = localStorage.getItem("selectedTheme");
+if (saved_theme) {
+	current_theme = saved_theme;
+}
 </script>
 
 <style>
-:root {
-  --background-color: rgb(30, 30, 30);
-  --main-text-color: rgb(190, 190, 190);
-  --outline-border: 1px solid rgb(150, 150, 150);
-}
-
 html,
 body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
-  color: rgb(190, 190, 190);
-  background-color: rgb(30, 30, 30);
+  color: var(--text-color);
+  background-color: var(--chat-background-color);
   margin: 0;
 }
 
@@ -40,15 +40,15 @@ a {
 }
 
 .bottom-border {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 }
 
 .left-border {
-	border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid var(--padding-color);
 }
 
 .right-border {
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
 }
 
 .rounded-corners {
diff --git a/components/Button.vue b/components/Button.vue
index db8bb8e..fb44cf2 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -18,8 +18,8 @@ const props = defineProps<{
 .button {
 	cursor: pointer;
 
-	background-color: #b35719;
-	color: #ffffff;
+	background-color: var(--primary-color);
+	color: var(--text-color);
 
 	padding: 0.7dvh 1.2dvw;
 	font-size: 1.1em;
@@ -30,15 +30,22 @@ const props = defineProps<{
 	display: inline-block;
 }
 
+.button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+
 .scary-button {
 	background-color: red;
 }
+.scary-button:hover {
+	background-color: red;
+}
 
 .neutral-button {
-	background-color: grey;
+	background-color: var(--accent-color);
+}
+.neutral-button:hover {
+	background-color: var(--accent-highlighted-color);
 }
 
-.button:hover {
-	background-color: #934410;
-}
 </style>
\ No newline at end of file
diff --git a/components/Channel.vue b/components/Channel.vue
index 1828641..0f48323 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -36,6 +36,6 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 }
 
 .current-channel {
-	background-color: rgb(70, 70, 70);
+	background-color: var(--sidebar-highlighted-background-color);
 }
 </style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..e8bb600 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -88,7 +88,7 @@ onMounted(async () => {
 }
 
 .message:hover {
-	background-color: rgb(20, 20, 20);
+	background-color: var(--chat-highlighted-background-color);
 }
 
 .normal-message {
@@ -142,7 +142,7 @@ onMounted(async () => {
 
 .message-date {
 	font-size: .7em;
-	color: rgb(150, 150, 150);
+	color: var(--secondary-text-color);
 	cursor: default;
 }
 
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 49577f9..7612243 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -251,7 +251,7 @@ router.beforeEach((to, from, next) => {
 	flex-direction: column;
 	justify-content: center;
 	align-content: center;
-	border: 1px solid rgb(70, 70, 70);
+	border: 1px solid var(--padding-color);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
@@ -266,7 +266,7 @@ router.beforeEach((to, from, next) => {
 
 #message-box-input {
 	width: 80%;
-	background-color: rgb(50, 50, 50);
+	background-color: var(--sidebar-background-color);
 	border: none;
 	color: inherit;
 	padding-left: 1dvw;
@@ -284,11 +284,13 @@ router.beforeEach((to, from, next) => {
 #submit-button {
 	background-color: inherit;
 	border: none;
-	color: rgb(200, 200, 200);
+	color: var(--primary-color);
+	transition: color 100ms;
 	font-size: 1.5em;
 }
 
 #submit-button:hover {
-	color: rgb(255, 255, 255);
+	color: var(--primary-highlighted-color);
+	cursor: pointer;
 }
 </style>
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 0fe5013..4247c60 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -145,8 +145,8 @@ const deleteAccount = async () => {
   font-size: 1em;
   border-radius: 8px;
   border: none;
-  color: white;
-  background-color: #54361b;
+  color: var(--text-color);
+  background-color: var(--accent-color);
 }
 
 .profile-popup {
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 092e7d5..b27ecea 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="profile-popup">
     <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
-    <div id="cover-colour"></div>
+    <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
         <strong>{{ props.user.display_name }}</strong>
@@ -38,17 +38,17 @@ const props = defineProps<{
   flex-direction: column;
 }
 
-#cover-colour {
+#cover-color {
   border-radius: 12px 12px 0 0;
   min-height: 60px;
-  background-color: #442505;
+  background-color: var(--primary-color);
 }
 
 #main-body {
   border-radius: 0 0 12px 12px;
   padding: 12px;
   min-height: 280px;
-  background-color: #4b3018;
+  background-color: var(--accent-color);
   overflow-wrap: break-word;
   hyphens: manual;
 }
@@ -75,7 +75,7 @@ const props = defineProps<{
 }
 
 #about-me {
-  background-color: #34200f;
+  background-color: var(--secondary-color);
   border-radius: 12px;
 
   margin-top: 32px;
diff --git a/layouts/client.vue b/layouts/client.vue
index 73a40d6..a1c1c24 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -96,12 +96,13 @@ const members = [
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 }
 
 #client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 }
 
 #__nuxt {
@@ -129,18 +130,19 @@ const members = [
 	gap: 2dvh;
 	padding-left: .5dvw;
 	padding-right: .5dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
+	background-color: var(--sidebar-background-color);
 	padding-top: 1.5dvh;
 }
 
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
 }
 
 #home-button {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 	padding-bottom: 1dvh;
 }
 
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index c9aa8d2..f0e3e08 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -85,14 +85,15 @@ function toggleInvitePopup(e: Event) {
 #middle-left-column {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
+	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
 	padding-top: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
-	border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid var(--padding-color);
 }
 
 #members-list {
diff --git a/pages/settings.vue b/pages/settings.vue
index 5db18fe..96944ba 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -98,8 +98,8 @@ function selectCategory(page: Page) {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
-  background-color: #2f3136;
-  color: white;
+  background-color: var(--sidebar-background-color);
+  color: var(--text-color);
   padding: 1dvh 1dvw;
   margin-left: auto;
 
@@ -127,11 +127,11 @@ function selectCategory(page: Page) {
 }
 
 .sidebar-focus {
-  background-color: #383B41;
+  background-color: var(--sidebar-highlighted-background-color);
 }
 
 #sidebar li:hover {
-  background-color: #40444b;
+  background-color: var(--sidebar-highlighted-background-color);
 }
 
 #sub-page {
@@ -149,7 +149,7 @@ function selectCategory(page: Page) {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
-  background-color: #2c2e32;
+  background-color: var(--spacing-color);
 }
 
 /* applies to child pages too */
diff --git a/public/themes/dark.css b/public/themes/dark.css
new file mode 100644
index 0000000..8245724
--- /dev/null
+++ b/public/themes/dark.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #f7eee8;
+	--secondary-text-color: #f0e8e4;
+
+	--chat-background-color: #1f1e1d;
+    --chat-highlighted-background-color: #2f2b28;
+	--sidebar-background-color: #2e2a27;
+	--sidebar-highlighted-background-color: #36322b;
+	--topbar-background-color: #2a2723;
+
+    --padding-color: #484848;
+    
+	--primary-color: #f4741f;
+	--primary-highlighted-color: #f68a3f;
+	--secondary-color: #7c4018;
+	--secondary-highlighted-color: #8f5b2c;
+	--accent-color: #b35719;
+	--accent-highlighted-color: #c76a2e;
+}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
new file mode 100644
index 0000000..fb9478d
--- /dev/null
+++ b/public/themes/default-themes.json
@@ -0,0 +1,4 @@
+[
+	"dark.css",
+	"light.css"
+]
\ No newline at end of file
diff --git a/public/themes/light.css b/public/themes/light.css
new file mode 100644
index 0000000..cb51d8c
--- /dev/null
+++ b/public/themes/light.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #170f08;
+	--secondary-text-color: #2f2b28;
+
+    --chat-background-color: #f0ebe8;
+    --chat-highlighted-background-color: #e8e4e0;
+	--sidebar-background-color: #dbd8d4;
+	--sidebar-highlighted-background-color: #d4d0ca;
+	--topbar-background-color: #dfdbd6;
+
+    --padding-color: #484848;
+    
+    --primary-color: #df5f0b;
+    --primary-highlighted-color: #ef6812;
+    --secondary-color: #e8ac84;
+    --secondary-highlighted-color: #f8b68a;
+    --accent-color: #e68b4e;
+    --accent-highlighted-color: #f69254;
+}
\ No newline at end of file