diff --git a/templates/card.html b/templates/card.html
index 23e440f..02f2037 100644
--- a/templates/card.html
+++ b/templates/card.html
@@ -39,7 +39,7 @@
 
           {# Only show counter if more than 2 people gave the same reaction #}
           {% if reaction_count|int >= 2 %}
-        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-body-inverted text-body-inverted">
             {# Don't render reaction counts larger than 1000 #}
             {{ reaction_count if reaction_count <= 999 else '1K+' }}
           <span class="visually-hidden">
diff --git a/templates/static/gallery.css b/templates/static/gallery.css
index 013e21b..401055a 100644
--- a/templates/static/gallery.css
+++ b/templates/static/gallery.css
@@ -74,3 +74,15 @@
 .bd-mode-toggle .dropdown-menu .active .bi {
   display: block !important;
 }
+
+/*
+  Surprised this doesn't exist by default.
+  Inverted colors for the current theme; works with the color switcher
+*/
+.bg-body-inverted {
+  background-color: var(--bs-body-color);
+}
+
+.text-body-inverted {
+  color: var(--bs-body-bg);
+}