Merge pull request #106 from ENCCS/selection-bg-color

rkdarst · web-flow · commit fbdf2a3edb98 · 2024-10-14T00:08:37.000+03:00
Use a custom selection background and foreground color
diff --git a/sphinx_lesson/_static/sphinx_lesson.css b/sphinx_lesson/_static/sphinx_lesson.css
@@ -1,4 +1,26 @@
-/* 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;
+}
+
+/* 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 {
     border: 2px solid;
@@ -49,3 +71,33 @@ 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);
+    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);
+}
