Hello,
is it possible to change the color of a cell with an HSL value?
I would like to make an interacitve cell which changes the color of the cell depending on the color of my nanoleaf light.
In the oh cells, color is not a direct conduit to the background of the element. The value of the color property gets used by the underlying f7 components which means that it gets concatenated into a class name that is applied to the cell (e.g., bg-color-green) which then gets styled via some default f7 styling from there. So for the color property only the colors names that are listed in the f7 theme docs can be used.
To get other background colors, you have to change the background css style, but again because the oh-cells are intended to be low-code, easy-configure components this not directly accessible through the style property. The only way to get custom colors into the background of an oh-cell is to find the css selector for your cell and use the stylesheet property to set the background. In your case, there’s one more level of difficulty, stylesheet does not accept expressions. See this post for how to use css variables as a workaround to get dynamic values into the stylesheet.
1 Like
Thank you very much for your answer, the coloring of the cells worked like a charm with your description!
But I can’t figure out how to use the variable. I’ve created a variable called --hsl-color1, and I’m assigning it later on in my stylesheet, but somehow the cell still remains black. Do you know by any chance what I did wrong? The cell gets colored when I replace the variable with a number, so the stylesheet should be correct.
Later on I would like to assign an item to the variable like this: --hsl-color: =items.color.state . Is there something I need to look out for? The item is a string value in the HSL format f.ex (70, 50%, 80%).
This happens with some widgets, and I’m not 100% sure what the difference is. In some cases, such as this one, the stylesheet declaration is getting processed before the style object. So when the background-color is processed, --hsl-color1 hasn’t been defined yet. The solution is to add in an element that holds the cell without adding any additional visual changes but can define the variable before the cell.
component: f7-block
config:
style:
--hsl-color1: =40 * 1.5
slots:
default:
- component: oh-label-cell
config:
on: true
stylesheet: >
.cell-background {
background-color: hsl(var(--hsl-color1),60%,60%);
}
As long as you know exactly what the state format is and how to concatenate that into a string that matches the style setting you want then there’s no problem. If your item state is (70, 50%, 80%) then you would want something like:
style:
--hsl-color: =hsl + item.color.state #equals 'hsl(70, 50%, 80%)'
and
background-color: var(--hsl-color);
1 Like
