From a159926d3e44d867bdf04cde7af608013982dcda Mon Sep 17 00:00:00 2001
From: MiniDigger | Martin <admin@benndorf.dev>
Date: Sat, 9 Dec 2023 23:46:01 +0100
Subject: [PATCH] feat: allow to change the primary color, closes #1263

---
 frontend/src/app.vue                          |   3 +-
 frontend/src/assets/css/color.css             | 240 ++++++++++++++++++
 frontend/src/assets/css/main.css              |   1 +
 frontend/src/assets/css/scrollbar.css         |   4 +-
 frontend/src/components/design/Alert.vue      |   2 +-
 .../src/components/design/DropdownButton.vue  |   2 +-
 frontend/src/components/design/Steps.vue      |   2 +-
 frontend/src/components/layout/Footer.vue     |  12 +-
 frontend/src/components/layout/Header.vue     |  23 +-
 .../components/projects/ProjectNavItem.vue    |   4 +-
 frontend/src/components/ui/InputCheckbox.vue  |   2 +-
 frontend/src/components/ui/InputRadio.vue     |   2 +-
 frontend/src/components/ui/InputWrapper.vue   |   4 +-
 frontend/src/composables/useAccentColor.ts    |  21 ++
 frontend/src/i18n/locales/en.json             |   4 +
 frontend/src/pages/auth/settings.vue          |   1 +
 frontend/src/pages/auth/settings/other.vue    |  37 +++
 frontend/src/pages/index.vue                  |   9 +-
 frontend/src/types/generated/icons.d.ts       |   4 +
 frontend/unocss.config.ts                     |  70 ++---
 20 files changed, 380 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/assets/css/color.css
 create mode 100644 frontend/src/composables/useAccentColor.ts
 create mode 100644 frontend/src/pages/auth/settings/other.vue

diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index 851339c7b..d70853998 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -7,7 +7,7 @@ import { computed } from "vue";
 import { useSettingsStore } from "~/store/useSettingsStore";
 import { settingsLog } from "~/composables/useLog";
 import { useAuthStore } from "~/store/auth";
-import { onErrorCaptured, transformAxiosError, useRoute, useRuntimeConfig } from "#imports";
+import { onErrorCaptured, transformAxiosError, useAccentColor, useRoute, useRuntimeConfig } from "#imports";
 
 // popper needs this?
 import "regenerator-runtime/runtime";
@@ -20,6 +20,7 @@ const authStore = useAuthStore();
 const settingsStore = useSettingsStore();
 settingsStore.loadSettingsClient();
 settingsStore.setupMobile();
+useAccentColor();
 settingsLog("render for user", authStore.user?.name, "with darkmode", settingsStore.darkMode);
 
 // for some dum reason useHead will not always replace the "light" from server side with "dark" from client side so we just force it.
