diff --git a/index.html b/index.html
index b856187c..75a7649a 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
     }
   </style>
 </head>
-<body class="themeable-default">
+<body>
 <noscript>
   <strong>
     We're sorry but halo admin client doesn't work properly without
diff --git a/package.json b/package.json
index ba5c2578..940ffb45 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.1.6",
     "tailwindcss-safe-area": "^0.2.2",
-    "tailwindcss-themeable": "^1.3.0",
+    "tailwindcss-themer": "^2.0.1",
     "typescript": "~4.7.4",
     "vite": "^2.9.14",
     "vite-compression-plugin": "^0.0.4",
diff --git a/packages/components/src/components/alert/Alert.vue b/packages/components/src/components/alert/Alert.vue
index 243b9f73..2f6d8fd6 100644
--- a/packages/components/src/components/alert/Alert.vue
+++ b/packages/components/src/components/alert/Alert.vue
@@ -78,8 +78,8 @@ const handleClose = () => {
   @apply flex-col;
   @apply box-border;
   @apply border;
+  @apply rounded-base;
   padding: 12px 16px;
-  border-radius: 4px;
 
   .alert-header {
     @apply flex;
diff --git a/packages/components/src/components/button/Button.vue b/packages/components/src/components/button/Button.vue
index 64a6d2df..a46dbdf5 100644
--- a/packages/components/src/components/button/Button.vue
+++ b/packages/components/src/components/button/Button.vue
@@ -94,7 +94,7 @@ function handleClick() {
 </script>
 <style lang="scss">
 .btn {
-  border-radius: 4px;
+  @apply rounded-base;
   @apply inline-flex;
   @apply flex-shrink-0;
   @apply cursor-pointer;
@@ -131,18 +131,16 @@ function handleClick() {
   border: 1px solid #d9d9d9;
 
   .btn-icon {
-    color: #0e1731;
+    @apply text-secondary;
   }
 }
 
 .btn-primary {
-  background: #4ccba0;
-  @apply text-white;
+  @apply text-white bg-primary;
 }
 
 .btn-secondary {
-  background: #0e1731;
-  @apply text-white;
+  @apply text-white bg-secondary;
 }
 
 .btn-danger {
diff --git a/packages/components/src/components/card/Card.vue b/packages/components/src/components/card/Card.vue
index aecc8257..ed468e34 100644
--- a/packages/components/src/components/card/Card.vue
+++ b/packages/components/src/components/card/Card.vue
@@ -37,7 +37,7 @@ defineProps({
   @apply bg-white;
   @apply shadow-sm;
   @apply overflow-hidden;
-  border-radius: 4px;
+  @apply rounded-base;
   border: 1px solid #eaecf0;
 
   .card-header {
diff --git a/packages/components/src/components/input/Input.vue b/packages/components/src/components/input/Input.vue
index 307b5d33..55527fc3 100644
--- a/packages/components/src/components/input/Input.vue
+++ b/packages/components/src/components/input/Input.vue
@@ -66,15 +66,15 @@ function handleInput(e: Event) {
     @apply block;
     @apply transition-all;
     @apply appearance-none;
+    @apply rounded-base;
     border: 1px solid #ced4da;
-    border-radius: 4px;
 
     &:active {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:focus {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:disabled {
diff --git a/packages/components/src/components/menu/MenuItem.vue b/packages/components/src/components/menu/MenuItem.vue
index 1e92fb0c..b09893f5 100644
--- a/packages/components/src/components/menu/MenuItem.vue
+++ b/packages/components/src/components/menu/MenuItem.vue
@@ -85,8 +85,7 @@ function handleClick() {
   @apply relative;
   @apply p-2;
   @apply font-normal;
-
-  border-radius: 4px;
+  @apply rounded-base;
 
   &:hover,
   &.active {
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 8f36adce..105a4fec 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -130,9 +130,9 @@ function handleClose() {
     @apply bg-white;
     @apply items-stretch;
     @apply shadow-xl;
+    @apply rounded-base;
     width: calc(100vw - 20px);
     max-height: calc(100vh - 20px);
-    border-radius: 4px;
 
     .modal-header {
       @apply flex;
diff --git a/packages/components/src/components/pagination/Pagination.vue b/packages/components/src/components/pagination/Pagination.vue
index eac3f70e..be3a6de0 100644
--- a/packages/components/src/components/pagination/Pagination.vue
+++ b/packages/components/src/components/pagination/Pagination.vue
@@ -65,7 +65,7 @@ const { currentPage, pageCount, prev, next } = useOffsetPagination({
     <div class="hidden sm:flex-1 sm:flex sm:items-center">
       <nav
         aria-label="Pagination"
-        class="relative z-0 inline-flex rounded-[4px] shadow-sm -space-x-px"
+        class="relative z-0 inline-flex rounded-base shadow-sm -space-x-px"
       >
         <span
           class="relative inline-flex items-center px-2 py-2 rounded-l-[4px] border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer"
@@ -77,9 +77,8 @@ const { currentPage, pageCount, prev, next } = useOffsetPagination({
           v-for="i in pageCount"
           :key="i"
           :class="{
-            'z-10 bg-themeable-primary-50 border-themeable-primary-500 text-themeable-primary-600':
-              i === currentPage,
-            'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 ':
+            'z-10 bg-primary/1 border-primary text-primary': i === currentPage,
+            'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
               i !== currentPage,
           }"
           aria-current="page"
diff --git a/packages/components/src/components/select/Select.vue b/packages/components/src/components/select/Select.vue
index 809982a8..c229b8c0 100644
--- a/packages/components/src/components/select/Select.vue
+++ b/packages/components/src/components/select/Select.vue
@@ -62,15 +62,15 @@ function handleChange(e: Event) {
     @apply block;
     @apply transition-all;
     @apply appearance-none;
+    @apply rounded-base;
     border: 1px solid #ced4da;
-    border-radius: 4px;
 
     &:active {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:focus {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:disabled {
diff --git a/packages/components/src/components/switch/Switch.vue b/packages/components/src/components/switch/Switch.vue
index e7c0763d..9d6c14ac 100644
--- a/packages/components/src/components/switch/Switch.vue
+++ b/packages/components/src/components/switch/Switch.vue
@@ -18,7 +18,7 @@ const handleChange = () => {
     <button
       :class="{
         'bg-gray-200': !modelValue,
-        '!bg-themeable-primary-600': modelValue,
+        '!bg-primary': modelValue,
       }"
       aria-checked="false"
       class="switch-inner"
diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue
index c5e242be..ee3b974e 100644
--- a/packages/components/src/components/tabs/Tabbar.vue
+++ b/packages/components/src/components/tabs/Tabbar.vue
@@ -100,8 +100,8 @@ const handleChange = (id: number | string) => {
       border-bottom-width: 2px;
 
       &.tabbar-item-active {
-        color: #0e1731;
-        border-bottom-color: #0e1731;
+        @apply text-secondary;
+        @apply border-b-secondary;
       }
     }
   }
@@ -117,7 +117,7 @@ const handleChange = (id: number | string) => {
       @apply px-9;
       @apply py-1;
       @apply opacity-70;
-      border-radius: 4px;
+      @apply rounded-base;
 
       &.tabbar-item-active {
         @apply bg-gray-100;
@@ -133,7 +133,7 @@ const handleChange = (id: number | string) => {
   &.tabbar-outline {
     @apply p-1;
     @apply bg-gray-100;
-    border-radius: 4px;
+    @apply rounded-base;
 
     .tabbar-items {
       @apply gap-1;
@@ -145,7 +145,7 @@ const handleChange = (id: number | string) => {
       @apply px-9;
       @apply py-1;
       @apply opacity-70;
-      border-radius: 4px;
+      @apply rounded-base;
 
       &.tabbar-item-active {
         @apply bg-white;
@@ -186,7 +186,7 @@ const handleChange = (id: number | string) => {
         border-right-width: 2px;
 
         &.tabbar-item-active {
-          border-right-color: #0e1731;
+          @apply border-r-secondary;
         }
       }
     }
diff --git a/packages/components/src/components/tag/Tag.vue b/packages/components/src/components/tag/Tag.vue
index 92256cc0..33f7b655 100644
--- a/packages/components/src/components/tag/Tag.vue
+++ b/packages/components/src/components/tag/Tag.vue
@@ -33,7 +33,7 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .tag-wrapper {
-  border-radius: 4px;
+  @apply rounded-base;
   @apply inline-flex;
   @apply flex-shrink-0;
   @apply flex-wrap;
@@ -46,21 +46,18 @@ const classes = computed(() => {
   @apply align-middle;
   @apply h-5;
   @apply text-xs;
+  @apply border border-solid;
 
   &.tag-default {
     border: 1px solid #d9d9d9;
   }
 
   &.tag-primary {
-    background: #4ccba0;
-    border: 1px solid #4ccba0;
-    @apply text-white;
+    @apply text-white bg-primary border-primary;
   }
 
   &.tag-secondary {
-    background: #0e1731;
-    border: 1px solid #0e1731;
-    @apply text-white;
+    @apply text-white bg-secondary border-secondary;
   }
 
   &.tag-danger {
diff --git a/packages/components/src/components/textarea/Textarea.vue b/packages/components/src/components/textarea/Textarea.vue
index c26796b3..bfabad46 100644
--- a/packages/components/src/components/textarea/Textarea.vue
+++ b/packages/components/src/components/textarea/Textarea.vue
@@ -53,15 +53,15 @@ function handleInput(e: Event) {
 
     @apply p-3;
     @apply text-sm;
+    @apply rounded-base;
     border: 1px solid #ced4da;
-    border-radius: 4px;
 
     &:active {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:focus {
-      border-color: #4ccba0;
+      @apply border-primary;
     }
 
     &:disabled {
diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js
index d578cb33..e7d10c90 100644
--- a/packages/components/tailwind.config.js
+++ b/packages/components/tailwind.config.js
@@ -1,24 +1,3 @@
-const { themeable } = require("tailwindcss-themeable");
-
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require("tailwindcss-safe-area"),
-    require("@tailwindcss/aspect-ratio"),
-    themeable({
-      defaultTheme: "default",
-      themes: [
-        {
-          name: "default",
-          palette: {
-            primary: "#4CCBA0",
-            secondary: "#0E1731",
-          },
-        },
-      ],
-    }),
-  ],
+  ...require("../../tailwind.config"),
 };
diff --git a/packages/shared/src/layouts/BasicLayout.vue b/packages/shared/src/layouts/BasicLayout.vue
index 1c7bc049..b3116e67 100644
--- a/packages/shared/src/layouts/BasicLayout.vue
+++ b/packages/shared/src/layouts/BasicLayout.vue
@@ -81,8 +81,7 @@ const handleRouteToProfile = () => {
 
     <!--bottom nav bar-->
     <div
-      class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden"
-      style="background: #0e1731"
+      class="bottom-nav-bar fixed left-0 bottom-0 right-0 grid grid-cols-6 border-t-2 border-black drop-shadow-2xl mt-safe pb-safe md:hidden bg-secondary"
     >
       <div
         v-for="(menu, index) in minimenus"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2aa83b95..9e55062a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,7 +53,7 @@ importers:
       start-server-and-test: ^1.14.0
       tailwindcss: ^3.1.6
       tailwindcss-safe-area: ^0.2.2
-      tailwindcss-themeable: ^1.3.0
+      tailwindcss-themer: ^2.0.1
       typescript: ~4.7.4
       uuid: ^8.3.2
       vite: ^2.9.14
@@ -124,7 +124,7 @@ importers:
       start-server-and-test: 1.14.0
       tailwindcss: 3.1.6
       tailwindcss-safe-area: 0.2.2
-      tailwindcss-themeable: 1.3.0
+      tailwindcss-themer: 2.0.1_tailwindcss@3.1.6
       typescript: 4.7.4
       vite: 2.9.14_sass@1.53.0
       vite-compression-plugin: 0.0.4
@@ -3527,6 +3527,21 @@ packages:
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  /color-string/1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: true
+
+  /color/4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: true
+
   /colorette/2.0.16:
     resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
     dev: true
@@ -5236,6 +5251,10 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: true
+
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -5624,6 +5643,10 @@ packages:
       verror: 1.10.0
     dev: true
 
+  /just-unique/4.0.1:
+    resolution: {integrity: sha512-rUeSLN44eynoLqpWa/J73f4fGEGoUxBw+3KPCABN2CkCQuP/7WYS6BSQ8/YIIB5wAEdzfHeJhYPfoYIi95UywA==}
+    dev: true
+
   /kind-of/6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -5747,6 +5770,10 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash.mergewith/4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+    dev: true
+
   /lodash.once/4.1.1:
     resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
     dev: true
@@ -6884,6 +6911,12 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /simple-swizzle/0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: true
+
   /sirv/2.0.2:
     resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
     engines: {node: '>= 10'}
@@ -7196,8 +7229,16 @@ packages:
     resolution: {integrity: sha512-sygGuEFFBBzjqR6d2gB9hDW9xX/4yLt7ymhR2E/XVa6Ar4B86Net8/9EmPAsqFUvXY40+W0HnXwFavFJEM+eCQ==}
     dev: true
 
-  /tailwindcss-themeable/1.3.0:
-    resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}
+  /tailwindcss-themer/2.0.1_tailwindcss@3.1.6:
+    resolution: {integrity: sha512-A6bS7rDjGIgK29Xl3J6B+vnI4bRvYSzoyintxKf2MoTONJnHsRI/heJ+cjUfK+z1q7QX6VFZn1pgyiX69Re0Pw==}
+    peerDependencies:
+      tailwindcss: ^3.1.0
+    dependencies:
+      color: 4.2.3
+      just-unique: 4.0.1
+      lodash.merge: 4.6.2
+      lodash.mergewith: 4.6.2
+      tailwindcss: 3.1.6
     dev: true
 
   /tailwindcss/3.1.6:
diff --git a/src/formkit/theme.ts b/src/formkit/theme.ts
index f93088cc..7b4437cb 100644
--- a/src/formkit/theme.ts
+++ b/src/formkit/theme.ts
@@ -2,7 +2,7 @@ const textClassification = {
   label: "block font-bold text-sm formkit-invalid:text-red-500 w-56",
   wrapper: "flex flex-col sm:flex-row items-start sm:items-center",
   inner:
-    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-[4px] overflow-hidden focus-within:border-themeable-primary-500 mt-2 sm:mt-0",
+    "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 rounded-base overflow-hidden focus-within:border-primary mt-2 sm:mt-0",
   input:
     "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-9 px-3 text-sm",
 };
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 3fbd329a..828655fb 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -293,7 +293,7 @@ onMounted(() => {
               <ul class="mt-2 space-y-2">
                 <li>
                   <div
-                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
+                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-primary"
                   >
                     <RouterLink
                       :to="{
@@ -312,7 +312,7 @@ onMounted(() => {
                 </li>
                 <li>
                   <div
-                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-themeable-primary"
+                    class="inline-flex w-96 cursor-pointer flex-row gap-x-3 rounded border p-3 hover:border-primary"
                   >
                     <RouterLink
                       :to="{
@@ -638,7 +638,7 @@ onMounted(() => {
               >
                 <div
                   v-show="checkAll"
-                  class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+                  class="absolute inset-y-0 left-0 w-0.5 bg-primary"
                 ></div>
                 <div class="relative flex flex-row items-center">
                   <div class="mr-4 hidden items-center sm:flex">
diff --git a/src/modules/contents/comments/CommentList.vue b/src/modules/contents/comments/CommentList.vue
index 2e3dac6f..25b9ed61 100644
--- a/src/modules/contents/comments/CommentList.vue
+++ b/src/modules/contents/comments/CommentList.vue
@@ -91,7 +91,7 @@ const checkAll = ref(false);
           >
             <div
               v-show="checkAll"
-              class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+              class="absolute inset-y-0 left-0 w-0.5 bg-primary"
             ></div>
             <div class="relative flex flex-row items-center">
               <div class="mr-4 hidden items-center sm:flex">
diff --git a/src/modules/contents/pages/PageList.vue b/src/modules/contents/pages/PageList.vue
index 27671ea1..3b82e56d 100644
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@@ -282,7 +282,7 @@ onMounted(() => {
               >
                 <div
                   v-show="checkAll"
-                  class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+                  class="absolute inset-y-0 left-0 w-0.5 bg-primary"
                 ></div>
                 <div class="relative flex flex-row items-center">
                   <div class="mr-4 hidden items-center sm:flex">
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 96682766..26b1d1b0 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -343,7 +343,7 @@ onMounted(() => {
           >
             <div
               v-show="selected?.id === post.id || post.checked"
-              class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+              class="absolute inset-y-0 left-0 w-0.5 bg-primary"
             ></div>
             <div class="relative flex flex-row items-center">
               <div class="mr-4 hidden items-center sm:flex">
diff --git a/src/modules/interface/themes/ThemeDetail.vue b/src/modules/interface/themes/ThemeDetail.vue
index 72cd9ab9..d6d6e829 100644
--- a/src/modules/interface/themes/ThemeDetail.vue
+++ b/src/modules/interface/themes/ThemeDetail.vue
@@ -47,7 +47,7 @@ const handleChangeTheme = (theme: any) => {
         <div class="flex items-center">
           <div
             v-show="theme.activated"
-            class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+            class="absolute inset-y-0 left-0 w-0.5 bg-primary"
           ></div>
           <div class="w-40 px-4">
             <div
@@ -242,7 +242,7 @@ const handleChangeTheme = (theme: any) => {
                 <ul class="mt-2 space-y-2">
                   <li>
                     <div
-                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-primary"
                     >
                       <RouterLink
                         :to="{
@@ -262,7 +262,7 @@ const handleChangeTheme = (theme: any) => {
                   </li>
                   <li>
                     <div
-                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-96 cursor-pointer flex-row flex-col gap-y-3 rounded border p-5 hover:border-primary"
                     >
                       <span class="font-medium hover:text-blue-400">
                         run.halo.plugins.photos
diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index 8d4fa103..7217742b 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -299,7 +299,7 @@ onMounted(handleFetchPlugin);
                       <ul class="space-y-2">
                         <li>
                           <div
-                            class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                            class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                           >
                             <input
                               class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -317,7 +317,7 @@ onMounted(handleFetchPlugin);
                         </li>
                         <li>
                           <div
-                            class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                            class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                           >
                             <input
                               class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -346,7 +346,7 @@ onMounted(handleFetchPlugin);
                       <ul class="space-y-2">
                         <li>
                           <div
-                            class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                            class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                           >
                             <input
                               class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -364,7 +364,7 @@ onMounted(handleFetchPlugin);
                         </li>
                         <li>
                           <div
-                            class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                            class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                           >
                             <input
                               class="h-4 w-4 rounded border-gray-300 text-indigo-600"
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 258b8b79..a5a8a6e9 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -300,7 +300,7 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li v-for="(role, index) in group.roles" :key="index">
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         v-model="formState.selectedRoleTemplates"
diff --git a/src/modules/system/roles/components/RoleCreationModal.vue b/src/modules/system/roles/components/RoleCreationModal.vue
index 93affa7c..42c5b792 100644
--- a/src/modules/system/roles/components/RoleCreationModal.vue
+++ b/src/modules/system/roles/components/RoleCreationModal.vue
@@ -162,7 +162,7 @@ watch(
                 <ul class="space-y-2">
                   <li v-for="(role, index) in group.roles" :key="index">
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         v-model="creationFormState.selectedRoleTemplates"
diff --git a/src/modules/system/users/PersonalAccessTokens.vue b/src/modules/system/users/PersonalAccessTokens.vue
index a99c1a8e..c1814542 100644
--- a/src/modules/system/users/PersonalAccessTokens.vue
+++ b/src/modules/system/users/PersonalAccessTokens.vue
@@ -54,7 +54,7 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -72,7 +72,7 @@ onMounted(() => {
                   </li>
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -98,7 +98,7 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -116,7 +116,7 @@ onMounted(() => {
                   </li>
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -140,7 +140,7 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -158,7 +158,7 @@ onMounted(() => {
                   </li>
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -185,7 +185,7 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
@@ -203,7 +203,7 @@ onMounted(() => {
                   </li>
                   <li>
                     <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-primary"
                     >
                       <input
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index 1e1bd798..aef17dba 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -215,7 +215,7 @@ onMounted(() => {
           >
             <div
               v-show="checkAll"
-              class="absolute inset-y-0 left-0 w-0.5 bg-themeable-primary"
+              class="absolute inset-y-0 left-0 w-0.5 bg-primary"
             ></div>
             <div class="relative flex flex-row items-center">
               <div class="mr-4 hidden items-center sm:flex">
diff --git a/tailwind.config.js b/tailwind.config.js
index e95e630d..82945ac9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,3 @@
-const { themeable } = require("tailwindcss-themeable");
-
 module.exports = {
   content: [
     "./index.html",
@@ -13,15 +11,30 @@ module.exports = {
     require("tailwindcss-safe-area"),
     require("@tailwindcss/aspect-ratio"),
     require("@formkit/themes/tailwindcss"),
-    themeable({
-      defaultTheme: "default",
-      themes: [
-        {
-          name: "default",
-          palette: {
+    require("tailwindcss-themer")({
+      defaultTheme: {
+        extend: {
+          colors: {
             primary: "#4CCBA0",
             secondary: "#0E1731",
           },
+          borderRadius: {
+            base: "4px",
+          },
+        },
+      },
+      themes: [
+        {
+          name: "theme-dark",
+          extend: {
+            colors: {
+              primary: "black",
+              secondary: "#0E1731",
+            },
+            borderRadius: {
+              base: "2px",
+            },
+          },
         },
       ],
     }),
