Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Determine Light or Dark Mode for Image Tag #63

Open
Pogs2004 opened this issue Nov 12, 2022 · 3 comments
Open

Determine Light or Dark Mode for Image Tag #63

Pogs2004 opened this issue Nov 12, 2022 · 3 comments

Comments

@Pogs2004
Copy link

Pogs2004 commented Nov 12, 2022

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
Copy link

W0CHP commented Nov 12, 2022

@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:

var config_mode = '${Extras.Appearance.mode}';

@seehase
Copy link

seehase commented Nov 12, 2022

@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
Copy link
Author

Pogs2004 commented Nov 13, 2022

@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:

var config_mode = '${Extras.Appearance.mode}';

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants