diff --git a/src/plugins/VerticalTabs/data/group.html b/src/plugins/VerticalTabs/data/group.html
index 1a1ceec6c..315fa9675 100644
--- a/src/plugins/VerticalTabs/data/group.html
+++ b/src/plugins/VerticalTabs/data/group.html
@@ -2,7 +2,18 @@
 <head>
 <link rel="shortcut icon" href="%FAVICON%">
 <style>
-input { margin: 15% 25%; min-width: 50%; }
+input { margin: 15% 25%; min-width: 50%; border: 1px solid; }
+
+@media (prefers-color-scheme: light) {
+  html, body {background: #dddddd;color: #525c66;}
+  input {border-color: #babcb8;}
+  input:focus {border-color: #579eea;}
+}
+@media (prefers-color-scheme: dark) {
+  html, body {background: #070709;color: #dddddd;}
+  input {background-color: #070709;color: white;border-color: #555;}
+  input:focus {border-color: #1a4ba4;}
+}
 </style>
 </head>
 <body>
diff --git a/src/plugins/VerticalTabs/data/index.html b/src/plugins/VerticalTabs/data/index.html
index 11186f94f..008cc697f 100644
--- a/src/plugins/VerticalTabs/data/index.html
+++ b/src/plugins/VerticalTabs/data/index.html
@@ -3,6 +3,13 @@
 <title>%NAME%</title>
 <style>
 h1 { text-align:center; }
+
+@media (prefers-color-scheme: light) {
+  html, body {background: #dddddd;color: #525c66;}
+}
+@media (prefers-color-scheme: dark) {
+  html, body {background: #070709;color: #dddddd;}
+}
 </style>
 </head>
 <body>
