Fix dark mode for context listing. #1009

Author: nedbat

CHANGES.rst

@@ -25,7 +25,10 @@ want to know what's different in 5.0 since 4.5.x, see :ref:`whatsnew5x`.
 Unreleased
 ----------
 
-Nothing yet.
+- The dark mode HTML report still used light colors for the context listing,
+  making them unreadable (`issue 1009`_).  This is now fixed.
+
+.. _issue 1009: https://github.com/nedbat/coveragepy/issues/1009
 
 
 .. _changes_52:

coverage/htmlfiles/style.css

@@ -220,7 +220,15 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 #source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }
 
-#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
+@media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { background: #0f3a42; } }
+
+@media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { color: #aaa; } }
+
+#source p input:checked ~ .r label.ctx { background: #aef; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
+
+@media (prefers-color-scheme: dark) { #source p input:checked ~ .r label.ctx { background: #056; } }
+
+@media (prefers-color-scheme: dark) { #source p input:checked ~ .r label.ctx { color: #aaa; } }
 
 #source p input:checked ~ .r label.ctx::before { content: "▼ "; }
 
@@ -230,7 +238,9 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 @media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } }
 
-#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }
+#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aef; border-radius: .25em; margin-right: 1.75em; }
+
+@media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }
 
 #source p .ctxs span { display: block; text-align: right; }
 

coverage/htmlfiles/style.scss

@@ -51,6 +51,7 @@ $light-exc-bg:            $light-gray2;
 $light-par-bg:            #ffa;
 $light-token-com:         #008000;
 $light-token-str:         #0451A5;
+$light-context-bg-color:  #aef;
 
 $dark-bg:                 #1e1e1e;
 $dark-fg:                 #eee;
@@ -67,6 +68,7 @@ $dark-exc-bg:             $dark-gray2;
 $dark-par-bg:             #650;
 $dark-token-com:          #6A9955;
 $dark-token-str:          #9CDCFE;
+$dark-context-bg-color:   #056;
 
 //
 // Mixins and utilities
@@ -345,8 +347,6 @@ h2.stats {
 // The slim bar at the left edge of the source lines, colored by coverage.
 $border-indicator-width: .2em;
 
-$context-panel-color: #aaeeff;
-
 #source {
     padding: 1em 0 1em $left-gutter;
     font-family: $font-code;
@@ -520,14 +520,18 @@ $context-panel-color: #aaeeff;
                     content: "▶ ";
                 }
                 &:hover {
-                    background: mix($context-panel-color, #fff, 50%);
-                    color: #666;
+                    background: mix($light-context-bg-color, $light-bg, $off-button-lighten);
+                    @include background-dark(mix($dark-context-bg-color, $dark-bg, $off-button-lighten));
+                    color: $light-gray5;
+                    @include color-dark($dark-gray5);
                 }
             }
 
             &:checked ~ .r label.ctx {
-                background: $context-panel-color;
-                color: #666;
+                background: $light-context-bg-color;
+                @include background-dark($dark-context-bg-color);
+                color: $light-gray5;
+                @include color-dark($dark-gray5);
                 border-radius: .75em .75em 0 0;
                 padding: 0 .5em;
                 margin: -.25em 0;
@@ -559,7 +563,8 @@ $context-panel-color: #aaeeff;
             padding: 0 .5em;
             font-family: $font-normal;
             white-space: nowrap;
-            background: $context-panel-color;
+            background: $light-context-bg-color;
+            @include background-dark($dark-context-bg-color);
             border-radius: .25em;
             margin-right: 1.75em;
             span {

tests/gold/html/styled/style.css

@@ -220,7 +220,15 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 #source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }
 
-#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
+@media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { background: #0f3a42; } }
+
+@media (prefers-color-scheme: dark) { #source p input ~ .r label.ctx:hover { color: #aaa; } }
+
+#source p input:checked ~ .r label.ctx { background: #aef; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }
+
+@media (prefers-color-scheme: dark) { #source p input:checked ~ .r label.ctx { background: #056; } }
+
+@media (prefers-color-scheme: dark) { #source p input:checked ~ .r label.ctx { color: #aaa; } }
 
 #source p input:checked ~ .r label.ctx::before { content: "▼ "; }
 
@@ -230,7 +238,9 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 
 @media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } }
 
-#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }
+#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aef; border-radius: .25em; margin-right: 1.75em; }
+
+@media (prefers-color-scheme: dark) { #source p .ctxs { background: #056; } }
 
 #source p .ctxs span { display: block; text-align: right; }