How to change habpanel icon's color?

Apps & Services HABPanel
1

Hello friends, I create a switch from a template widget by myseft but to be honest I am not fancy with the original pale blue color icons at all. Here is the code:

<div 
     ng-style="{
      'background-color': itemValue('Light_GF_Living_Ceiling')=='ON' ? '#26FF33' : '#FE2E64'
     }"
     class="template-container"
     style="top:0;bottom:0;left:0;right:0;position:absolute;border-radius: 10px;width:220px; height: 220px">
  <div class="template-contents">
    <div style="
            margin-top: 0px;
            margin-left: 0px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            font-weigth: bold;
            border-color: rgb(100,100,100) ;
            width:220px; height: 220px;
            ">
	<div class="row" style="height: 30px" ></div>
  
	<div class="row">  
  		<div ng-init='model={"name": "Light", "item": "Light_GF_Living_Ceiling", "hidelabel": true, "hideonoff": true, "iconset": "freepik-household","icon": "light-bulb-3","icon_size": "120" }'>   
    		<widget-switch   ng-model="model" />
  		</div>
	</div>
	<div class="row" style="
  		  font-size: 2em;
  		  font-family: Comic Sans MS, cursive, sans-serif;
          text-align: center;
          font-weigth: bold;
  		  margin-top: 30px;
          margin-left: 0px;
          margin-right: 0px         
                        ">Light {{itemValue('Light_GF_Living_Ceiling')}}
</div>
</div>

  </div>
</div>

Can anybody show me how to change the icon’s color? I suppose I need to add a parameter inside this line:

  		<div ng-init='model={"name": "Light", "item": "Light_GF_Living_Ceiling", "hidelabel": true, "hideonoff": true, "iconset": "freepik-household","icon": "light-bulb-3","icon_size": "120" }'>

But I don’t know it. Can anybody can give me a hand? Thanks

2

Anyone?

3

Those are controlled by a filter CSS rule, here’s how the “material” theme makes them red instead of blue:

https://github.com/openhab/org.openhab.ui.habpanel/blob/master/web/assets/styles/themes/material/material.scss#L46

You can use the Chrome developer tools to play with the values and preview the results.

4

thanks for your help, but I changed the parameters in:

.icon-tile.colorize {
        filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);
-webkit-filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);
}

but nothing happens, can you show me more details?
Is there anyway to embed scss into template widget?

5

i understand that this is an old thread, but in a template i could change the colors by using the style.

<style>
  .icon-tile.colorize.off {
          filter: invert(45%) sepia(80%) hue-rotate(170deg);
  -webkit-filter: invert(45%) sepia(80%) hue-rotate(170deg);
}

.icon-tile.colorize {
        filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);
-webkit-filter: invert(75%) sepia(100%) hue-rotate(0deg) saturate(10000%);
}
</style>

Hope this helps

1 Like