[Visual] Allow to change color/style mode

[MichaIng]

Currently we have a pretty dark mode design, which is fine. Mid/Long term it would be great to have a toggle to enable a bright mode and/or even change the accent colour from green to something else. We just need to assure that the DietPi logo keeps looking good 😄.

Linking the original request by @GvY85: https://github.com/MichaIng/DietPi/issues/448#issuecomment-964513286

I personally would give this a low priority currently, and concentrate on stability first, but of course if someone is in mood to start with this, we are always open to pull requests.

[ravenclaw900]

Do you think this would be best in the config file, or somewhere else in the webpage. I can probably fairly easily implement a "minimalist" white/black theme.

[MichaIng]

A button e.g. at the top right of the dashboard would be awesome in my personal opinion, so it can be easily switched e.g. when you realise that the sun went down. But don't invest too much time when it's not very easy to implement, as long as you are not in mood to play with exactly this 🙂.

[ravenclaw900]

Sorry, I meant for themes. A dark mode trigger is actually much easier than you think, Tailwind/WindiCSS has a built-in setting for that.

[MichaIng]

Ah nice. For the color theme I see it similar: Nice to have a setting in the dashboard UI but a config file setting would do as well.

[ravenclaw900]

Dark mode trigger added with https://github.com/ravenclaw900/DietPi-Dashboard/commit/38bbd3a63b846a647912c0cd4b5d4ae31dddd342.

[ravenclaw900]

Also, a different visual change, but instead of changing pages instantly and showing "Getting Data", the page will now blur until the websocket message is received, and then change. How do you think it looks?

[MichaIng]

Legend 👍, works very well. The sidebar should probably have colors inverted as well? Also currently the selection isn't stored, hence reloading the site will always show in dark mode.

I faced another issue now: When reloading or initially accessing a page that is not the entry/statistics page, like http://192.168.1.23:8088/service, the content is empty. Looks like the entry page always needs to be loaded first, before any other page can be shown. Probably something initiated on the entry page that is used/required on the other pages as well, and we should be able to, if missing, do the same initialisation from any other page?

Just retested with current stable release, and there every page can be reloaded of opened initially, so this is probably related to the Getting data... vs blur change? I'll have a look into recent commits.

EDIT: https://github.com/ravenclaw900/DietPi-Dashboard/commit/dc01d90 So pollServer now requires the page as input instead of using the current path, and I guess on initial page load this input is not given. So either we need to assure that the input is given, or we need to have pollServer falling back to window.location.pathname if no input was given, to be backwards compatible.

EDIT2: Though, socketOpenListener is the only other place where pollServer is called and has the input given. Practically I don't see a difference between now and then. May it be that since socketOpenListener is a constant, that window.location.pathname within does not change?

EDIT3: The browser console shows a related error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')

Pointing to:

function ls(s) {
    let t, e, l, n, r, o = s[0].services, a = [];
    for (let c = 0; c < o.length; c += 1)
        a[c] = Bt(At(s, o, c));

And similar loops on each page (EDIT: with a table where data needs to be derived for). It seems to be the data is not read when reloading the page compared to navigating to it, and this may be the loop to create the table. Indeed it works well with the Management, File Browser and Terminal pages, where no (or different kind of) tables are shown.

[ravenclaw900]

It's because the data doesn't come immediately. This works for most pages because it's not trying to iterate over undefined, however where it does you get the error (actual non-production code error: Uncaught (in promise) Error: {#each} only iterates over array-like objects.). This wasn't a problem before because things were conditionally rendered based on if the correct data is there (File Browser still is, so that's why it doesn't also get the error). I'll add those if statements back in.

EDIT: Done with https://github.com/ravenclaw900/DietPi-Dashboard/commit/8c8b63cd555f4ee71a3d14dc282736981e46ff07

[ravenclaw900]

Alright, the library I was planning to use isn't going to work (see below). There's a request in windicss for multiple themes, but not much work has been done on it.