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
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