Habpanel standard icon colors

Apps & Services HABPanel
1

I know that the standard backgroud color of Habpanel is #223344.

How about the standard icon color (hex) for switches in state OFF (grey) and ON (light blue)?
Thanks

2

I just checked via developer tools. The standard icon color for an OFF switch is #89a (=#8899aa) and for an ON switch it’s #0db9f0.

3

Great, thanks, Norman!

4

As it happens, there is a new (undocumented) way of accessing these colors in a template since last week when the themes were rewritten by @kubawolanin:

The syntax below:

{{ variable | themeValue:'primary-color' }}

(leave out the {{ }} if you’re already in an expression, obviously)

will give you the “primary color” of the current theme (for example for the Material theme it will be red) if variable is not set. This is useful so you can replace variable with e.g. a color config option of your custom widget (config.your_color_setting for instance) to provide a fallback if the setting is not set. Similarly, if you want it to always return the theme value simply replace variable by null.

See here for a list of the theme variables (ignore the -- prefix):

Examples are box-bg or switch-off-color.

5

Oh, and you can now also easily override some of these variables with the new “additional stylesheet” option in HABPanel’s additional settings.

You cannot provide your stylesheet inline because “reasons”, rather you have to write a file like below and put it in the static files directory of your openHAB server (conf/html):

:root {
      --body-bg: #333;
      --primary-color: #888888;
      --box-bg: rgba(255, 255, 255, 0.1);
      --icon-color-filter: invert(90%) sepia(0%) saturate(0%);
      --header-bg: none;
}

/* Credit: http://lea.verou.me/css3patterns/ */
.container {
  background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#282828;
  background-size:16px 16px;
}

Call it test.css and set the option to /static/test.css.

It will give you something like this :slight_smile:

image.png537Ă—818 39.8 KB

image.png541Ă—818 42.4 KB

1 Like
6

Hello!
I created that file and it’s working fine on PC browser, but on my phone in OpenHAB app or HABpanel Viewer app it’s not applying. Is there a way to fix it?

1 Like