Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#31 2020-12-14 20:37:33

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

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

I’m only keeping the 50op image (to be called, simply, ladder.png).

jakob wrote #327501:

How about like you had it above

I tried, but it doesn’t seem to work. Still loads the same light mode image. That would be the easiest and best solution for an image served from CSS, but it seems too good to be true.

I think I’ll have to take it out of the CSS and put it in a div, which I hate doing for just a presentation image. But then I can use filter: invert (100%);, perhaps.

Compromises.

Offline

#32 2020-12-14 23:06:33

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

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

Destry wrote #327502:

I tried, but it doesn’t seem to work. Still loads the same light mode image. That would be the easiest and best solution for an image served from CSS, but it seems too good to be true.

That code does work (assuming no typos, wrong path, …) but that extension you use does not seem to be able to handle that situation. A weakness in the extension ?


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

Offline

#33 2020-12-14 23:30:40

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

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

phiw13 wrote #327506:

That code does work (assuming no typos, wrong path, …) but that extension you use does not seem to be able to handle that situation. A weakness in the extension ?

Probably the extension.

Well, I just refactored the markup/css to put an extra stupid div in for the ladder image, which blows because I struggled for hours using absolute positioning (no doubt the worst way I could have gone) to get two dumb divs side by side and the ladder sized correctly, and that was just for one screen size. What a nightmare. And feels about as stable as a card house. I could have exercised instead and felt better.

But I can now say that this works:

@media (prefers-color-scheme: dark) {

  :root { [all the variables] }

  .ladder img { filter: invert(100%); }

}

And that’s nice, if I decide to keep it, because it only needs the one light mode image to work, so one less file.

But If you say that other way works, too, then I might change it all back because it doesn’t feel right with the div in the markup.

Last edited by Destry (2020-12-14 23:33:53)

Offline

#34 2020-12-15 07:21:21

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

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

I don’t like the image being content, and the extra (lousy, in my case) code it requires for it, so I’ll put it back to how I had it and push it live today and check the image on my phone to see if your right. If not I’ll revert again to the lousy markup, ‘cause the ladder stays, one way or the other. :}

Offline

#35 2020-12-15 07:52:14

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

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

Too bad the filter: invert(100%); can’t be used on a background image. Or can it…?

What about a pseudo element, so it doesn’t impact the menu content? This may not be exactly right, but for example:

.menu {
    overflow: hidden;
    position: relative;
}

.menu:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url(‘/assets/.../ladder.png’);
    . . .
    filter: invert(100%);
}

Or would it be :after?

Last edited by Destry (2020-12-15 08:03:42)

Offline

#36 2020-12-15 08:02:39

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

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

You haven’t put if live yet I guess? Ask for testing…

As for your other suggestion, sure inserting the image via generated content (::before) would work
You need to specify the content property:

.menu::before { 
  content: '';
  background: url(path/to/image);
/* rest of your code */
}

or

.menu::before { 
  content: url(path/to/image);
 …
}

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

Offline

#37 2020-12-15 08:06:38

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

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

Cool. I will try that. Maybe I get it working and see it in dev with the FF plugin.

(No, not live yet.)

Btw, I’ve always been putting single quotes around the url() path, like above, but I’m not sure why; probably copied it once upon a time and it stuck. But is that even necessary?

Offline

#38 2020-12-15 08:16:11

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

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

Destry wrote #327520:

Btw, I’ve always been putting single quotes around the url() path, like above, but I’m not sure why; probably copied it once upon a time and it stuck. But is that even necessary?

Technically quotes are not needed in “simple” cases, but it is not a bad habit to always include them

Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0×7e.

source


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

Offline

#39 2020-12-15 10:01:09

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

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

Well, that fell into place nicely. I can even use a single image to source both locations by adding the filter: opacity(); into the mix. And I can see it all in local development on my late 2011 laptop maxed out at Sierra by help of that Darker Mode plugin for Firefox. Ding!

(I was using two images before — 25op and 50op — that were created with different opacity values from a full opacity image; so I just learned something great about CSS filters. Will be using these more often, if ever having the chance.)

And after thinking about ::before solution, it even gives me an idea of trying something interesting with the nav. But that’s for later.

Btw, regarding ::before, when I first set it up, the pseudo was sitting on top of the .menu item links, so I couldn’t use the links. I put a z-index: -1; on it and that fixed the problem. I would have thought, though, that being before the main element box, it would have been under it already when stacked. Oh well.

I will push this in a while.

Come to think of it, if the element is stacked like a sandwich with ::before and ::after, then before is probably the top slice of bread, and I needed after?

Last edited by Destry (2020-12-15 11:09:44)

Offline

#40 2020-12-16 08:28:39

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

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

Life got in the way, so I haven’t pushed this yet, but I will within the hour.

I’ve been reading more on this stuff here, and the CSSWG spec on it, which has me thinking I don’t have it optimized yet (serving colors via a light.css and dark.css to reduce data loading, and allowing for a potential ‘sepia’ option), thus will be iterating on it a time or two, but I’ll get what I have up for a start.

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);
}

If so, then I think I found another thing the FF plugin doesn’t recognize, because it doesn’t show up in testing.

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.

Last edited by Destry (2020-12-16 08:33:48)

Offline

Board footer

Powered by FluxBB