From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <e@80x24.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on dcvr.yhbt.net
X-Spam-Level: 
X-Spam-ASN:  
X-Spam-Status: No, score=-4.2 required=3.0 tests=ALL_TRUSTED,AWL,BAYES_00,
	DKIM_SIGNED,DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF shortcircuit=no
	autolearn=ham autolearn_force=no version=3.4.6
Received: from localhost (dcvr.yhbt.net [127.0.0.1])
	by dcvr.yhbt.net (Postfix) with ESMTP id C7B481F5CB;
	Wed, 18 Sep 2024 00:04:57 +0000 (UTC)
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=80x24.org;
	s=selector1; t=1726617897;
	bh=06BVEGLbmG6U5XZn73GoSLTfz2pdsxxoYApUvmAzhP4=;
	h=Date:From:To:Cc:Subject:References:In-Reply-To:From;
	b=NsD8WFsh7ajZxcDn/clMG7RmQhuriSmsPhdAIGirYanfpUBNq5C4yulDLEyiodYmY
	 WYOTuz/sCUXcvrxUZ3HVnOB3SQI+L/ip18lVdUbJrb271LeGFMyPv2kv/bCWcrDWkz
	 kD29eR8MwbwxLC2lb5W+rrOEnJC0N+hW5R40rxHw=
Date: Wed, 18 Sep 2024 00:04:57 +0000
From: Eric Wong <e@80x24.org>
To: "Robin H. Johnson" <robbat2@gentoo.org>
Cc: meta@public-inbox.org
Subject: Re: CSS behaviors bug report: dark/light switch non-functional
Message-ID: <20240918000457.M692185@dcvr>
References: <robbat2-20240901T045635-169490258Z@orbis-terrarum.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=us-ascii
Content-Disposition: inline
In-Reply-To: <robbat2-20240901T045635-169490258Z@orbis-terrarum.net>
List-Id: <meta.public-inbox.org>

"Robin H. Johnson" <robbat2@gentoo.org> wrote:
> I wanted to include a patch, but no obvious way without it being messy
> really stood out, so this is only a bug report.

Yeah, I've been taking a stab at this in between other things but
not really making progress.
 
> contrib/css describes using the 'prefers-color-scheme' media query
> selector, but Gentoo got a report that the selection between light &
> dark didn't work.

I'm not even sure how that works anymore with fingerprint resistance.

Which browsers + versions + configs are they using?

Will need some testing from others here...

> One of the other devs traced it down to nuances of the HTML link media
> attribute: query expressions are not valid in the HTML variant in some
> browsers.

OK

> This is also mentioned here:
> https://stackoverflow.com/questions/69113672/loading-css-based-on-prefers-color-scheme-media-query
> > Loading CSS based on any media query expression seems to be out of specification for the media attribute.
> 
> As a workaround, I merged the two files with a wrapper, but it feels
> sub-optimal, because the entire text gets injected into the PI HTML.
> 
> ```
> @media(prefers-color-scheme: dark) {
>  ... #content of 216dark
> }
> @media(prefers-color-scheme: light) {
>  ... #content of 216light
> }
> ```

Yeah.

> I think the cleanest solution would be a variant of the above:
> clauses, but with @import statements inside them, and making PI-httpd
> expose all the CSS Files.

I think a safe way is to allow loading any CSS files present in
the same directory as an admin-specified CSS file.  IOW,
	public-inbox.css = /path/to/foo/216dark.css

Will allow autoloading all /path/to/foo/*.css files.


Also, I don't think @import works inside @media,
https://developer.mozilla.org/en-US/docs/Web/CSS/@import says:

| The @import CSS at-rule is used to import style rules from other valid
| stylesheets. An @import rule must be defined at the top of the stylesheet,
| before any other at-rule (except @charset and @layer) and style declarations,
| or it will be ignored.

So I think it'd have to be something like:

@import url('216dark.css') screen and (prefers-color-scheme: light)

If I'm understanding that correctly.

Hopefully I'll be back in a few hours or tomorrow with something
to test...