Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[OliverIO]

@Qlink

schau mal hier
https://forum.iobroker.net/topic/83335/systemfarbe-vis-2-app-anpassen/5

Und hier
https://forum.iobroker.net/topic/84151/vis-2-hintergrund-bleibt-nach-update-auf-2.13.8-schwarz./26

[Qlink]

@oliverio danke für die Links

ich hätte es mit

.tuerkis .MuiButton-colorPrimary {
    background-color: #00CCFF;
}

probiert, aber das Ergebnis ist, dass nun alles türkis ist.

Ich möchte, dass nur das aktiv angewählte Element türkis ist und das andere in grau...

Wie krieg ich das am Besten hin ?

[OliverIO]

@Qlink

Ok dann musst du genauer sagen was du mit aktiver Hintergrundmaterial meinst.

Ein Button hat eigentlich keinen Status. Ein Button wird gedrückt und wenn man loslässt dann ist er wieder normal. Ggfs gibts Hoover.
Wenn in vis bei Button noch eine Zusatzmodul ist musst du schauen wie die css sich im Browser verändert. Das macht man am besten mit den dev Tools des Browsers mit f12

[Qlink]

@oliverio
Im Prinzip möchte ich eigentlich nur, dass die Darstellung wieder genau so funktioniert wie in vis-1.
Die Filter Bar verhält sich eher wie ein Schalter als ein Taster(Button).
Wenn ich auf "Heute" drücke, dann wird mir das Heute-Diagramm angezeigt.
Das wird so lange angezeigt bis ich auf "Morgen" drücke.
Wie eine Art Umschalter.

In vis-1 schaut es so aus, wenn Heute angewählt ist:

und so wenn Morgen ausgewählt ist: (hier werden noch keine Daten angezeigt, da die Strompreise für Morgen erst gegen Mittag verfügbar sind)

Man sieht so auf Grund der Hintergrundfarbe auf den ersten Blick, welches der beiden Diagramme ausgewählt ist.

Diese Darstellung hätte ich gerne auch in vis-2.

[OliverIO]

@Qlink

Hast du mal ein Export des viewsaus vis2
Möglichst so das ich das möglichst einfach nachstellen kann

[Qlink]

@oliverio

hilft dir ein Widget export vom Dropdown Widget ?

der wäre wie folgt:

[
  {
    "tpl": "tplFilterDropdown",
    "data": {
      "bindings": [],
      "items": "[{\"label\":\"Heute\",\"value\":\"Heute\",\"default\":true,\"activeColor\":\"#373737\",\"color\":\"#373737\"},{\"label\":\"Morgen\",\"value\":\"Morgen\",\"default\":false,\"activeColor\":\"#373737\",\"color\":\"#373737\"}]",
      "g_common": true,
      "type": "horizontal_buttons",
      "dropdownVariant": "standard",
      "buttonsVariant": "text",
      "dropdownSmall": false,
      "noAllOption": true,
      "g_style": true,
      "g_css_background": true,
      "g_fixed": true,
      "g_css_border": true,
      "g_css_shadow_padding": true,
      "g_css_font_text": true,
      "name": null,
      "comment": null,
      "class": "tuerkis",
      "filterkey": null,
      "multi-views": null,
      "locked": null
    },
    "style": {
      "bindings": [],
      "left": 760,
      "top": 443,
      "width": 200,
      "height": "30",
      "background": "#B2B2B2",
      "background-color": "#B2B2B2",
      "background-image": "",
      "border-width": "",
      "border-style": "solid",
      "border-color": "#B2B2B2",
      "border-radius": "5",
      "padding": "",
      "overflow-x": "",
      "color": "#373737"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[OliverIO]

@Qlink sagte:

dann nimm die das folgende css

.mybuttongroup:not(:has(.MuiButton-root:focus)) .MuiButtonGroup-firstButton {
  background-color: red !important;
}

.mybuttongroup .MuiButton-root:focus {
  background-color: red !important;
}

im widget musst du in css class
mybuttongroup eintragen.
du kannst auch einen anderen namen wählen, dann musst du mybuttongroup im css anpassen. dort muss der punkt davor aber bleiben

zur veranschaulichen habe ich jetzt die farbe rot gewählt.

diese lösung ist als workaraound zu sehen.
besser wäre, wenn man in vis den status über einen extra klassennamen wie bspw active mit aufnehmen würde. dann können man ein einfacheren css selektor wählen, da die farbe in react direkt per logik gesetzt wird. leider wählt react einen dynamisch generierten css klassennamen, der sich immer wieder mal ändert.

https://github.com/ioBroker/ioBroker.vis-2/blob/71c88db403f0d5ac97d1d31a0071fcec66ee9114/packages/iobroker.vis-2/src-vis/src/Vis/Widgets/Basic/BasicFilterDropdown.tsx#L457

evtl kannst du da im vis-2 repository auf github einen issue dazu erstellen

[Qlink]

@oliverio

Danke für deine Hilfe ! Mit deinem css Code funtkionierts nun genau so wie es in vis-1 Standard war und wie ichs mir von vorneherein erwartet/gewünscht hätte :)

Danke!

[sigma]

@oliverio
Leider löst dieser CSS-Code das Problem nicht. Ich habe einen Filter mit 3 Positionen. Ich habe das CSS wie empfohlen hinzugefügt, aber einen sehr seltsamen/lustigen Effekt gesehen (siehe Video). Kann man das irgendwie beheben?

Eigentlich wäre es wirklich super, wenn man diese Farbe direkt in den Widget-Einstellungen festlegen könnte.
https://drive.google.com/file/d/1BpG9EwCKi2K5WXJVUq053RBA-C1kHFjo/view?usp=drive_link

[OliverIO]

@sigma

das oben war für Text.
Du hast Icons. da hängt es davon ab was es für Icons sind.
Das die Icons nicht in der Mitte sind hängt wahrscheinlich von der Größe der Icons ab.

Auch weiß ich nicht was da du da angepasst hast. Das Grün kann nicht vom obenstehenden css kommen.
Normalerweise haben diese Buttons verschiedene States
Activ/Inactiv
Wenn Active dann
Enabled/Disabled
und dann noch mouseOver/Hoover

Ich kann gern mal schauen. benötige aber einen Widget-Export und alles was da sonst noch wirkt inklusive den icons bzw. wie du das eingestellt hast.
Ich bin kein Spezialist für das widget, kann mir aber mal das css anschauen.