diff --git a/frontend/src/assets/css/color.css b/frontend/src/assets/css/color.css
new file mode 100644
index 000000000..c3a3c4025
--- /dev/null
+++ b/frontend/src/assets/css/color.css
@@ -0,0 +1,240 @@
+:root {
+  --primary-0: #e6edfd;
+  --primary-50: #e6edfd;
+  --primary-100: #ccdcfb;
+  --primary-200: #99b8f6;
+  --primary-300: #6695f2;
+  --primary-400: #3371ed;
+  --primary-500: #004ee9;
+  --primary-600: #003eba;
+  --primary-700: #002f8c;
+  --primary-800: #001f5d;
+  --primary-900: #000817;
+
+  --gray-50: #fafafa;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-400: #a1a1aa;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+
+  --secondary-50: #f8fafc;
+  --secondary-100: #f1f5f9;
+  --secondary-200: #e2e8f0;
+  --secondary-300: #cbd5e1;
+  --secondary-400: #94a3b8;
+  --secondary-500: #64748b;
+  --secondary-600: #475569;
+  --secondary-700: #334155;
+  --secondary-800: #1e293b;
+  --secondary-900: #0f172a;
+}
+
+.theme-red {
+  --primary-50: #ffebee;
+  --primary-100: #ffcdd2;
+  --primary-200: #ef9a9a;
+  --primary-300: #e57373;
+  --primary-400: #ef5350;
+  --primary-500: #f44336;
+  --primary-600: #e53935;
+  --primary-700: #d32f2f;
+  --primary-800: #c62828;
+  --primary-900: #b71c1c;
+}
+.theme-pink {
+  --primary-50: #fce4ec;
+  --primary-100: #f8bbd0;
+  --primary-200: #f48fb1;
+  --primary-300: #f06292;
+  --primary-400: #ec407a;
+  --primary-500: #e91e63;
+  --primary-600: #d81b60;
+  --primary-700: #c2185b;
+  --primary-800: #ad1457;
+  --primary-900: #880e4f;
+}
+.theme-purple {
+  --primary-50: #f3e5f5;
+  --primary-100: #e1bee7;
+  --primary-200: #ce93d8;
+  --primary-300: #ba68c8;
+  --primary-400: #ab47bc;
+  --primary-500: #9c27b0;
+  --primary-600: #8e24aa;
+  --primary-700: #7b1fa2;
+  --primary-800: #6a1b9a;
+  --primary-900: #4a148c;
+}
+.theme-deep-purple {
+  --primary-50: #ede7f6;
+  --primary-100: #d1c4e9;
+  --primary-200: #b39ddb;
+  --primary-300: #9575cd;
+  --primary-400: #7e57c2;
+  --primary-500: #673ab7;
+  --primary-600: #5e35b1;
+  --primary-700: #512da8;
+  --primary-800: #4527a0;
+  --primary-900: #311b92;
+}
+.theme-indigo {
+  --primary-50: #e8eaf6;
+  --primary-100: #c5cae9;
+  --primary-200: #9fa8da;
+  --primary-300: #7986cb;
+  --primary-400: #5c6bc0;
+  --primary-500: #3f51b5;
+  --primary-600: #3949ab;
+  --primary-700: #303f9f;
+  --primary-800: #283593;
+  --primary-900: #1a237e;
+}
+.theme-light-blue {
+  --primary-50: #e1f5fe;
+  --primary-100: #b3e5fc;
+  --primary-200: #81d4fa;
+  --primary-300: #4fc3f7;
+  --primary-400: #29b6f6;
+  --primary-500: #03a9f4;
+  --primary-600: #039be5;
+  --primary-700: #0288d1;
+  --primary-800: #0277bd;
+  --primary-900: #01579b;
+}
+.theme-cyan {
+  --primary-50: #e0f7fa;
+  --primary-100: #b2ebf2;
+  --primary-200: #80deea;
+  --primary-300: #4dd0e1;
+  --primary-400: #26c6da;
+  --primary-500: #00bcd4;
+  --primary-600: #00acc1;
+  --primary-700: #0097a7;
+  --primary-800: #00838f;
+  --primary-900: #006064;
+}
+.theme-teal {
+  --primary-50: #e0f2f1;
+  --primary-100: #b2dfdb;
+  --primary-200: #80cbc4;
+  --primary-300: #4db6ac;
+  --primary-400: #26a69a;
+  --primary-500: #009688;
+  --primary-600: #00897b;
+  --primary-700: #00796b;
+  --primary-800: #00695c;
+  --primary-900: #004d40;
+}
+.theme-green {
+  --primary-50: #e8f5e9;
+  --primary-100: #c8e6c9;
+  --primary-200: #a5d6a7;
+  --primary-300: #81c784;
+  --primary-400: #66bb6a;
+  --primary-500: #4caf50;
+  --primary-600: #43a047;
+  --primary-700: #388e3c;
+  --primary-800: #2e7d32;
+  --primary-900: #1b5e20;
+}
+.theme-light-green {
+  --primary-50: #f1f8e9;
+  --primary-100: #dcedc8;
+  --primary-200: #c5e1a5;
+  --primary-300: #aed581;
+  --primary-400: #9ccc65;
+  --primary-500: #8bc34a;
+  --primary-600: #7cb342;
+  --primary-700: #689f38;
+  --primary-800: #558b2f;
+  --primary-900: #33691e;
+}
+.theme-lime {
+  --primary-50: #f9fbe7;
+  --primary-100: #f0f4c3;
+  --primary-200: #e6ee9c;
+  --primary-300: #dce775;
+  --primary-400: #d4e157;
+  --primary-500: #cddc39;
+  --primary-600: #c0ca33;
+  --primary-700: #afb42b;
+  --primary-800: #9e9d24;
+  --primary-900: #827717;
+}
+.theme-yellow {
+  --primary-50: #fffde7;
+  --primary-100: #fff9c4;
+  --primary-200: #fff59d;
+  --primary-300: #fff176;
+  --primary-400: #ffee58;
+  --primary-500: #ffeb3b;
+  --primary-600: #fdd835;
+  --primary-700: #fbc02d;
+  --primary-800: #f9a825;
+  --primary-900: #f57f17;
+}
+.theme-amber {
+  --primary-50: #fff8e1;
+  --primary-100: #ffecb3;
+  --primary-200: #ffe082;
+  --primary-300: #ffd54f;
+  --primary-400: #ffca28;
+  --primary-500: #ffc107;
+  --primary-600: #ffb300;
+  --primary-700: #ffa000;
+  --primary-800: #ff8f00;
+  --primary-900: #ff6f00;
+}
+.theme-orange {
+  --primary-50: #fff3e0;
+  --primary-100: #ffe0b2;
+  --primary-200: #ffcc80;
+  --primary-300: #ffb74d;
+  --primary-400: #ffa726;
+  --primary-500: #ff9800;
+  --primary-600: #fb8c00;
+  --primary-700: #f57c00;
+  --primary-800: #ef6c00;
+  --primary-900: #e65100;
+}
+.theme-deep-orange {
+  --primary-50: #fbe9e7;
+  --primary-100: #ffccbc;
+  --primary-200: #ffab91;
+  --primary-300: #ff8a65;
+  --primary-400: #ff7043;
+  --primary-500: #ff5722;
+  --primary-600: #f4511e;
+  --primary-700: #e64a19;
+  --primary-800: #d84315;
+  --primary-900: #bf360c;
+}
+.theme-brown {
+  --primary-50: #efebe9;
+  --primary-100: #d7ccc8;
+  --primary-200: #bcaaa4;
+  --primary-300: #a1887f;
+  --primary-400: #8d6e63;
+  --primary-500: #795548;
+  --primary-600: #6d4c41;
+  --primary-700: #5d4037;
+  --primary-800: #4e342e;
+  --primary-900: #3e2723;
+}
+.theme-gray {
+  --primary-50: #fafafa;
+  --primary-100: #f5f5f5;
+  --primary-200: #eeeeee;
+  --primary-300: #e0e0e0;
+  --primary-400: #bdbdbd;
+  --primary-500: #9e9e9e;
+  --primary-600: #757575;
+  --primary-700: #616161;
+  --primary-800: #424242;
+  --primary-900: #212121;
+}
diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
index eb232263e..1f8db56b3 100644
--- a/frontend/src/assets/css/main.css
+++ b/frontend/src/assets/css/main.css
@@ -1,4 +1,5 @@
 @import "reset.css";
