Auto Dark Mode support on various GNOME websites
Elsie Hupp via gnome-accessibility-list <[email protected]> Thu, 22 Jul 2021 04:33:40 -0400
| Newsgroups | gmane.comp.gnome.accessibility.general |
|---|---|
| Message-ID | <[email protected]> |
--===============7083165836948423236== Content-Type: multipart/alternative; boundary="Apple-Mail=_EC5A4DA8-DC6D-4671-8F71-ECC74CD97270" --Apple-Mail=_EC5A4DA8-DC6D-4671-8F71-ECC74CD97270 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Hi GNOME Accessibility People, I just opened an issue on the library-web Gitlab = <https://gitlab.gnome.org/Infrastructure/library-web/-/issues/101> but = I initially composed the text as an email to send to this list, so I=E2=80= =99m sharing it here, as well. Elsie Hupp P.S. apologies for using rich text=E2=80=A6 I know I prefer plain text = emails, but I wanted to have formatting parity with the Gitlab issue. > I have a visual disability that leads me to use Dark Mode 24/7, and = Dark Mode software support is a major focus area for me. >=20 > All modern web browsers support the prefers-color-scheme CSS media = feature = <https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-sch= eme> for automatically choosing a Dark Mode stylesheet. >=20 > However, many of the main GNOME websites do not seem to provide Dark = Mode stylesheets, whether automatically chosen via prefers-color-scheme = or switched manually via a cookie or login preference. (The main = exceptions seem to be the newer Docs, Gitlab and Discourse, which have a = Dark Mode option for all instances by default.) >=20 > The most popular heuristic for automatic Dark Mode seems to be = inverting the brightness or luminance channel of each CSS color (as well = as background but not foreground images), while leaving hue and = saturation as is. >=20 > Night Eye provides a convenient tool = <https://nighteye.app/dark-css-generator/> for generating Dark Mode = stylesheets, though the licensing is unclear, and the generated = stylesheets do not include support for prefers-color-scheme. Regardless, = it may be a good place to start. >=20 > It is not clear to me which GNOME websites are based in this = particular repository, but it seems to be the most applicable. If this = is not the correct repository, I would appreciate if this issue could be = copied or transferred as needed. >=20 > Details for specific website sections follow: >=20 > docs.gnome.org <https://docs.gtk.org/> appears in Dark Mode on my = computer, but I don=E2=80=99t know whether that is due to = prefers-color-scheme or just the default regardless. >=20 > help.gnome.org <https://help.gnome.org/> does not provide any Dark = Mode functionality. Most likely and Dark Mode CSS (using = prefers-color-scheme) would have to be manually incorporated into the = existing stylesheets. >=20 > The main gnome.org <https://www.gnome.org/> website (including the = GNOME=C2=A0Foundation <https://foundation.gnome.org/> website) says that = it is powered by WordPress, and there is a WordPress plugin that adds a = fully automated Dark Mode <https://wordpress.org/plugins/wp-dark-mode/> = (presumably using prefers-color-scheme). >=20 > Gitlab=E2=80=99s =E2=80=9CNav=E2=80=9D Dark Mode seems to be early = enough in development that they aren=E2=80=99t comfortable setting it to = switch by default, but there=E2=80=99s an open issue on the topic = <https://gitlab.com/gitlab-org/gitlab/-/issues/223205>. >=20 > Discourse seems to support setting automatic Dark Mode as the default = <https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/1= 61593>, at least on fairly recent versions. >=20 > MoinMoin (the engine behind the GNOME Wiki) doesn=E2=80=99t seem to = have a default Dark Mode feature, but there is some limited discussion = (from FOURTEEN YEARS AGO) = <https://moinmo.in/HeatherStern/MakeMoinMoinDark>. Most likely and Dark = Mode CSS (using prefers-color-scheme) would have to be manually = incorporated into the existing stylesheets. >=20 >> As an aside, because a lot of the GNOME Wiki is out of date, and = edits have largely been locked to prevent spam for quite some time, I = personally think the GNOME Wiki should be ported to a Gitlab backend, = which would allow for issues, pull requests and the like. There exists a = tool for porting MoinMoin wikis to a Git backend = <https://github.com/mgaitan/moin2git>. I should probably put this in a = separate issue, though. >=20 > In there's any way I could help move this process along, please let me = know! --Apple-Mail=_EC5A4DA8-DC6D-4671-8F71-ECC74CD97270 Content-Transfer-Encoding: quoted-printable Content-Type: text/html; charset=utf-8 <html><head><meta http-equiv=3D"Content-Type" content=3D"text/html; = charset=3Dutf-8"></head><body style=3D"word-wrap: break-word; = -webkit-nbsp-mode: space; line-break: after-white-space;" class=3D"">Hi = GNOME Accessibility People,<div class=3D""><br class=3D""></div><div = class=3D"">I just opened <a = href=3D"https://gitlab.gnome.org/Infrastructure/library-web/-/issues/101" = class=3D"">an issue on the library-web Gitlab</a> but I initially = composed the text as an email to send to this list, so I=E2=80=99m = sharing it here, as well.</div><div class=3D""><br class=3D""></div><div = class=3D"">Elsie Hupp</div><div class=3D""><br class=3D""></div><div = class=3D"">P.S. apologies for using rich text=E2=80=A6 I know I prefer = plain text emails, but I wanted to have formatting parity with the = Gitlab issue.</div><div class=3D""><div class=3D""><div class=3D""><br = class=3D""></div><div class=3D""></div><blockquote type=3D"cite" = class=3D""><div class=3D"">I have a visual disability that leads me to = use Dark Mode 24/7, and Dark Mode software support is a major focus = area for me.</div><div class=3D""><br class=3D"">All modern web browsers = support <a = href=3D"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-co= lor-scheme" class=3D"">the <font face=3D"Courier New" = class=3D"">prefers-color-scheme</font> CSS media = feature</a> for automatically choosing a Dark Mode = stylesheet.<br class=3D""><br class=3D"">However, many of the main GNOME = websites do not seem to provide Dark Mode stylesheets, whether = automatically chosen via <font face=3D"Courier New" = class=3D"">prefers-color-scheme</font> or switched manually via a = cookie or login preference. (The main exceptions seem to be the newer = Docs, Gitlab and Discourse, which have a Dark Mode option for all = instances by default.)<br class=3D""><br class=3D"">The most popular = heuristic for automatic Dark Mode seems to be inverting the = brightness or luminance channel of each CSS color (as well as = background but not foreground images), while leaving hue and = saturation as is.<br class=3D""><br class=3D"">Night Eye = provides <a href=3D"https://nighteye.app/dark-css-generator/" = class=3D"">a convenient tool</a> for generating Dark Mode = stylesheets, though the licensing is unclear, and the = generated stylesheets do not include support for <font = face=3D"Courier New" class=3D"">prefers-color-scheme</font>. Regardless, = it may be a good place to start.<br class=3D""><br class=3D"">It is = not clear to me which GNOME websites are based in this particular = repository, but it seems to be the most applicable. If this is not = the correct repository, I would appreciate if this issue could be = copied or transferred as needed.<br class=3D""><br class=3D""><b = class=3D""><font size=3D"4" class=3D"">Details for specific website = sections follow</font>:</b><br class=3D""><br class=3D""><a = href=3D"https://docs.gtk.org/" class=3D""><b = class=3D"">docs.gnome.org</b></a> appears in Dark Mode on my = computer, but I don=E2=80=99t know whether that is due to <font = face=3D"Courier New" class=3D"">prefers-color-scheme</font> or just the = default regardless.<br class=3D""><br class=3D""><a = href=3D"https://help.gnome.org/" class=3D""><b = class=3D"">help.gnome.org</b></a> does not provide any Dark Mode = functionality. Most likely and Dark Mode CSS (using <font = face=3D"Courier New" class=3D"">prefers-color-scheme</font>) would have = to be manually incorporated into the existing stylesheets.<br = class=3D""><br class=3D"">The main <a href=3D"https://www.gnome.org/"= class=3D""><b class=3D"">gnome.org</b></a> website = (including <a href=3D"https://foundation.gnome.org/" class=3D"">the = GNOME Foundation</a> website) says that it is powered = by WordPress, and there is <a = href=3D"https://wordpress.org/plugins/wp-dark-mode/" class=3D"">a = WordPress plugin that adds a fully automated Dark = Mode</a> (presumably using <font face=3D"Courier New" = class=3D"">prefers-color-scheme</font>).<br class=3D""><br class=3D""><b = class=3D"">Gitlab</b>=E2=80=99s =E2=80=9CNav=E2=80=9D Dark Mode seems to = be early enough in development that they aren=E2=80=99t comfortable = setting it to switch by default, but there=E2=80=99s <a = href=3D"https://gitlab.com/gitlab-org/gitlab/-/issues/223205" = class=3D"">an open issue on the topic</a>.<br class=3D""><br class=3D""><b= class=3D"">Discourse</b> <a = href=3D"https://meta.discourse.org/t/automatic-dark-mode-color-scheme-swit= ching/161593" class=3D"">seems to support setting automatic Dark Mode as = the default</a>, at least on fairly recent versions.<br = class=3D""><br class=3D""><b class=3D"">MoinMoin</b> (the engine behind = the GNOME Wiki) doesn=E2=80=99t seem to have a default Dark Mode = feature, but there is <a = href=3D"https://moinmo.in/HeatherStern/MakeMoinMoinDark" class=3D"">some = limited discussion (from <i class=3D"">FOURTEEN YEARS AGO</i>)</a>. Most = likely and Dark Mode CSS (using <font face=3D"Courier New" = class=3D"">prefers-color-scheme</font>) would have to be manually = incorporated into the existing stylesheets.<br class=3D""><br = class=3D""><blockquote type=3D"cite" class=3D"">As an aside, because a = lot of the GNOME Wiki is out of date, and edits have largely = been locked to prevent spam for quite some time, I personally think = the GNOME Wiki should be ported to a Gitlab backend, which would = allow for issues, pull requests and the like. There exists <a = href=3D"https://github.com/mgaitan/moin2git" class=3D"">a tool for = porting MoinMoin wikis to a Git backend</a>. I should probably put this = in a separate issue, though.</blockquote><br class=3D"">In there's = any way I could help move this process along, please let me = know!</div></blockquote><div class=3D""><br = class=3D""></div></div></div></body></html>= --Apple-Mail=_EC5A4DA8-DC6D-4671-8F71-ECC74CD97270-- --===============7083165836948423236== Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Content-Disposition: inline _______________________________________________ gnome-accessibility-list mailing list [email protected] https://mail.gnome.org/mailman/listinfo/gnome-accessibility-list --===============7083165836948423236==--