Compatibility with Icingaweb2 v2.10.x and newer

[mrimann]

With the release of v2.10.0 of Icingaweb2, this theme does not seem to work properly like before as it e.g. lacks support for the dark/bright theme.

As this repo is probably the "go to resource" for those like me that just wanted to have "default look", but with own login background image + company logo on top left of the dashboard and on the login page, it would be great to have a new version of this plugin released that is compatible with the new theming possibilities.

This would probably help a lot for those that are not too deep in the development of Icingaweb, but want to adapt the look and feel to their company's branding.

[Figment93]

I agree with Mrimann, I'm currently having to remove the company branding from our Icinga instance as this isn't playing nicely with the latest Icingaweb2.

I've tried adding the below as suggested by the guide here, but it doesn't work either.

@light-mode: {
  :root {
    --body-bg-color: white;
  }
  .icingaweb2-module.module-foo {
    --your-custom-color-variable: white;
  }
};

[Hrocc]

i modified icingaclassictheme with our company colors and added the header-logo part from the old theme. Now it looks almost exactly the same as before.

https://github.com/moreamazingnick/icingaweb2-module-icingaclassictheme

[mj84]

I just stumbled across this blogpost while searching for a way to provide the choice of light / dark modes in a theme: https://icinga.com/blog/2021/06/16/introducing-dark-and-light-theme-modes/

According to the blog post, this theme should just include

@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
  :root {
    --body-bg-color: white;
  }
}
@media (min-height: @prefer-dark-color-scheme), (prefers-color-scheme: dark) and (min-height: @enable-color-preference) {
  :root {
    --body-bg-color: black;
  }
}

and the support for light / dark mode is done.

[mj84]

Sorry the info above is not accurate and somewhat outdated. There is a follow-up blog post which explains a bit further how to establish light / dark modes in a theme: https://icinga.com/blog/2022/02/10/icinga-web-not-just-black-and-white/