From eb584b76116fe6f1b4656cbfd7733867811208a4 Mon Sep 17 00:00:00 2001
From: Sam Adam-Day <me@samadamday.com>
Date: Tue, 4 Feb 2025 20:07:58 +0000
Subject: [PATCH 1/2] Detect dark mode in a wider range of sphinx themes

---
 sphinx_tabs/static/tabs.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/sphinx_tabs/static/tabs.css b/sphinx_tabs/static/tabs.css
index 957ba60..8c701ba 100644
--- a/sphinx_tabs/static/tabs.css
+++ b/sphinx_tabs/static/tabs.css
@@ -55,17 +55,20 @@
 /* Dark theme preference styling */
 
 @media (prefers-color-scheme: dark) {
-  body[data-theme="auto"] .sphinx-tabs-panel {
+  body[data-theme="auto"] .sphinx-tabs-panel,
+  html[data-theme="auto"] .sphinx-tabs-panel {
     color: white;
     background-color: rgb(50, 50, 50);
   }
 
-  body[data-theme="auto"] .sphinx-tabs-tab {
+  body[data-theme="auto"] .sphinx-tabs-tab,
+  html[data-theme="auto"] .sphinx-tabs-tab {
     color: white;
     background-color: rgba(255, 255, 255, 0.05);
   }
 
-  body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
+  body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"],
+  html[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
     border-bottom: 1px solid rgb(50, 50, 50);
     background-color: rgb(50, 50, 50);
   }
@@ -73,17 +76,26 @@
 
 /* Explicit dark theme styling */
 
-body[data-theme="dark"] .sphinx-tabs-panel {
+body[data-theme="dark"] .sphinx-tabs-panel,
+html[data-theme="auto"] .sphinx-tabs-panel,
+body.theme-dark .sphinx-tabs-panel,
+html.dark .sphinx-tabs-panel {
   color: white;
   background-color: rgb(50, 50, 50);
 }
 
-body[data-theme="dark"] .sphinx-tabs-tab {
+body[data-theme="dark"] .sphinx-tabs-tab,
+html[data-theme="auto"] .sphinx-tabs-tab,
+body.theme-dark .sphinx-tabs-tab,
+html.dark .sphinx-tabs-tab {
   color: white;
   background-color: rgba(255, 255, 255, 0.05);
 }
 
-body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
+body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"],
+html[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"],
+body.theme-dark .sphinx-tabs-tab[aria-selected="true"],
+html.dark .sphinx-tabs-tab[aria-selected="true"] {
   border-bottom: 2px solid rgb(50, 50, 50);
   background-color: rgb(50, 50, 50);
 }

From 1b5720e5aceb695ee7bf2c57b75acdcef74a7379 Mon Sep 17 00:00:00 2001
From: Sam Adam-Day <me@samadamday.com>
Date: Tue, 4 Feb 2025 20:31:31 +0000
Subject: [PATCH 2/2] Replaced data-theme with data-mode for html

---
 sphinx_tabs/static/tabs.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/sphinx_tabs/static/tabs.css b/sphinx_tabs/static/tabs.css
index 8c701ba..df3ed11 100644
--- a/sphinx_tabs/static/tabs.css
+++ b/sphinx_tabs/static/tabs.css
@@ -56,19 +56,19 @@
 
 @media (prefers-color-scheme: dark) {
   body[data-theme="auto"] .sphinx-tabs-panel,
-  html[data-theme="auto"] .sphinx-tabs-panel {
+  html[data-mode="auto"] .sphinx-tabs-panel {
     color: white;
     background-color: rgb(50, 50, 50);
   }
 
   body[data-theme="auto"] .sphinx-tabs-tab,
-  html[data-theme="auto"] .sphinx-tabs-tab {
+  html[data-mode="auto"] .sphinx-tabs-tab {
     color: white;
     background-color: rgba(255, 255, 255, 0.05);
   }
 
   body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"],
-  html[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
+  html[data-mode="auto"] .sphinx-tabs-tab[aria-selected="true"] {
     border-bottom: 1px solid rgb(50, 50, 50);
     background-color: rgb(50, 50, 50);
   }
@@ -77,7 +77,7 @@
 /* Explicit dark theme styling */
 
 body[data-theme="dark"] .sphinx-tabs-panel,
-html[data-theme="auto"] .sphinx-tabs-panel,
+html[data-mode="auto"] .sphinx-tabs-panel,
 body.theme-dark .sphinx-tabs-panel,
 html.dark .sphinx-tabs-panel {
   color: white;
@@ -85,7 +85,7 @@ html.dark .sphinx-tabs-panel {
 }
 
 body[data-theme="dark"] .sphinx-tabs-tab,
-html[data-theme="auto"] .sphinx-tabs-tab,
+html[data-mode="auto"] .sphinx-tabs-tab,
 body.theme-dark .sphinx-tabs-tab,
 html.dark .sphinx-tabs-tab {
   color: white;
@@ -93,7 +93,7 @@ html.dark .sphinx-tabs-tab {
 }
 
 body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"],
-html[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"],
+html[data-mode="auto"] .sphinx-tabs-tab[aria-selected="true"],
 body.theme-dark .sphinx-tabs-tab[aria-selected="true"],
 html.dark .sphinx-tabs-tab[aria-selected="true"] {
   border-bottom: 2px solid rgb(50, 50, 50);