Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[IOT]

Versuche gerade vergebens eine CSS variable var(--SomeColor) einen Wert zu übergeben.
e.g. document.documentElement.style.setProperty('--SomeColor', 'pink');
Wie kann ich die variable setzen?

[OliverIO]

@IOT sagte in update CSS variable:

style.setProperty

für was möchtest du Farbe setzen?
Vordergrund color
Hintergrund background-color
Randfarbe border-color
Hier stehen die gültigen Farben
https://htmlcolorcodes.com/color-names/
Alle anderen mit RGB in Hexcodierung

[IOT]

@OliverIO hallo Oliver, Danke für deinen Feedback. Die Farbe ist nicht das Problem sondern wie kann ich die CSS Variable von JavaScript setzen. document.documentElement.... oder so?

[OliverIO]

@IOT für welches element? ein bestimmtes? oder body-element?
wenn ein bestimmtes, dann musst du das erst suchen und dann auf das Ergebnis die Funktion von oben anwenden

für body
document.querySelector('body').style.setProperty('color','pink')
für ein element mit dem ID xyz
document.querySelector('#xyz').style.setProperty('color','pink')

[IOT]

@OliverIO said in update CSS variable:

document.querySelector('body').style.setProperty('color','pink')

CSS: .test_5 {background-color: var(--main-bg-color, #2196F3);}
JS: will ich --main-gb-color setzen/ändern
e.g document.qureySelector('test_5').style.setProperty('--main-bg-color', "#A4D877");
bekomme aber nur Fehlermeldungen "Can not find name document"

... wie auch bei allen anderen Versuchen

[OliverIO]

@IOT und wo hast du das reingeschrieben?
das sind befehle, die im browser funktionieren.
wenn du in chrome oder firefox f12 drückst, gehen die developer tools auf.
dann gehst du in den reiter console, und da tipst du das an, während du im browser die seite geöffnet hast.

CSS: .test_5 {background-color: var(--main-bg-color, #2196F3);}

diese notation sagt mir nix. wo hast du das her?
CSS scheint es auch nicht zu sein, sondern evtl. etwas was durch einen preprocessor läuft
und so aber nicht im browser ankommt

[IOT]

@OliverIO CSS: siehe Material Design Style und im Tab CSS
Der Fehler wird im Script erzeugt. CSS funktioniert, nutze ich schon lange. Jetzt möchte ich das von aussen steuern

[OliverIO]

@IOT
ich finde das im material design von iobroker nicht
https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/project.css

[IOT]

@OliverIO ah ... jetzt hab ich noch mal reingeschaut. Da stehts eh wie es geht:
2.1.Farben variabel verwenden
3.In den betroffenden Widgets in der CSS Eigenschaft "mdui-{javascript.0.mybackground}-bg" eintragen
Die var kann ich mir ersparen.
Danke für den Anstoß.