OH-Chart - Background color in Dark Mode

Hello,

I use a f7-card do display a oh-chart component as below.
In “day” mode with white background everything is fine.

However, in dark mode, the background color used for the oh-chart is different to all other widgets - its deep black, almost the same as the page background.
I tried to change it, in order to match with the f7-card, but didn’t find a way to do it.

Any help is appreciated :slight_smile:

Any clue, how to align the oh-chart background in dark mode with the f7-card?

Background Color of f7-card (RGB 21:21:22)

Background Color of oh-chart (RGB 15:15:15)

uid: widget_Stromverbrauch_Chart_Switch_v3
tags: []
props:
  parameters:
    - description: Beschreibung
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: Power / Leistung
      label: Item
      name: item_Power
      required: true
      type: TEXT
    - context: item
      description: Schalter
      label: Item
      name: item_Switch
      required: false
      type: TEXT
    - context: item
      description: Tagesverbrauch
      label: Item
      name: item_Energy_Day
      required: false
      type: TEXT
    - context: item
      description: Verbrauchsinfo (Optional)
      label: Item
      name: item_Energy_2
      required: false
      type: TEXT
    - description: Icon
      label: Icon
      name: Prop_Icon
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 25, 2023, 11:18:38 AM
component: f7-card
config:
  expandable: true
  swipeToClose: true
  backdrop: true
  class:
    - card-expandable-animate-width
  style:
    --f7-theme-color: var(--f7-text-color)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    height: 200px
    margin-bottom: 10px
    margin-left: 5px
    margin-right: 5px
    margin-top: 10px
    width: auto
slots:
  default:
    - component: oh-button
      config:
        iconF7: gear
        iconSize: 30px
        style:
          position: absolute
          top: 0
          right: 0
          padding-top: 10px
          padding-bottom: 35px
          z-index: 999
        class:
          - cell-open-button
          - card-opened-fade-out
    - component: oh-button
      config:
        action: navigate
        actionPage: page:Strom_Verbrauch_Heute
        actionPageTransition: f7-dive
        iconF7: expand
        iconSize: 30px
        iconColor: gray
        style:
          position: absolute
          top: 0
          left: 0
          padding-top: 10px
          padding-bottom: 35px
          z-index: 999
        class:
          - card-opened-fade-out
          - card-prevent-open
    - component: f7-card-content
      config:
        style:
          width: 100%
        class:
          - no-padding
      slots:
        default:
          - component: f7-icon
            config:
              material: =props.Prop_Icon
              size: 80px
              color: blue
              style:
                opacity: 40%
                position: absolute
                top: 110px
                right: 16px
                z-index: 1
          - component: oh-button
            config:
              iconF7: xmark_circle_fill
              iconSize: 30px
              style:
                position: absolute
                top: 0
                right: 0
                padding-top: 10px
                padding-bottom: 35px
                z-index: 999
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                margin: 0px
                height: 200px
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      height: 100%
                      white-space: nowrap
                      flex-wrap: nowrap
                    class:
                      - card-prevent-open
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: 95%
                            height: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =props.prop1
                                style:
                                  font-size: 16px
                                  font-weight: 500
                                  line-height: 30px
                                  top: 15px
                                  left: 70px
                                  position: absolute
                                  z-index: 10
                            - component: f7-icon
                              config:
                                size: 35
                                f7: power
                                color: "=(items[props.item_Switch].state === 'OFF') ? 'red' : 'green'"
                                visible: "=(props.item_Switch === undefined) ? false : true"
                                style:
                                  right: 20px
                                  top: 60px
                                  position: absolute
                                  z-index: 10
                            - component: Label
                              config:
                                text: =items[props.item_Power].displayState
                                style:
                                  font-size: 16px
                                  font-weight: 500
                                  line-height: 30px
                                  top: 100px
                                  right: 30px
                                  position: absolute
                                  z-index: 10
                            - component: Label
                              config:
                                text: =items[props.item_Energy_Day].displayState
                                style:
                                  font-size: 14px
                                  font-weight: 500
                                  line-height: 30px
                                  top: 130px
                                  right: 30px
                                  position: absolute
                                  z-index: 10
                            - component: Label
                              config:
                                text: =   items[props.item_Energy_2].displayState
                                style:
                                  color: gray
                                  font-size: 14px
                                  font-weight: 500
                                  line-height: 30px
                                  top: 150px
                                  right: 30px
                                  position: absolute
                                  z-index: 10
                            - component: oh-chart
                              config:
                                chartType: day
                                height: 100%
                                label: Strom_Zähler
                                period: D
                              slots:
                                grid:
                                  - component: oh-chart-grid
                                    config:
                                      height: 50%
                                      includeLabels: true
                                      left: 75
                                      right: 150
                                      show: false
                                      top: 65
                                legend:
                                  - component: oh-chart-legend
                                    config:
                                      left: 70
                                      orient: horizontal
                                      top: 20
                                      type: scroll
                                      show: false
                                series:
                                  - component: oh-time-series
                                    config:
                                      areaStyle:
                                        opacity: 0.2
                                      color: red
                                      gridIndex: 0
                                      id: 0
                                      item: =props.item_Power
                                      markLine:
                                        data:
                                          - type: average
                                      markPoint:
                                        data:
                                          - name: min
                                            type: min
                                          - name: max
                                            type: max
                                        label:
                                          backgroundColor: auto
                                      name: Verbrauch
                                      type: line
                                      xAxisIndex: 0
                                      yAxisIndex: 0
                                toolbox: []
                                tooltip:
                                  - component: oh-chart-tooltip
                                    config:
                                      confine: true
                                      smartFormatter: true
                                visualMap:
                                  - component: oh-chart-visualmap
                                    config:
                                      calculable: false
                                      max: "500"
                                      min: "0"
                                      orient: horizontal
                                      seriesIndex: 0
                                      show: false
                                      type: continuous
                                xAxis:
                                  - component: oh-time-axis
                                    config:
                                      gridIndex: 0
                                yAxis:
                                  - component: oh-value-axis
                                    config:
                                      axisLabel:
                                        formatter: "{value} W"
                                      gridIndex: 0
                                      scale: false
                                      splitNumber: 3
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              style:
                height: 300px
            slots:
              default:
                - component: oh-list
                  config:
                    class:
                      - padding
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =props.Title?props.Title:"Power"
                          style:
                            padding: 7px
                            border-bottom: 1px solid grey
                            font-weight: 600
                            color: gray
                            margin-top: 10px
                      - component: oh-toggle-item
                        config:
                          title: Ein/Aus
                          icon: f7:power
                          color: blue
                          item: =props.item_Switch

many thanks - using the “transparent” background does solve the issue. :+1:

1 Like