From d1bb8e947c343e6f5c5772573d8adbb3267706e6 Mon Sep 17 00:00:00 2001 From: Ned Batchelder Date: Mon, 6 Jul 2020 14:53:45 -0400 Subject: [PATCH] Fix dark mode for context listing. #1009 --- CHANGES.rst | 5 ++++- coverage/htmlfiles/style.css | 14 ++++++++++++-- coverage/htmlfiles/style.scss | 19 ++++++++++++------- tests/gold/html/styled/style.css | 14 ++++++++++++-- 4 files changed, 40 insertions(+), 12 deletions(-) diff --git a/CHANGES.rst b/CHANGES.rst index 3ef9f6d5c..7f0c99737 100644 --- a/CHANGES.rst +++ b/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: diff --git a/coverage/htmlfiles/style.css b/coverage/htmlfiles/style.css index e501ea6bb..3e7f9b66b 100644 --- a/coverage/htmlfiles/style.css +++ b/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; } diff --git a/coverage/htmlfiles/style.scss b/coverage/htmlfiles/style.scss index 98f9e55d6..8169269e3 100644 --- a/coverage/htmlfiles/style.scss +++ b/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 { diff --git a/tests/gold/html/styled/style.css b/tests/gold/html/styled/style.css index e501ea6bb..3e7f9b66b 100644 --- a/tests/gold/html/styled/style.css +++ b/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; }