Add support for dark theme

ashwinvis · ashwinvis · commit 8ecedb9db870 · 2024-10-04T09:39:43.000+02:00
The themes which support light/dark themes
for example, furo and pydata-sphinx-theme
tend to set an attribute in either
&lt;html&gt; or &lt;body&gt; tag.

We can opt for a darker selection background
colour. It could be
#0c6100 - dark green
#745315   dark yellow: we use this!
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 {
