Location of mainUI template pages (for enabling dark mode)

Setup, Configuration and Use Widgets
1

Hi all,
The way OH sets dark mode is not working for me. I need to code it into the page.
Spend the day researching it but best I could come up with is enabling dark mode on oh-grid-col. And only that element.

Assuming that this is not implemented yet fully (not a bug…) I want to add the “dark” class near the body tag of the html page.

grafik

After “theme-filled” I need the string " dark". Sounds simple enough. Now, does anyone know where the template is that this page file is generated from ?
Alternatively, when would it be possible to use ‘themeDark: true’ on other elements or the whole page ?

2

I think this is what you are looking for:

3

Thank you for pointing me into the right direction.

this.themeOptions.dark = localStorage.getItem('openhab.ui:theme.dark') || (
  (window.OHApp && window.OHApp.preferDarkMode) ? 
    window.OHApp.preferDarkMode().toString() : 
    (this.$f7.darkTheme ? 'dark' : 'light')
);

This line of code sets the value of this.themeOptions.dark based on several conditions:
Seems it all boils down to this logic:

  <f7-app v-if="init" :style="{ visibility: (($store.getters.user || $store.getters.page('overview')) || communicationFailureMsg) ? '' : 'hidden' }" :params="f7params" :class="{ 'theme-dark': this.themeOptions.dark === 'dark', 'theme-filled': this.themeOptions.bars === 'filled' }">

default is light theme. This line does switch to dark on these conditions:

  1. It checks if there is a value stored in the local storage with the key 'openhab.ui:theme.dark'. If there is, it uses that value.
  2. If there isn’t a value in local storage, it checks if window.OHApp is defined and if window.OHApp.preferDarkMode is a truthy function. If so, it calls window.OHApp.preferDarkMode().toString() and uses that value.
  3. If neither of the above conditions is true, it checks if this.$f7.darkTheme is truthy. If it is, it sets 'dark'; otherwise, it sets 'light'.

Where

  1. is probably set when I use the official way of switching to dark mode through the ‘about’ menu - not persistent on my device.
  2. must be a browser property that I cannot find in my browser (“fully” on a (android) fire tablet)
  3. this.$f7.darkTheme . No idea where this is set. A url parameter doesn’t do the trick by any chance ?

I still hesitate to fiddle with the html template…

4

It’s an JS interface injected by the apps. See here for the Android app, I assume the iOS app does something similar.

5

got dark mode running finally on my FireHD 8 (10th Generation).
Had to do the following:

  1. get a windows tool named Fire Toolbox, connect it via USB and use it to disable auto updates (and do lots of other tweaking).
  2. use the same tool to sideload the fully browser apk (1.54) and install it.
  3. use the same tool to push the following json file to any folder. Name it .json
{
  "webviewDarkModeV2": "2"
}
  1. import that file into fully. There is an option that says import json.
  2. activate “Force Dark Mode” in other settings-> dark mode