VerticalTabs: Add dark theme support on group page

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>
3 years ago · c1ac4bcc35
parent 8a47ee45fd
commit c1ac4bcc35
2 changed files with 19 additions and 1 deletions
--- 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>
--- 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>