From 8ecedb9db8707336f1e2a4c64c99ad268a983b7f Mon Sep 17 00:00:00 2001 From: "Ashwin V. Mohanan" Date: Fri, 4 Oct 2024 09:39:43 +0200 Subject: [PATCH] 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 or tag. We can opt for a darker selection background colour. It could be #0c6100 - dark green #745315 dark yellow: we use this! --- sphinx_lesson/_static/sphinx_lesson.css | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css index 2e2c687..68cb32d 100644 --- 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 {