Feature request: Auto dark mode

[si458]

It would be amazing if the app detected if the mobile device was running in dark mode or not and activate it accordingly

I have found a plug-in which might help with the detection automatically in capacitor

https://www.npmjs.com/package/capacitor-dark-mode

[ricoberger]

Hi, automatic dark mode detection is done via

kubenav/src/utils/constants.ts

Line 11 in f403fc3

darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,

. This wouldn't apply when the app was installed before this automatic detection was available, because the value is already saved https://github.com/kubenav/kubenav/blob/master/src/utils/storage.ts#L131.

So if you reinstall the app, the app should start in dark mode when it is set as the systems default.

[si458]

Hi,

ok so ive removed the app, and then reinstalled it via testflight (2.2.2), and indeed it does work
BUT ONLY ON THE APP START UP, so a feature request maybe for while the app is running?

if you load the app up in say light mode, go into the phones settings and change to dark mode, then go back into the app,
its still stuck on light mode until you terminate the app and reopen it for it to show in dark mode,

and its the same visa-versa

[ricoberger]

Sure we can keep this as feature request.

With the current logic this would be difficult to implement. As a first quick idea: We can replace the IonToggle component in the settings with an IonSelect component. The possible values should be sth. like System, Dark and Light. This also requires a new settings value to not conflict with existing installations (maybe settings.theme).

[si458]

in theory the plugin i mentioned above shows it can detect the system change
so you could do an on event IFdark mode THEN flip switch on ELSEflip switch off

i would really love to help! but i just dont understand react or ionic, they are far to complicated :(

give me standalone html+js+css any day of the week

[ricoberger]

Hi @si458, automatic theme changing (when the system theme is changed) is now supported. You can try out this feature with the following build: https://github.com/kubenav/kubenav/actions/runs/258083315

[si458]

Hi @ricoberger
Brilliant thank you!
Any chance of doing a new TestFlight release?
I don't really use the dark mode on laptop, only my iPhone/iPad

[ricoberger]

I want to submit a new TestFlight version by the end of the week. First I want to take a look at #178, wich I also want to include in the next beta version 🤞

[si458]

Hi @ricoberger
brilliant, seems to work on mac no problem! cant wait for mobile version now!