Dark mode with JS script and → images / pictures

Support Themes & Styling
1

Hello Gravpals,

Currently I’m watching some tutorials on how to place dynamic html <picture> tags with the ability to change the src attribute according to some conditions (CSS attributes in my case). My goal is to change several .png logos on a page depending on the background (i.e. light/dark mode), so they alternate between their light or dark version…

If you were to implement that in Grav, how would you do it ?
I guess I can always use html inside the content field, the classic way.
But I was maybe hoping to get some help from experienced people !

Thanks and cheers !
(here’s a link to the page… I’m about to add 2 more logos on it : Partenaires | 1800 trucs)

EDIT: Also I just wanted to add that I’m working on a credit page to thank GRAV and Hypertext theme (parent of my theme called ALOT - a library of things) + all the people involved. It’s on its way !

2

@medi, If you have a js script that runs when switching between dark/light theme, why not have js also search for <picture> and change its src attribute?

3

Good call. Thanks !

But in fact GRAV doesn’t generate a <picture> tag when calling ![file.jpg](file.jpg) in content.
Instead it’s the classic “img” tag.

4

@medi, Maybe I’m a bit confused by your question…

Do you want to know (loosely rephrased)
“How to change the src attribute using JS” or “How to generate a <picture> tag in Markdown”, or do you maybe want to know both?

1 Like
5

Thanks a lot @pamtbaau for the rephrasing.
It’s very helpful and so I would like to know how to generate a <picture> in Markdown, by using the common ![image.png](image.png) and finally making it interact with JS in order to add -dark in the file name.

Thank you for your time !
Take care

6

@medi, Do you need Art Direction that requires the use of element <picture>?

7

I’m discovering this “Art Direction” help to you right now.
It isn’t necessary for now. And could be useful in the future !

In any case, I’ll check that and implement stuff that can only add up to GRAV as an “ecosystem”.

8

The script is active on the whole website… but I only want to “negate” the pngs on the wall of logos. This is why I was thinking that <picture> tag is best because it interacts with CSS and has a fallback source if the [filename]-dark.png isn’t found in the page media.

Is it a plausible explanation ?

9

Maybe my knowledge is outdated, but doesn’t it interact with CSS exactly the same way any other element does - via style and/or class attributes?

10

Apparently you can change the scr attribute according to CSS conditions.
In my case I would like GRAV to load the dark src depending on : prefers-color-scheme and parent is .dark blabla ← I’m planning to look up this part later.

Thanks for your question

source: https://reactgo.com/dark-mode-change-image/

11

Here’s what I would come up in the final output :

<picture>
  <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)">
  <img src="light-image.jpg" alt="logo of blabla">
</picture>

But I don’t find how to do it in GRAV.

12

But CSS (which you have to write yourself) has nothing to do with it and <picture> doesn’t have src attribute at all. Although it may contain <img> tag, which supports src attribute, but this doesn’t change depending on the viewport - it only serves as a fallback. The only magic thing here is a srcset attribute, which resolves one of provided values depending on the viewport, but again - it has absolutely nothing to do with CSS

13

In the end I’m gonna use CSS

-webkit-filter : invert(.5)
filter : invert(.5)

That’s much less work

Thank you all for your time !