diff --git a/index.html b/index.html
index bd0cd02..808d76d 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     <link rel="manifest" href="/site.webmanifest">
     <title>SafeTwitch</title>
   </head>
-  <body class="bg-ctp-base flex flex-col">
+  <body class="flex flex-col">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/package-lock.json b/package-lock.json
index ad335a3..9b37c64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "test",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "test",
-      "version": "2.2.1",
+      "version": "2.3.1",
       "dependencies": {
         "@intlify/unplugin-vue-i18n": "^0.11.0",
         "@tailwindcss/forms": "^0.5.3",
@@ -42,6 +42,7 @@
         "postcss": "^8.4.21",
         "prettier": "^2.8.4",
         "tailwindcss": "^3.2.7",
+        "tailwindcss-themer": "^3.1.0",
         "typescript": "~4.8.4",
         "vite": "^4.1.4",
         "vue-cli-plugin-i18n": "~2.3.2",
@@ -1769,6 +1770,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1786,6 +1800,16 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -3454,6 +3478,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/just-unique": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/just-unique/-/just-unique-4.2.0.tgz",
+      "integrity": "sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==",
+      "dev": true
+    },
     "node_modules/karma-safaritechpreview-launcher": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
@@ -3567,6 +3597,12 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
+      "dev": true
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4758,6 +4794,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4968,6 +5019,21 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-themer": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-themer/-/tailwindcss-themer-3.1.0.tgz",
+      "integrity": "sha512-IfgxpCxWm5rRK3Q7aTvVyhQ/7tyyn8EJl5tFak5tS+/n8oXT7OGfv8praYepR7+IsM92waAuBDZng1HgnstrYA==",
+      "dev": true,
+      "dependencies": {
+        "color": "^4.1.0",
+        "just-unique": "^4.2.0",
+        "lodash.merge": "^4.6.2",
+        "lodash.mergewith": "^4.6.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.1.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -6860,6 +6926,16 @@
         }
       }
     },
+    "color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6874,6 +6950,16 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -8094,6 +8180,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "just-unique": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/just-unique/-/just-unique-4.2.0.tgz",
+      "integrity": "sha512-cxQGGUiit6CGUpuuiezY8N4m1wgF4o7127rXEXDFcxeDUFfdV7gSkwA26Fe2wWBiNQq2SZOgN4gSmMxB/StA8Q==",
+      "dev": true
+    },
     "karma-safaritechpreview-launcher": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/karma-safaritechpreview-launcher/-/karma-safaritechpreview-launcher-0.0.6.tgz",
@@ -8186,6 +8278,12 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
+      "dev": true
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8998,6 +9096,23 @@
         "object-inspect": "^1.9.0"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -9155,6 +9270,18 @@
         "resolve": "^1.22.1"
       }
     },
