diff --git a/plugins/endpoints/frontend/views/EndpointsList.vue b/plugins/endpoints/frontend/views/EndpointsList.vue
index c2dc9cfe..6cf87bf1 100644
--- a/plugins/endpoints/frontend/views/EndpointsList.vue
+++ b/plugins/endpoints/frontend/views/EndpointsList.vue
@@ -274,6 +274,11 @@ function changePerPage(newPerPage) {
   padding: 0.8rem 0.95rem;
   cursor: pointer;
   font: inherit;
+  /* A button does NOT inherit color the way it inherits font, so without this
+     the tile renders in the browser default black - invisible on the dark
+     theme's card. The coloured tiles set their own color and hid the bug; the
+     plain total did not. */
+  color: var(--text);
   text-align: left;
 }
 
@@ -296,6 +301,21 @@ function changePerPage(newPerPage) {
 .fleet-tile.warn .n { color: var(--warning-dark); }
 .fleet-tile.bad .n { color: var(--danger); }
 
+/* Dark mode redefines --success and --warning to bright variants, but NOT the
+   -dark ones, which stay tuned for a white background. Left alone they render
+   dark green and dark amber on the dark card. Scoped to the stamped attribute
+   (the theme store always sets it) rather than prefers-color-scheme, which
+   would leak dark styling into light mode on a dark-OS machine. */
+[data-theme="dark"] .fleet-tile.ok .n { color: var(--success); }
+[data-theme="dark"] .fleet-tile.warn .n { color: var(--warning); }
+
+.health-pill.ok { color: var(--success-dark); }
+.health-pill.warning { color: var(--warning-dark); }
+.health-pill.critical { color: var(--danger); }
+
+[data-theme="dark"] .health-pill.ok { color: var(--success); }
+[data-theme="dark"] .health-pill.warning { color: var(--warning); }
+
 .fleet-filter { max-width: 200px; }
 
 .status-dot {
@@ -324,7 +344,4 @@ function changePerPage(newPerPage) {
   color: var(--text-light);
 }
 
-.health-pill.ok { color: var(--success-dark); }
-.health-pill.warning { color: var(--warning-dark); }
-.health-pill.critical { color: var(--danger); }
 </style>