From 407ce2cae37fec956fdf8354822ff07f10e8c316 Mon Sep 17 00:00:00 2001 From: "Ashwin V. Mohanan" Date: Tue, 1 Oct 2024 11:55:45 +0200 Subject: [PATCH 1/4] Use a custom selection bg color --- sphinx_lesson/_static/sphinx_lesson.css | 28 +++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css index 14b20c6..4378437 100644 --- a/sphinx_lesson/_static/sphinx_lesson.css +++ b/sphinx_lesson/_static/sphinx_lesson.css @@ -1,4 +1,7 @@ /* sphinx_lesson.css */ +:root { + --sphinx-lesson-selection-bg-color: #fce762; +} body.wy-body-for-nav img.with-border { border: 2px solid; @@ -49,3 +52,28 @@ body.wy-body-for-nav img.with-border { .rst-content .admonition.toggle-hidden { padding-bottom: 0px; } + +/* selection / highlight colour uses a yellow background and a black text */ +/*** Works on common browsers ***/ +::selection { + background-color: var(--sphinx-lesson-selection-bg-color); +} + +/*** Mozilla based browsers ***/ +::-moz-selection { + background-color: var(--sphinx-lesson-selection-bg-color); +} + +/***For Other Browsers ***/ +::-o-selection { + background-color: var(--sphinx-lesson-selection-bg-color); +} + +::-ms-selection { + background-color: var(--sphinx-lesson-selection-bg-color); +} + +/*** For Webkit ***/ +::-webkit-selection { + background-color: var(--sphinx-lesson-selection-bg-color); +} From 63c293eae80ae1bc0f828a729561ef7c391f72c0 Mon Sep 17 00:00:00 2001 From: "Ashwin V. Mohanan" Date: Tue, 1 Oct 2024 12:03:54 +0200 Subject: [PATCH 2/4] Also ensure text colour is readable on selection --- sphinx_lesson/_static/sphinx_lesson.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css index 4378437..3d21666 100644 --- a/sphinx_lesson/_static/sphinx_lesson.css +++ b/sphinx_lesson/_static/sphinx_lesson.css @@ -1,6 +1,7 @@ /* sphinx_lesson.css */ :root { --sphinx-lesson-selection-bg-color: #fce762; + --sphinx-lesson-selection-fg-color: #242424; } body.wy-body-for-nav img.with-border { @@ -57,23 +58,28 @@ body.wy-body-for-nav img.with-border { /*** Works on common browsers ***/ ::selection { background-color: var(--sphinx-lesson-selection-bg-color); + color: var(--sphinx-lesson-selection-fg-color); } /*** Mozilla based browsers ***/ ::-moz-selection { background-color: var(--sphinx-lesson-selection-bg-color); + color: var(--sphinx-lesson-selection-fg-color); } /***For Other Browsers ***/ ::-o-selection { background-color: var(--sphinx-lesson-selection-bg-color); + color: var(--sphinx-lesson-selection-fg-color); } ::-ms-selection { background-color: var(--sphinx-lesson-selection-bg-color); + color: var(--sphinx-lesson-selection-fg-color); } /*** For Webkit ***/ ::-webkit-selection { background-color: var(--sphinx-lesson-selection-bg-color); + color: var(--sphinx-lesson-selection-fg-color); } From 5e6fa8f641286c3a95df1fe0766145ec11333261 Mon Sep 17 00:00:00 2001 From: "Ashwin V. Mohanan" Date: Thu, 3 Oct 2024 12:34:17 +0200 Subject: [PATCH 3/4] Change selection fg colour to black For maxiumum contrast --- sphinx_lesson/_static/sphinx_lesson.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css index 3d21666..2e2c687 100644 --- a/sphinx_lesson/_static/sphinx_lesson.css +++ b/sphinx_lesson/_static/sphinx_lesson.css @@ -1,7 +1,7 @@ /* sphinx_lesson.css */ :root { --sphinx-lesson-selection-bg-color: #fce762; - --sphinx-lesson-selection-fg-color: #242424; + --sphinx-lesson-selection-fg-color: #000000; } body.wy-body-for-nav img.with-border { From 8ecedb9db8707336f1e2a4c64c99ad268a983b7f Mon Sep 17 00:00:00 2001 From: "Ashwin V. Mohanan" Date: Fri, 4 Oct 2024 09:39:43 +0200 Subject: [PATCH 4/4] 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 {