Determine Light or Dark Mode for Image Tag

[Pogs2004]

Hi,

Not an issue as such but I have added a sun path diagram to my Ephemeris (Almanac) page:

https://www.360shetland.co.uk/weather/almanac.html

I have two versions of the diagram, light and dark (which is currently loaded). What I would like to do is have the jpg image change depending on whether the colour scheme is in light or dark auto mode. Is there a tag somewhere that picks up whether the device is in light or dark mode?

My ultimate goal is to code a 3D sun path diagram that takes the time and date from the app, similar to this:

http://andrewmarsh.com/apps/staging/sunpath3d.html

Thanks,

Rory

[W0CHP]

@Pogs2004

${Extras.Appearance.mode} is the tag/var.

js.inc contains the logic for auto, light and dark settings derived from skin.conf:

    var config_mode = '${Extras.Appearance.mode}';
    var theme_mode = 'light';
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        theme_mode = 'dark';
    }
    // Override mode by config
    if(config_mode != "auto") {
        theme_mode = config_mode;
    }

Source:

https://github.com/neoground/neowx-material/blob/39125e0f7ea1d39bc2e65a329bdb9b2548583110/src/js.inc#L26

[seehase]

@Pogs2004 I would like to integrate that in my fork as well would you mind creating a pullrequest with you changes to https://github.com/seehase/neowx-material

[Pogs2004]

@Pogs2004

${Extras.Appearance.mode} is the tag/var.

js.inc contains the logic for auto, light and dark settings derived from skin.conf:

    var config_mode = '${Extras.Appearance.mode}';
    var theme_mode = 'light';
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        theme_mode = 'dark';
    }
    // Override mode by config
    if(config_mode != "auto") {
        theme_mode = config_mode;
    }

Source:

https://github.com/neoground/neowx-material/blob/39125e0f7ea1d39bc2e65a329bdb9b2548583110/src/js.inc#L26

Thanks @W0CHP, I was hoping there would be a global tag for light or dark, but $Extras.Appearance.mode just comes from the skin.conf so can be light, dark or auto. In the end I wrote a wee function to determine if the browser is in dark or light mode:

<script type="text/javascript">
        (function() {
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.getElementById("sunpath").src = "img/sunpath_dark.jpg";
        }
        else {
            document.getElementById("sunpath").src = "img/sunpath.jpg";
        }
    
    })();
</script>

This works fine on all major browsers / devices.