Daikin Aircon / HVAC

Add-on Marketplace UI Widgets
1

Let me share with you a widget specifically for Daikin HVAC systems in “dark mode” with a few additonal options.
(I tried to give it a similar look as the OH3 widget: Grafana chart with time ranges.)

I used the Intensis aircon controller developed by @hmerk as a starting point.
Thank you for the great work!

@RGroll supported me with the functionality to hide/unhide rows by clicking on buttons or toggle switches in props. Thank you so much!

The widget supports the following features:

  • Switch HVAC ON/OFF
  • Set target temperature
  • Show Indoor/Outdoor temperature
  • Set Mode (Auto/Cool/Heat…)
  • Set fan speed via option button
  • Set fan swing via option button

Additional options can be activated via props:

  • Enable timer function (e.g. to switch on “cooling” for 30min)
  • Show power generated from solar plant / photovoltaic system

daikin_1

Open topics:

  • UoM (°C) missing on the oh-knob
    this is not supported yet, I think. Am I right?
  • The text on the buttons below the icons is not centered, whereas the icons (I believe) are.
    Any idea how to solve that?

Resources

YAML (updated on 2021-03-09 with optimized code and compatibility for dark & light-theme):

uid: Daikin HVAC
tags: []
props:
  parameters:
    - description: Location (room) or device name
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item for power channel
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      description: Item for indoor temperature channel
      label: Indoor temperature
      name: itemIndoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for outdoor temperature channel
      label: Outdoor temperature
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for target temperature channel
      label: Target temperature
      name: itemTargetTemp
      required: false
      type: TEXT
    - description: Set minimum target temperature (default = 0)
      label: Minimum Temperature
      name: MinimumTemperature
      required: false
      type: INTEGER
    - description: Set maximum target temperature (default = 100)
      label: Maximum Temperature
      name: MaximumTemperature
      required: false
      type: INTEGER
    - description: Set Target Temperature Stepsize (default = 1)
      label: Target Temperature Stepsize
      name: TemperatureStepsize
      required: false
      type: DECIMAL
    - context: item
      description: Item for operation mode channel
      label: Operation mode
      name: itemMode
      required: false
      type: TEXT
    - context: item
      description: Item for fan speed channel
      label: Fan speed
      name: itemFanSpeed
      required: false
      type: TEXT
    - context: item
      description: Item for swing channel
      label: Swing mode
      name: itemSwing
      required: false
      type: TEXT
    - description: Hide timer button and options
      label: Hide Timer Function
      name: hideTimerFunction
      required: false
      type: BOOLEAN
    - context: item
      description: Switch item for timer
      label: Switch Timer ON/OFF
      name: itemTimerSwitch
      required: false
      type: TEXT
      advanced: true
    - context: item
      description: Item for timer duration
      label: Timer Duration
      name: itemTimerDuration
      required: false
      type: TEXT
      advanced: true
    - description: Timer minimum duration
      label: Timer minimum
      name: TimerMinimum
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer maximum duration
      label: Timer maximum
      name: TimerMaximum
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer step
      label: Timer step
      name: TimerStep
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer scale steps
      label: Timer scale steps
      name: TimerScaleSteps
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer scale sub steps
      label: Timer scale sub steps
      name: TimerScaleSubSteps
      required: false
      type: DECIMAL
      advanced: true
    - description: Hide solarplant power
      label: Hide Solarplant AC power measurement
      name: hideSolarplant
      required: false
      type: BOOLEAN
    - context: item
      description: AC Power item for solarplant
      label: Solarplant AC Power
      name: itemSolarplantACPower
      required: false
      type: TEXT
      advanced: true
  parameterGroups: []
