Change Theme automatically in OpenUI5/SAPUI5

Readme.md

Copy the code from BaseController in this gist to BaseController in your project, then attach setMode to onInit() of your views, or the base view.

BaseController.js

setMode: function() {
  const colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
  this.determineColoringScheme(colorScheme);
  colorScheme.addEventListener("change", scheme => this.determineColoringScheme(scheme));
},

determineColoringScheme: function(colorScheme) {
  if (colorScheme.matches)
    sap.ui.getCore().applyTheme("sap_fiori_3_dark");
  else
    sap.ui.getCore().applyTheme("sap_fiori_3");
}

Copy the code from BaseController to BaseController…

Is it correct or there is a typo? From one controller to the same controller?

Copy the code from BaseController to BaseController…

Is it correct or there is a typo? From one controller to the same controller?

Whoops. I meant copy from BaseController in this gist to the BaseController in your module.

Thanks, I'll try it!

It works! But addListener is deprecated.

I would replace it with addEventListener:

colorScheme.addEventListener("scheme", (scheme) => this.determineColoringScheme(scheme));

It works! But addListener is deprecated.

I would replace it with addEventListener:

colorScheme.addEventListener("scheme", (scheme) => this.determineColoringScheme(scheme));

Thank you for that. I probably forgot to update it here.
Edit: I've updated the gist, thank you so much!