Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#41 2020-12-16 08:45:27

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,233
Website

Re: [solved] Dark/light modes via OS preference

Destry wrote #327540:

[…] serving colors via a light.css and dark.css to reduce data loading,

dont’t do that, unless your are serving enormous stylesheets (TXP backend stylesheets are not so big). You need to open two or more http connections which is way more expensive than downloading a couple of KB of text.

Question, isn’t this a valid way to use custom properties?

hr {background: linear-gradient(to right, --hr-gradient-end-color, --hr-gradient-middle-color 50%, --hr-gradient-end-color);...

not valid, you need to wrap into a var() :

hr {background: linear-gradient(to right, var(--hr-gradient-end-color), var(--hr-gradient-middle-color) 50%, var(--hr-gradient-end-color));
}

Last edited by phiw13 (2020-12-16 08:46:08)


Where is that emoji for a solar powered submarine when you need it ?

Offline

#42 2020-12-16 08:46:43

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,036
Website

Re: [solved] Dark/light modes via OS preference

Destry wrote #327540:

… (serving colors via a light.css and dark.css to reduce data loading, and allowing for a potential ‘sepia’ option) …

I think having a separate light/dark.css is overkill if you’re just switching out the css variables via a css-theme / group (like this for example) plus a few extra directives. The number of extra directives is likely not a huge amount of data and the if you have compression activated on your server (in htaccess for example), then a fair amount of the css is identical and the difference after compression will be minimal.

Question, isn’t this a valid way to use custom properties?

hr {background: linear-gradient(to right, --hr-gradient-end-color, --hr-gradient-middle-color 50%, --hr-gradient-end-color);...

I think you just need var(…) around your variables, e.g.:

hr { background: linear-gradient(to right, var(--hr-gradient-end-color), var(--hr-gradient-middle-color) 50%, var(--hr-gradient-end-color));
}

Is it possible to break that linear-gradient() rule down more to separate the color rules out? I didn’t think it was, but maybe I’m wrong.

Have a look at this page for one approach of using CSS (custom) variables with linear-gradient: What can you put in a CSS variable?

EDIT: Philippe was quicker and more concise :-)


TXP Builders – finely-crafted code, design and txp

Offline

#43 2020-12-16 09:19:30

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,663
Website

Re: [solved] Dark/light modes via OS preference

jakob wrote #327543:

you just need var(…) around your variables

EDIT: Philippe was quicker and more concise :-)

Doh! I should have saw that. I’m not used to looking at these.

Thanks, and for the advice. I won’t make files.

Last edited by Destry (2020-12-16 09:19:40)

Offline

#44 2020-12-16 12:58:23

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,663
Website

Re: [solved] Dark/light modes via OS preference

Pushed. I will change web form coloring. That’s a different theme. And I see I forgot the submit button colors.

Anything else you might see amiss, I’m all ears.

Offline

#45 2020-12-16 16:05:43

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,663
Website

Re: [solved] Dark/light modes via OS preference

Destry wrote #327482:

And I noticed that if I use the background-image rules in the color-scheme set anyway…

. . .

It works to make those bar graphics on nav items and body links not appear in dark mode only

As it expectedly turns out, that’s only because the FF extension doesn’t show them, but I can see them on the live site. So it seems I’ll be able to fix those properly too.

Currently the nav hover graphic looks purple in my phone, but it’s supposed to be a darker blue.

———————-

Now it’s blue. Takes a while to propagate, I guess.

———————-

Realizing how much I would benefit from using CSS variables to manage my numerous font size assignments, often redundant across elements.

Last edited by Destry (2020-12-16 17:07:41)

Offline

Board footer

Powered by FluxBB