Thanks for your response.
Looking at your code, it seems to me, you are applying the --slider-theme-color to the .high element of the card. This is fine for a card that is in “hi/lo” configuration like a Passive card, but the Auto or Heat cards do not have that element. It is, as you say, the background slider element and the opacity isn’t applied to that.
However, I tried doing just that and it made only a slight difference (as to be expected as they are 0.3 (light) & 0.38 (dark)).
The other issues is, again as you have stated, you cannot detect the theme the card is being presented in. So adjusting the opacity based on that is a none starter.
I have got round the opacity issue by just coding it as 1.
With regard to the slider colours, I have made a new variable, --slider-high-color and applied it to the high- colour on the Passive card and the background slider colour on the Auto/Heat cards, so making them the same irrespective of the card type and the theme.
you can see this in the code I posted above.
Since then I have changed some of my colour preferences.
Thanks @Angelo_Santagata. I suspect the lack of plinth heaters on the market that only have a simple on/off control may be the reason for this. So many (all the better makes) seem have their own proprietary wireless thermostats or remotes that probably don’t work with it. This may potentially be the reason for the sticker being added i.e. as a blanket it doesn’t work with plinth heaters, because for the majority, it probably doesn’t.
Edit: I have since phoned a few plinth heater manufacturers Myson, Consort and Smiths. Myson and Consort said straight off no, their products are not compatible. However, a very helpful chap at Smiths said although their products are not officially compatible, he was actually using one with the Wiser Electrical Heat Switch himself. He said it required a manual bypass of the wireless control module inside the unit.
Another option I found is this from Eterna, which I am pretty sure will work as it is a simple on/off model. There are other models with just on/off controls e.g. on Amazon, but they have very mixed reviews on quality and reliability. The Eterna one is clearance at Toolstation, but has generally good reviews and is still available from other suppliers.
I also phoned Drayton and the girl had to go away and check, but said if it fell within the 16A rating, it would work, which I think is probably just a standard response. They seemed to know less that me.
Yes, the high element of the card doesn’t exist in non-passive mode, but you shouldn’t need to apply the opacity to what is the slider background for Auto or Heat. It should already match. I will need to test further, as I am not using the dark theme.
It looks like I had incorrectly assumed that --dark-disabled-opacity was the correct variable. Doing a colour sample in Paint.net returns the same values (RGB 41,41,41 or Hex #292929) for both the passive high slider and the auto background slider with that opacity applied.
This will only work with the dark theme though. If you run different themes on different devices, you may have to find a similar in between colour that works with both, but is not exact and remove the opacity, which it like it looks like you are already doing. I’ll do a bit more research to see if there is any way to detect the theme in use, but I think it’s unlikely that this is going to be possible.
I can confirm, using the same colour sample method, that --light-disabled-opacity is correct when used for the light theme and both the passive high slider and the auto background slider return (RGB 235,235,235 or Hex #ebebeb).
@msp1974 I haven’t had a chance to test the card-mod themes yet. I’ll try and find time in the next few days.
Yes - that’s what I was saying all along - but thanks for confirming.
I now use the stock var(--disabled-color) and live with it being a bit darker but that enables me to see the actual temperature on the slider when it’s in the “high slider section” which with my original choice of #e8e8e8 was very hard to see.
And it works across both my light (HA default) and my dark (customised slate (from HACS)) themes. All the same colour for Passive and Auto/Heat in both themes. Which was the aim in the first place.
And I can confirm that @msp1974’s card-mod them applied to each card works. I have had to refresh the browser sometimes to make it stick but I suspect that is because I’ve been changing themes trying to solve the above issue.
Sorry, I hadn’t realised you were using different themes on different devices. I’ll let you know if I find a way to detect the theme in use, but, as I said, think it’s unlikely.
I guess the other ‘clunky’ option is to create two dashboards configured differently for dark and light themes and view the corresponding one as needed? Definitely clunky, but I am trying to think of options for anyone else using a mixture of themes who want the colours to match exactly.
It appears it might be possible, but again clunky, using browser-mod. See the post here.
The only other way I can think it might be possible to do this, is if there’s a way to evaluate whether a variable is set to a specific value e.g. if --card-background-color changes and can be tested for it’s value.
There is a feature request open for a binary sensor for this exact thing to be included in HA. Feel free to vote for it’s inclusion here.
Sorry I may have misled you.
I don’t use different themes on different devices. I use the same 2 themes on all devices but switch through an automation at sunset (or twilight whatever, I can’t remember). It’s the fact the colours changed on the change of theme that I didn’t want. and they weren’t consistent between Passive and Auto/heat.
Anyway I got it working the way I want by changing the background colour to the same as the high slider colour(on the Passive) on the Auto/Heat cards.
But you have highlighted a FR that I will vote for
Ah, right, I see. Time dependent theming. The same principles apply though. There’s no easy and completely colour accurate solution I can see to this. Maybe someone else will have an idea on how to determine the theme in use.
Yes, I see, but the sliders are light grey, rather than the darker grey they are supposed to be in the dark theme?
I guess the main thing is it is consistent and matches between themes. It’s a compromise and is probably better actually as the colour highlight round the edge is less visible with the lighter grey colour.
Couple of things to note and a possible solution to get the correct colour on the slider.
There is a difference between a ‘dark theme’ and a theme with dark mode (like HA theme). For a theme with dark mode, you can set css variables in card mod based on the mode. For a dark theme, this is just a light mode theme with dark colours set which cannot be detected. I have been playing more to fix some of the issues and have the correct colours now in light and dark mode, but obviously this is still wrong in a dark theme. Will post updates in a day or so when done.
@Duke_box if you have already modified your dark theme, why not just add a css variable in this (a unique name ie slate-slider-color, slate-slider-opacity). Then in your card-mod/template for the thermostat, set --control-circular-slider-high-color: var(–slate-slider-color, --disabled-color). This neat trick is a nice feature of css variables in that if the first exists it will use it but default to the second if not. As slate-slider-color will only exisit in your dark theme it will allow different settings between your templates.
That’s a good idea, I wish I had thought of adding it to my dark theme.
However I have reverted back to using var(--disabled-color) so the current temperature dot is easier to see when it is in the high slider portion.
As I mentioned in an earlier post, the colour issue between my themes and the difference between the card in Passive mode and Auto/Heat mode, isn’t the --control-circular-slider-high-color, it’s the --control-circular-slider background and the --circular-slider-background-opacity variables that are the problem.
As long as the opacity of both the high slider and the background sliders are the same and they are the same colour for both Passive and Auto/Heat then the issue goes away. So additional elif statements are required for Auto and Heat to set the --control-circular-slider-background colour. This fixes it for me anyway.
Your note on the difference between a dark theme (like I use at the moment) and a theme with both light and dark modes is interesting and that explains a lot.
However I note that this switching between the light and the dark portion of these type of themes is dependant on the device you are viewing HA in and whether it is using a light or dark theme. So I don’t think this works for me where I switch dependant on the sun
I look forward to seeing your amendments.
Thank you for your input
Yes that works for a card in Hi/Lo mode (like Passive) in Auto or Heat mode. Both in light and my dark (slate) theme.
But maybe I am not communicating my issue properly.
It is not the Hi/Lo mode card’s high slider colour/opacity which is the main issue for me in dark mode.
The issue I have been trying to address and communicate is the upper slider colour when the card is just in normal Auto or Heat mode. That colour is wrong. See below:
The above is with your latest theme applied and the additional variable in my dark theme as you instructed. You can see that the Conservatory’s ( which is in HVAC Heat/Passive mode) slider upper parts are now the correct colour etc. I especially like the correct end knob of the passive slider section and the current temperature dot. But the kitchen (which is in normal HVAC Auto mode) does not have the correct upper slider colour. As I keep saying, in HVAC Auto or Heat mode) this is the background slider colour that requires the styling. Unless I am mistaken your code is adjusting the .high slider only, where mine address both. Although mine doesn’t fix what you’ve achieved in the Passive type card. So I will be using that
And this is using your original theme adjusted with my code in my dark theme.
You can see the colours of the upper sliders of both the Kitchen and the Conservatory are the same (although they are not the correct colour). This what I have been trying to achieve, consistency between cards and between themes.
And to show your theme works perfectly in a light theme - here is the same screenshot in the default light theme.
I really value your input here so thanks once again.
EDIT: so I looked at the stock HA light/dark theme using your theme and I can see that it is obviously my dark theme that is causing my problem. You can see from below that the high slider colour is consistent across the cards - although I dislike these dark theme colours which makes the current temperature dot barely visible,
Edit 2 - But if I remove your theme the current temperature dot becomes visible again in the HA dark theme. I’m beginning to lose it.
I think I’ll stick with my compromise fix (with your mods) until I get motivated again. We have spent hours on this all because this new style card was forced upon us!
I setup a 1 channel hub (i.e. no hot water control, just heating) for my Dad’s combi boiler over the weekend and it’s missing Eco Mode. Does anyone know if this is normal for a 1 channel hub? I would have expected to see the control for that in Home Assistant, the same as with the 2 and 3 channel hubs.
Update: Toggling Eco Mode on from the Wiser Home app has made it appear inside Home Assistant.
He said it required a manual bypass of the wireless control module inside the unit.