+    "tailwindcss-themer": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-themer/-/tailwindcss-themer-3.1.0.tgz",
+      "integrity": "sha512-IfgxpCxWm5rRK3Q7aTvVyhQ/7tyyn8EJl5tFak5tS+/n8oXT7OGfv8praYepR7+IsM92waAuBDZng1HgnstrYA==",
+      "dev": true,
+      "requires": {
+        "color": "^4.1.0",
+        "just-unique": "^4.2.0",
+        "lodash.merge": "^4.6.2",
+        "lodash.mergewith": "^4.6.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index d99727a..02a5315 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
     "tailwindcss": "^3.2.7",
+    "tailwindcss-themer": "^3.1.0",
     "typescript": "~4.8.4",
     "vite": "^4.1.4",
     "vue-cli-plugin-i18n": "~2.3.2",
diff --git a/src/App.vue b/src/App.vue
index 38276a0..75ece0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,13 +7,15 @@ import DevWarning from './components/DevWarning.vue'
 const dev = import.meta.env.DEV
 </script>
 
-<template class="bg-ctp-base h-full flex flex-row">
-  <dev-warning v-if="dev"></dev-warning>
-  <navbar-item></navbar-item>
+<template class="h-full flex flex-row">
+  <div class="my-theme bg-primary">
+    <dev-warning v-if="dev"></dev-warning>
+    <navbar-item></navbar-item>
 
-  <Suspense>
-    <RouterView :key="$route.fullPath" />
-  </Suspense>
+    <Suspense>
+      <RouterView :key="$route.fullPath"/>
+    </Suspense>
 
-  <footer-item></footer-item>
+    <footer-item></footer-item>
+    </div>
 </template>
diff --git a/src/components/CategoryPreview.vue b/src/components/CategoryPreview.vue
index 873ea79..8f31a28 100644
--- a/src/components/CategoryPreview.vue
+++ b/src/components/CategoryPreview.vue
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-ctp-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
+  <div class="bg-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
     <router-link :to="`/directory/game/${encodeURIComponent(category.name)}`">
       <img :src="category.image" class="rounded-lg rounded-b-none w-full" />
     </router-link>
@@ -40,7 +40,7 @@ export default {
       <ul class="h-8 overflow-hidden">
         <li v-for="tag in category.tags" :key="tag" class="inline-flex">
           <span
-            class="p-2.5 py-1.5 bg-ctp-surface0 rounded-md m-0.5 text-xs font-bold text-white"
+            class="p-2.5 py-1.5 bg-surface0 rounded-md m-0.5 text-xs font-bold text-white"
             >{{ tag }}</span
           >
         </li>
diff --git a/src/components/ChannelPreview.vue b/src/components/ChannelPreview.vue
index 145f916..6749efd 100644
--- a/src/components/ChannelPreview.vue
+++ b/src/components/ChannelPreview.vue
@@ -15,7 +15,7 @@ export default {
 
 <template>
   <router-link v-if="channelData" :to="'/' + channelData.username">
-    <div class="p-3 rounded-lg bg-ctp-crust w-max max-w-lg max-h-28">
+    <div class="p-3 rounded-lg bg-crust w-max max-w-lg max-h-28">
       <div class="inline-flex space-x-3">
         <img :src="channelData.pfp" class="rounded-full w-20" />
         <div>
diff --git a/src/components/DevWarning.vue b/src/components/DevWarning.vue
index 67522eb..b7c9136 100644
--- a/src/components/DevWarning.vue
+++ b/src/components/DevWarning.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg z-50 flex m-3 h-20 bg-amber-400 border-4 border-amber-600">
+  <div class="rounded-lg z-50 flex m-3 mt-0 h-20 bg-amber-400 border-4 border-amber-600">
     <div class="m-auto">
       <h1 class="font-bold text-2xl">SafeTwitch is currently in development mode.</h1>
     </div>
diff --git a/src/components/ErrorMessage.vue b/src/components/ErrorMessage.vue
index 81b87cb..625a9bc 100644
--- a/src/components/ErrorMessage.vue
+++ b/src/components/ErrorMessage.vue
@@ -4,7 +4,7 @@ export default {}
 
 <template>
   <div
-    class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-ctp-crust rounded-lg text-white"
+    class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-crust rounded-lg text-white"
   >
     <div class="mb-6">
       <h1 class="font-bold text-5xl">{{ $t('error.oops') }}</h1>
diff --git a/src/components/FollowButton.vue b/src/components/FollowButton.vue
index 2e50812..1c99930 100644
--- a/src/components/FollowButton.vue
+++ b/src/components/FollowButton.vue
@@ -56,7 +56,7 @@ export default {
   <button
     ref="followButton"
     @click="followStreamer"
-    class="text-white text-sm font-bold p-2 py-1 rounded-md bg-purple-600"
+    class="text-white text-sm font-bold p-2 py-1 rounded-md bg-purple"
   >
     <v-icon name="bi-heart-fill" scale="0.85"></v-icon>
     <span v-if="isFollowing"> {{ $t('streamer.unfollow') }} </span>
diff --git a/src/components/LoadingScreen.vue b/src/components/LoadingScreen.vue
index f2132d0..3cf904b 100644
--- a/src/components/LoadingScreen.vue
+++ b/src/components/LoadingScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex mx-auto justify-center bg-ctp-crust rounded-lg w-2/3 p-2 text-white">
+  <div class="flex mx-auto justify-center bg-crust rounded-lg w-2/3 p-2 text-white">
     <div class="flex space-x-3">
       <h1 class="text-4xl font-bold">{{ $t('main.searching') }}</h1>
       <v-icon name="fa-circle-notch" class="animate-spin w-10 h-10"></v-icon>
diff --git a/src/components/NavbarView.vue b/src/components/NavbarView.vue
index b5d902e..4ada473 100644
--- a/src/components/NavbarView.vue
+++ b/src/components/NavbarView.vue
@@ -28,7 +28,7 @@ export default {
   <nav class="flex items-center justify-between flex-wrap p-4">
     <div class="flex items-center flex-no-shrink text-white mr-6">
       <router-link to="/">
-        <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
+        <h1 class="font-bold text-2xl">Safe<color class="text-purple">Twitch</color></h1>
       </router-link>
     </div>
 
@@ -56,7 +56,7 @@ export default {
     </div>
 
     <div :class="open ? 'block' : 'hidden'" class="w-full flex-grow">
-      <div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
+      <div class="p-4 flex flex-col items-center space-y-5 text-white">
         <search-bar></search-bar>
         <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
           <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
diff --git a/src/components/StreamPreview.vue b/src/components/StreamPreview.vue
index 5367850..ecff75a 100644
--- a/src/components/StreamPreview.vue
+++ b/src/components/StreamPreview.vue
@@ -59,7 +59,7 @@ export default {
 
 <template>
   <div v-if="data.stream">
-    <div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
+    <div class="bg-crust rounded-lg w-[23rem] md:w-[27rem]">
       <RouterLink :to="'/' + data.login">
         <img :src="data.stream.preview" class="rounded-lg rounded-b-none" />
       </RouterLink>
diff --git a/src/components/TwitchChat.vue b/src/components/TwitchChat.vue
index 546638d..056c70c 100644
--- a/src/components/TwitchChat.vue
+++ b/src/components/TwitchChat.vue
@@ -150,7 +150,7 @@ export default {
 }
 </script>
 <template>
-  <div class="p-3 bg-ctp-crust rounded-lg w-[99vw] md:max-w-[15.625rem] lg:max-w-[20rem] flex flex-col" @PlayerTimeUpdate="updateVodComments">
+  <div class="p-3 bg-crust rounded-lg w-[99vw] md:max-w-[15.625rem] lg:max-w-[20rem] flex flex-col" @PlayerTimeUpdate="updateVodComments">
     
     <!-- SYSTEM MESSAGES -->
     <ul
@@ -176,7 +176,7 @@ export default {
             
             <strong
               :style="message.data.color? `color: ${message.data.color};` : ``"
-              class="text-ctp-pink font-bold">
+              class="text-purple font-bold">
               {{ message.data.username }}</strong>: {{ message.data.message }}
           </p>
         </div>
@@ -185,7 +185,7 @@ export default {
           <p class="text-sm text-gray-500 italic"> {{ $t("chat.removed", { username: message.data.username }) }} </p>
         </div>
 
-        <div v-else-if="message.type === 'USERNOTICE'" class="text-white inline-flex bg-ctp-pink bg-opacity-50 p-1 rounded-md">
+        <div v-else-if="message.type === 'USERNOTICE'" class="text-white inline-flex bg-pink bg-opacity-50 p-1 rounded-md">
           <p> {{ $t("chat.resub", { username: message.data.username, duration : message.data.months }) }} </p>
         </div>
 
diff --git a/src/components/user/AboutTab.vue b/src/components/user/AboutTab.vue
index dfbde71..d21115b 100644
--- a/src/components/user/AboutTab.vue
+++ b/src/components/user/AboutTab.vue
@@ -28,7 +28,7 @@ export default {
 </script>
 
 <template>
-    <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+    <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
         <div class="inline-flex w-full">
             <span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
         </div>
diff --git a/src/components/user/VideoPreview.vue b/src/components/user/VideoPreview.vue
index e78ce88..b57a91d 100644
--- a/src/components/user/VideoPreview.vue
+++ b/src/components/user/VideoPreview.vue
@@ -8,12 +8,12 @@
         <img :src="videoData.preview" class="rounded-md" width="300" />
       </RouterLink>
       <p
-        class="absolute bottom-2 right-2 bg-black p-1 py-0.5 rounded-md bg-opacity-70 text-xs font-bold"
+        class="absolute bottom-2 right-2 bg-secondary bg-opacity-70 p-1 py-0.5 rounded-md text-xs font-bold"
       >
         {{ new Date(videoData.duration * 1000).toISOString().slice(11, 19) }}
       </p>
       <p
-        class="absolute bottom-2 left-2 bg-black p-1 py-0.5 rounded-md bg-opacity-70 text-xs font-bold"
+        class="absolute bottom-2 left-2 bg-secondary bg-opacity-70 p-1 py-0.5 rounded-md text-xs font-bold"
       >
         {{ abbreviate(videoData.views) }} {{ $t('main.views') }}
       </p>
diff --git a/src/components/user/VideoTab.vue b/src/components/user/VideoTab.vue
index 87cb5f9..92168db 100644
--- a/src/components/user/VideoTab.vue
+++ b/src/components/user/VideoTab.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
+  <div class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
     <div class="inline-flex w-full">
       <span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
     </div>
diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue
index 9632edd..68be593 100644
--- a/src/views/CategoryView.vue
+++ b/src/views/CategoryView.vue
@@ -99,7 +99,7 @@ export default {
               <ul class="mb-5">
                 <li v-for="tag in data.tags" :key="tag" class="inline-flex">
                   <span
-                    class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                    class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
                     >{{ tag }}</span
                   >
                 </li>
@@ -126,7 +126,7 @@ export default {
           <ul class="mb-5">
             <li v-for="tag in data.tags" :key="tag" class="inline-flex">
               <span
-                class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
                 >{{ tag }}</span
               >
             </li>
diff --git a/src/views/ClipView.vue b/src/views/ClipView.vue
index e53daaa..6e27c57 100644
--- a/src/views/ClipView.vue
+++ b/src/views/ClipView.vue
@@ -93,7 +93,7 @@ export default {
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
     <div
-      class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
+      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
         <video-player :options="videoOptions">
diff --git a/src/views/PrivacyPageView.vue b/src/views/PrivacyPageView.vue
index 965c0ef..7b69041 100644
--- a/src/views/PrivacyPageView.vue
+++ b/src/views/PrivacyPageView.vue
@@ -3,7 +3,7 @@ export default {}
 </script>
 
 <template>
-  <article class="prose prose-invert bg-ctp-crust rounded-lg mx-auto p-8 pt-10 text-white">
+  <article class="prose prose-invert bg-crust rounded-lg mx-auto p-8 pt-10 text-white">
     <h1>Privacy Policy</h1>
     <p>
       It's.... kind of empty here.
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 3b043b8..ae97a68 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -50,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <div class="mx-auto w-[35rem] max-w-[95vw]  p-5 py-3 bg-ctp-crust rounded-md text-white">
+  <div class="mx-auto w-[35rem] max-w-[95vw]  p-5 py-3 bg-secondary rounded-md text-white">
     <h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
     <hr class="my-2" />
     <ul class="w-full space-y-1">
@@ -77,10 +77,10 @@ export default {
     </ul>
 
     <div class="space-x-2 mt-3">
-      <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
-      <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
+      <button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
+      <!-- <button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
             <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
-                class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->
+                class="bg-surface0 p-4 py-2 rounded-md"> -->
     </div>
   </div>
 </template>
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index ed05526..61dcc38 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -96,7 +96,7 @@ export default {
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
     <div
-      class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
+      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
     >
       <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
         <video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player>
@@ -121,7 +121,7 @@ export default {
 
             <span
               v-if="data.isLive"
-              class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md"
+              class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
               >{{ $t('main.live') }}</span
             >
           </div>
@@ -147,7 +147,7 @@ export default {
         <div class="flex-col md:inline-flex md:w-1/5 float-right h-full text-right">
           <div v-if="!data.isLive" class="w-full">
             <p
-              class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red"
+              class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red"
             >
               OFFLINE
             </p>
@@ -160,7 +160,7 @@ export default {
               <li
                 v-for="tag in data.stream!.tags"
                 :key="tag"
-                class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md"
+                class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md"
               >
                 {{ tag }}
               </li>
diff --git a/src/views/VodView.vue b/src/views/VodView.vue
index 4bb6d68..c26a0da 100644
--- a/src/views/VodView.vue
+++ b/src/views/VodView.vue
@@ -92,7 +92,7 @@ export default {
     class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
   >
     <div
-      class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
+      class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
         <video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate">
diff --git a/tailwind.config.js b/tailwind.config.js
index f99f548..4ae0255 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,9 +7,40 @@ module.exports = {
     extend: {},
   },
   plugins: [
-    require('@catppuccin/tailwindcss')({
-      prefix: 'ctp',
-      defaultFlavour: 'mocha'
+    require('tailwindcss-themer')({
+      defaultTheme: {
+        // put the default values of any config you want themed
+        // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
+        extend: {
+          // colors is used here for demonstration purposes
+          colors: {
+            primary: 'red'
+          }
+        }
+      },
+      themes: [
+        {
+          // name your theme anything that could be a valid css class name
+          // remember what you named your theme because you will use it as a class to enable the theme
+          name: 'my-theme',
+          // put any overrides your theme has here
+          // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
+          extend: {
+            colors: {
+              "primary": '#141515',
+              "secondary": '#1e1f1f',
+              "overlay0": '#282a2a',
+              "overlay1": '#323434',
+              "surface0": '#393B3B',
+              "surface1": '#3F4242',
+              "crust": '#0C0C0C',
+              "purple": '#D946EF',
+              "red": "#980C0C"
+
+            }
+          }
+        }
+      ]
     }),
     require('@tailwindcss/typography'),
     require("@tailwindcss/forms") 
