64 bug dark mode should be applyed to the whole netzgrafik editor content

[aiAdrian]

This Pull Request resolves the issue with the Light/Dark Mode of the network graphics editor. When the user switches to a dark layout/design, the entire content should be rendered in dark mode. This is now the case.

Issues

Open points:

• Does not yet respond to the design settings (dark/light) mode in the browser settings/operation system settings
• The Settings is only available in a the Netzgrafik-Editor, the user can not switch the design/color in project nor in variant view. Thd user has to navigate into.an netzgrafik to switch the design/colors. The latest setting is dtored in the browser local data.

Checklist

• This PR contains a description of the changes I'm making
• I've read the Contribution Guidelines
• I've added tests for changes or features I've introduced
• I documented any high-level concepts I'm introducing in documentation/
• CI is currently green and this is ready for review

[louisgreiner]

Would it be better to reduce this space ? Between "Hintergrundfarbe" and the actual color selector ?

[louisgreiner]

For detecting browser's theme, you can try this in app.component.ts:

    // detect at initialization
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      console.log("dark mode");
    } else {
      console.log("light mode");
    }

    // listen for browser setting update
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
      const newColorScheme = event.matches ? "dark" : "light";
      console.log(newColorScheme);
    });

then you can adapt the application theme on that

[aiAdrian]

Thank you. The theme (dark, light detector) is working well. However, there are some drawbacks:

The user has to switch the theme on the operating system side if the browser is using the default settings from the operating system.
The user has to manually change the dark mode in the browser settings.
In both cases, the user has to change the theme (dark, light) somewhere other than in the editor. If the user wants to see the netzgrafik in dark mode, they have to switch the "global settings" accordingly.

It would be nice to use this flag as the default one if the user has not yet chosen between dark/light in the netzgrafik editor settings. Once the user changes the coloring/rendering, we store this information locally.

• Decision: If the user has not yet change the "local settings - coloring" the Netzgrafik-Editor use the business color theme light , resp. dark as default.

[aiAdrian]

Thank you. The theme (dark, light dector) is working well. But the bad thing is:

• User has to switch on operating system side - if the browser is using default settings from operating system
• User has to change the dark mode in browser settings (manually)
  In both cases the user has to change the theme (dark, light) somewhere else than in the editor. Once the user like to see the netzgrafik in dark he has to switch the "global settings" vice versa.

This flag would be nice to be uses as default one, if the user has not yet choosen between dark/light in the netzgrafik editor settings. Once he change the coloring/rendering we store this information to local.

Decision
If a user has not yet changed the "local settings - coloring" in the Netzgrafik-Editor, the default business color theme (either light or dark) will be used.

Is this OK?

---

[louisgreiner]

I think that would be very fine, default is browser theme (light or dark, depending on the browser value, maybe it could be one of the option to be selected in NGE), and if the user selects another color, it adapts (= override) the color theme of the browser (then stored in localStorage, as it was done before)

[louisgreiner]

Open question:
I don't remember if it was intended to show only locked locks of Perlenkette component ?

I noticed it since the component has changed, but shouldn't we want to know also if the locks are unlocked ? (I understand that it is implicit, but it is user friendlier ?)

EDIT : indeed it was a dumb question, i found the component to display all the locks in Perlenkette component, which works great (but still, I do find that it would be more user friendly to activate it by default, instead of disabling it by default)

[aiAdrian]

The comment is very smart (indeed) - because we are also thinking of a better solution with the toggle (show all locks) - but haven't found the best solution yet. The locks get shown when they are not the default ones. (If you toggle "show all," of course, all will be displayed).

This isn't part of this issue :-) -> #180

[louisgreiner]

Response to #179 (comment)
I works perfectly, but I think a user would like to reset the preferences set earlier in the application to get back to the browser ones (= add a button / option to empty theme in localStorage), then the loop would be complete. What do you think ?

[louisgreiner]

It is working very well, however when we :

• set browser theme to light mode
• open NGE
• open Einstellungen component
• change browser theme to dark mode

Then NGE theme changes to dark (good) but the theme selector remains on light (not good), see screenshot

However, I am not sure it is a big issue and if the user will face that very often. In addition to that, if we close the Einstellungen component and open it again, the selector is changed to dark (good). So it might be good enough to just ignore
Or maybe a light solution could be to reload the selector component (if open) when EventListener on window.matchMedia catch something (= browser theme change)

[louisgreiner]

Except the last comment (that could be ignore imo), good work, thanks !

[aiAdrian]

The latest commit should resolve the "theme selector" issue. Just to be sure, is everything working correctly now? If you could provide me with brief feedback before merging, I would appreciate it.

[louisgreiner]

After full testing (clear localStorage, set browser themes, set NGE themes, try set browser themes (not working -> good), reset to browser theme, set browser theme (working -> good), and also at initialization), it's working very great.

3 things:

1. We could remove

      // netzgrafik-editor-frontend/src/app/services/ui/ui.interaction.service.ts l.474
      console.log(localStoredInfo);

2. (but we can ignore in my opinion) 64 bug dark mode should be applyed to the whole netzgrafik editor content #179 (comment)

3. If the user modify the value in the localStorage field, it breaks the feature. But again, we can ignore in my opinion, only a developer would do that 😄

Taking in account these 3 comments, we can then merge

[aiAdrian]

You have the honor to press 'merge' if it's fine with you - I am fine with this version. It's great to work in dark mode; it makes the work more comfortable due to the high contrast.