From 752a4f41ad8a58ee9ac481e888dd757c768bc7d9 Mon Sep 17 00:00:00 2001
From: Afiq Yasin Ramadhan <AF2120@PID-PRODUCTENGINEER-AF2120.local>
Date: Wed, 5 Apr 2023 14:31:49 +0700
Subject: [PATCH] feat: (add darkmode version of filterbar, form-group,
 heading, input, input-file, input-group, input-password, input-pin,
 input-range, label, main, modal, nav, navbar, overlay, page, pagination,
 pdf-object, pdf-viewer, progress and radio)

---
 packages/tailwind-preset/index.js             |  2 +-
 src/components/avatar/Avatar.vue              |  3 +-
 src/components/badge/Badge.vue                | 59 ++++++++-----
 src/components/banner/Banner.vue              | 21 +++--
 src/components/breadcrumbs/BreadcrumbItem.vue |  3 +-
 .../breadcrumbs/BreadcrumbItemDropdown.vue    |  9 +-
 src/components/button-group/ButtonGroup.vue   |  6 +-
 src/components/button/Button.vue              | 75 +++++++++++------
 src/components/button/index.md                |  1 +
 src/components/calendar/Calendar.vue          | 12 ++-
 src/components/camera/Camera.vue              | 12 ++-
 src/components/caption/Caption.vue            |  3 +-
 src/components/card/Card.vue                  | 18 ++--
 src/components/chart/Chart.vue                |  3 +-
 src/components/checkbox/Checkbox.vue          | 27 ++++--
 src/components/collapse/Collapse.vue          |  3 +-
 .../contextual-bar/ContextualBar.vue          | 18 ++--
 src/components/cropper/Cropper.vue            |  7 +-
 src/components/datepicker/Datepicker.vue      |  3 +-
 src/components/divider/Divider.vue            | 18 ++--
 src/components/dot/Dot.vue                    | 18 ++--
 src/components/dropdown/Dropdown.vue          |  6 +-
 src/components/dropdown/DropdownItem.vue      | 12 ++-
 src/components/filterbar/Filterbar.vue        |  1 +
 src/components/form-group/FormGroup.vue       |  9 +-
 src/components/heading/Heading.vue            |  3 +-
 src/components/input-file/InputFile.vue       |  3 +
 src/components/input-group/InputGroup.vue     | 12 ++-
 .../input-group/InputGroupAddon.vue           |  3 +
 src/components/input-group/index.md           |  2 +-
 .../input-password/InputPassword.vue          |  2 +
 src/components/input-pin/index.md             |  2 -
 src/components/input-range/InputRange.vue     |  7 +-
 src/components/input/Input.vue                |  8 +-
 src/components/label/Label.vue                | 19 ++++-
 src/components/main/Main.vue                  | 10 ++-
 src/components/modal/Modal.vue                |  5 +-
 src/components/nav/Nav.vue                    | 24 +++++-
 src/components/nav/NavItem.vue                |  2 +
 src/components/nav/NavSubItem.vue             |  4 +
 src/components/nav/index.md                   | 16 ++--
 src/components/navbar/Navbar.vue              |  7 +-
 src/components/navbar/NavbarBrand.vue         |  3 +-
 src/components/navbar/NavbarNav.vue           | 15 ++--
 src/components/navbar/NavbarToggle.vue        |  3 +-
 src/components/overlay/Overlay.vue            |  1 +
 src/components/page/Page.vue                  |  3 +-
 src/components/pagination/Pagination.vue      | 23 +++--
 src/components/pdf-object/PdfObject.vue       |  4 +-
 .../pdf-object/PdfObjectDebugger.vue          |  1 +
 src/components/pdf-viewer/PdfError.vue        | 23 ++++-
 src/components/pdf-viewer/PdfLoading.vue      |  1 +
 src/components/pdf-viewer/PdfNavigation.vue   |  8 +-
 src/components/pdf-viewer/PdfViewer.vue       |  4 +
 src/components/progress/Progress.vue          | 18 ++--
 src/components/radio/Radio.vue                | 11 +++
 src/components/radio/index.md                 | 84 +++++++++----------
 57 files changed, 468 insertions(+), 212 deletions(-)