timestamp: Mar 8, 2021, 7:41:03 PM
component: f7-card
config:
  title: =props.title
  outline: true
  class:
    - no-padding
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom
      slots:
        default:
          - component: f7-col
            config:
              width: "50"
              large: "33"
            slots:
              default:
                - component: f7-segmented
                  config:
                    class:
                      - segmented-strong
                    style:
                      --f7-segmented-strong-padding: 0px
                      --f7-segmented-strong-between-buttons: 5px
                      --f7-segmented-strong-button-font-weight: 300
                      --f7-segmented-strong-bg-color: transparent
                      --f7-segmented-strong-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), 0.07)
                      --f7-button-fill-hover-bg-color: var(--f7-theme-color)
                      --f7-button-border-radius: 4px
                      --f7-button-padding-vertical: 0px
                      --f7-button-padding-horizontal: 0px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          outline: true
                          class:
                            - padding-top-half
                            - display-flex
                            - flex-direction-column
                          text: ON/OFF
                          action: toggle
                          actionItem: =props.itemPower
                          actionCommand: ON
                          actionCommandAlt: OFF
                          icon-f7: power
                          iconSize: 15
                          fill: "=(items[props.itemPower].state === 'ON') ? true : false"
                          style:
                            --f7-button-border-width: 1px
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            height: auto
                            font-size: 8px
                      - component: oh-button
                        config:
                          visible: =!props.hideTimerFunction
                          text: TIMER
                          action: toggle
                          actionItem: =props.itemTimerSwitch
                          actionCommand: ON
                          actionCommandAlt: OFF
                          iconF7: timer
                          iconSize: 15px
                          fill: "=(items.ac_timer_on_off.state === 'ON') ? true : false"
                          outline: false
                          class:
                            - display-flex
                            - flex-direction-column
                            - padding-top-half
                          style:
                            --f7-button-border-width: 1px
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            font-size: 8px
                            height: auto
          - component: f7-col
            config:
              width: "33"
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: house
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemIndoorTemp].state
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
                - component: f7-row
                  config:
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: tree
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemOutdoorTemp].state
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
                - component: f7-row
                  config:
                    visible: =!props.hideSolarplant
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: sun_max
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemSolarplantACPower].state
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              item: =props.itemTargetTemp
              min: =props.MinimumTemperature
              max: =props.MaximumTemperature
              stepSize: =props.TemperatureStepsize
              secondaryColor: var(--f7-card-outline-border-color)
              primaryColor: var(--f7-theme-color)
              responsive: false
              strokeWidth: "12"
              size: 150
    - component: f7-segmented
      config:
        visible: true
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-font-size: 8px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: modeRow
              in:
                - icon: arrow_2_squarepath
                  command: AUTO
                  text: AUTO
                - icon: thermometer_snowflake
                  command: COLD
                  text: COOL
                - icon: thermometer_sun
                  command: HEAT
                  text: HEAT
                - icon: drop_fill
                  command: DEHUMIDIFIER
                  text: DRY
                - icon: wind
                  command: FAN
                  text: FAN
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.modeRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemMode].state === loop.modeRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                      - padding-top-half
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.modeRow.text
                    action: command
                    actionItem: =props.itemMode
                    actionCommand: =loop.modeRow.command
          - component: oh-button
            config:
              iconF7: ellipsis_vertical
              iconSize: 15px
              action: variable
              actionVariable: options
              actionVariableValue: "=vars.options || vars.options === undefined ? false : true"
              fill: "=vars.options || vars.options === undefined ? false : true"
              outline: true
              class:
                - display-flex
                - flex-direction-column
              style:
                --f7-button-border-color: var(--f7-card-outline-border-color)
                height: auto
                width: 50%
    - component: f7-segmented
      config:
        visible: =vars.options === false
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-font-size: 8px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: optionsRow
              in:
                - icon: wind ellipsis_vertical
                  option: fanspeed
                - icon: move ellipsis_vertical
                  option: swing
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.optionsRow.icon
                    iconSize: 15px
                    fill: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    action: variable
                    actionVariable: =loop.optionsRow.option
                    actionVariableValue: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
          - component: oh-button
            config:
              visible: =!props.hideTimerFunction
              action: variable
              actionVariable: timer_menu
              actionVariableValue: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
              fill: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
              iconF7: timer ellipsis_vertical
              iconSize: 15px
              outline: true
              style:
                --f7-button-border-color: var(--f7-card-outline-border-color)
    - component: f7-segmented
      config:
        visible: "=vars.fanspeed === false && vars.options === false ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: fanspeedRow
              in:
                - icon: arrow_2_squarepath
                  command: AUTO
                - icon: zzz
                  command: SILENCE
                - command: LEVEL_1
                  text: 1
                - command: LEVEL_2
                  text: 2
                - command: LEVEL_3
                  text: 3
                - command: LEVEL_4
                  text: 4
                - command: LEVEL_5
                  text: 5
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.fanspeedRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemFanSpeed].state === loop.fanspeedRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.fanspeedRow.text
                    action: command
                    actionItem: =props.itemFanSpeed
                    actionCommand: =loop.fanspeedRow.command
    - component: f7-segmented
      config:
        visible: "=vars.swing === false && vars.options === false ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: swingRow
              in:
                - command: STOPPED
                  text: OFF
                - icon: resize_v
                  command: VERTICAL
                - icon: resize_h
                  command: HORIZONTAL
                - icon: view_3d
                  command: VERTICAL_AND_HORIZONTAL
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.swingRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemSwing].state === loop.swingRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.swingRow.text
                    action: command
                    actionItem: =props.itemSwing
                    actionCommand: =loop.swingRow.command
    - component: f7-row
      config:
        visible: "=vars.timer_menu === false && vars.options === false && !props.hideTimerFunction === true ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-bottom-half
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-slider-card
                  config:
                    outline: true
                    item: =props.itemTimerDuration
                    min: =props.TimerMinimum
                    max: =props.TimerMaximum
                    step: =props.TimerStep
                    scaleSteps: =props.TimerScaleSteps
                    scaleSubSteps: =props.TimerScaleSubSteps
                    scale: true
                    unit: min
                    label: true

