Het is weer tijd voor wat scherm afdrukjes om te laten zien waar ik mee bezig ben.
Ditmaal is het thema: thema's
Sinds HA een gecombineerd donker/licht thema ondersteund heb ik er nog nooit tijd voor gehad om te kijken hoe dat werkt, en hoe je je views/cards zodanig kunt opzetten dat alles netjes meegaat in de kleuren van het thema, en dus ook mee omschakelt.
Nu was ik al begonnen met een eigen opzet met kleurenwaaiers die van 0..100% lopen (dus van wit-kleur-zwart), maar liep wat tegen problemen aan en dan ga je zoeken op internet. En zo kwam ik erachter dat M3 uit is, oftewel
Googles Material Design 3, ook wel Material YOU genoemd.
Naast dat je nu een foto kunt gebruiken om een kleurenschema van te laten maken, gebruikt M3 ook een kleurenpalet dat van wit-kleur-zwart loopt. Dus dat is boffen. En ze hebben het palet uitgebreid met nog een kleur en een aantal erg rechtlijnige keuzes die het makkelijk maken om een donker/licht thema te maken!
Verder is er op Figma een plugin beschikbaar die dat allemaal voor je doet. En Figma is gratis voor 1 project, dus dat is precies voldoende
Kortom: er was werk aan de winkel!
Voorbeeld 12 met thema gestuurde achtergrond, primaire en tertiare kleuren. Doordat het thema - conform M3 richtlijnen - de kleuren aanpast, zie je in het lichte thema donkerder paars dan in het donkere thema.
Licht:
Donker:
Ook de tertiare kleur (batterij en linkquality) gaan van donker (licht thema) naar licht (donder thema)!
En omdat ik wat conversies moest doen voor M3 heb ik meteen een kaart gemaakt die het kleurenschema (deels nog) weergeeft. Want waarom niet, toch?
Voor een deel van de conversie misbruik ik SAK namelijk. Ik converteer de JSON output van de M3 plugin naar YAML, en pleur die YAML in de templates map van SAK zodat ik er vanuit SAK bij kan. En door een debug vlag te zetten, gaat daar een mini converter aan het werk om de YAML om te zetten naar wat CSS Thema instellingen
Ik heb wel wat kleurstappen toegevoegd (bijna alle x5 kleuren), want ik wil er in een kleurenstop wat meer kunnen gebruiken. M3 definieert er dus een stuk minder.
Op lichte achtergrond:
Op donkere achtergrond:
Scheelt weer wat zoeken welke kleur ook al wat is. Kan het nu gewoon zien met een SAK kaart
Omdat ik toch bezig was heb ik ook maar eens beter naar het externe SVG probleem gekeken. Die doen het gewoon, maar een externe SVG kan NIET gestyled worden: die fungeert als een container omgeving namelijk, en daar kun je dus niks mee. Dat probleem bestaat al tig jaar, dus sinds de introductie van SVG 1.x.
Maar waar een wil is, is een weg, en die weg is de externe SVG inladen, en embedden alsof het inline SVG is. Dan kun je namelijk wel gewoon met CSS en dus vanuit de YAML config de SVG stylen.
Natuurlijk moet de SVG dat wel aankunnen, maar dat is een kwestie van aanpassen.
Met een aangepast ballen/cirkels SVG krijg je dan dit:
Ook het wolkje veranderd van kleur: hier heb ik niks aan gedaan, dus dat zat blijkbaar al ingebakken op de één of andere manier
Ik wil uiteindelijk dat ik in Figma een thema maak, deze exporteer, en tenslotte via de converter de HA CSS variabelen eruit gooi, die ik enkel nog in het thema moet plakken om een nieuw thema te hebben.
Daarvoor moet ik de converter nog wat aanpassen om oa de extra kleurverloop stappen te maken, want dat was nu nog ff handwerk.
Een thema maken adv een foto is dus straks relatief weinig werk als je elke conversie stap snel kan doen.
Toch wel aardig van Google om dit te maken. Het algoritme geven ze niet vrij, maar wel de tooltjes om het te maken en te exporteren naar iets waar je verder mee kunt.
De M3 views zijn dus wel afhankelijk van zo'n M3 gebaseerd thema, maar ja. Je moet wat