IcingaWeb 2.10 can't render my stylesheet with media query, or is only in dark mode

Icinga Web 2
1

Hi,

I tried to adjust my stylesheet after I updated to 2.10.
According to [https://icinga.com/blog/2021/06/16/introducing-dark-and-light-theme-modes/] i havet to add the media query.
With the media query the stylesheet breaks with the following console output:
icinga.min.js:442 15:11:37.497 Someone messed up our responsiveness hacks, html font-family is Times New Roman

and without the media query only the dark mode works, and there is no change to light mode even if selected.

@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;
  }
}

#login {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2367e3;
  background-image: none;
  // fallback ie 9

  .login-form {
    width: 24em;
    position: relative;
    z-index: 10;
  }
}
#social {
  display: none;
}
2

The linked blog post is outdated. Use this as reference instead.

1 Like
3

thanks, for future reference here is my new stylesheet.

@light-mode: {
  :root {
  }
};


#login {
  background-color: #2367e3;
  background-image: none;
  .login-form {
    width: 24em;
    position: relative;
    z-index: 10;
  }
}
#social {
  display: none;
}

switching between light and dark works now, thanks

4

The update to 2.10 also broke our custom theme. E.g. I had this part for the login

#login {
  background-image: url('../img/company/nicepic.jpg');
  background-color: @icinga-blue;

  input[type=submit] {
    background-color: @icinga-blue;

 &:hover {
     .var(background-color, menu-highlight-hover-bg-color );
   }
  }
}

I had to remove the hover part because it broke the whole theme and it seems there are a few other things from my old theme, which are not working anymore. I am still working on it, but I don’t know much about CSS tbh. I also tried to understand how I can assign the colors in the light theme. I have the dark and light theme running, but adjusting the colors in the light theme did not work. Would be nice, to get a little more detailed How-To Theming in 2.10 :slight_smile:

5

read nilmergs post,
try to convert:
.var(background-color, menu-highlight-hover-bg-color );
to
background-color: @menu-highlight-hover-bg-color;

as i understood the default is now the dark theme.
everything you define in your css outside

@light-mode: {
  :root {
  }
};

is for the dark theme.

try that as your new css, it should allow you switching and has the same logins settings for dark and light

@light-mode: {
  :root {
  }
};
#login {
  background-image: url('../img/company/nicepic.jpg');
  background-color: @icinga-blue;

  input[type=submit] {
    background-color: @icinga-blue;

 &:hover {
     background-color: @menu-highlight-hover-bg-color;
   }
  }
}
1 Like
6

Thanks for the hind, that helped!
But it seems, I am still doing sth. wrong in defining the colors of the light theme ^^
Wether

@light-mode: {
  :root {
    @body-bg-color: red;
  }
};

nor

@light-mode: {
  :root {
    --body-bg-color: red;
  }
};

Changes anything ^^

7

@MarcusCaepio do you have a GitHub repo with your theme?
Then we could have a look at it there :slight_smile:

8

this is correct:

@light-mode: {
  :root {
    --body-bg-color: red;
  }
};

did you change to lightmode in your profile settings?
did you reload your page? clear cache ? CMD + SHIFT + R / CTRL + SHIFT + R ?