Add support for dark theme

The themes which support light/dark themes for example, furo and pydata-sphinx-theme tend to set an attribute in either <html> or <body> tag. We can opt for a darker selection background colour. It could be #0c6100 - dark green #745315 dark yellow: we use this!
ENCCS · Oct 4, 2024 · 8ecedb9 · 8ecedb9
1 parent 5e6fa8f
commit 8ecedb9
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css
@@ -1,7 +1,25 @@
-/* sphinx_lesson.css */
+/* sphinx_lesson.css
+ * https://webaim.org/resources/contrastchecker/?fcolor=00000&bcolor=FCE762
+ * */
 :root {
-  --sphinx-lesson-selection-bg-color: #fce762;
-  --sphinx-lesson-selection-fg-color: #000000;
+    --sphinx-lesson-selection-bg-color: #fce762;
+    --sphinx-lesson-selection-fg-color: #000000;
+}
+
+/* https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=745315
+ * when dark theme is selected the some themes use this attirbute
+ */
+html[data-theme='dark'], body[data-theme='dark'] {
+    --sphinx-lesson-selection-bg-color: #745315;
+    --sphinx-lesson-selection-fg-color: #ffffff;
+}
+
+/* when browser/system theme is dark and no theme is selected */
+@media (prefers-color-scheme: dark) {
+  html[data-theme='auto'], body[data-theme='auto'] {
+      --sphinx-lesson-selection-bg-color: #745315;
+      --sphinx-lesson-selection-fg-color: #ffffff;
+  }
 }
 
 body.wy-body-for-nav img.with-border {