Hope some of you find it useful :slightly_smiling_face:

20 Likes
2

Hey @maxmaximax

nice work!

Sadly, theres no easy way to remove the margin-left on the text, as its hardcoded. The elements would normaly be aligned in a row instead of a column so this margin serves the purpose of bringing some space between the text and the icon.

You could recreate the button mechanic with blocks and a overlaying action-component like oh-link or oh-button, but I’m not sure if it’s worth the effort.

Some other things that I recognized here which you might like to check:

  • Most of the elements are designed to work in the dark-theme and have hardoced color styles. Either you could make them dependant on the used theme or leave some of the values at their default styling settings to let the framework do the work for you. This would make this widget also usable for the light-theme.

  • You used lots of repeating styles on the button-components. Most of them could be assigned to the surrounding elements and would inherit to it’s childs - you would save a lot of lines that way.

  • The actionCommand on your oh-buttons has a leading = - this isn’t necessary IMHO as this is no expression.

  • Another possibility to save a lot of code and make adjustments way easier would be to use the oh-repeater component. To give you a rough understanding of how this could work in your widget, I attached a small example of the bottom-row:

     - component: f7-segmented
   config:
     visible: true
     class:
       - margin-left-half
       - margin-right-half
       - margin-top
       - margin-bottom-half
     style:
       --f7-button-font-size: 8px
       --f7-button-text-color: white
       --f7-theme-color: rgba(255,255,255,.15)
       --f7-button-outline-border-width: 1px
       --f7-button-font-weight: 300
       --f7-button-text-transform: none
       --f7-button-padding-vertical: 0px
       --f7-button-padding-horizontal: 0px
   slots:
     default:
       - component: oh-repeater
         config:
           sourceType: array
           for: bottomRow
           in:
             - icon: arrow_2_squarepath
               command: AUTO
             - icon: thermometer_snowflake
               command: COLD
             - icon: thermometer_sun
               command: HEAT
             - icon: drop_fill
               command: DEHUMIDIFIER
             - icon: wind
               command: FAN
           fragment: true
         slots:
           default:
             - component: oh-button
               config:
                 iconF7: =loop.bottomRow.icon
                 iconSize: 15px
                 fill: "=(items[props.itemMode].state === loop.bottomRow.command) ? true : false"
                 outline: true
                 class:
                   - display-flex
                   - flex-direction-column
                   - padding-top-half
                 style:
                   height: auto
                   width: =loop.bottomRow.width
                 text: =loop.bottomRow.command
                 action: command
                 actionItem: =props.itemMode
                 actionCommand: =loop.bottomRow.command
       - component: oh-button
         config:
           iconF7: ellipsis_vertical
           iconSize: 15px
           action: variable
           actionVariable: options
           actionVariableValue: "=vars.options || vars.options === undefined ? false : true"
           fill: "=vars.options || vars.options === undefined ? false : true"
           outline: true
           class:
             - display-flex
             - flex-direction-column
           style:
             height: auto
             width: 50%

Keep up the good work!

2 Likes
3

Hey @RGroll

thanks a lot for your helpful remarks…

I’m on my way optimizing the code with oh-repeater and avoiding repeating styles - already saved more than 200 lines :slightly_smiling_face:

Also trying to improve for dark/light-theme compatibility.

It seems I need to make some color styles dependent on the used dark/light-theme.
What would be right code for below example?

     style:
       --f7-button-text-color: white

There is some strange effect for the button border color.

     style:
       --f7-button-border-color: rgba(255,255,255,.15)

In dark-theme the borders are visible - in light-theme no borders visible.
Why is that?

4

Hey @maxmaximax

Glad to hear!

Something like this would work:

style:
  --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"

The rgba values 255,255,255,.15 stands for white with an opacity of 15% - white on white isn’t easy to see. :wink:

You could use the same mechanic as above here:

style:
  --f7-button-border-color: "=themeOptions.dark === 'light' ? 'rgba(255,255,255,.15)' : 'rgba(0,0,0,.15)'"
5

