Dark mode different image?

[Marzio]

@famousmag

Add one condditional region for bs5theme1.theme == 'auto'

The problem is that the AUTO mode involves the automatic choice of display mode, according to the visitor’s computer configuration
But in this case the choice could be dark or light
It would be necessary to know how to intercept the set AUTO value

[famousmag]

Anyway, you can go on with the 2nd solution:

@famousmag

Add one condditional region for bs5theme1.theme == 'auto'

[Marzio]

After all, it is an important option, as it automatically predisposes the visitor’s usual preference, especially in the case of smartphones
I would not like to eliminate this choice which is then that of default
But choosing automatic we don’t know what the correct mode is

[guptast]

Auto mode is based on the system preferences. So, if system preference is set to Light, then Auto mode will display the light theme, and similarly theme display will switch to Dark theme if the system preference is set to Dark.

[Marzio]

Yes it’s correct
In fact, the automatic mode works perfectly, but unfortunately in our case the choice of the dark or light image does not work
It would be necessary to know how, where and when the mode is set when you are chosen automatic

[famousmag]

That’s a good question for your case…

Which theme (dark or light) is defined by user’s “auto” theme selection.

(I will look into that when I have time)

[Marzio]

To intercept the visitor’s default mode, this should be the method with CSS
It is necessary to reason how to adapt it to our problem of dark and light images

@media (prefers-color-scheme: dark) { body { background-color:black; color:white; } }

@media (prefers-color-scheme: light) { body { background-color:black; color:white; } }

[famousmag]

That’s what I ended-up testing also and it results correct.
So,

@media (prefers-color-scheme: dark) {
    /*  the auto is dark */
}

[Marzio]

Now the problem to be solved is how to use this resource for:

• image to be attributed at the time of the choice automatic mode
• image to be attributed at the time of the first opening of the site

[famousmag]

hahaha…

I think we went back to what was initially suggested…

@famousmag

Try this…

give an id to the img for example:

<img id="logoImg" src="assets/images/Logo_dark_250.png" width="150">

[data-bs-theme="dark"] #logoImg {
    content: url("assets/images/Logo_dark_250.png");
}
[data-bs-theme="light"] #logoImg {
    content: url("assets/images/Logo_light_250.png");
}

*I don’t know if you will face a browser caching problem… Maybe a css expert can advice us on this

Just midify it now based on the new @media (prefers-color-schema)

[Marzio]

I don’t know very well the use of
@media (prefers-color-scheme: dark) {
/* the auto is dark /
}
@media (prefers-color-scheme: light) {
/ the auto is light */
}

Is it possible to use it as a show or hide?
Or create and manage a variable?

[famousmag]

I suppose via a run javascript function we could do that…

But iI really think that you push it…
Why not:
1) disabling the auto theme as I told you

button[data-bs-theme-value="auto"] {
  display: none !important;
}

2) set the default to light or dark

3) AND LET THE USER DECIDE WHAT HE WANTS…
4) This way, if he selects dark or light it will be stored in the local storage for the next visit
Just saying… Is this really worth your effort?

Let me know if you finally MUST handle the auto theme so I test it and help you my friend

[Marzio]

As I said earlier I know it may seem useless, but I think instead that automatic recognition is important especially for smartphones and tablets

[famousmag]

I found this:

Source: https://stackoverflow.com/a/57795495

I test it and it is working, so you can:

1) add a variable var_autoTheme in your page

2) create a javascript function before the end of the body tag (</body>) and include the above condition of the screenshot , for example function checkAutoTheme()

3) inside the condition use the dmx.parse to set the variable var_autoTheme to the desired picture source depending on condition’s result

   <script>
    function checkAutoTheme() {
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        dmx.parse('var_autoTheme.setValue("assets/images/Logo_dark_250.png")'); //dark
      }
      else
      {
        dmx.parse('var_autoTheme.setValue("assets/images/Logo_250.png")');
      }      
    }

  </script>
</body>

4) add an app.load() event and call the checkAutoTheme() function

I think you work on php so it is:

<html is="dmx-app" dmx-on:load="run([{runJS:{function:'checkAutoTheme',outputType:'text'}}])">

5) add one more conditional region to the 2 existing ones you have for checking “dark” and “light” and pass the variable’s value:

<div id="condAuto" is="dmx-if" dmx-bind:condition="(bs5theme1.theme == 'auto')">
    <img id="imageAuto" dmx-bind:src="var_autoTheme.value" width="150">
</div>

Got it?

[Marzio]

Wow
Thank you
I study it well and then I’ll let you know

[Marzio]

The variable var.autotheme when I create it what value do I have to give?

[famousmag]

no value… live it blank

[Marzio]

I did but unfortunately auto mode doesn’t work
Now I have to go out. Later I analyze well and then I’ll let you know

[famousmag]

1. Be carefull to follow my suggestion steps and if needed change the names, ids, picture sources to the ones of your page

2. Make sure that your picture sources are correct and the pictures exist in the specified path

3. Just remember before refreshing your page to set the local storage value of the theme to auto
   

   

4. Check for errors or any report on your dev console

[Marzio]

Everything seems correct, but with automatic mode no image is displayed