Is it possible to change the font color based on a target state? That way if you had a dark mode and a light mode you could alter the font colors of variable text, label and date time.
Josh is this something possible at the moment?
It’s possible with tile types that support variables. So the Text, Number, and True/False variable tiles or with the Super Tiles.
Styles are based on the states of each particular tile, so a Switch tile for example is configurable based on the switch states, not based on other arbitrary values like variables.
I see, can add a regular tile that is a variable type And choose a style based on it’s value. Example text type. Value is sunny. == Target(sunny) and the style is applied. However if I add the same variable to a supertile I can’t do that there. It appears at the moment I can find a way to change the font color based on what’s is in the variable inside a supertile.
I’m not sure I follow. If I add a variable to a Super Tile, then once I add that Super Tile to a dashboard, I can customize the style of that tile instance and use the variable as one of the entities to compare against in the state mapping.
Interesting, I was looking inside the Supertile itself like how you would change an icon based variable.
Style mapping is done on the instance of a tile that’s added to a dashboard.
The icon mapping within Super Tiles is a bit unique as unlike a normal Thing Tile where there’s only a single icon and the icon mapping has a set of defaults or optionally can be customized on the dashboard if desired, the icons on a Super Tiles have no defaults and must be explicitly defined within the Super Tile editor. This provides the ability to add multiple icons to a Super Tile.
Well that certainly does work however, I’m struggling with it. Would in order to have the same theme / customs css and different font colors would I have to duplicate the theme?
I’m not sure I understand.
Each Theme can have multiple Named Styles within it. You can also create inline styles within the state mapping for a specific tile that are unique to a tile (and not ‘named’).
You can continue to use Custom CSS with either of those, but of course if you are applying CSS to specific Named Styles, then you would have to use those named styles within your style selections… or adjust your Custom CSS to target elements in a more generic or broader way.
Ok I was definitely not clear on explaining my problem. I have a style in my dashboard theme that I am using to address my 3 x 6 Supertile. It has a bunch of custom css to move things around and to expand my background img.
My background image is a variable icon and changes the image based on the value. The problem I have is that depending on the the image my font color is hard to read. I have resorted to adding backgrounds to help improve readability.
What I was hoping to do is change the font color based on the background variable value.
Dark background - light colored font
Light background - dark colored font
Please excuse the misaligned of some elements. They are not designed for my phones resolution.
If I understand correctly, it sounds like the Custom CSS is where the question is. In theory, it’s possible but you would have to adjust it accordingly either to handle multiple Named Styles as targets (if you used named styles with different font colors) or use some broader way of targeting things.
I’m guessing the easiest way I can think of is creating another style duplicating everything but the font color and having it applied to the whole tile. I don’t know how I could simplify the targeting without affecting other aspects of the dashboard.
