diff --git a/src/App.vue b/src/App.vue
index 5ae4f603..722d52ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -114,7 +114,7 @@ b {
 }
 
 .auto {
-    @apply @dark:(text-white bg-dark-900);
+    @apply dark:(text-white bg-dark-900);
 }
 
 .dark {
@@ -145,7 +145,7 @@ b {
 .auto .input,
 .auto .select,
 .auto .btn {
-    @apply @dark:(text-gray-400 bg-dark-400);
+    @apply dark:(text-gray-400 bg-dark-400);
 }
 
 .input {
@@ -166,7 +166,7 @@ hr {
 }
 
 .auto hr {
-    @apply @dark:border-dark-100;
+    @apply dark:border-dark-100;
 }
 
 h1,
@@ -199,7 +199,7 @@ h2 {
 }
 
 .auto .link {
-    @apply @dark:hover:(text-gray-300 underline underline-gray-300);
+    @apply dark:hover:(text-gray-300 underline underline-gray-300);
 }
 
 .dark .link-secondary {
@@ -207,7 +207,7 @@ h2 {
 }
 
 .auto .link-secondary {
-    @apply @dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
+    @apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
 }
 
 .line {
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 20c54c07..74833955 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -85,7 +85,7 @@ export default {
 }
 
 .auto .suggestions-container {
-    @apply @dark:bg-dark-400;
+    @apply dark:bg-dark-400;
 }
 
 .suggestion-selected {
@@ -97,7 +97,7 @@ export default {
 }
 
 .auto .suggestion-selected {
-    @apply @dark:bg-dark-100;
+    @apply dark:bg-dark-100;
 }
 
 .suggestion {
diff --git a/uno.config.js b/uno.config.js
index 651f69e7..bf0d1e67 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -9,7 +9,9 @@ import presetWebFonts from "@unocss/preset-web-fonts";
 export default defineConfig({
     transformers: [transformerDirective(), transformerVariantGroup()],
     presets: [
-        presetUno(),
+        presetUno({
+            dark: "media",
+        }),
         presetIcons(),
         presetWebFonts({
             provider: "none",