diff --git a/.vite/lib/content-scripts.js b/.vite/lib/content-scripts.js
index 55f886c..34f8653 100644
--- a/.vite/lib/content-scripts.js
+++ b/.vite/lib/content-scripts.js
@@ -112,6 +112,9 @@ export async function buildStyle(buildOptions) {
         }
       },
       emptyOutDir: false,
+    },
+    resolve: {
+      alias: makeAliases(buildOptions.rootDir)
     }
   });
 
diff --git a/src/styles/booru-colors.scss b/src/styles/booru-colors.scss
new file mode 100644
index 0000000..5de64ab
--- /dev/null
+++ b/src/styles/booru-colors.scss
@@ -0,0 +1,4 @@
+// These variables are defined dynamically based on the category of the tag
+$resolved-tag-background: var(--tag-background);
+$resolved-tag-border: var(--tag-border);
+$resolved-tag-color: var(--tag-color);
diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index a6ec9e9..a00b0b1 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -1,4 +1,5 @@
-@use '../colors';
+@use '$styles/colors';
+@use '$styles/booru-colors';
 
 // This will fix wierd misplacing of the modified media boxes in the listing.
 .js-resizable-media-container {
@@ -62,17 +63,12 @@
 
     .tag {
       cursor: pointer;
-      padding: 0 6px;
+      padding: 5px;
       user-select: none;
 
       &:hover {
-        background: colors.$tag-text;
-        color: colors.$tag-background;
-      }
-
-      &[data-tag-category=error]:hover {
-        background: colors.$tag-error-text;
-        color: colors.$tag-error-background;
+        background: booru-colors.$resolved-tag-color;
+        color: booru-colors.$resolved-tag-background;
       }
 
       &.is-missing:not(.is-added),