[fix] prefers-color-scheme: use dark theme if body[data-theme="auto"] (#154)

return42 · web-flow · commit 5b2f4eebe457 · 2022-03-16T20:09:04.000Z
Before this patch the CSS implementation assumes that "dark" is supported by the theme if the `data-theme` attribute of the <body> tag is unset. Since most themes are using "light" colors (compare https://sphinx-themes.org) and do not set `data-theme` it is better to assume light is the default, even when the browser setting `prefers-color-scheme: dark`! BTW: remove duplication of styles from dark/light theme that are already set in the common style. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
diff --git a/sphinx_tabs/static/tabs.css b/sphinx_tabs/static/tabs.css
@@ -55,23 +55,18 @@
 /* Dark theme preference styling */
 
 @media (prefers-color-scheme: dark) {
-  body:not([data-theme="light"]) .sphinx-tabs-panel {
+  body[data-theme="auto"] .sphinx-tabs-panel {
     color: white;
     background-color: rgb(50, 50, 50);
   }
 
-  body:not([data-theme="light"]) .sphinx-tabs-tab {
+  body[data-theme="auto"] .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;
+  body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
     border-bottom: 1px solid rgb(50, 50, 50);
-    margin: -1px;
     background-color: rgb(50, 50, 50);
   }
 }
@@ -85,16 +80,10 @@ body[data-theme="dark"] .sphinx-tabs-panel {
 
 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);
 }