+@import "color.css";
 @import "scrollbar.css";
 @import "loader.css";
 
diff --git a/frontend/src/assets/css/scrollbar.css b/frontend/src/assets/css/scrollbar.css
index aab508f94..6a4aa70d8 100644
--- a/frontend/src/assets/css/scrollbar.css
+++ b/frontend/src/assets/css/scrollbar.css
@@ -4,7 +4,7 @@
 }
 
 * {
-  scrollbar-color: #004ee9 #f2f5fb;
+  scrollbar-color: var(--primary-400) #f2f5fb;
   scrollbar-width: thin;
 }
 
@@ -16,7 +16,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #004ee9;
+  background: var(--primary-400);
   border-radius: 5px;
 }
 
diff --git a/frontend/src/components/design/Alert.vue b/frontend/src/components/design/Alert.vue
index 7f512ae83..deea22a74 100644
--- a/frontend/src/components/design/Alert.vue
+++ b/frontend/src/components/design/Alert.vue
@@ -14,7 +14,7 @@ const color = computed(() => {
   // map type to bg-color
   return {
     success: "bg-green-500 border-green-600",
-    info: "bg-primary-400 border-primary-500",
+    info: "bg-primary-500 border-primary-600",
     warning: "bg-yellow-500 border-yellow-600",
     danger: "bg-red-500 font-semibold border-red-600",
     neutral: "background-default border dark:border-gray-800",
diff --git a/frontend/src/components/design/DropdownButton.vue b/frontend/src/components/design/DropdownButton.vue
index 51c942799..509d25c0c 100644
--- a/frontend/src/components/design/DropdownButton.vue
+++ b/frontend/src/components/design/DropdownButton.vue
@@ -45,7 +45,7 @@ defineExpose({ close });
         </template>
       </Button>
       <template #content>
-        <div class="flex flex-col z-10 -mt-2 py-1 rounded border-t-2 border-primary-400 background-default shadow-default">
+        <div class="flex flex-col z-10 -mt-2 py-1 rounded border-t-2 border-primary-500 background-default shadow-default">
           <slot :close="close" />
         </div>
       </template>
diff --git a/frontend/src/components/design/Steps.vue b/frontend/src/components/design/Steps.vue
index ddd0f17de..b4c6c7037 100644
--- a/frontend/src/components/design/Steps.vue
+++ b/frontend/src/components/design/Steps.vue
@@ -90,7 +90,7 @@ async function goto(step: Step) {
       <ul class="flex flex-row justify-around items-center">
         <template v-for="(step, count) in steps" :key="step.value">
           <div>
-            <div class="lt-sm:hidden bg-primary-400 text-white rounded-full w-[24px] h-[24px] inline-flex justify-center align-center" m="r-2">
+            <div class="lt-sm:hidden bg-primary-500 text-white rounded-full w-[24px] h-[24px] inline-flex justify-center align-center" m="r-2">
               {{ count + 1 }}
             </div>
             <Link
diff --git a/frontend/src/components/layout/Footer.vue b/frontend/src/components/layout/Footer.vue
index cba928128..fb93325e3 100644
--- a/frontend/src/components/layout/Footer.vue
+++ b/frontend/src/components/layout/Footer.vue
@@ -12,7 +12,7 @@ const { t } = useI18n();
           <a
             href="https://github.com/HangarMC"
             class="flex items-center rounded-md px-6 py-2"
-            hover="text-primary-400 bg-primary-0"
+            hover="text-primary-500 bg-primary-0"
             target="_blank"
             rel="noreferrer noopener"
           >
@@ -21,22 +21,22 @@ const { t } = useI18n();
           <a
             href="https://status.papermc.io"
             class="flex items-center rounded-md px-6 py-2"
-            hover="text-primary-400 bg-primary-0"
+            hover="text-primary-500 bg-primary-0"
             target="_blank"
             rel="noreferrer noopener"
           >
             {{ t("hangar.footer.status") }}
           </a>
-          <NuxtLink :to="{ name: 'api-docs' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">
+          <NuxtLink :to="{ name: 'api-docs' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-500 bg-primary-0">
             {{ t("hangar.footer.api") }}
           </NuxtLink>
-          <NuxtLink :to="{ name: 'terms' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">
+          <NuxtLink :to="{ name: 'terms' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-500 bg-primary-0">
             {{ t("hangar.footer.terms") }}
           </NuxtLink>
-          <NuxtLink :to="{ name: 'privacy' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">
+          <NuxtLink :to="{ name: 'privacy' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-500 bg-primary-0">
             {{ t("hangar.footer.privacypolicy") }}
           </NuxtLink>
-          <NuxtLink href="https://forums.papermc.io/help/legal-notice/" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">
+          <NuxtLink href="https://forums.papermc.io/help/legal-notice/" class="flex items-center rounded-md px-6 py-2" hover="text-primary-500 bg-primary-0">
             {{ t("hangar.footer.legalNotice") }}
           </NuxtLink>
         </div>
diff --git a/frontend/src/components/layout/Header.vue b/frontend/src/components/layout/Header.vue
index a0812cc35..335500f76 100644
--- a/frontend/src/components/layout/Header.vue
+++ b/frontend/src/components/layout/Header.vue
@@ -174,7 +174,7 @@ function isRecent(date: string): boolean {
                 :key="link.label"
                 :to="{ name: link.link }"
                 class="flex items-center rounded-md px-6 py-2"
-                hover="text-primary-400 bg-primary-0"
+                hover="text-primary-500 bg-primary-0"
                 @click="close()"
               >
                 <component :is="link.icon" class="mr-3 text-[1.2em]" />
@@ -189,7 +189,7 @@ function isRecent(date: string): boolean {
                 :key="link.label"
                 :to="{ name: link.link }"
                 class="flex items-center rounded-md px-6 py-2"
-                hover="text-primary-400 bg-primary-0"
+                hover="text-primary-500 bg-primary-0"
                 @click="close()"
               >
                 <component :is="link.icon" class="mr-3 text-[1.2em]" />
@@ -202,7 +202,7 @@ function isRecent(date: string): boolean {
               <a
                 v-for="link in navBarMenuLinksMoreFromPaper"
                 :key="link.label"
-                class="flex items-center rounded-md px-6 py-2 hover:(text-primary-400 bg-primary-0)"
+                class="flex items-center rounded-md px-6 py-2 hover:(text-primary-500 bg-primary-0)"
                 :href="link.link"
               >
                 <component :is="link.icon" class="mr-3 text-[1.2em]" />
@@ -244,14 +244,14 @@ function isRecent(date: string): boolean {
             </template>
           </DropdownButton>
         </div>
-        <button class="flex rounded-md p-2" hover="text-primary-400 bg-primary-0" aria-label="Toogle dark mode" @click="settings.toggleDarkMode()">
+        <button class="flex rounded-md p-2" hover="text-primary-500 bg-primary-0" aria-label="Toogle dark mode" @click="settings.toggleDarkMode()">
           <icon-mdi-weather-night v-if="settings.darkMode" class="text-[1.2em]"></icon-mdi-weather-night>
           <icon-mdi-white-balance-sunny v-else class="text-[1.2em]"></icon-mdi-white-balance-sunny>
         </button>
         <div v-if="authStore.user">
           <Popper placement="bottom-end">
             <button
-              class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-400 bg-primary-0)"
+              class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0)"
               aria-label="Notifications"
               @click="updateNotifications"
             >
@@ -265,7 +265,7 @@ function isRecent(date: string): boolean {
               </div>
             </button>
             <template #content="{ close }">
-              <div class="-mt-1 flex flex-col rounded border-t-2 border-primary-400 background-default filter shadow-default overflow-auto max-w-150">
+              <div class="-mt-1 flex flex-col rounded border-t-2 border-primary-500 background-default filter shadow-default overflow-auto max-w-150">
                 <div v-if="notifications.length === 0">
                   <span class="flex shadow-0 p-2 mt-2 ml-3 mr-2">{{ i18n.t("notifications.empty.recent") }}</span>
                 </div>
@@ -321,12 +321,12 @@ function isRecent(date: string): boolean {
         <!-- Profile dropdown -->
         <div v-if="authStore.user">
           <Popper placement="bottom-end">
-            <button class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-400 bg-primary-0)" @click="updateNavData">
+            <button class="flex items-center gap-2 rounded-md p-2 hover:(text-primary-500 bg-primary-0)" @click="updateNavData">
               <UserAvatar :username="authStore.user.name" :avatar-url="authStore.user.avatarUrl" size="xs" :disable-link="true" />
               {{ authStore.user.name }}
             </button>
             <template #content="{ close }">
-              <div class="-mt-2 py-1 rounded border-t-2 border-primary-400 background-default filter shadow-default flex flex-col" @click="close()">
+              <div class="-mt-2 py-1 rounded border-t-2 border-primary-500 background-default filter shadow-default flex flex-col" @click="close()">
                 <DropdownItem :to="'/' + authStore.user.name">{{ t("nav.user.profile") }}</DropdownItem>
                 <DropdownItem to="/notifications">{{ t("nav.user.notifications") }}</DropdownItem>
                 <DropdownItem to="/auth/settings/profile">{{ t("nav.user.settings") }}</DropdownItem>
@@ -362,11 +362,11 @@ function isRecent(date: string): boolean {
 
         <!-- Login/register buttons -->
         <div v-else class="flex gap-2">
-          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-400 bg-primary-0)" :to="auth.loginUrl($route.fullPath)" rel="nofollow">
+          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0)" :to="auth.loginUrl($route.fullPath)" rel="nofollow">
             <icon-mdi-key-outline class="mr-1 text-[1.2em]" />
             {{ t("nav.login") }}
           </NuxtLink>
-          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-400 bg-primary-0)" :to="auth.signupUrl($route.fullPath)">
+          <NuxtLink class="flex items-center rounded-md p-2 hover:(text-primary-500 bg-primary-0)" :to="auth.signupUrl($route.fullPath)">
             <icon-mdi-clipboard-outline class="mr-1 text-[1.2em]" />
             {{ t("nav.signup") }}
           </NuxtLink>
@@ -383,7 +383,8 @@ nav .router-link-active {
 }
 
 nav a.router-link-active:after {
-  background: linear-gradient(-270deg, #004ee9 0%, #367aff 100%);
+  content: "";
+  background: linear-gradient(-270deg, var(--primary-500) 0%, var(--primary-400) 100%);
   transition: width 0.2s ease-in;
   width: 80%;
 }
diff --git a/frontend/src/components/projects/ProjectNavItem.vue b/frontend/src/components/projects/ProjectNavItem.vue
index ad934263e..008cdd92a 100644
--- a/frontend/src/components/projects/ProjectNavItem.vue
+++ b/frontend/src/components/projects/ProjectNavItem.vue
@@ -18,8 +18,8 @@ const selected = computed(() => {
 
 const clazz = computed(() => {
   return (
-    "px-2 py-1 inline-flex items-center transition duration-300 border-b-2 border-transparent hover:border-[#004ee9] " +
-    (selected.value ? "!border-[#004ee9] font-semibold " : "")
+    "px-2 py-1 inline-flex items-center transition duration-300 border-b-2 border-transparent hover:border-primary-500 " +
+    (selected.value ? "!border-primary-500 font-semibold " : "")
   );
 });
 </script>
diff --git a/frontend/src/components/ui/InputCheckbox.vue b/frontend/src/components/ui/InputCheckbox.vue
index 81005a09d..7e0c79c4e 100644
--- a/frontend/src/components/ui/InputCheckbox.vue
+++ b/frontend/src/components/ui/InputCheckbox.vue
@@ -26,7 +26,7 @@ const { v } = useValidation(props.label, undefined, internalVal, undefined);
       v-model="internalVal"
       v-bind="$attrs"
       type="checkbox"
-      class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-sm group-hover:bg-gray-400 !checked:bg-primary-400"
+      class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-sm group-hover:bg-gray-400 !checked:bg-primary-500"
       dark="bg-gray-600 group-hover:bg-gray-500"
       :cursor="disabled ? 'auto' : 'pointer'"
       :disabled="disabled"
diff --git a/frontend/src/components/ui/InputRadio.vue b/frontend/src/components/ui/InputRadio.vue
index e9783db5e..8390d687b 100644
--- a/frontend/src/components/ui/InputRadio.vue
+++ b/frontend/src/components/ui/InputRadio.vue
@@ -23,7 +23,7 @@ const { v } = useValidation(props.label, undefined, internalVal, undefined);
     <input
       v-model="internalVal"
       type="radio"
-      class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-full group-hover:bg-gray-400 !checked:bg-primary-400"
+      class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-full group-hover:bg-gray-400 !checked:bg-primary-500"
       dark="bg-gray-600 group-hover:bg-gray-500"
       v-bind="$attrs"
       @blur="v.$touch()"
diff --git a/frontend/src/components/ui/InputWrapper.vue b/frontend/src/components/ui/InputWrapper.vue
index eb81ecb13..d75880e57 100644
--- a/frontend/src/components/ui/InputWrapper.vue
+++ b/frontend/src/components/ui/InputWrapper.vue
@@ -34,7 +34,7 @@ function getErrorMessage(message: NonNullable<typeof props.errors>[number]) {
       :class="[
         'relative flex w-full outline-none p-2 border-1px rounded',
         'border-gray-500',
-        'focus-within:border-primary-400 focus-within:hover:border-primary-400',
+        'focus-within:border-primary-500 focus-within:hover:border-primary-500',
         'hover:border-gray-400',
         'error:border-red-400',
         'transition duration-200 ease',
@@ -53,7 +53,7 @@ function getErrorMessage(message: NonNullable<typeof props.errors>[number]) {
           'absolute origin-top-left left-2 italic pointer-events-none',
           'input-hover:(opacity-100)',
           'input-focused:(transform scale-60 opacity-100 not-italic) filled:(transform scale-60 text-black-50 not-italic)',
-          'opacity-60 error:(!text-red-400) input-focused:(text-primary-300)',
+          'opacity-60 error:(!text-red-400) input-focused:(text-primary-400)',
           'py-0.5 input-focused:(top-0) filled:(top-0)',
           'transition duration-250 ease',
         ]"
diff --git a/frontend/src/composables/useAccentColor.ts b/frontend/src/composables/useAccentColor.ts
new file mode 100644
index 000000000..a0121e5d1
--- /dev/null
+++ b/frontend/src/composables/useAccentColor.ts
@@ -0,0 +1,21 @@
+import { useHead } from "@unhead/vue";
+import { useLocalStorage } from "@vueuse/core";
+import { computed, ref } from "vue";
+
+export function useAccentColor() {
+  if (process.server) {
+    return ref<string>("blue");
+  }
+
+  const accentColor = useLocalStorage("accent-color", "blue");
+
+  const themeClass = computed(() => {
+    return "theme-" + accentColor.value;
+  });
+
+  useHead({
+    htmlAttrs: { class: themeClass },
+  });
+
+  return accentColor;
+}
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 58943552d..eb7a07df9 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -940,6 +940,10 @@
       },
       "apiKeys": {
         "header": "API keys"
+      },
+      "misc": {
+        "header": "Other",
+        "accentColor": "Accent Color"
       }
     }
   },
diff --git a/frontend/src/pages/auth/settings.vue b/frontend/src/pages/auth/settings.vue
index d145220a7..343d749fb 100644
--- a/frontend/src/pages/auth/settings.vue
+++ b/frontend/src/pages/auth/settings.vue
@@ -43,6 +43,7 @@ const tabs: Tab[] = [
   { value: "account", header: t("auth.settings.account.header") },
   { value: "security", header: t("auth.settings.security.header") },
   { value: "api-keys", header: t("auth.settings.apiKeys.header") },
+  { value: "other", header: t("auth.settings.misc.header") },
 ];
 
 const emailConfirmModal = ref();
diff --git a/frontend/src/pages/auth/settings/other.vue b/frontend/src/pages/auth/settings/other.vue
new file mode 100644
index 000000000..b15da1b37
--- /dev/null
+++ b/frontend/src/pages/auth/settings/other.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useAccentColor } from "~/composables/useAccentColor";
+import PageTitle from "~/components/design/PageTitle.vue";
+import InputSelect from "~/components/ui/InputSelect.vue";
+
+const { t } = useI18n();
+
+const accentColors = [
+  { value: "blue", text: "Blue" },
+  { value: "red", text: "Red" },
+  { value: "pink", text: "Pink" },
+  { value: "purple", text: "Purple" },
+  { value: "deep-purple", text: "DeepPurple" },
+  { value: "indigo", text: "Indigo" },
+  { value: "light-blue", text: "LightBlue" },
+  { value: "cyan", text: "Cyan" },
+  { value: "teal", text: "Teal" },
+  { value: "green", text: "Green" },
+  { value: "light-green", text: "LightGreen" },
+  { value: "lime", text: "Lime" },
+  { value: "yellow", text: "Yellow" },
+  { value: "amber", text: "Amber" },
+  { value: "orange", text: "Orange" },
+  { value: "deep-orange", text: "DeepOrange" },
+  { value: "brown", text: "Brown" },
+  { value: "gray", text: "Gray" },
+];
+const accentColor = useAccentColor();
+</script>
+
+<template>
+  <div>
+    <PageTitle>{{ t("auth.settings.misc.header") }}</PageTitle>
+    <InputSelect v-model="accentColor" :values="accentColors" :label="t('auth.settings.misc.accentColor')" />
+  </div>
+</template>
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 30ea855be..d4c1bde0f 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -172,7 +172,7 @@ useHead(meta);
         />
         <div class="md:hidden flex">
           <Menu>
-            <MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2">
+            <MenuButton class="bg-gradient-to-r from-primary-500 to-primary-400 rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2">
               <span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
               <icon-mdi-sort-variant class="text-xl pointer-events-none" />
             </MenuButton>
@@ -189,7 +189,10 @@ useHead(meta);
               >
                 <MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
                   <button
-                    :class="{ 'bg-gray-100 dark:bg-gray-700': active, 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': activeSorter === sorter.id }"
+                    :class="{
+                      'bg-gray-100 dark:bg-gray-700': active,
+                      'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id,
+                    }"
                     class="px-4 py-2 text-left"
                     @click="activeSorter = sorter.id"
                   >
@@ -204,7 +207,7 @@ useHead(meta);
       <div class="justify-center inline-flex gap-1 lt-md:hidden">
         <div v-for="sorter in sorters" :key="sorter.id">
           <button
-            :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': activeSorter === sorter.id }"
+            :class="{ 'bg-gradient-to-r from-primary-500 to-primary-400 text-white': activeSorter === sorter.id }"
             class="rounded-lg py-2 px-4 hover:(bg-gray-300 dark:bg-gray-700)"
             @click="activeSorter = sorter.id"
           >
diff --git a/frontend/src/types/generated/icons.d.ts b/frontend/src/types/generated/icons.d.ts
index 6929d3e76..1c3432394 100644
--- a/frontend/src/types/generated/icons.d.ts
+++ b/frontend/src/types/generated/icons.d.ts
@@ -29,6 +29,7 @@ declare module "vue" {
     IconMdiClipboardOutline: typeof import("~icons/mdi/clipboard-outline")["default"];
     IconMdiClose: typeof import("~icons/mdi/close")["default"];
     IconMdiCloseCircle: typeof import("~icons/mdi/close-circle")["default"];
+    IconMdiCloudSearch: typeof import("~icons/mdi/cloud-search")["default"];
     IconMdiCodeBracesBox: typeof import("~icons/mdi/code-braces-box")["default"];
     IconMdiCogTransfer: typeof import("~icons/mdi/cog-transfer")["default"];
     IconMdiContentCopy: typeof import("~icons/mdi/content-copy")["default"];
@@ -42,6 +43,7 @@ declare module "vue" {
     IconMdiEye: typeof import("~icons/mdi/eye")["default"];
     IconMdiEyeOff: typeof import("~icons/mdi/eye-off")["default"];
     IconMdiFlag: typeof import("~icons/mdi/flag")["default"];
+    IconMdiFolderPlusOutline: typeof import("~icons/mdi/folder-plus-outline")["default"];
     IconMdiFormatListNumbered: typeof import("~icons/mdi/format-list-numbered")["default"];
     IconMdiGamepadRoundLeft: typeof import("~icons/mdi/gamepad-round-left")["default"];
     IconMdiHelpCircleOutline: typeof import("~icons/mdi/help-circle-outline")["default"];
@@ -50,6 +52,8 @@ declare module "vue" {
     IconMdiInformation: typeof import("~icons/mdi/information")["default"];
     IconMdiKeyOutline: typeof import("~icons/mdi/key-outline")["default"];
     IconMdiLeaf: typeof import("~icons/mdi/leaf")["default"];
+    IconMdiLicense: typeof import("~icons/mdi/license")["default"];
+    IconMdiLink: typeof import("~icons/mdi/link")["default"];
     IconMdiLockOpenOutline: typeof import("~icons/mdi/lock-open-outline")["default"];
     IconMdiLockOutline: typeof import("~icons/mdi/lock-outline")["default"];
     IconMdiMenu: typeof import("~icons/mdi/menu")["default"];
diff --git a/frontend/unocss.config.ts b/frontend/unocss.config.ts
index 61339eb31..73faa229d 100644
--- a/frontend/unocss.config.ts
+++ b/frontend/unocss.config.ts
@@ -26,11 +26,11 @@ export default {
     "background-default": "bg-gray-50 dark:bg-gray-800",
     "background-card": "bg-slate-200 dark:bg-slate-700",
     "shadow-default": "shadow-lg shadow-gray-300 dark:shadow-gray-900",
-    "color-primary": "text-primary-400 dark:text-primary-200",
-    "border-top-primary": "border-solid border-t-4 border-t-primary-400",
-    "button-primary": "bg-primary-400 enabled:hover:bg-primary-300",
+    "color-primary": "text-primary-500 dark:text-primary-300",
+    "border-top-primary": "border-solid border-t-4 border-t-primary-500",
+    "button-primary": "bg-primary-500 enabled:hover:bg-primary-400",
     "button-secondary": "bg-secondary-500 enabled:hover:(bg-secondary-400 dark:bg-secondary-600)",
-    "button-transparent": "bg-transparent enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
+    "button-transparent": "bg-transparent enabled:hover:(bg-primary-500/15 text-primary-500 dark:text-primary-200)",
     "button-red": "bg-red-500 dark:bg-red-600 enabled:hover:(bg-red-400 dark:bg-red-500)",
     "text-gray": "text-gray-600 dark:text-gray-300",
     "text-gray-secondary": "text-gray-500 dark:text-gray-400",
@@ -49,41 +49,41 @@ export default {
       transparent: "transparent",
       current: "currentColor",
       primary: {
-        0: "#E6EDFD",
-        50: "#CCDCFB",
-        100: "#99B8F6",
-        200: "#6695F2",
-        300: "#3371ED",
-        400: "#004EE9",
-        500: "#003EBA",
-        600: "#002F8C",
-        700: "#001F5D",
-        800: "#00102F",
-        900: "#000817",
+        0: "var(--primary-0)",
+        50: "var(--primary-50)",
+        100: "var(--primary-100)",
+        200: "var(--primary-200)",
+        300: "var(--primary-300)",
+        400: "var(--primary-400)",
+        500: "var(--primary-500)",
+        600: "var(--primary-600)",
+        700: "var(--primary-700)",
+        800: "var(--primary-800)",
+        900: "var(--primary-900)",
       },
       gray: {
-        50: "#fafafa",
-        100: "#f4f4f5",
-        200: "#e4e4e7",
-        300: "#d4d4d8",
-        400: "#a1a1aa",
-        500: "#71717a",
-        600: "#52525b",
-        700: "#3f3f46",
-        800: "#27272a",
-        900: "#18181b",
+        50: "var(--gray-50)",
+        100: "var(--gray-100)",
+        200: "var(--gray-200)",
+        300: "var(--gray-300)",
+        400: "var(--gray-400)",
+        500: "var(--gray-500)",
+        600: "var(--gray-600)",
+        700: "var(--gray-700)",
+        800: "var(--gray-800)",
+        900: "var(--gray-900)",
       },
       secondary: {
-        50: "#f8fafc",
-        100: "#f1f5f9",
-        200: "#e2e8f0",
-        300: "#cbd5e1",
-        400: "#94a3b8",
-        500: "#64748b",
-        600: "#475569",
-        700: "#334155",
-        800: "#1e293b",
-        900: "#0f172a",
+        50: "var(--secondary-50)",
+        100: "var(--secondary-100)",
+        200: "var(--secondary-200)",
+        300: "var(--secondary-300)",
+        400: "var(--secondary-400)",
+        500: "var(--secondary-500)",
+        600: "var(--secondary-600)",
+        700: "var(--secondary-700)",
+        800: "var(--secondary-800)",
+        900: "var(--secondary-900)",
       },
       white: "#f8fafc",
       black: "#0f172a",