Hey @RGroll

This works perfectly well !
Thanks !

This makes quite some sense… :sweat_smile:

Here I would prefer to use exactly the same colors as the outline of the f7-cards.

What would be the best way to refer to the colors in dark/light-theme?
… alternatively hardcoding both colors, if I knew the codes …

Thank you.

6

I don’t think that the f7-card is using any borders - theres just this box-shadow --f7-card-box-shadow: 0px 1px 2px rgba(0,0,0,0.15), which isn’t visible in the dark theme.

What you could do, is using the color of the line between the header and the content area and let the framework do the work for you:

--f7-button-border-color: var(--f7-card-header-border-color)

7

Hey @RGroll

Your idea got me there - I found a style for “card outline” for the framework - I used that one instead:

style:
  --f7-button-border-color: var(--f7-card-outline-border-color)

and - I updated the code in the first post with the optimized code.

Thanks a lot !

8

Hmm didn’t saw that style in the dev tools - so obviously there is some border present at the f7-card component.

Glad, you found a way, that works for you!

9

Yes, the border = outline of every “card” can be switched on when you configure the widget:

card outline
card outline624×561 10.5 KB

10

Hi,

i am struggling how to combine this mechanics with the following background color condition:

  style:
    background-color: '=(items[props.item].state === "OFF") ? "rgba(228,228,228,0.9)" : "white"'

i tried all kind of versions with the expression tester but this did not work out. What i want to achieve is:

  1. if themeOption.dark is “light”, then the above condtion should work, ( OFF= rgba, ON= white ), but when the themeOption.dark is “dark”, then the backgroud should be set to different colors e.g. ( OFF= black, ON = yellow )

Thank for some guidance here!

11

Hey @muelli1967

it would work like this for example:
background-color: "=themeOptions.dark === 'light' && items[props.item].state === 'ON' ? 'white' : themeOptions.dark === 'light' && items[props.item].state === 'OFF' ? 'rgba(228,228,228,0.9)' : themeOptions.dark === 'dark' && items[props.item].state === 'ON' ? 'yellow' : 'black'"

There are ways to make this conditional statment shorter but this is easier to understand for now, I think.

12

thanks, Rainer! This works as expected. Much appreciated. I guess i was on a too complex path. :slight_smile:

For using " or ’ in these kind of expressions it does not seem to matter as long as you are consistent or is there any condition to take into consideration?

13

Exactly you could use whatever you like the most (if you are consistent) within the expression afaik.

14

Hi Rainer @RGroll , i seem to struggle with the " or ’ in such expressions. For the background image of an OH3 page, i have tried following:

  style:
    background-image: "=themeOptions.dark === 'dark' ? '#d6ab00' :  'url('/static/images/Wallpapers/hk-Office1.jpg')'"

unfortunately this does not work and i suspect that the ’ from inside the url () are preventing from success. I tried to rework everything to:

background-image: '=themeOptions.dark === "dark" ? "#d6ab00" : "url('/static/images/Wallpapers/hk-Office1.jpg')"'

this works in the widget expression tester but throws an error in the code of the site.

15

background-image: can’t handle color values like rgb, hsl, hex or whatever, so you have to use background: here. See https://www.w3schools.com/cssref/pr_background-image.asp

Correct, you can escape these characters with \\:

background: "=themeOptions.dark === 'dark' ? '#d6ab00' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"

16

Hi Rainer,

i re-worked it according to your suggestions and also have removed the color values with another background but this does not seem to work yet, neither wiht background-image nor on background.
It is a background for a page. i want to change the background with dark / light theme.

config:
  label: Büro
  sidebar: true
  style:
    background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg'\\)' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg'\\)'"

I am sure i miss something here. It still shows no background with these lines.

17

You’ve set the escape characters at the wrong place - the’ve to be in front of the char you want to escape, so it would be:

background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"

18

yes, you are right. Hmm, still does not work…

working is this one:

  style:
    background-image: url('/static/images/Wallpapers/hk-Office1bw.jpg')

not working:

  style:
    background-image: url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')

not working:

config:
  label: Büro
  sidebar: true
  style:
    background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
19

Try:

background-image: "=themeOptions.dark === 'dark' ? 'url(/static/images/Wallpapers/hk-Office1bw.jpg)' : 'url(/static/images/Wallpapers/hk-Office1.jpg)'"

Don’t use semicolon in styles

20

still does not work :frowning: . I attach a screenshot this time )

image

this works:

config:
  label: Büro
  sidebar: true
  style:
    background-image: url(/static/images/Wallpapers/hk-Office1.jpg)
    background-size: cover
    background-repeat: no-repeat