Added dark theme selectors (#147)

Helveg · web-flow · commit 16e6ee4cfed1 · 2022-02-17T00:03:19.000Z
diff --git a/sphinx_tabs/static/tabs.css b/sphinx_tabs/static/tabs.css
@@ -51,3 +51,50 @@
 .sphinx-tab img {
 	margin-bottom: 24 px;
 }
+
+/* Dark theme preference styling */
+
+@media (prefers-color-scheme: dark) {
+  body:not([data-theme="light"]) .sphinx-tabs-panel {
+    color: white;
+    background-color: rgb(50, 50, 50);
+  }
+
+  body:not([data-theme="light"]) .sphinx-tabs-tab {
+    color: white;
+    font-size: 16px;
+    font-weight: 400;
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  body:not([data-theme="light"]) .sphinx-tabs-tab[aria-selected="true"] {
+    font-weight: 700;
+    border: 1px solid #a0b3bf;
+    border-bottom: 1px solid rgb(50, 50, 50);
+    margin: -1px;
+    background-color: rgb(50, 50, 50);
+  }
+}
+
+/* Explicit dark theme styling */
+
+body[data-theme="dark"] .sphinx-tabs-panel {
+  color: white;
+  background-color: rgb(50, 50, 50);
+}
+
+body[data-theme="dark"] .sphinx-tabs-tab {
+  color: white;
+  font-size: 16px;
+  font-weight: 400;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
+  font-weight: 700;
+  border: 1px solid #a0b3bf;
+  border-bottom: 2px solid rgb(50, 50, 50);
+  margin: -1px;
+  background-color: rgb(50, 50, 50);
+}
