diff --git a/src/styles/booru-colors.scss b/src/styles/booru-vars.scss
similarity index 62%
rename from src/styles/booru-colors.scss
rename to src/styles/booru-vars.scss
index 5de64ab..1db638d 100644
--- a/src/styles/booru-colors.scss
+++ b/src/styles/booru-vars.scss
@@ -1,3 +1,7 @@
+$background-color: var(--background-color);
+$media-border: var(--media-border);
+$media-box-color: var(--media-box-color);
+
 // These variables are defined dynamically based on the category of the tag
 $resolved-tag-background: var(--tag-background);
 $resolved-tag-border: var(--tag-border);
diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss
index a00b0b1..6edc8f7 100644
--- a/src/styles/content/listing.scss
+++ b/src/styles/content/listing.scss
@@ -1,5 +1,5 @@
 @use '$styles/colors';
-@use '$styles/booru-colors';
+@use '$styles/booru-vars';
 
 // This will fix wierd misplacing of the modified media boxes in the listing.
 .js-resizable-media-container {
@@ -67,8 +67,8 @@
       user-select: none;
 
       &:hover {
-        background: booru-colors.$resolved-tag-color;
-        color: booru-colors.$resolved-tag-background;
+        background: booru-vars.$resolved-tag-color;
+        color: booru-vars.$resolved-tag-background;
       }
 
       &.is-missing:not(.is-added),