GNU bug report logs - #71443
[mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled

Previous Next

To reply to this bug, email your comments to 71443 AT debbugs.gnu.org.
There is no need to reopen the bug first.

Toggle the display of automated, internal messages from the tracker.

Message #5 received at submit <at> debbugs.gnu.org (full text, mbox):

From: Luis Felipe <sirgazil <at> zoho.com>
To: bug-guix <at> gnu.org
Subject: [mumi] Some HTML elements don't respond to preferred color scheme
 when JS is disabled
Date: Sat, 8 Jun 2024 19:54:43 +0000

[Message part 1 (text/plain, inline)]

Package: mumi

Hi,

When using a web browser with JavaScript disabled, the body element and 
the text input of class ".tokenInput" don't use the correct color theme. 
This doesn't affect people who use light themes, but it does affect 
people who use dark themes because it introduces contrast issues (light 
text on light backgrounds).

STEPS TO REPRODUCE

1. Launch IceCat web browser
2. Enable user defined color scheme preferences by disabling
   Application menu → IceCat Settings → Resist Fingerprinting
3. Set your color scheme preferences to Dark in: Application menu →
   Settings → Language and Appearance → Website appearance
4. Disable JavaScript in: Application menu → IceCat Settings → Disable
   Javascript
5. Visit https://issues.guix.gnu.org/
6. Press Ctrl+F5 to avoid using cached resources

EXPECTED RESULT

The website uses the dark color scheme.

UNEXPECTED RESULT

The HTML body element and the text input of class ".tokenInput" don't 
use the dark color scheme, while the rest of the elements do use it.

ADDITIONAL INFORMATION

There seems to be something wrong with the functionality of the 
"--background-color" variable. While it seems to have appropriate values 
assigned to it for every color scheme case (prefers light, prefers dark, 
and no preference), the dark color value is not being used when needed. 
I still don't know why.

WORKAROUND

Assigning the value of "var(--nav-background-color)" to the 
"background-color" property of the affected elements solves the issue.


-- 
Luis Felipe López Acevedo
https://luis-felipe.gitlab.io/

[OpenPGP_0x0AB0D067012F08C3.asc (application/pgp-keys, attachment)]

[OpenPGP_signature (application/pgp-signature, attachment)]

Message #8 received at 71443 <at> debbugs.gnu.org (full text, mbox):

From: sirgazil <at> zoho.com
To: 71443 <at> debbugs.gnu.org
Cc: Luis Felipe <sirgazil <at> zoho.com>
Subject: [PATCH] assets: Make body and .tokenInput color scheme aware in non
 JS browsers.
Date: Sat,  8 Jun 2024 18:19:36 -0500

From: Luis Felipe <sirgazil <at> zoho.com>

Fixes https://debbugs.gnu.org/71443

* assets/mumi.scss (body, .tokenInput): Set their "background-color"
property to the same color variable used by the navigation bar, which
actually responds to the preferred color scheme settings of the
browser.
---
 assets/mumi.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/mumi.scss b/assets/mumi.scss
index e605630..5ac0f26 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -69,6 +69,7 @@ html {
 }
 
 body {
+    background-color: var(--nav-background-color);
     height: auto;
 }
 
@@ -711,7 +712,7 @@ div.line pre {
     width: 100%;
     padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
     border-radius: 5rem;
-    background-color: var(--background-color);
+    background-color: var(--nav-background-color);
     background-image: var(--icon-search);
     background-position: center left 1.125rem;
     background-size: 1rem auto;

base-commit: b7848b1e83b3eaa8b8aec0f734cbd04020d71b51
-- 
2.41.0

Message #11 received at 71443 <at> debbugs.gnu.org (full text, mbox):

From: Arun Isaac <arunisaac <at> systemreboot.net>
To: 71443 <at> debbugs.gnu.org
Cc: Luis Felipe <sirgazil <at> zoho.com>
Subject: Re: [mumi] Some HTML elements don't respond to preferred color
 scheme when JS is disabled
Date: Sun, 09 Jun 2024 14:32:27 +0100

And, thanks for the detailed steps to reproduce! It was very helpful in
reproducing the bug easily. I appreciate it!

Message #14 received at 71443 <at> debbugs.gnu.org (full text, mbox):

From: Arun Isaac <arunisaac <at> systemreboot.net>
To: 71443 <at> debbugs.gnu.org
Cc: Arun Isaac <arunisaac <at> systemreboot.net>
Subject: [PATCH 0/1] Set --background-color variable in dark theme
Date: Sun,  9 Jun 2024 14:30:21 +0100

Hi Luis,

Good catch! Might I suggest the following patch that fixes the
--background-color variable instead of reusing the
--nav-background-color variable? Could you confirm that this works for
you?

Thanks!
Arun

Luis Felipe (1):
  assets: Set --background-color variable in dark theme.

 assets/mumi.scss | 1 +
 1 file changed, 1 insertion(+)

-- 
2.45.1

Message #17 received at 71443 <at> debbugs.gnu.org (full text, mbox):

From: Arun Isaac <arunisaac <at> systemreboot.net>
To: 71443 <at> debbugs.gnu.org
Cc: Arun Isaac <arunisaac <at> systemreboot.net>, Luis Felipe <sirgazil <at> zoho.com>
Subject: [PATCH 1/1] assets: Set --background-color variable in dark theme.
Date: Sun,  9 Jun 2024 14:30:22 +0100

From: Luis Felipe <sirgazil <at> zoho.com>

Previously, the --background-color variable was not set in the dark
theme leading to contrast issues (light text on light backgrounds).

* assets/mumi.scss (@mixin dark): Set --background-color variable.

Signed-off-by: Arun Isaac <arunisaac <at> systemreboot.net>
---
 assets/mumi.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/mumi.scss b/assets/mumi.scss
index e605630..2581b2c 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -36,6 +36,7 @@ $commit_header: #005cc5;
 
 // Dark theme
 @mixin dark {
+  --background-color: #{darken($grey-900, 6%)};
   --nav-background-color: #{darken($grey-900, 6%)};
   --nav-border-color: #{mix($grey-500, $black, 40%)};
   --nav-logo-color: #{darken($grey-200, 6%)};
-- 
2.45.1

Message #20 received at 71443 <at> debbugs.gnu.org (full text, mbox):

From: Luis Felipe <sirgazil <at> zoho.com>
To: Arun Isaac <arunisaac <at> systemreboot.net>, 71443 <at> debbugs.gnu.org
Subject: Re: [mumi] Some HTML elements don't respond to preferred color scheme
 when JS is disabled
Date: Sun, 9 Jun 2024 22:35:12 +0000

[Message part 1 (text/plain, inline)]

Hi Arun,

I can confirm that your updated patch works. Problem solved :)

Have a nice day,

[OpenPGP_0x0AB0D067012F08C3.asc (application/pgp-keys, attachment)]

[OpenPGP_signature (application/pgp-signature, attachment)]

Message #25 received at 71443-done <at> debbugs.gnu.org (full text, mbox):

From: Arun Isaac <arunisaac <at> systemreboot.net>
To: 71443-done <at> debbugs.gnu.org
Cc: Luis Felipe <sirgazil <at> zoho.com>
Subject: Re: [mumi] Some HTML elements don't respond to preferred color
 scheme when JS is disabled
Date: Mon, 10 Jun 2024 12:44:49 +0100

Pushed as 858c2cd544084316f9df19b2e536059ff3070c35. Thanks! You should
see the change in https://issues.guix.gnu.org the next time it is
reconfigured.

Before pushing, I also updated the CSS timestamp. We do this to
invalidate browser caches.

Previous Next

GNU bug tracking system
Copyright (C) 1999 Darren O. Benham, 1997,2003 nCipher Corporation Ltd, 1994-97 Ian Jackson.