diff --git a/assets/css/components.pcss b/assets/css/components.pcss
index 8ed52106c..7410e57b3 100644
--- a/assets/css/components.pcss
+++ b/assets/css/components.pcss
@@ -1,14 +1,10 @@
 @layer components {
   .link {
     @apply text-blue-800 dark:text-blue-400;
-    text-decoration-color: theme('colors.blue.800');
+    @apply text-decoration-blue-800 dark:text-decoration-blue-400;
     text-decoration-line: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.1em;
-
-    @media (prefers-color-scheme: dark) {
-      text-decoration-color: theme('colors.blue.400');
-    }
   }
 
   .markdown {
diff --git a/assets/css/tailwind.pcss b/assets/css/tailwind.pcss
index b86ea0c90..b3952650d 100644
--- a/assets/css/tailwind.pcss
+++ b/assets/css/tailwind.pcss
@@ -4,3 +4,4 @@
 
 @import './base.pcss';
 @import './components.pcss';
+@import './utilities.pcss';
diff --git a/assets/css/utilities.pcss b/assets/css/utilities.pcss
index e69de29bb..a164d3bba 100644
--- a/assets/css/utilities.pcss
+++ b/assets/css/utilities.pcss
@@ -0,0 +1,11 @@
+@layer utilities {
+  @variants dark {
+    .text-decoration-blue-400 {
+      text-decoration-color: theme('colors.blue.400');
+    }
+
+    .text-decoration-blue-800 {
+      text-decoration-color: theme('colors.blue.800');
+    }
+  }
+}