Light and Dark Theme in Belchertown Skin with Custom Content

[Karen K]

I included a custom iframe into one of the index_hook_after_....inc files. This iframe is a link to some foreign site providing a picture. The link includes a lot of parameters, one of them for light or dark background.

I have almost no knowledge about JavaScript. How can I adjust the link according to the theme in action?

Maybe I could insert something into the changeTheme() function in belchertown.js, but I guess that would be no good idea because the changes are removed during updates. So the better way seems to be to put some JavaScript code into the *.inc file. But how would that look like?

I hope, someone can help.

The *.inc file contains a link like that:

<div class="col-sm-6">
<iframe src="https://www.meteoblue.com/de/wetter/widget/daily/w%c3%b6llsdorf_deutschland_2806358?geoloc=fixed&days=7&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&precipunit=MILLIMETER&coloured=coloured&pictoicon=0&pictoicon=1&maxtemperature=0&maxtemperature=1&mintemperature=0&mintemperature=1&windspeed=0&windspeed=1&windgust=0&windgust=1&winddirection=0&winddirection=1&uv=0&humidity=0&precipitation=0&precipitation=1&precipitationprobability=0&precipitationprobability=1&spot=0&pressure=0&pressure=1&layout=light" frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width:378px; height:354px">
</iframe>
<div style="font-size:85%">
<!-- DO NOT REMOVE THIS LINK -->
<a href="https://www.meteoblue.com/de/wetter/woche/w%c3%b6llsdorf_deutschland_2806358?utm_source=weather_widget&utm_medium=linkus&utm_content=daily&utm_campaign=Weather%2BWidget" target="_blank">&copy; meteoblue</a>
</div>
</div>

See the option "layout=light" there. It needs to be changed, if the theme is changed.

[vince]

See if you can do a simple .inc that writes out "my current theme is dark"  or the like based on sessionStorage.getitem('theme') much like the examples in changeTheme( )

belchertown_debug("Theme: sessionStorage.getItem('theme') is now: " + sessionStorage.getItem('theme') );

Now how would you get that to work in a .inc file ?   I dunno.  Not a javascript person....but I'd agree you're looking in the right areas for examples.

[Greg from Oz]

In the dark mode the graphic for the moon flips and shows the moon phase icon as a different phase....

[Karen K]

Thank you so far.

Is there some expert to JavaScript around, who could explain the JavaScript part?

[Karen K]

So I tried and tried and tried. Look there:

Issue #518