* bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled
@ 2024-06-08 19:54 Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-08 23:19 ` bug#71443: [PATCH] assets: Make body and .tokenInput color scheme aware in non JS browsers sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi.
` (2 more replies)
0 siblings, 3 replies; 7+ messages in thread
From: Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi. @ 2024-06-08 19:54 UTC (permalink / raw)
To: bug-guix
[-- Attachment #1.1.1: Type: text/plain, Size: 1644 bytes --]
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/
[-- Attachment #1.1.2: OpenPGP public key --]
[-- Type: application/pgp-keys, Size: 2881 bytes --]
[-- Attachment #2: OpenPGP digital signature --]
[-- Type: application/pgp-signature, Size: 495 bytes --]
^ permalink raw reply [flat|nested] 7+ messages in thread
* bug#71443: [PATCH] assets: Make body and .tokenInput color scheme aware in non JS browsers.
2024-06-08 19:54 bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
@ 2024-06-08 23:19 ` sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-09 13:30 ` bug#71443: [PATCH 0/1] Set --background-color variable in dark theme Arun Isaac
2024-06-09 13:32 ` bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Arun Isaac
2 siblings, 0 replies; 7+ messages in thread
From: sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi. @ 2024-06-08 23:19 UTC (permalink / raw)
To: 71443; +Cc: Luis Felipe
From: Luis Felipe <sirgazil@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
^ permalink raw reply related [flat|nested] 7+ messages in thread
* bug#71443: [PATCH 0/1] Set --background-color variable in dark theme
2024-06-08 19:54 bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-08 23:19 ` bug#71443: [PATCH] assets: Make body and .tokenInput color scheme aware in non JS browsers sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi.
@ 2024-06-09 13:30 ` Arun Isaac
2024-06-09 13:30 ` bug#71443: [PATCH 1/1] assets: " Arun Isaac
2024-06-09 13:32 ` bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Arun Isaac
2 siblings, 1 reply; 7+ messages in thread
From: Arun Isaac @ 2024-06-09 13:30 UTC (permalink / raw)
To: 71443; +Cc: Arun Isaac, Luis Felipe, sirgazil
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
^ permalink raw reply [flat|nested] 7+ messages in thread
* bug#71443: [PATCH 1/1] assets: Set --background-color variable in dark theme.
2024-06-09 13:30 ` bug#71443: [PATCH 0/1] Set --background-color variable in dark theme Arun Isaac
@ 2024-06-09 13:30 ` Arun Isaac
0 siblings, 0 replies; 7+ messages in thread
From: Arun Isaac @ 2024-06-09 13:30 UTC (permalink / raw)
To: 71443; +Cc: Arun Isaac, Luis Felipe, Luis Felipe, sirgazil
From: Luis Felipe <sirgazil@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@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
^ permalink raw reply related [flat|nested] 7+ messages in thread
* bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled
2024-06-08 19:54 bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-08 23:19 ` bug#71443: [PATCH] assets: Make body and .tokenInput color scheme aware in non JS browsers sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-09 13:30 ` bug#71443: [PATCH 0/1] Set --background-color variable in dark theme Arun Isaac
@ 2024-06-09 13:32 ` Arun Isaac
2024-06-09 22:35 ` Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2 siblings, 1 reply; 7+ messages in thread
From: Arun Isaac @ 2024-06-09 13:32 UTC (permalink / raw)
To: 71443; +Cc: Luis Felipe
And, thanks for the detailed steps to reproduce! It was very helpful in
reproducing the bug easily. I appreciate it!
^ permalink raw reply [flat|nested] 7+ messages in thread
* bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled
2024-06-09 13:32 ` bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Arun Isaac
@ 2024-06-09 22:35 ` Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-10 11:44 ` Arun Isaac
0 siblings, 1 reply; 7+ messages in thread
From: Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi. @ 2024-06-09 22:35 UTC (permalink / raw)
To: Arun Isaac, 71443
[-- Attachment #1.1.1: Type: text/plain, Size: 98 bytes --]
Hi Arun,
I can confirm that your updated patch works. Problem solved :)
Have a nice day,
[-- Attachment #1.1.2: OpenPGP public key --]
[-- Type: application/pgp-keys, Size: 2881 bytes --]
[-- Attachment #2: OpenPGP digital signature --]
[-- Type: application/pgp-signature, Size: 495 bytes --]
^ permalink raw reply [flat|nested] 7+ messages in thread
* bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled
2024-06-09 22:35 ` Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
@ 2024-06-10 11:44 ` Arun Isaac
0 siblings, 0 replies; 7+ messages in thread
From: Arun Isaac @ 2024-06-10 11:44 UTC (permalink / raw)
To: 71443-done; +Cc: Luis Felipe
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.
^ permalink raw reply [flat|nested] 7+ messages in thread
end of thread, other threads:[~2024-06-10 12:11 UTC | newest]
Thread overview: 7+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2024-06-08 19:54 bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-08 23:19 ` bug#71443: [PATCH] assets: Make body and .tokenInput color scheme aware in non JS browsers sirgazil--- via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-09 13:30 ` bug#71443: [PATCH 0/1] Set --background-color variable in dark theme Arun Isaac
2024-06-09 13:30 ` bug#71443: [PATCH 1/1] assets: " Arun Isaac
2024-06-09 13:32 ` bug#71443: [mumi] Some HTML elements don't respond to preferred color scheme when JS is disabled Arun Isaac
2024-06-09 22:35 ` Luis Felipe via Bug-mumi via Bug reports for GNU Guix Mumi.
2024-06-10 11:44 ` Arun Isaac
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).