diff --git a/packages/tailwind-preset/index.js b/packages/tailwind-preset/index.js
index 36cb1d6659..b00f3ce4d7 100644
--- a/packages/tailwind-preset/index.js
+++ b/packages/tailwind-preset/index.js
@@ -168,7 +168,7 @@ module.exports = {
           'inverse': theme.colors.gray[0],
           'subtle' : {
             DEFAULT: theme.colors.gray[100],
-            alpha  : `rgba(${theme.colors.gray[70]}, ${theme.opacity[10]})`,
+            alpha  : `rgba(${theme.colors.gray[20]}, ${theme.opacity[10]})`,
           },
           'info': {
             DEFAULT : theme.colors.blue[90],
diff --git a/src/components/avatar/Avatar.vue b/src/components/avatar/Avatar.vue
index dd25099318..fea100ff15 100644
--- a/src/components/avatar/Avatar.vue
+++ b/src/components/avatar/Avatar.vue
@@ -135,7 +135,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .avatar {
-  @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle dark:text-dark-subtle bg-subtle dark:bg-dark-subtle;
+  @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
+  @apply dark:text-dark-subtle dark:bg-dark-subtle;
 
   &__image {
     @apply w-full h-full object-cover;
diff --git a/src/components/badge/Badge.vue b/src/components/badge/Badge.vue
index 522496b8a7..0a886ea2f4 100644
--- a/src/components/badge/Badge.vue
+++ b/src/components/badge/Badge.vue
@@ -59,7 +59,7 @@ export default defineComponent({
   * of badge
   */
   --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
-  --p-color-dark-primary-light: lighten(theme(colors.dark.brand.accent), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
 
   @apply inline-block font-bold text-xs px-2 py-0.5 text-on-emphasis dark:text-dark-on-emphasis rounded-full;
 
@@ -74,27 +74,33 @@ export default defineComponent({
       &--default {
         --p-bg-variant-default: theme(backgroundColor.inverse);
         --p-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        @apply bg-[color:var(--p-bg-variant-default)] dark:bg-[color:var(--p-bg-dark-variant-default)];
+        @apply bg-[color:var(--p-bg-variant-default)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-default)];
       }
 
       &--primary {
-        @apply bg-brand-accent dark:bg-dark-brand-accent;
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
       }
 
       &--info {
-        @apply bg-info-emphasis dark:bg-dark-info-emphasis;
+        @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
       }
 
       &--success {
-        @apply bg-success-emphasis dark:bg-dark-success-emphasis;
+        @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
       }
 
       &--warning {
-        @apply bg-warning-emphasis dark:bg-dark-warning-emphasis;
+        @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
       }
 
       &--danger {
-        @apply bg-danger-emphasis dark:bg-dark-danger-emphasis;
+        @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
       }
     }
   }
@@ -109,27 +115,33 @@ export default defineComponent({
       &--default {
         --p-color-variant-inverse: theme(textColor.subtle);
         --p-color-dark-variant-inverse: theme(textColor.dark.subtle);
-        @apply text-[color:var(--p-color-variant-inverse)] dark:text-[color:var(--p-color-dark-variant-inverse)];
+        @apply text-[color:var(--p-color-variant-inverse)];
+        @apply dark:text-[color:var(--p-color-dark-variant-inverse)];
       }
 
       &--primary {
-        @apply text-brand-accent dark:text-dark-brand-accent;
+        @apply text-brand-accent;
+        @apply dark:text-dark-brand-accent;
       }
 
       &--info {
-        @apply text-info dark:text-dark-info;
+        @apply text-info;
+        @apply dark:text-dark-info;
       }
 
       &--success {
-        @apply text-success dark:text-dark-success;
+        @apply text-success;
+        @apply dark:text-dark-success;
       }
 
       &--warning {
-        @apply text-warning dark:text-dark-warning;
+        @apply text-warning;
+        @apply dark:text-dark-warning;
       }
 
       &--danger {
-        @apply text-danger dark:text-dark-danger;
+        @apply text-danger;
+        @apply dark:text-dark-danger;
       }
     }
   }
@@ -143,27 +155,33 @@ export default defineComponent({
       &--default {
         --p-bg-variant-light: theme(backgroundColor.subtle.alpha);
         --p-bg-dark-variant-light: theme(backgroundColor.dark.subtle.alpha);
-        @apply bg-[color:var(--p-bg-variant-light)] dark:bg-[color:var(--p-bg-dark-variant-light)];
+        @apply bg-[color:var(--p-bg-variant-light)];
+        @apply dark:bg-[color:var(--p-bg-dark-variant-light)];
       }
 
       &--primary {
-        @apply bg-[color:var(--p-color-primary-light)] dark:bg-[color:var(--p-color-dark-primary-light)];
+        @apply bg-[color:var(--p-color-primary-light)];
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)];
       }
 
       &--info {
-        @apply bg-info dark:bg-dark-info;
+        @apply bg-info;
+        @apply dark:bg-dark-info;
       }
 
       &--success {
-        @apply bg-success dark:bg-dark-success;
+        @apply bg-success;
+        @apply dark:bg-dark-success;
       }
 
       &--warning {
-        @apply bg-warning dark:bg-dark-warning;
+        @apply bg-warning;
+        @apply dark:bg-dark-warning;
       }
 
       &--danger {
-        @apply bg-danger dark:bg-dark-danger;
+        @apply bg-danger;
+        @apply dark:bg-dark-danger;
       }
     }
   }
@@ -173,7 +191,8 @@ export default defineComponent({
   * in inverse and dot variant
   */
   &:where(.badge--variant-inverse, .badge--dot) {
-    @apply bg-default dark:bg-dark-default;
+    @apply bg-default;
+    @apply dark:bg-dark-default;
   }
 
   /**
diff --git a/src/components/banner/Banner.vue b/src/components/banner/Banner.vue
index 860ac70e79..5c7fa1c2fa 100644
--- a/src/components/banner/Banner.vue
+++ b/src/components/banner/Banner.vue
@@ -88,11 +88,13 @@ export default defineComponent({
 
 <style lang="postcss">
 .banner {
-  @apply p-4 flex space-x-2 rounded text-subtle dark:text-dark-subtle;
+  @apply p-4 flex space-x-2 rounded text-subtle;
+  @apply dark:text-dark-subtle;
 
   a {
     &:not(.btn) {
-      @apply underline decoration-solid text-info dark:text-dark-info;
+      @apply underline decoration-solid text-info;
+      @apply dark:text-dark-info;
     }
   }
 
@@ -105,18 +107,22 @@ export default defineComponent({
   }
 
   &&--info {
-    @apply bg-base dark:bg-dark-base;
+    @apply bg-base;
+    @apply dark:bg-dark-base;
 
     .banner__icon {
-      @apply text-info dark:text-dark-info;
+      @apply text-info;
+      @apply dark:text-dark-info;
     }
   }
 
   &&--danger {
-    @apply bg-danger dark:bg-dark-danger;
+    @apply bg-danger;
+    @apply dark:bg-dark-danger;
 
     .banner__icon {
-      @apply text-danger dark:text-dark-danger;
+      @apply text-danger;
+      @apply dark:text-dark-danger;
     }
   }
 
@@ -130,7 +136,8 @@ export default defineComponent({
   }
 
   &__close {
-    @apply cursor-pointer text-default/30 hover:text-default/50 dark:text-dark-default/30 hover:dark:text-dark-default/50;
+    @apply cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 }
 </style>
diff --git a/src/components/breadcrumbs/BreadcrumbItem.vue b/src/components/breadcrumbs/BreadcrumbItem.vue
index 5ec67bb99f..d9839cf062 100644
--- a/src/components/breadcrumbs/BreadcrumbItem.vue
+++ b/src/components/breadcrumbs/BreadcrumbItem.vue
@@ -84,7 +84,8 @@ export default defineComponent({
     }
 
     & > a {
-      @apply text-subtle dark:text-dark-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply text-subtle cursor-pointer underline decoration-solid hover:no-underline;
+      @apply dark:text-dark-subtle;
     }
 
     & > span {
diff --git a/src/components/breadcrumbs/BreadcrumbItemDropdown.vue b/src/components/breadcrumbs/BreadcrumbItemDropdown.vue
index 7b9385006e..422460415b 100644
--- a/src/components/breadcrumbs/BreadcrumbItemDropdown.vue
+++ b/src/components/breadcrumbs/BreadcrumbItemDropdown.vue
@@ -53,16 +53,19 @@ export default defineComponent({
 .breadcrumbs__item {
   &&--dropdown {
     .dropdown__activator {
-      @apply px-0 text-subtle dark:text-dark-subtle bg-transparent dark:bg-transparent border-transparent dark:border-transparent hover:shadow-none hover:border-transparent hover:dark:border-transparent hover:bg-transparent hover:dark:bg-transparent focus:shadow-none focus:border-transparent focus:dark:border-transparent focus:bg-transparent focus:dark:bg-transparent;
+      @apply px-0 text-subtle bg-transparent border-transparent hover:shadow-none hover:border-transparent hover:bg-transparent focus:shadow-none focus:border-transparent focus:bg-transparent;
+      @apply dark:text-dark-subtle dark:bg-transparent dark:border-transparent hover:dark:border-transparent hover:dark:bg-transparent focus:dark:border-transparent focus:dark:bg-transparent;
     }
   }
 
   &&--active {
     .dropdown__activator {
-      @apply text-default dark:text-dark-default;
+      @apply text-default;
+      @apply dark:text-dark-default;
 
       & > .dropdown__caret {
-        @apply text-subtle dark:text-dark-subtle;
+        @apply text-subtle;
+        @apply dark:text-dark-subtle;
       }
     }
   }
diff --git a/src/components/button-group/ButtonGroup.vue b/src/components/button-group/ButtonGroup.vue
index 656d73305d..aba7443bc0 100644
--- a/src/components/button-group/ButtonGroup.vue
+++ b/src/components/button-group/ButtonGroup.vue
@@ -100,7 +100,8 @@ export default defineComponent({
       &.btn--success,
       &.btn--warning,
       &.btn--danger {
-        @apply border-l-subtle-alpha dark:border-l-dark-subtle-alpha;
+        @apply border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
       }
     }
   }
@@ -126,7 +127,8 @@ export default defineComponent({
     */
     &:not(:first-child) {
       .btn {
-        @apply -ml-[1px] rounded-l-none border-l-subtle-alpha dark:border-l-dark-subtle-alpha;
+        @apply -ml-[1px] rounded-l-none border-l-subtle-alpha;
+        @apply dark:border-l-dark-subtle-alpha;
       }
     }
   }
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index d29c76a37f..1296d90933 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -163,38 +163,46 @@ export default defineComponent({
   * default style variant
   */
   &&--variant-solid {
-    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis dark:text-dark-state-emphasis;
+    @apply border border-solid hover:shadow-lg focus:shadow-none active:shadow-none text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
 
     &.btn {
       &--default {
-        @apply bg-default-alpha dark:bg-dark-default-alpha focus:bg-subtle-alpha focus:dark:bg-dark-subtle-alpha active:bg-subtle-alpha active:dark:bg-dark-subtle-alpha text-subtle dark:text-dark-subtle hover:text-default hover:dark:text-dark-default focus:text-default focus:dark:text-dark-default;
+        @apply bg-default-alpha focus:bg-subtle-alpha active:bg-subtle-alpha text-subtle hover:text-default focus:text-default;
+        @apply dark:bg-dark-default-alpha focus:dark:bg-dark-subtle-alpha active:dark:bg-dark-subtle-alpha dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       &--primary {
-        @apply bg-brand-accent dark:bg-dark-brand-accent hover:bg-[color:var(--p-color-primary-hover)] hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:bg-[color:var(--p-color-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
+        @apply bg-brand-accent hover:bg-[color:var(--p-color-primary-hover)] focus:bg-[color:var(--p-color-primary-focus)] active:bg-[color:var(--p-color-primary-focus)];
+        @apply dark:bg-dark-brand-accent hover:dark:bg-[color:var(--p-color-dark-primary-hover)] focus:dark:bg-[color:var(--p-color-dark-primary-focus)] active:dark:bg-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
-        @apply bg-info-emphasis dark:bg-dark-info-emphasis hover:bg-[color:var(--p-color-info-hover)] hover:dark:bg-[color:var(--p-color-dark-info-hover)] focus:bg-[color:var(--p-color-info-focus)] focus:dark:bg-[color:var(--p-color-dark-info-focus)] active:bg-[color:var(--p-color-info-focus)] active:dark:bg-[color:var(--p-color-dark-info-focus)];
+        @apply bg-info-emphasis hover:bg-[color:var(--p-color-info-hover)] focus:bg-[color:var(--p-color-info-focus)] active:bg-[color:var(--p-color-info-focus)];
+        @apply dark:bg-dark-info-emphasis hover:dark:bg-[color:var(--p-color-dark-info-hover)] focus:dark:bg-[color:var(--p-color-dark-info-focus)] active:dark:bg-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
-        @apply bg-success-emphasis dark:bg-dark-success-emphasis hover:bg-[color:var(--p-color-success-hover)] hover:dark:bg-[color:var(--p-color-dark-success-hover)] focus:bg-[color:var(--p-color-success-focus)] focus:dark:bg-[color:var(--p-color-dark-success-focus)] active:bg-[color:var(--p-color-success-focus)] active:dark:bg-[color:var(--p-color-dark-success-focus)];
+        @apply bg-success-emphasis hover:bg-[color:var(--p-color-success-hover)] focus:bg-[color:var(--p-color-success-focus)] active:bg-[color:var(--p-color-success-focus)];
+        @apply dark:bg-dark-success-emphasis hover:dark:bg-[color:var(--p-color-dark-success-hover)] focus:dark:bg-[color:var(--p-color-dark-success-focus)] active:dark:bg-[color:var(--p-color-dark-success-focus)]
       }
 
       &--warning {
-        @apply bg-warning-emphasis dark:bg-dark-warning-emphasis hover:bg-[color:var(--p-color-warning-hover)] hover:dark:bg-[color:var(--p-color-dark-warning-hover)] focus:bg-[color:var(--p-color-warning-focus)] focus:dark:bg-[color:var(--p-color-dark-warning-focus)] active:bg-[color:var(--p-color-warning-focus)] active:dark:bg-[color:var(--p-color-dark-warning-focus)];
+        @apply bg-warning-emphasis hover:bg-[color:var(--p-color-warning-hover)] focus:bg-[color:var(--p-color-warning-focus)] active:bg-[color:var(--p-color-warning-focus)];
+        @apply dark:bg-dark-warning-emphasis hover:dark:bg-[color:var(--p-color-dark-warning-hover)] focus:dark:bg-[color:var(--p-color-dark-warning-focus)] active:dark:bg-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
-        @apply bg-danger-emphasis dark:bg-dark-danger-emphasis hover:bg-[color:var(--p-color-danger-hover)] hover:dark:bg-[color:var(--p-color-dark-danger-hover)] focus:bg-[color:var(--p-color-danger-focus)] focus:dark:bg-[color:var(--p-color-dark-danger-focus)] active:bg-[color:var(--p-color-danger-focus)] active:dark:bg-[color:var(--p-color-dark-danger-focus)];
+        @apply bg-danger-emphasis hover:bg-[color:var(--p-color-danger-hover)] focus:bg-[color:var(--p-color-danger-focus)] active:bg-[color:var(--p-color-danger-focus)];
+        @apply dark:bg-dark-danger-emphasis hover:dark:bg-[color:var(--p-color-dark-danger-hover)] focus:dark:bg-[color:var(--p-color-dark-danger-focus)] active:dark:bg-[color:var(--p-color-dark-danger-focus)]
       }
     }
   }
 
   &&--variant-outline,
   &&--variant-ghost {
-    @apply border border-solid text-subtle dark:text-dark-subtle hover:text-default hover:dark:text-dark-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default focus:dark:text-dark-default active:text-default active:dark:text-dark-default;
+    @apply border border-solid text-subtle hover:text-default hover:shadow-lg focus:shadow-none active:shadow-none focus:text-default active:text-default;
+    @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
   }
 
   /**
@@ -207,27 +215,33 @@ export default defineComponent({
   &&--variant-outline {
     &.btn {
       &--default {
-        @apply border-default-alpha dark:border-dark-default-alpha hover:border-subtle-alpha hover:dark:border-dark-subtle-alpha active:border-subtle-alpha active:dark:border-dark-subtle-alpha focus:border-subtle-alpha focus:dark:border-dark-subtle-alpha;
+        @apply border-default-alpha hover:border-subtle-alpha active:border-subtle-alpha focus:border-subtle-alpha;
+        @apply dark:border-dark-default-alpha hover:dark:border-dark-subtle-alpha active:dark:border-dark-subtle-alpha focus:dark:border-dark-subtle-alpha;
       }
 
       &--primary {
-        @apply border-brand-accent dark:border-dark-brand-accent hover:border-[color:var(--p-color-primary-hover)] hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:border-[color:var(--p-color-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
+        @apply border-brand-accent hover:border-[color:var(--p-color-primary-hover)] focus:border-[color:var(--p-color-primary-focus)] active:border-[color:var(--p-color-primary-focus)];
+        @apply dark:border-dark-brand-accent hover:dark:border-[color:var(--p-color-dark-primary-hover)] focus:dark:border-[color:var(--p-color-dark-primary-focus)] active:dark:border-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
-        @apply border-info-emphasis dark:border-dark-info-emphasis hover:border-[color:var(--p-color-info-hover)] hover:dark:border-[color:var(--p-color-dark-info-hover)] focus:border-[color:var(--p-color-info-focus)] focus:dark:border-[color:var(--p-color-dark-info-focus)] active:border-[color:var(--p-color-info-focus)] active:dark:border-[color:var(--p-color-dark-info-focus)];
+        @apply border-info-emphasis hover:border-[color:var(--p-color-info-hover)] focus:border-[color:var(--p-color-info-focus)] active:border-[color:var(--p-color-info-focus)];
+        @apply dark:border-dark-info-emphasis hover:dark:border-[color:var(--p-color-dark-info-hover)] focus:dark:border-[color:var(--p-color-dark-info-focus)] active:dark:border-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
-        @apply border-success-emphasis dark:border-dark-success-emphasis hover:border-[color:var(--p-color-success-hover)] hover:dark:border-[color:var(--p-color-dark-success-hover)] focus:border-[color:var(--p-color-success-focus)] focus:dark:border-[color:var(--p-color-dark-success-focus)] active:border-[color:var(--p-color-success-focus)] active:dark:border-[color:var(--p-color-dark-success-fucus)];
+        @apply border-success-emphasis hover:border-[color:var(--p-color-success-hover)] focus:border-[color:var(--p-color-success-focus)] active:border-[color:var(--p-color-success-focus)];
+        @apply dark:border-dark-success-emphasis hover:dark:border-[color:var(--p-color-dark-success-hover)] focus:dark:border-[color:var(--p-color-dark-success-focus)] active:dark:border-[color:var(--p-color-dark-success-fucus)];
       }
 
       &--warning {
-        @apply border-warning-emphasis dark:border-dark-warning-emphasis hover:border-[color:var(--p-color-warning-hover)] hover:dark:border-[color:var(--p-color-dark-warning-hover)] focus:border-[color:var(--p-color-warning-focus)] focus:dark:border-[color:var(--p-color-dark-warning-focus)] active:border-[color:var(--p-color-warning-focus)] active:dark:border-[color:var(--p-color-dark-warning-focus)];
+        @apply border-warning-emphasis hover:border-[color:var(--p-color-warning-hover)] focus:border-[color:var(--p-color-warning-focus)] active:border-[color:var(--p-color-warning-focus)];
+        @apply dark:border-dark-warning-emphasis hover:dark:border-[color:var(--p-color-dark-warning-hover)] focus:dark:border-[color:var(--p-color-dark-warning-focus)] active:dark:border-[color:var(--p-color-dark-warning-focus)]
       }
 
       &--danger {
-        @apply border-danger-emphasis dark:border-dark-danger-emphasis hover:border-[color:var(--p-color-danger-hover)] hover:dark:border-[color:var(--p-color-dark-danger-hover)] focus:border-[color:var(--p-color-danger-focus)] focus:dark:border-[color:var(--p-color-dark-danger-focus)] active:border-[color:var(--p-color-danger-focus)] active:dark:border-[color:var(--p-color-dark-danger-focus)];
+        @apply border-danger-emphasis hover:border-[color:var(--p-color-danger-hover)] focus:border-[color:var(--p-color-danger-focus)] active:border-[color:var(--p-color-danger-focus)];
+        @apply dark:border-dark-danger-emphasis hover:dark:border-[color:var(--p-color-dark-danger-hover)] focus:dark:border-[color:var(--p-color-dark-danger-focus)] active:dark:border-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
@@ -236,7 +250,8 @@ export default defineComponent({
   * Button ghost variant
   */
   &&--variant-ghost {
-    @apply border-transparent dark:border-transparent bg-transparent dark:bg-transparent hover:border-default-alpha hover:dark:border-dark-default-alpha hover:bg-default-alpha hover:dark:bg-dark-default-alpha active:bg-default-alpha active:dark:bg-dark-default-alpha focus:bg-default-alpha focus:dark:bg-dark-default-alpha active:border-default-alpha active:dark:border-dark-default-alpha focus:border-default-alpha focus:dark:border-dark-default-alpha;
+    @apply border-transparent bg-transparent hover:border-default-alpha hover:bg-default-alpha active:bg-default-alpha focus:bg-default-alpha active:border-default-alpha focus:border-default-alpha ;
+    @apply dark:border-transparent dark:bg-transparent hover:dark:border-dark-default-alpha hover:dark:bg-dark-default-alpha active:dark:bg-dark-default-alpha focus:dark:bg-dark-default-alpha active:dark:border-dark-default-alpha focus:dark:border-dark-default-alpha;
   }
 
   /**
@@ -248,43 +263,53 @@ export default defineComponent({
 
     &.btn {
       &--default {
-        @apply text-subtle dark:text-dark-subtle hover:text-default hover:dark:text-dark-default focus:text-default focus:dark:text-dark-default active:text-default active:dark:text-dark-default;
+        @apply text-subtle hover:text-default focus:text-default active:text-default ;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default active:dark:text-dark-default;
       }
 
       &--primary {
-        @apply text-brand-accent dark:text-dark-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply text-brand-accent hover:text-[color:var(--p-color-primary-hover)] focus:text-[color:var(--p-color-primary-focus)] active:text-[color:var(--p-color-primary-focus)];
+        @apply dark:text-dark-brand-accent hover:dark:text-[color:var(--p-color-dark-primary-hover)] focus:dark:text-[color:var(--p-color-dark-primary-focus)] active:dark:text-[color:var(--p-color-dark-primary-focus)];
       }
 
       &--info {
-        @apply text-info dark:text-dark-info hover:text-[color:var(--p-color-info-hover)] hover:dark:text-[color:var(--p-color-dark-info-hover)] focus:text-[color:var(--p-color-info-focus)] focus:dark:text-[color:var(--p-color-dark-info-focus)] active:text-[color:var(--p-color-info-focus)] active:dark:text-[color:var(--p-color-dark-info-focus)];
+        @apply text-info hover:text-[color:var(--p-color-info-hover)] focus:text-[color:var(--p-color-info-focus)] active:text-[color:var(--p-color-info-focus)];
+        @apply dark:text-dark-info hover:dark:text-[color:var(--p-color-dark-info-hover)] focus:dark:text-[color:var(--p-color-dark-info-focus)] active:dark:text-[color:var(--p-color-dark-info-focus)];
       }
 
       &--success {
-        @apply text-success dark:text-dark-success hover:text-[color:var(--p-color-success-hover)] hover:dark:text-[color:var(--p-color-dark-success-hover)] focus:text-[color:var(--p-color-success-focus)] focus:dark:text-[color:var(--p-color-dark-success-focus)] active:text-[color:var(--p-color-success-focus)] active:dark:text-[color:var(--p-color-dark-success-focus)];
+        @apply text-success hover:text-[color:var(--p-color-success-hover)] focus:text-[color:var(--p-color-success-focus)] active:text-[color:var(--p-color-success-focus)];
+        @apply dark:text-dark-success hover:dark:text-[color:var(--p-color-dark-success-hover)] focus:dark:text-[color:var(--p-color-dark-success-focus)] active:dark:text-[color:var(--p-color-dark-success-focus)];
       }
 
       &--warning {
-        @apply text-warning dark:text-dark-warning hover:text-[color:var(--p-color-warning-hover)] hover:dark:text-[color:var(--p-color-dark-warning-hover)] focus:text-[color:var(--p-color-warning-focus)] focus:dark:text-[color:var(--p-color-dark-warning-focus)] active:text-[color:var(--p-color-warning-focus)] active:dark:text-[color:var(--p-color-dark-warning-focus)];
+        @apply text-warning hover:text-[color:var(--p-color-warning-hover)] focus:text-[color:var(--p-color-warning-focus)] active:text-[color:var(--p-color-warning-focus)];
+        @apply dark:text-dark-warning hover:dark:text-[color:var(--p-color-dark-warning-hover)] focus:dark:text-[color:var(--p-color-dark-warning-focus)] active:dark:text-[color:var(--p-color-dark-warning-focus)];
       }
 
       &--danger {
-        @apply text-danger dark:text-dark-danger hover:text-[color:var(--p-color-danger-hover)] hover:dark:text-[color:var(--p-color-dark-danger-hover)] focus:text-[color:var(--p-color-danger-focus)] focus:dark:text-[color:var(--p-color-dark-danger-focus)] active:text-[color:var(--p-color-danger-focus)] active:dark:text-[color:var(--p-color-dark-danger-focus)];
+        @apply text-danger hover:text-[color:var(--p-color-danger-hover)] focus:text-[color:var(--p-color-danger-focus)] active:text-[color:var(--p-color-danger-focus)];
+        @apply dark:text-dark-danger hover:dark:text-[color:var(--p-color-dark-danger-hover)] focus:dark:text-[color:var(--p-color-dark-danger-focus)] active:dark:text-[color:var(--p-color-dark-danger-focus)];
       }
     }
   }
 
   &&--variant-input {
-    @apply border border-solid border-muted dark:border-dark-muted text-subtle dark:text-dark-subtle font-normal bg-default dark:bg-dark-default hover:border-subtle hover:dark:border-dark-subtle focus:border-subtle focus:dark:border-dark-subtle active:outline-default active:dark:outline-dark-default;
+    @apply border border-solid border-muted text-subtle font-normal bg-default hover:border-subtle focus:border-subtle active:outline-default;
+    @apply dark:border-dark-muted dark:text-dark-subtle dark:bg-dark-default hover:dark:border-dark-subtle focus:dark:border-dark-subtle active:dark:outline-dark-default;
 
     .state--disabled & {
-      @apply bg-subtle dark:bg-dark-subtle border-muted dark:border-dark-muted pointer-events-none text-muted dark:text-dark-muted;
+      @apply bg-subtle border-muted pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-muted dark:text-dark-muted;
     }
 
     .state--error & {
-      @apply border-danger-emphasis dark:border-dark-danger-emphasis;
+      @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
 
       &:focus {
-        @apply ring-danger border-danger-emphasis dark:ring-dark-danger dark:border-dark-danger-emphasis;
+        @apply ring-danger border-danger-emphasis;
+        @apply dark:ring-dark-danger dark:border-dark-danger-emphasis;
       }
     }
   }
diff --git a/src/components/button/index.md b/src/components/button/index.md
index 8b25f69953..c01dc7d9fa 100644
--- a/src/components/button/index.md
+++ b/src/components/button/index.md
@@ -71,6 +71,7 @@ Button has 4 variants, `solid`, `outline`, `ghost`, `link`. Default is `solid`
     <p-button variant="outline">Click me</p-button>
     <p-button variant="ghost">Click me</p-button>
     <p-button variant="link">Click me</p-button>
+    <p-button variant="input" disabled>Click me</p-button>
   </div>
 </preview>
 
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 0e934c209c..fda976c935 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -244,7 +244,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .calendar {
-  @apply flex flex-col space-y-2 text-sm shadow-xl border-transparent dark:border-transparent;
+  @apply flex flex-col space-y-2 text-sm shadow-xl border-transparent;
+  @apply dark:border-transparent;
 
   &__nav {
     @apply flex justify-between space-x-2 mb-2;
@@ -258,18 +259,21 @@ export default defineComponent({
     @apply justify-center;
 
     &.btn--default {
-      @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent text-default dark:text-dark-subtle hover:dark:text-dark-default font-normal;
+      @apply border-transparent bg-transparent text-default font-normal;
+      @apply dark:border-transparent dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
 
       &.calendar__nav-title {
         @apply font-medium;
       }
 
       &[active="true"] {
-        @apply bg-info-emphasis dark:bg-dark-info-emphasis border-info-emphasis dark:border-dark-info-emphasis text-state-emphasis dark:text-dark-state-emphasis cursor-default;
+        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
       }
 
       &[disabled][active="false"] {
-        @apply text-muted dark:text-dark-muted;
+        @apply text-muted;
+        @apply dark:text-dark-muted;
       }
     }
 
diff --git a/src/components/camera/Camera.vue b/src/components/camera/Camera.vue
index c467850171..e7f4a8f037 100644
--- a/src/components/camera/Camera.vue
+++ b/src/components/camera/Camera.vue
@@ -363,7 +363,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .camera {
-  @apply bg-inverse dark:bg-dark-inverse w-full flex flex-col select-none relative overflow-hidden;
+  @apply bg-inverse w-full flex flex-col select-none relative overflow-hidden;
+  @apply dark:bg-dark-inverse;
 
   &__video {
     @apply flex-grow min-h-full max-w-full h-auto object-cover;
@@ -404,7 +405,8 @@ export default defineComponent({
   }
 
   &__off-info {
-    @apply absolute bottom-20 text-on-emphasis dark:text-dark-on-emphasis left-0 right-0 text-center text-sm;
+    @apply absolute bottom-20 text-on-emphasis left-0 right-0 text-center text-sm;
+    @apply dark:text-dark-on-emphasis;
   }
 
   &__controls {
@@ -412,10 +414,12 @@ export default defineComponent({
   }
 
   &__toast {
-    @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis dark:text-dark-on-emphasis px-4;
+    @apply absolute bottom-20 left-0 right-0 text-center text-on-emphasis;
+    @apply dark:text-dark-on-emphasis px-4;
 
     &-text {
-      @apply bg-inverse/80 dark:bg-dark-inverse/80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+      @apply bg-inverse/80 px-4 py-1 text-sm rounded shadow-md inline-block max-w-full truncate;
+      @apply dark:bg-dark-inverse/80;
     }
   }
 }
diff --git a/src/components/caption/Caption.vue b/src/components/caption/Caption.vue
index adf772af9b..46a00f8e95 100644
--- a/src/components/caption/Caption.vue
+++ b/src/components/caption/Caption.vue
@@ -55,7 +55,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .caption {
-  @apply block text-muted dark:text-dark-muted text-xs tracking-wide;
+  @apply block text-muted text-xs tracking-wide;
+  @apply dark:text-dark-muted;
 
   /**
   * Caption in tiny size
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
index 8d28dbcf94..c4d96cbd2a 100644
--- a/src/components/card/Card.vue
+++ b/src/components/card/Card.vue
@@ -141,7 +141,8 @@ export default defineComponent({
 * Last Update   : May 23, 2022
 */
 .card {
-  @apply border bg-default dark:bg-dark-default border-default dark:border-dark-default text-default dark:text-dark-default rounded;
+  @apply border bg-default border-default text-default rounded;
+  @apply dark:bg-dark-default dark:border-dark-default dark:text-dark-default;
 
   /*
   * Card Body & Card Header
@@ -160,7 +161,8 @@ export default defineComponent({
     }
 
     .card__section {
-      @apply border-b border-subtle-alpha dark:border-dark-subtle-alpha;
+      @apply border-b border-subtle-alpha;
+      @apply dark:border-dark-subtle-alpha;
 
       /**
       * Adding border-top in the first element
@@ -206,7 +208,8 @@ export default defineComponent({
   * If Card disabled
   */
   &&--disabled {
-    @apply bg-subtle dark:bg-dark-subtle;
+    @apply bg-subtle;
+    @apply dark:bg-dark-subtle;
   }
 
   /**
@@ -236,12 +239,14 @@ export default defineComponent({
     }
 
     &__dismiss {
-      @apply text-default/30 dark:text-dark-default/30 hover:text-default/50 hover:dark:text-dark-default/50 hover:cursor-pointer;
+      @apply text-default/30 hover:text-default/50 hover:cursor-pointer;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
   }
 
   &__section {
-    @apply border-b border-subtle-alpha dark:border-dark-subtle-alpha;
+    @apply border-b border-subtle-alpha;
+    @apply dark:border-dark-subtle-alpha;
 
     &:last-child {
       @apply border-b-0;
@@ -249,7 +254,8 @@ export default defineComponent({
 
     &&--disabled,
     &.card--disabled {
-      @apply bg-subtle dark:bg-dark-subtle;
+      @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
     }
 
     &.card--disabled {
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index 6e033069af..443fa9d5b8 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -121,6 +121,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .chart {
-  @apply w-full bg-default dark:bg-dark-default p-4;
+  @apply w-full bg-default p-4;
+  @apply dark:bg-dark-default;
 }
 </style>
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 9846ebced7..ff469ef561 100644
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -161,10 +161,12 @@ export default defineComponent({
   * with custom icon
   */
   &__icon {
-    @apply w-5 h-5 border rounded-tn border-subtle dark:border-dark-subtle inline-flex items-center justify-center bg-default dark:bg-dark-default;
+    @apply w-5 h-5 border rounded-tn border-subtle inline-flex items-center justify-center bg-default;
+    @apply dark:border-dark-subtle dark:bg-dark-default;
 
     > svg {
-      @apply w-3 fill-default dark:fill-dark-default;
+      @apply w-3 fill-default;
+      @apply dark:fill-dark-default;
     }
   }
 
@@ -176,7 +178,8 @@ export default defineComponent({
     &.checkbox {
       &--checked {
         .card {
-          @apply border-info-emphasis dark:border-dark-info-emphasis;
+          @apply border-info-emphasis;
+          @apply dark:border-dark-info-emphasis;
         }
       }
     }
@@ -194,7 +197,8 @@ export default defineComponent({
   * give color of checkbox label
   */
   &__label {
-    @apply text-default dark:text-dark-default;
+    @apply text-default;
+    @apply dark:text-dark-default;
   }
 
   /**
@@ -204,10 +208,12 @@ export default defineComponent({
   &--checked,
   &--indeterminate {
     .checkbox__icon {
-      @apply bg-info-emphasis dark:bg-dark-info-emphasis border-info-emphasis dark:border-dark-info-emphasis;
+      @apply bg-info-emphasis border-info-emphasis;
+      @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
 
       > svg {
-        @apply fill-default dark:fill-dark-inverse;
+        @apply fill-default;
+        @apply dark:fill-dark-inverse;
       }
     }
   }
@@ -220,10 +226,12 @@ export default defineComponent({
 
     &:not(.checkbox--checked, .checkbox--indeterminate) {
       .checkbox__icon {
-        @apply bg-subtle dark:bg-dark-subtle border-subtle dark:border-dark-subtle;
+        @apply bg-subtle border-subtle;
+        @apply dark:bg-dark-subtle dark:border-dark-subtle;
 
         > svg {
-          @apply fill-subtle dark:fill-dark-subtle;
+          @apply fill-subtle;
+          @apply dark:fill-dark-subtle;
         }
       }
     }
@@ -250,7 +258,8 @@ export default defineComponent({
 
     &:hover,
     &:focus-visible {
-      @apply bg-subtle dark:bg-dark-subtle;
+      @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
     }
   }
 }
diff --git a/src/components/collapse/Collapse.vue b/src/components/collapse/Collapse.vue
index 6273ff0b9d..0aef4e2122 100644
--- a/src/components/collapse/Collapse.vue
+++ b/src/components/collapse/Collapse.vue
@@ -86,7 +86,8 @@ export default defineComponent({
 <style lang="postcss">
 .collapse {
   &&--show {
-    @apply block visible text-default dark:text-dark-default;
+    @apply block visible text-default;
+    @apply dark:text-dark-default;
   }
 
   &:not(&--show) {
diff --git a/src/components/contextual-bar/ContextualBar.vue b/src/components/contextual-bar/ContextualBar.vue
index a7246d05b3..e84482484a 100644
--- a/src/components/contextual-bar/ContextualBar.vue
+++ b/src/components/contextual-bar/ContextualBar.vue
@@ -279,7 +279,8 @@ export default defineComponent({
 
     &__message {
       .caption {
-        @apply text-subtle dark:text-dark-subtle;
+        @apply text-subtle;
+        @apply dark:text-dark-subtle;
       }
     }
 
@@ -301,23 +302,28 @@ export default defineComponent({
   }
 
   &__close {
-    @apply absolute right-6 top-1/2 -translate-y-1/2 cursor-pointer text-default/30 dark:text-dark-default/30 hover:text-default/50 hover:dark:text-dark-default/50;
+    @apply absolute right-6 top-1/2 -translate-y-1/2 cursor-pointer text-default/30 hover:text-default/50;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 
   &&--dark {
-    @apply bg-inverse dark:bg-dark-inverse text-on-emphasis dark:text-dark-on-emphasis;
+    @apply bg-inverse text-on-emphasis;
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
     .contextual-bar__close {
-      @apply text-on-emphasis/30 dark:text-dark-on-emphasis/30 hover:text-on-emphasis/50 hover:dark:text-dark-on-emphasis/50;
+      @apply text-on-emphasis/30 hover:text-on-emphasis/50;
+      @apply dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
     }
   }
 
   &&--light {
-    @apply bg-base dark:bg-dark-base text-default dark:text-dark-default;
+    @apply bg-base text-default;
+    @apply dark:bg-dark-base dark:text-dark-default;
 
     .contextual-bar {
       &__icon {
-        @apply text-info dark:text-dark-info;
+        @apply text-info;
+        @apply dark:text-dark-info;
       }
     }
   }
diff --git a/src/components/cropper/Cropper.vue b/src/components/cropper/Cropper.vue
index 6f2b4a1828..1c32156c91 100644
--- a/src/components/cropper/Cropper.vue
+++ b/src/components/cropper/Cropper.vue
@@ -404,7 +404,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .cropper {
-  @apply bg-default dark:bg-dark-default w-full aspect-compat-square;
+  @apply bg-default w-full aspect-compat-square;
+  @apply dark:bg-dark-default;
 
   &__canvas {
     @apply hidden;
@@ -417,8 +418,8 @@ export default defineComponent({
   }
 
   &__mask {
-    @apply pointer-events-none touch-none select-none;
-    @apply border border-default dark:border-dark-default border-dashed box-border shadow-mask absolute inset-0 m-auto max-w-[66.666667%];
+    @apply pointer-events-none touch-none select-none border border-default border-dashed box-border shadow-mask absolute inset-0 m-auto max-w-[66.666667%];
+    @apply dark:border-dark-default;
   }
 
   &__image {
diff --git a/src/components/datepicker/Datepicker.vue b/src/components/datepicker/Datepicker.vue
index ca914ca426..0cec49d623 100644
--- a/src/components/datepicker/Datepicker.vue
+++ b/src/components/datepicker/Datepicker.vue
@@ -158,7 +158,8 @@ export default defineComponent({
   }
 
   &__icon {
-    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-muted dark:text-dark-muted pointer-events-none;
+    @apply absolute right-3 top-0 bottom-0 my-auto transition-transform duration-150 text-muted pointer-events-none;
+    @apply dark:text-dark-muted;
   }
 
   > .dropdown__menu {
diff --git a/src/components/divider/Divider.vue b/src/components/divider/Divider.vue
index 7eedeced08..4e39166498 100644
--- a/src/components/divider/Divider.vue
+++ b/src/components/divider/Divider.vue
@@ -34,7 +34,8 @@ export default defineComponent({
 
 <style lang="postcss">
 .divider {
-  @apply bg-subtle-alpha dark:bg-dark-subtle-alpha my-2;
+  @apply bg-subtle-alpha;
+  @apply dark:bg-dark-subtle-alpha my-2;
 
   &&--horizontal {
     @apply w-full h-[1px];
@@ -42,23 +43,28 @@ export default defineComponent({
 
   &&--vertical,
   .input-group > & {
-    @apply flex items-center my-0 py-3 border-subtle dark:border-dark-subtle bg-transparent dark:bg-dark-transparent z-1;
+    @apply flex items-center my-0 py-3 border-subtle bg-transparent z-1;
+    @apply dark:border-dark-subtle dark:bg-transparent;
 
     &::before {
-      @apply content-[''] bg-subtle-alpha dark:bg-dark-subtle-alpha w-[1px] h-full;
+      @apply content-[''] bg-subtle-alpha w-[1px] h-full;
+      @apply dark:bg-dark-subtle-alpha;
     }
   }
 
   .state--error & {
-    @apply border-danger-emphasis dark:border-dark-danger-emphasis;
+    @apply border-danger-emphasis;
+    @apply dark:border-dark-danger-emphasis;
 
     &::before {
-      @apply bg-danger-emphasis dark:bg-dark-danger-emphasis;
+      @apply bg-danger-emphasis;
+      @apply dark:bg-dark-danger-emphasis;
     }
   }
 
   .state--disabled & {
-    @apply bg-subtle dark:bg-dark-subtle border-subtle dark:border-dark-subtle pointer-events-none text-muted dark:text-dark-muted;
+    @apply bg-subtle border-subtle pointer-events-none text-muted;
+    @apply dark:bg-dark-subtle dark:border-dark-subtle dark:text-dark-muted;
   }
 }
 </style>
diff --git a/src/components/dot/Dot.vue b/src/components/dot/Dot.vue
index 940c2a9f9c..09283b08e4 100644
--- a/src/components/dot/Dot.vue
+++ b/src/components/dot/Dot.vue
@@ -69,27 +69,33 @@ export default defineComponent({
   * warning & danger
   */
   &&--default {
-    @apply bg-inverse dark:bg-dark-inverse;
+    @apply bg-inverse;
+    @apply dark:bg-dark-inverse;
   }
 
   &&--primary {
-    @apply bg-brand-accent dark:bg-dark-brand-accent;
+    @apply bg-brand-accent;
+    @apply dark:bg-dark-brand-accent;
   }
 
   &&--info {
-    @apply bg-info-emphasis dark:bg-dark-info-emphasis;
+    @apply bg-info-emphasis;
+    @apply dark:bg-dark-info-emphasis;
   }
 
   &&--success {
-    @apply bg-success-emphasis dark:bg-dark-success-emphasis;
+    @apply bg-success-emphasis;
+    @apply dark:bg-dark-success-emphasis;
   }
 
   &&--warning {
-    @apply bg-warning-emphasis dark:bg-dark-warning-emphasis;
+    @apply bg-warning-emphasis;
+    @apply dark:bg-dark-warning-emphasis;
   }
 
   &&--danger {
-    @apply bg-danger-emphasis dark:bg-dark-danger-emphasis;
+    @apply bg-danger-emphasis;
+    @apply dark:bg-dark-danger-emphasis;
   }
 
   /**
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index cd6770fb5a..8145b445ac 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -287,7 +287,8 @@ export default defineComponent({
   @apply relative inline-flex;
 
   &__menu {
-    @apply max-h-64 border rounded w-full min-w-[15rem] bg-default dark:bg-dark-default z-10 border-default dark:border-dark-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply max-h-64 border rounded w-full min-w-[15rem] bg-default z-10 border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;
+    @apply dark:bg-dark-default dark:border-dark-default;
 
     &__container {
       > .dropdown__item {
@@ -312,7 +313,8 @@ export default defineComponent({
     .dropdown {
       &__menu {
         :where(.checkbox, .radio, .dropdown__item) {
-          @apply border-b border-solid border-b-subtle-alpha dark:border-b-dark-subtle-alpha last:border-b-0;
+          @apply border-b border-solid border-b-subtle-alpha last:border-b-0;
+          @apply dark:border-b-dark-subtle-alpha;
         }
       }
     }
diff --git a/src/components/dropdown/DropdownItem.vue b/src/components/dropdown/DropdownItem.vue
index 1e055ac6c7..18a688ce61 100644
--- a/src/components/dropdown/DropdownItem.vue
+++ b/src/components/dropdown/DropdownItem.vue
@@ -72,19 +72,23 @@ export default defineComponent({
 
 <style lang="postcss">
 .dropdown__item {
-  @apply px-4 py-2 block cursor-pointer text-default dark:text-dark-default w-full select-none text-left;
+  @apply px-4 py-2 block cursor-pointer text-default w-full select-none text-left;
+  @apply dark:text-dark-default;
 
   &:is(a) {
-    @apply hover:text-default hover:dark:text-dark-default;
+    @apply hover:text-default;
+    @apply hover:dark:text-dark-default;
   }
 
   &:hover,
   &:focus-visible {
-    @apply bg-default-alpha dark:bg-dark-default-alpha;
+    @apply bg-default-alpha;
+    @apply dark:bg-dark-default-alpha;
   }
 
   &&--active {
-    @apply bg-default-alpha dark:bg-dark-default-alpha cursor-default;
+    @apply bg-default-alpha;
+    @apply dark:bg-dark-default-alpha cursor-default;
   }
 }
 </style>
diff --git a/src/components/filterbar/Filterbar.vue b/src/components/filterbar/Filterbar.vue
index 417af4c076..0c069288e8 100644
--- a/src/components/filterbar/Filterbar.vue
+++ b/src/components/filterbar/Filterbar.vue
@@ -104,6 +104,7 @@ export default defineComponent({
       &.btn--default,
       & .dropdown__activator.btn--default {
         @apply bg-inverse text-on-emphasis border-inverse;
+        @apply dark:bg-dark-inverse dark:text-dark-on-emphasis dark:border-dark-inverse;
       }
     }
   }
diff --git a/src/components/form-group/FormGroup.vue b/src/components/form-group/FormGroup.vue
index b9f095edf0..7f438bfe54 100644
--- a/src/components/form-group/FormGroup.vue
+++ b/src/components/form-group/FormGroup.vue
@@ -85,23 +85,28 @@ export default defineComponent({
   @apply flex flex-col mb-4;
 
   &__label {
-    @apply font-bold text-xs mb-2 relative;
+    @apply font-bold text-xs mb-2 relative text-default;
+    @apply dark:text-dark-default;
 
     > sup {
       @apply text-danger;
+      @apply dark:text-dark-danger;
     }
   }
 
   & > &__description {
     @apply text-xs my-2 text-subtle;
+    @apply dark:text-dark-subtle;
   }
 
   & > &__error {
-    @apply text-xs text-danger my-2;
+    @apply text-xs text-danger;
+    @apply dark:text-dark-danger my-2;
   }
 
   &__hint {
     @apply absolute bottom-0 right-0 text-info cursor-pointer focus:outline-none;
+    @apply dark:text-dark-info;
   }
 }
 </style>
diff --git a/src/components/heading/Heading.vue b/src/components/heading/Heading.vue
index db2fee37e4..ffeb322b8e 100644
--- a/src/components/heading/Heading.vue
+++ b/src/components/heading/Heading.vue
@@ -89,7 +89,8 @@ export default defineComponent({
     */
 
     :where(&--normal, &--medium, &--bold) {
-      @apply text-default dark:text-dark-default;
+      @apply text-default;
+      @apply dark:text-dark-default;
     }
 
     &--normal {
diff --git a/src/components/input-file/InputFile.vue b/src/components/input-file/InputFile.vue
index 2bacd71628..de28bffb14 100644
--- a/src/components/input-file/InputFile.vue
+++ b/src/components/input-file/InputFile.vue
@@ -186,6 +186,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply bg-subtle text-muted;
+      @apply dark:bg-dark-subtle dark:text-dark-muted;
     }
 
     .input-group__addon {
@@ -201,6 +202,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-subtle;
+      @apply dark:border-dark-subtle;
     }
   }
 
@@ -214,6 +216,7 @@ export default defineComponent({
     .input-group__addon,
     .input-group .input__form {
       @apply border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis;
     }
   }
 }
diff --git a/src/components/input-group/InputGroup.vue b/src/components/input-group/InputGroup.vue
index fb6f7b92cd..328080e434 100644
--- a/src/components/input-group/InputGroup.vue
+++ b/src/components/input-group/InputGroup.vue
@@ -70,9 +70,11 @@ export default defineComponent({
 
   &:has(:first-child:is(.input-group__addon):nth-last-child(2)) {
     @apply rounded bg-default focus-within:ring-4 focus-within:ring-subtle/10 border border-solid border-muted hover:border-subtle focus-within:border-subtle;
+    @apply dark:bg-dark-default focus-within:dark:ring-dark-subtle/10 dark:border-dark-muted hover:dark:border-dark-subtle focus-within:dark:border-dark-subtle;
 
     .input {
       @apply bg-transparent;
+      @apply dark:bg-transparent;
     }
 
     .input > .input__form,
@@ -86,11 +88,13 @@ export default defineComponent({
 
     &.input-group--disabled {
       @apply border-subtle;
+      @apply dark:border-dark-subtle;
     }
 
     &.state--error,
     &.input-group--error {
       @apply border-danger-emphasis hover:border-danger-emphasis focus-within:ring-danger focus-within:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus-within:dark:ring-dark-danger focus-within:dark:border-dark-danger-emphasis;
     }
   }
 
@@ -98,11 +102,13 @@ export default defineComponent({
   & > .input:not(:first-child) > .input__form,
   & > .select:not(:first-child) > .input > .input__form {
     @apply rounded-l-none border-l-transparent;
+    @apply dark:border-l-transparent;
   }
 
   & > .input-group__addon:not(:last-child),
   & > .input:not(:last-child) > .input__form {
     @apply rounded-r-none border-r-transparent;
+    @apply dark:border-r-transparent;
   }
 
   & > .select:not(:last-child) > .input > .input__form {
@@ -134,6 +140,7 @@ export default defineComponent({
       &:hover,
       &:focus {
         @apply z-[2] border-l-subtle border-r-subtle;
+        @apply dark:border-l-dark-subtle dark:border-r-dark-subtle;
       }
     }
   }
@@ -152,10 +159,13 @@ export default defineComponent({
 
   &&--disabled {
     @apply border-subtle border-solid border rounded;
+    @apply dark:border-dark-subtle;
 
     > .input > .input__form,
-    > .input-group__addon {
+    > .input-group__addon,
+    > .btn.btn--variant-input {
       @apply border-transparent;
+      @apply dark:border-transparent;
     }
 
     > .input:first-child .input__form,
diff --git a/src/components/input-group/InputGroupAddon.vue b/src/components/input-group/InputGroupAddon.vue
index 79c2a7b420..8a30cf7957 100644
--- a/src/components/input-group/InputGroupAddon.vue
+++ b/src/components/input-group/InputGroupAddon.vue
@@ -8,6 +8,7 @@
 .input-group {
   &__addon {
     @apply flex px-3 items-center rounded border border-solid border-muted outline-none text-muted bg-default;
+    @apply dark:border-dark-muted dark:text-dark-muted dark:bg-dark-default;
 
     .input-group--xs > & {
       @apply text-sm py-[2px];
@@ -28,11 +29,13 @@
     .state--error &,
     .input-group--error & {
       @apply border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
     }
 
     .state--disabled &,
     .input-group--disabled & {
       @apply bg-subtle border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-subtle  dark:text-dark-muted;
     }
   }
 }
diff --git a/src/components/input-group/index.md b/src/components/input-group/index.md
index 593b888a45..7a5a2bfcba 100644
--- a/src/components/input-group/index.md
+++ b/src/components/input-group/index.md
@@ -99,7 +99,7 @@ description: Combine multiple input in singleline.
 ### Input and Select
 
 <preview>
-  <p-input-group size="lg">
+  <p-input-group>
     <p-select v-model="select" :options="['A', 'B', 'C']" />
     <p-input />
   </p-input-group>
diff --git a/src/components/input-password/InputPassword.vue b/src/components/input-password/InputPassword.vue
index f2d911a3f6..b7faddff11 100644
--- a/src/components/input-password/InputPassword.vue
+++ b/src/components/input-password/InputPassword.vue
@@ -48,9 +48,11 @@ export default defineComponent({
 
   &__toggle {
     @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-1 text-default/30 hover:text-subtle;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-subtle;
 
     .input--disabled ~ & {
       @apply pointer-events-none text-muted;
+      @apply dark:text-dark-muted;
     }
   }
 
diff --git a/src/components/input-pin/index.md b/src/components/input-pin/index.md
index f2fb4a35cd..fffef5121f 100644
--- a/src/components/input-pin/index.md
+++ b/src/components/input-pin/index.md
@@ -94,8 +94,6 @@ Like other input, input value can be binding with `v-model`.
 </template>
 ```
 
-## Binding v-model
-
 ## API
 
 ### Props
diff --git a/src/components/input-range/InputRange.vue b/src/components/input-range/InputRange.vue
index 1485fd6749..08e925bc8d 100644
--- a/src/components/input-range/InputRange.vue
+++ b/src/components/input-range/InputRange.vue
@@ -276,6 +276,7 @@ export default defineComponent({
 
   &__tracks {
     @apply relative flex w-full bg-base cursor-pointer overflow-visible rounded;
+    @apply dark:bg-dark-base;
   }
 
   &__track {
@@ -283,6 +284,7 @@ export default defineComponent({
 
     &-active {
       @apply bg-info-emphasis relative text-center;
+      @apply dark:bg-dark-info-emphasis;
     }
 
     &-upper {
@@ -291,12 +293,13 @@ export default defineComponent({
   }
 
   &__thumb {
-    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-muted;
-    @apply touch-none select-none;
+    @apply w-4 h-4 rounded-full bg-default shadow-sm absolute top-1/2 bottom-0 -translate-y-1/2 border border-muted touch-none select-none;
+    @apply dark:bg-dark-default dark:border-dark-muted;
 
     &:hover,
     &:active {
       @apply ring ring-info border-info-emphasis;
+      @apply dark:ring-dark-info dark:border-dark-info-emphasis;
     }
 
     &-start {
diff --git a/src/components/input/Input.vue b/src/components/input/Input.vue
index ce84603aee..b853536b70 100644
--- a/src/components/input/Input.vue
+++ b/src/components/input/Input.vue
@@ -114,18 +114,22 @@ export default defineComponent({
 <style lang="postcss">
 .input {
   @apply w-full relative bg-default rounded;
+  @apply dark:bg-dark-default;
 
   &__form {
-    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle placeholder:text-muted w-full outline-none;
+    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle text-default placeholder:text-muted w-full outline-none;
+    @apply dark:border-dark-muted hover:dark:border-dark-subtle dark:text-dark-default placeholder:dark:text-dark-muted;
 
     &:disabled,
     &--disabled,
     .state--disabled & {
       @apply bg-subtle border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-subtle dark:border-dark-subtle  dark:text-dark-muted;
     }
 
     &:focus {
       @apply border-subtle ring-4 ring-subtle/10 z-[1];
+      @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
     }
   }
 
@@ -149,10 +153,12 @@ export default defineComponent({
   &--error,
   &-group--error.input-group .input > .input__form {
     @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+    @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
   }
 
   .input__clear {
     @apply text-default/30 cursor-pointer hover:text-danger z-1;
+    @apply dark:text-dark-default/30 hover:dark:text-dark-danger;
   }
 
   &--clearable {
diff --git a/src/components/label/Label.vue b/src/components/label/Label.vue
index ccf4292ed4..436a9283a2 100644
--- a/src/components/label/Label.vue
+++ b/src/components/label/Label.vue
@@ -95,6 +95,7 @@ export default defineComponent({
 
 .label {
   --p-color-primary-light: lighten(theme(colors.brand.accent), 40%);
+  --p-color-dark-primary-light: darken(theme(colors.dark.brand.accent), 40%);
 
   @apply inline-flex items-center border border-transparent;
 
@@ -103,6 +104,7 @@ export default defineComponent({
   */
   &__dismiss {
     @apply border-l ml-3 pl-1.5 hover:cursor-pointer border-subtle-alpha text-default/30 hover:text-default/50;
+    @apply dark:border-dark-subtle-alpha dark:text-dark-default/30 hover:dark:text-dark-default/50;
   }
 
   /**
@@ -131,35 +133,43 @@ export default defineComponent({
   * color variant
   */
   &--variant-default {
-    @apply text-on-emphasis;
+    @apply text-state-emphasis;
+    @apply dark:text-dark-state-emphasis;
 
     &.label {
       &--default {
         @apply bg-inverse;
+        @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
         .label__dismiss {
           @apply border-default/30 text-on-emphasis/30 hover:text-on-emphasis/50;
+          @apply dark:border-dark-default/30 dark:text-dark-on-emphasis/30 hover:dark:text-dark-on-emphasis/50;
         }
       }
 
       &--primary {
         @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
       }
 
       &--info {
         @apply bg-info-emphasis;
+        @apply dark:bg-dark-info-emphasis;
       }
 
       &--success {
         @apply bg-success-emphasis;
+        @apply dark:bg-dark-success-emphasis;
       }
 
       &--warning {
         @apply bg-warning-emphasis;
+        @apply dark:bg-dark-warning-emphasis;
       }
 
       &--danger {
         @apply bg-danger-emphasis;
+        @apply dark:bg-dark-danger-emphasis;
       }
     }
   }
@@ -172,26 +182,32 @@ export default defineComponent({
     &.label {
       &--default {
         @apply bg-subtle-alpha text-subtle;
+        @apply dark:bg-dark-subtle-alpha dark:text-dark-subtle;
       }
 
       &--primary {
         @apply bg-[color:var(--p-color-primary-light)] text-brand-accent;
+        @apply dark:bg-[color:var(--p-color-dark-primary-light)] dark:text-dark-brand-accent;
       }
 
       &--info {
         @apply bg-info text-info;
+        @apply dark:bg-dark-info dark:text-dark-info;
       }
 
       &--success {
         @apply bg-success text-success;
+        @apply dark:bg-dark-success dark:text-dark-success;
       }
 
       &--warning {
         @apply bg-warning text-warning;
+        @apply dark:bg-dark-warning dark:text-dark-warning;
       }
 
       &--danger {
         @apply bg-danger text-danger;
+        @apply dark:bg-dark-danger dark:text-dark-danger;
       }
     }
   }
@@ -206,6 +222,7 @@ export default defineComponent({
     * white background and bordered
     */
     @apply bg-default text-default border-default;
+    @apply dark:bg-dark-default dark:text-dark-default dark:border-dark-default;
 
     &.label {
       &--lg,
diff --git a/src/components/main/Main.vue b/src/components/main/Main.vue
index fb420e437f..c767a9a17b 100644
--- a/src/components/main/Main.vue
+++ b/src/components/main/Main.vue
@@ -10,15 +10,18 @@
   * Permalink
   */
   a {
-    --p-color-info-hover: darken(theme(backgroundColor.info.emphasis), 5%);
-    @apply underline text-info hover:bg-[color:var(--p-color-info-hover)];
+    --p-color-link-hover: darken(theme(textColor.link), 5%);
+    --p-color-dark-link-hover: darken(theme(textColor.link), 5%);
+    @apply underline text-link hover:text-[color:var(--p-color-info-hover)];
+    @apply dark:text-dark-link hover:dark:text-[color:var(--p-color-dark-info-hover)];
   }
 
   /**
   * Paragraph
   */
   p {
-    @apply text-base;
+    @apply text-base text-default;
+    @apply dark:text-dark-default;
   }
 
   /**
@@ -40,6 +43,7 @@
   */
   caption {
     @apply text-xs text-muted;
+    @apply dark:text-dark-muted;
   }
 }
 </style>
diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
index e28c12498d..984e59a3b1 100644
--- a/src/components/modal/Modal.vue
+++ b/src/components/modal/Modal.vue
@@ -197,7 +197,8 @@ export default defineComponent({
   /**
   * Set modal backdrop
   */
-  @apply w-full h-full overflow-y-auto fixed left-0 top-0 bg-inverse/30 z-[1060] overscroll-contain;
+  @apply z-[var(--p-modal-z-index)] w-full h-full overflow-y-auto fixed left-0 top-0 bg-inverse/30 text-default overscroll-contain;
+  @apply dark:bg-dark-inverse/30 dark:text-dark-default;
 
   &--banner {
     .modal {
@@ -221,9 +222,11 @@ export default defineComponent({
   */
   &__content {
     @apply my-8 bg-default rounded relative shadow-2xl;
+    @apply dark:bg-dark-default;
 
     .modal__dismiss {
       @apply absolute top-6 right-6 mt-1.5 hover:cursor-pointer z-[var(--p-modal-dismiss-z-index)] text-default/30 hover:text-default/50;
+      @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
   }
 
diff --git a/src/components/nav/Nav.vue b/src/components/nav/Nav.vue
index 6c5438a590..39e2acc268 100644
--- a/src/components/nav/Nav.vue
+++ b/src/components/nav/Nav.vue
@@ -110,15 +110,18 @@ export default defineComponent({
 
   & > &__item {
     .nav__link {
-      @apply text-subtle dark:text-muted;
+      @apply text-subtle;
+      @apply dark:text-dark-subtle;
 
       &:hover,
       &--active {
-        @apply text-default dark:text-on-emphasis;
+        @apply text-default;
+        @apply dark:text-dark-default;
       }
 
       &--disabled {
         @apply text-muted hover:text-muted focus:text-muted active:text-muted;
+        @apply dark:text-dark-muted hover:dark:text-dark-muted focus:dark:text-dark-muted active:dark:text-dark-muted;
       }
     }
   }
@@ -142,7 +145,8 @@ export default defineComponent({
     .nav__link {
       &--active {
         &:not(.nav__link--disabled) {
-          @apply border-b-inverse dark:border-b-default;
+          @apply border-b-inverse;
+          @apply dark:border-b-dark-inverse;
         }
       }
     }
@@ -158,6 +162,7 @@ export default defineComponent({
         &--active {
           &:not(.nav__link--disabled) {
             @apply border-r border-r-inverse rounded-tr-none;
+            @apply dark:border-r-dark-inverse;
           }
         }
       }
@@ -169,6 +174,7 @@ export default defineComponent({
           &--active {
             &:not(.nav__link--disabled) {
               @apply border-l border-l-inverse rounded-tl-none;
+              @apply dark:border-l-dark-inverse;
             }
           }
         }
@@ -190,6 +196,7 @@ export default defineComponent({
       &--active {
         &:not(.nav__link--disabled) {
           @apply border-t-default border-x-default bg-base;
+          @apply dark:border-t-dark-default dark:border-x-dark-default dark:bg-dark-base;
         }
       }
     }
@@ -203,6 +210,7 @@ export default defineComponent({
         &--active {
           &:not(.nav__link--disabled) {
             @apply border-l-default border-y-default border-r-transparent bg-base rounded-l rounded-r-none;
+            @apply dark:border-l-dark-default dark:border-y-dark-default dark:border-r-transparent dark:bg-dark-base;
           }
         }
       }
@@ -212,6 +220,7 @@ export default defineComponent({
           &--active {
             &:not(.nav__link--disabled) {
               @apply border-r-default border-y-default border-l-transparent rounded-r rounded-l-none;
+              @apply dark:border-r-dark-default dark:border-y-dark-default dark:border-l-transparent;
             }
           }
         }
@@ -233,7 +242,8 @@ export default defineComponent({
     .nav__link {
       &--active {
         &:not(.nav__link--disabled) {
-          @apply bg-base dark:bg-dark-default-alpha rounded-b;
+          @apply bg-base rounded-b;
+          @apply dark:bg-dark-base;
         }
       }
     }
@@ -247,6 +257,7 @@ export default defineComponent({
       .nav__link {
         &--active {
           @apply bg-transparent;
+          @apply dark:bg-transparent;
         }
       }
     }
@@ -316,6 +327,10 @@ export default defineComponent({
     .nav {
       @apply flex-col;
 
+      .nav__item {
+        @apply first:mx-0;
+      }
+
       &__link {
         @apply mb-0 -mr-[1px];
       }
@@ -348,6 +363,7 @@ export default defineComponent({
 
     .caption {
       @apply text-subtle;
+      @apply dark:text-dark-subtle;
     }
   }
 }
diff --git a/src/components/nav/NavItem.vue b/src/components/nav/NavItem.vue
index df9d939d25..48fc7eebdf 100644
--- a/src/components/nav/NavItem.vue
+++ b/src/components/nav/NavItem.vue
@@ -121,9 +121,11 @@ export default defineComponent({
 
   &__link {
     @apply block py-[10px] px-3 -mb-[1px] border border-transparent rounded-t text-base font-normal cursor-pointer hover:no-underline text-subtle hover:text-default;
+    @apply dark:text-dark-subtle hover:dark:text-dark-default;
 
     &&--active {
       @apply text-default cursor-default;
+      @apply dark:text-dark-default;
     }
 
     &&--disabled {
diff --git a/src/components/nav/NavSubItem.vue b/src/components/nav/NavSubItem.vue
index 22737b7c70..ffedd7be74 100644
--- a/src/components/nav/NavSubItem.vue
+++ b/src/components/nav/NavSubItem.vue
@@ -86,6 +86,7 @@ export default defineComponent({
     * will disabled too
     */
     @apply block text-base text-muted;
+    @apply dark:text-dark-muted;
 
     &&--collapsible {
       /**
@@ -95,6 +96,7 @@ export default defineComponent({
       */
       .nav__subitem__parent {
         @apply cursor-pointer text-default relative;
+        @apply dark:text-dark-default;
       }
 
       .nav__link__caret {
@@ -152,6 +154,7 @@ export default defineComponent({
     &:has(ul > li:not(.nav__item--disabled)) {
       .nav__subitem__parent {
         @apply text-default;
+        @apply dark:text-dark-default;
       }
     }
 
@@ -163,6 +166,7 @@ export default defineComponent({
     &:is(&--collapsible&--collapsed):has(ul > li:not(.nav__item--disabled)) {
       .nav__subitem__parent {
         @apply text-subtle hover:text-default;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
     }
   }
diff --git a/src/components/nav/index.md b/src/components/nav/index.md
index 9a5d2e9786..86951d99b3 100644
--- a/src/components/nav/index.md
+++ b/src/components/nav/index.md
@@ -253,21 +253,21 @@ To align Navigation, use `align` prop. Available value are `left`, `right` and `
 ### Badge
 <preview>
   <p-nav fill>
-    <p-nav-item active>To Sign <p-badge color="secondary" variant="light">25</p-badge></p-nav-item>
-    <p-nav-item>To Review <p-badge color="secondary" variant="light">25</p-badge></p-nav-item>
+    <p-nav-item active>To Sign <p-badge variant="light">25</p-badge></p-nav-item>
+    <p-nav-item>To Review <p-badge variant="light">25</p-badge></p-nav-item>
   </p-nav>
   <p-nav fill>
     <p-nav-item active>
       <template #icon>
         <IconView />
       </template>
-      To Sign <p-badge color="secondary" variant="light">25</p-badge>
+      To Sign <p-badge variant="light">25</p-badge>
     </p-nav-item>
     <p-nav-item>
       <template #icon>
         <IconView />
       </template>
-      To Review <p-badge color="secondary" variant="light">25</p-badge>
+      To Review <p-badge variant="light">25</p-badge>
     </p-nav-item>
   </p-nav>
 </preview>
@@ -277,11 +277,11 @@ To align Navigation, use `align` prop. Available value are `left`, `right` and `
   <p-nav fill>
     <p-nav-item active>
       To Sign
-      <p-badge color="secondary" variant="light">25</p-badge>
+      <p-badge variant="light">25</p-badge>
     </p-nav-item>
     <p-nav-item>
       To Review
-      <p-badge color="secondary" variant="light">25</p-badge>
+      <p-badge variant="light">25</p-badge>
     </p-nav-item>
   </p-nav>
   <p-nav fill>
@@ -289,13 +289,13 @@ To align Navigation, use `align` prop. Available value are `left`, `right` and `
       <template #icon>
         <IconView />
       </template>
-      To Sign <p-badge color="secondary" variant="light">25</p-badge>
+      To Sign <p-badge variant="light">25</p-badge>
     </p-nav-item>
     <p-nav-item>
       <template #icon>
         <IconView />
       </template>
-      To Review <p-badge color="secondary" variant="light">25</p-badge>
+      To Review <p-badge variant="light">25</p-badge>
     </p-nav-item>
   </p-nav>
 </template>
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index 5a0d95eca5..57f5873f7e 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -95,10 +95,13 @@ export default defineComponent({
 
 <style lang="postcss">
 .navbar {
-  @apply bg-default dark:bg-dark-subtle relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  --p-navbar-z-index: 1030;
+
+  @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
+  @apply dark:bg-dark-default;
 
   &&--fixed {
-    @apply fixed left-0 top-0 w-full z-[1030];
+    @apply fixed left-0 top-0 w-full z-[var(--p-navbar-z-index)];
   }
 
   &&--shadow {
diff --git a/src/components/navbar/NavbarBrand.vue b/src/components/navbar/NavbarBrand.vue
index c2c9fc95a6..4a21a93359 100644
--- a/src/components/navbar/NavbarBrand.vue
+++ b/src/components/navbar/NavbarBrand.vue
@@ -24,7 +24,8 @@ export default defineComponent({
 <style lang="postcss">
   .navbar {
     &__brand {
-      @apply inline-block mr-4 text-xl py-1 font-medium;
+      @apply inline-block mr-4 text-xl py-1 font-medium text-default;
+      @apply dark:text-dark-default;
 
       img {
         @apply h-7 w-auto inline-block;
diff --git a/src/components/navbar/NavbarNav.vue b/src/components/navbar/NavbarNav.vue
index 07d881b217..d8bff0bffc 100644
--- a/src/components/navbar/NavbarNav.vue
+++ b/src/components/navbar/NavbarNav.vue
@@ -57,7 +57,8 @@ export default defineComponent({
     .dropdown {
       &__activator {
         &.btn {
-          @apply px-3 bg-transparent hover:bg-transparent shadow-none rounded font-normal text-subtle dark:text-muted hover:text-default dark:hover:text-on-emphasis hover:shadow-none;
+          @apply px-3 bg-transparent hover:bg-transparent shadow-none rounded font-normal text-subtle hover:text-default hover:shadow-none;
+          @apply dark:bg-transparent hover:dark:bg-transparent dark:text-dark-subtle hover:dark:text-dark-default;
         }
 
         &:not(.btn--variant-outline) {
@@ -70,7 +71,8 @@ export default defineComponent({
       &--open {
         .dropdown__activator {
           &.btn {
-            @apply text-default dark:text-on-emphasis cursor-default border-transparent bg-transparent hover:bg-transparent;
+            @apply text-default cursor-default border-transparent bg-transparent hover:bg-transparent;
+            @apply dark:text-dark-default dark:bg-transparent hover:dark:bg-transparent;
           }
         }
       }
@@ -83,7 +85,8 @@ export default defineComponent({
         &--open {
           .dropdown__activator {
             &.btn {
-              @apply bg-subtle dark:bg-dark-subtle-alpha hover:bg-subtle hover:dark:bg-dark-subtle-alpha;
+              @apply bg-subtle hover:bg-subtle;
+              @apply dark:bg-dark-subtle hover:dark:bg-dark-subtle;
             }
           }
         }
@@ -91,7 +94,8 @@ export default defineComponent({
 
       &.nav--condensed {
         .nav__link--active {
-          @apply bg-subtle dark:bg-dark-default-alpha;
+          @apply bg-subtle;
+          @apply dark:bg-dark-subtle;
         }
       }
     }
@@ -107,7 +111,8 @@ export default defineComponent({
         &--open {
           .dropdown__activator {
             &.btn {
-              @apply border-b-inverse dark:border-b-dark-default;
+              @apply border-b-inverse;
+              @apply dark:border-b-dark-inverse;
             }
           }
         }
diff --git a/src/components/navbar/NavbarToggle.vue b/src/components/navbar/NavbarToggle.vue
index 53c97fb00a..abdeac4215 100644
--- a/src/components/navbar/NavbarToggle.vue
+++ b/src/components/navbar/NavbarToggle.vue
@@ -64,7 +64,8 @@ export default defineComponent({
     @apply inline-flex;
 
     &:is(.btn--variant-outline, .btn--default) {
-      @apply bg-subtle dark:border-subtle-alpha hover:shadow-none text-subtle dark:text-muted;
+      @apply bg-subtle hover:shadow-none text-subtle;
+      @apply dark:bg-dark-subtle dark:text-dark-subtle;
     }
 
     &&--all {
diff --git a/src/components/overlay/Overlay.vue b/src/components/overlay/Overlay.vue
index 609fc95bdb..a45379e21f 100644
--- a/src/components/overlay/Overlay.vue
+++ b/src/components/overlay/Overlay.vue
@@ -58,6 +58,7 @@ export default defineComponent({
 
 .overlay {
   @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
+  @apply dark:bg-dark-inverse/30;
 
   &__icon {
     @apply w-10 md:w-16 animate-[overlayLoading_1s_ease-in-out_infinite];
diff --git a/src/components/page/Page.vue b/src/components/page/Page.vue
index 5e20311ff6..93834a8dcf 100644
--- a/src/components/page/Page.vue
+++ b/src/components/page/Page.vue
@@ -68,7 +68,8 @@ export default defineComponent({
   --p-page-type-wide: 60px;
   --p-page-type-narrow: 230px;
 
-  @apply w-full;
+  @apply w-full text-default;
+  @apply dark:text-dark-default;
 
   &&--expand {
     &:where(&&-all, &&-lg, &&-md, &&-sm) {
diff --git a/src/components/pagination/Pagination.vue b/src/components/pagination/Pagination.vue
index d55ae8b95e..17e178fe7e 100644
--- a/src/components/pagination/Pagination.vue
+++ b/src/components/pagination/Pagination.vue
@@ -26,6 +26,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-first"
         icon
         @click="selectPage(1)">
         <slot name="first-navigation">
@@ -38,6 +39,7 @@
         variant="solid"
         size="sm"
         :disabled="!canPrev"
+        class="pagination__items__nav-prev"
         icon
         @click="prev">
         <slot name="prev-navigation">
@@ -67,6 +69,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-next"
         icon
         @click="next">
         <slot name="next-navigation">
@@ -82,6 +85,7 @@
         variant="solid"
         size="sm"
         :disabled="!canNext"
+        class="pagination__items__nav-last"
         icon
         @click="selectPage(totalPageCount)">
         <slot name="last-navigation">
@@ -339,7 +343,8 @@ export default defineComponent({
   &__quickjump,
   &__items,
   &__options {
-    @apply flex flex-wrap items-center;
+    @apply flex flex-wrap items-center text-default;
+    @apply dark:text-dark-default;
   }
 
   &__quickjump {
@@ -352,12 +357,16 @@ export default defineComponent({
     @apply space-x-2;
 
     .btn--icon.btn--sm {
-      @apply p-2 min-w-[34px];
+      @apply px-2 py-1 min-w-[34px];
+      &:is(.pagination__items__nav-first, .pagination__items__nav-prev, .pagination__items__nav-next, .pagination__items__nav-last) > svg {
+        @apply my-[0.15rem];
+      }
     }
   }
 
   &__count {
-    @apply ml-5;
+    @apply ml-5 text-default;
+    @apply dark:text-dark-default;
   }
 
   &__options {
@@ -374,10 +383,6 @@ export default defineComponent({
     &__menu {
       @apply min-w-fit;
     }
-
-    .input {
-      @apply py-1.5 leading-[1.4];
-    }
   }
 
   .btn {
@@ -389,9 +394,11 @@ export default defineComponent({
 
     &.btn--default {
       @apply bg-transparent hover:bg-base focus:bg-base border-transparent focus:border-default hover:border-default text-default font-normal focus:outline-none;
+      @apply dark:bg-transparent hover:dark:bg-dark-base focus:dark:bg-dark-base dark:border-transparent focus:dark:border-dark-default hover:dark:border-dark-default dark:text-dark-default;
 
       &[active="true"] {
-        @apply bg-info-emphasis border-info-emphasis text-on-emphasis cursor-default;
+        @apply bg-info-emphasis border-info-emphasis text-state-emphasis cursor-default;
+        @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis dark:text-dark-state-emphasis;
       }
 
       &[readonly] {
diff --git a/src/components/pdf-object/PdfObject.vue b/src/components/pdf-object/PdfObject.vue
index 09c7d2aff5..8f2bb7aa0c 100644
--- a/src/components/pdf-object/PdfObject.vue
+++ b/src/components/pdf-object/PdfObject.vue
@@ -320,6 +320,7 @@ export default defineComponent({
 
   &__container {
     @apply overflow-visible relative border-2 border-dashed border-subtle rounded w-full h-full;
+    @apply dark:border-dark-subtle;
 
     &,
     & > * {
@@ -335,7 +336,8 @@ export default defineComponent({
   }
 
   &__resize {
-    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-subtle-alpha rounded-full;
+    @apply absolute w-3 h-3 bottom-0 right-0 translate-x-1/2 translate-y-1/2 bg-subtle rounded-full;
+    @apply dark:bg-dark-subtle;
   }
 }
 </style>
diff --git a/src/components/pdf-object/PdfObjectDebugger.vue b/src/components/pdf-object/PdfObjectDebugger.vue
index e56830438d..7228a8a190 100644
--- a/src/components/pdf-object/PdfObjectDebugger.vue
+++ b/src/components/pdf-object/PdfObjectDebugger.vue
@@ -73,6 +73,7 @@ export default defineComponent({
 
   &__debugger {
     @apply grid grid-cols-1 p-4 bg-inverse text-on-emphasis absolute rounded w-[var(--p-pdf-debugger-size)];
+    @apply dark:bg-dark-inverse dark:text-dark-on-emphasis;
 
     > pre {
       @apply truncate;
diff --git a/src/components/pdf-viewer/PdfError.vue b/src/components/pdf-viewer/PdfError.vue
index 0310682227..f89c667b86 100644
--- a/src/components/pdf-viewer/PdfError.vue
+++ b/src/components/pdf-viewer/PdfError.vue
@@ -3,9 +3,9 @@
     v-p-aspect-ratio="1122/793"
     data-testid="pdf-error"
     class="pdf__error">
-    <h3 class="text-danger">
+    <Heading element="h3">
       Failed to load PDF
-    </h3>
+    </Heading>
     <dl class="mt-7">
       <dt>URL:</dt>
       <dd class="truncate">
@@ -31,9 +31,11 @@
 import type * as PDFJS from 'pdfjs-dist'
 import { pAspectRatio } from '../aspect-ratio'
 import { defineComponent, PropType } from 'vue-demi'
+import Heading from '../heading/Heading.vue'
 
 export default defineComponent({
   directives: { pAspectRatio },
+  components: { Heading },
   props     : {
     url: {
       type   : String,
@@ -56,6 +58,21 @@ export default defineComponent({
 
 <style lang="postcss">
 .pdf__error {
-  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto;
+  @apply shadow-lg mb-4 p-6 bg-danger w-full h-full max-w-[var(--p-pdf-container-width)] mx-auto text-default;
+  @apply dark:bg-dark-danger-emphasis dark:text-dark-default;
+
+  a {
+    &,
+    &:hover {
+      > code {
+        @apply text-danger;
+      }
+    }
+  }
+
+  :not(pre) code {
+    @apply bg-subtle-alpha text-danger;
+    @apply dark:bg-dark-danger dark:text-dark-danger;
+  }
 }
 </style>
diff --git a/src/components/pdf-viewer/PdfLoading.vue b/src/components/pdf-viewer/PdfLoading.vue
index 05a80fafd2..9745b1636e 100644
--- a/src/components/pdf-viewer/PdfLoading.vue
+++ b/src/components/pdf-viewer/PdfLoading.vue
@@ -23,6 +23,7 @@ export default defineComponent({
 <style lang="postcss">
 .pdf__loading {
   @apply shadow-lg mb-4 p-4 bg-default max-w-[var(--p-pdf-container-width)] mx-auto;
+  @apply dark:bg-dark-default;
 
   > img {
     @apply max-w-full object-contain h-auto;
diff --git a/src/components/pdf-viewer/PdfNavigation.vue b/src/components/pdf-viewer/PdfNavigation.vue
index 74ea2a699b..fac53d4f74 100644
--- a/src/components/pdf-viewer/PdfNavigation.vue
+++ b/src/components/pdf-viewer/PdfNavigation.vue
@@ -128,9 +128,11 @@ export default defineComponent({
 
     &-container {
       @apply flex bg-inverse text-subtlest rounded p-2 space-x-1 items-center;
+      @apply dark:text-dark-default;
 
       > .btn {
         @apply text-subtlest hover:text-muted;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default;
       }
 
       > .select {
@@ -138,15 +140,17 @@ export default defineComponent({
 
         > .input {
           @apply bg-default-alpha;
+          @apply dark:bg-dark-default-alpha;
 
           > .input__form {
-            @apply border-subtle-alpha bg-default-alpha;
+            @apply border-subtle-alpha bg-default-alpha text-state-emphasis;
+            @apply dark:border-dark-subtle-alpha dark:bg-dark-default-alpha dark:text-dark-state-emphasis;
           }
         }
       }
 
       > .divider {
-        @apply border-none bg-default-alpha;
+        @apply border-none bg-dark-subtle-alpha;
       }
     }
 
diff --git a/src/components/pdf-viewer/PdfViewer.vue b/src/components/pdf-viewer/PdfViewer.vue
index ed29988bd1..4f0d6034bf 100644
--- a/src/components/pdf-viewer/PdfViewer.vue
+++ b/src/components/pdf-viewer/PdfViewer.vue
@@ -238,6 +238,7 @@ export default defineComponent({
   --p-pdf-container-width: 793px;
 
   @apply relative overflow-hidden w-full flex flex-col bg-subtle z-1;
+  @apply dark:bg-dark-subtle;
 
   &__wrapper {
     @apply relative h-full w-full flex-grow;
@@ -257,16 +258,19 @@ export default defineComponent({
 
       &.hover {
         @apply ring-info ring;
+        @apply dark:ring-dark-info;
       }
     }
   }
 
   &__header {
     @apply z-1 bg-default shadow-lg;
+    @apply dark:bg-dark-default;
   }
 
   &__footer {
     @apply z-1 bg-default shadow-lg-top;
+    @apply dark:bg-dark-default;
   }
 }
 </style>
diff --git a/src/components/progress/Progress.vue b/src/components/progress/Progress.vue
index b1e73f2374..08dfa72b5c 100644
--- a/src/components/progress/Progress.vue
+++ b/src/components/progress/Progress.vue
@@ -95,6 +95,11 @@ export default defineComponent({
 
 <style lang="postcss">
 .progress {
+  --p-bg-bar-active-state: theme(backgroundColor.info.emphasis);
+  --p-bg-bar-normal-state: theme(backgroundColor.subtle.DEFAULT);
+  --p-bg-dark-bar-active-state: theme(backgroundColor.dark.info.emphasis);
+  --p-bg-dark-bar-normal-state: theme(backgroundColor.dark.subtle.DEFAULT);
+
   &__items {
     @apply flex overflow-hidden;
   }
@@ -113,15 +118,18 @@ export default defineComponent({
 
   &__point {
     @apply w-7 h-7 rounded-full bg-subtle flex items-center justify-center text-default;
+    @apply dark:bg-dark-subtle dark:text-dark-default;
   }
 
   &__bar {
     @apply absolute rounded-full transition-[background-position] ease-linear duration-150;
-    @apply from-[theme(backgroundColor.info.emphasis)_50%] to-[theme(backgroundColor.subtle.DEFAULT)_50%];
+    @apply from-[var(--p-bg-bar-active-state)_50%] to-[var(--p-bg-bar-normal-state)_50%];
+    @apply dark:from-[var(--p-bg-dark-bar-active-state)_50%] dark:to-[var(--p-bg-dark-bar-normal-state)_50%];
   }
 
   &__title {
     @apply truncate text-sm text-center w-full text-default;
+    @apply dark:text-dark-default;
   }
 
   & > .progress__title {
@@ -131,6 +139,7 @@ export default defineComponent({
   &--active {
     .progress__point {
       @apply bg-info-emphasis text-on-emphasis;
+      @apply dark:bg-dark-info-emphasis dark:text-dark-on-emphasis;
     }
   }
 
@@ -146,8 +155,7 @@ export default defineComponent({
     }
 
     .progress__bar {
-      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)];
-      @apply bg-gradient-to-r bg-[length:210%_100%] bg-right;
+      @apply w-[calc(100%_-_3rem)] h-1 top-5 right-[calc(50%_+_1.5rem)] bg-gradient-to-r bg-[length:210%_100%] bg-right;
     }
 
     .progress--active + .progress--active {
@@ -173,8 +181,7 @@ export default defineComponent({
     }
 
     .progress__bar {
-      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2;
-      @apply bg-gradient-to-b bg-bottom bg-[length:100%_210%];
+      @apply h-[calc(100%_-_4.25rem)] w-1 bottom-[calc(50%_+_2.25rem)] left-1/2 -translate-x-1/2 bg-gradient-to-b bg-bottom bg-[length:100%_210%];
     }
 
     .progress--active + .progress--active {
@@ -187,6 +194,7 @@ export default defineComponent({
   &--dot {
     .progress__point-item {
       @apply w-3 h-3 rounded-full bg-default;
+      @apply dark:bg-dark-default;
     }
   }
 
diff --git a/src/components/radio/Radio.vue b/src/components/radio/Radio.vue
index a83c2d81b6..a40fcf9191 100644
--- a/src/components/radio/Radio.vue
+++ b/src/components/radio/Radio.vue
@@ -163,9 +163,11 @@ export default defineComponent({
   */
   &__icon {
     @apply w-5 h-5 border rounded-full border-subtle inline-flex items-center justify-center bg-default;
+    @apply dark:border-dark-subtle dark:bg-dark-default;
 
     > svg {
       @apply w-3 fill-default;
+      @apply dark:fill-dark-default;
     }
   }
 
@@ -174,6 +176,7 @@ export default defineComponent({
   */
   &__label {
     @apply text-default;
+    @apply dark:text-dark-default;
   }
 
   /**
@@ -185,9 +188,11 @@ export default defineComponent({
     &:not(.radio--checked) {
       .radio__icon {
         @apply bg-subtle border-subtle;
+        @apply dark:bg-dark-subtle dark:border-dark-subtle;
 
         > svg {
           @apply fill-subtle;
+          @apply dark:fill-dark-subtle;
         }
       }
     }
@@ -200,12 +205,14 @@ export default defineComponent({
   &&--checked {
     .radio__icon {
       @apply bg-info-emphasis border-info-emphasis;
+      @apply dark:bg-dark-info-emphasis dark:border-dark-info-emphasis;
     }
 
     &.radio--checkbox {
       .radio__icon {
         > svg {
           @apply fill-default;
+          @apply dark:fill-dark-inverse;
         }
       }
     }
@@ -245,9 +252,11 @@ export default defineComponent({
     &.radio--checked {
       .radio__icon {
         @apply text-info visible;
+        @apply dark:text-dark-info;
 
         > svg {
           @apply fill-info-emphasis;
+          @apply dark:fill-dark-info-emphasis;
         }
       }
     }
@@ -268,6 +277,7 @@ export default defineComponent({
     &.radio--disabled {
       .card {
         @apply bg-subtle hover:shadow-none hover:cursor-default;
+        @apply dark:bg-dark-subtle;
       }
     }
   }
@@ -296,6 +306,7 @@ export default defineComponent({
     &:hover,
     &:focus-visible {
       @apply bg-subtle;
+      @apply dark:bg-dark-subtle;
     }
   }
 }
diff --git a/src/components/radio/index.md b/src/components/radio/index.md
index 3cac9fbe8b..f0a7b98e88 100644
--- a/src/components/radio/index.md
+++ b/src/components/radio/index.md
@@ -146,11 +146,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis' : isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis' : isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Olivia Withness
               <p-caption>olivia@eth.com</p-caption>
@@ -163,11 +163,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis' : isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis' : isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Hyuga Kojiro
               <p-caption>hyuga@gmail.com</p-caption>
@@ -180,11 +180,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis' : isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis' : isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Marsha Timoty
               <p-caption>timoty@marsha.com</p-caption>
@@ -207,11 +207,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Olivia Withness
               <p-caption>olivia@eth.com</p-caption>
@@ -224,11 +224,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Hyuga Kojiro
               <p-caption>hyuga@gmail.com</p-caption>
@@ -241,11 +241,11 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="px-4 py-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <div class="flex items-center space-x-3">
-            <IconBee class="text-muted" />
+            <IconBee class="text-muted dark:text-dark-muted" />
             <div>
               Marsha Timoty
               <p-caption>timoty@marsha.com</p-caption>
@@ -266,8 +266,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <IconBee />
         </p-card>
@@ -277,8 +277,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <IconBug />
         </p-card>
@@ -288,8 +288,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
             <IconBeeBat />
         </p-card>
@@ -309,8 +309,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <IconBee />
         </p-card>
@@ -320,8 +320,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
           <IconBug />
         </p-card>
@@ -331,8 +331,8 @@ Just set `appearance` to `none`, can create your own radio's appearance.
       <template #default="{ isChecked }">
         <p-card
           element="div"
-          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle"
-          :class="{ '!border-info-emphasis': isChecked }"
+          class="p-4 duration-200 ease-in-out hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle"
+          :class="{ '!border-info-emphasis dark:!border-dark-info-emphasis': isChecked }"
           sectioned>
             <IconBeeBat />
         </p-card>
@@ -353,7 +353,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#0065D1] !border-[#0065D1]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -365,7 +365,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#F5A623] !border-[#F5A623]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -377,7 +377,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#23B242] !border-[#23B242]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -399,7 +399,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#0065D1] !border-[#0065D1]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -411,7 +411,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#F5A623] !border-[#F5A623]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -423,7 +423,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           class="p-3 hover:shadow-md ease-in-out duration-200 !bg-[#23B242] !border-[#23B242]"
           sectioned>
           <IconCheck
-            class="duration-200 ease-in-out text-on-emphasis"
+            class="duration-200 ease-in-out text-on-emphasis dark:text-dark-on-emphasis"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -444,7 +444,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 01' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -457,7 +457,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 02' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -470,7 +470,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 03' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -493,7 +493,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 01' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -506,7 +506,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 02' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>
@@ -519,7 +519,7 @@ Just set `appearance` to `none`, can create your own radio's appearance.
           :class="{ 'after:absolute after:left-0 after:top-0 after:content-[\'\'] after:w-full after:h-full after:bg-inverse/50 after:z-[1]' : selected === 'image 03' }"
           sectioned>
           <IconCheck
-            class="ease-in-out duration-200 text-on-emphasis relative z-[2]"
+            class="ease-in-out duration-200 text-on-emphasis dark:text-dark-on-emphasis relative z-[2]"
             :class="[isChecked ? 'opacity-100' : 'opacity-0']" />
         </p-card>
       </template>