Reuse yaml config for similar cards

Hi everyone, i am using Lovelace in an ordinary way, not in YAML mode. However do editing partially in YAML for custom cards.
The issue that i am facing is that i am getting a huge code. Here is a short piece of my almost 2k lines config for light control page.
Is there any way to reduce it somehow or use some sort of templates for similar cards to reuse same code?
I tried to use YAML variables for styles, but as soon es i press “Save”, those variables are instantly replaced by their contents.

type: custom:bootstrap-grid-card
class: d-flex justify-content-center align-items-center
cards:
  - type: row
    cards:
      - type: vertical-stack
        class: col-sm-6 col-lg-6
        cards:
          - type: custom:vertical-stack-in-card
            style: |
              :host {
                --card-background-color: rgba(255, 255, 255, 0.05)
              }
            cards:
              - type: custom:slider-button-card
                entity: light.living_room_all
                name: Гостиная
                action_button:
                  mode: custom
                  show: true
                  tap_action:
                    action: toggle
                style: |
                  ha-card .slider,
                  ha-card .slider .slider-bg,
                  ha-card .button.off {    
                     background-color: transparent !important;
                  }                
                  ha-card .slider-thumb {
                    transform: translateX(calc(-100% + var(--slider-value)));
                    background-color: var(--slider-color, #ffffff);
                  }
                  ha-card .off .slider-thumb {
                    display: none;
                  }
                  :host {
                    --action-icon-color-on: #e9e9e8;
                    --action-icon-color-off: #e9e9e888;
                    --paper-item-icon-active-color: #ffffff;
                    --slider-color: #ffffff;
                    --label-color-on: #111111;
                    --label-color-off: #bbbbbb;
                    --card-background-color: #00000000
                  }
                slider:
                  direction: left-right
                  background: solid
                  use_state_color: false
                  use_percentage_bg_opacity: false
                  show_track: true
                  toggle_on_click: false
                  force_square: false
                show_name: true
                show_state: false
                compact: true
                icon:
                  show: true
                  use_state_color: true
                  icon: fas:lightbulb
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      command: popup
                      title: Зал
                      hide_header: true
                      style: |
                        :host .content {
                          width: 50vw;
                          height: 80vh;
                        }
                      deviceID: this
                      card:
                        type: custom:light-popup-card
                        entity: light.living_room_all
                        displayType: slider
                        fullscreen: true
                        brightnessWidth: 130px
                        brightnessHeight: 360px
                        borderRadius: 1.7em
                        sliderColor: '#c7c7c7'
                        sliderTrackColor: rgba(25, 25, 25, 0.9)
                        actionSize: 4.5em
                        actionsInARow: 4
                        actions:
                          - service: light.turn_on
                            service_data:
                              entity_id: light.living_room_all
                              color_temp: 153
                            color: '#c8d7de'
                          - service: light.turn_on
                            service_data:
                              entity_id: light.living_room_all
                              color_temp: 220
                            color: '#e6e3e1'
                          - service: light.turn_on
                            service_data:
                              entity_id: light.living_room_all
                              color_temp: 370
                            color: '#ce944b'
                          - action: fire-dom-event
                            browser_mod:
                              command: popup
                              deviceID: this
                              title: Зал
                              hide_header: true
                              card:
                                type: entities
                                show_header_toggle: false
                                entities:
                                  - entity: light.living_room_all
                                    secondary_info: last-changed
                                  - type: custom:light-entity-card
                                    entity: light.living_room_all
                                    brightness: false
                                    color_temp: true
                                    full_width_sliders: true
                                    hide_header: true
                                    show_slider_percent: true
                                    smooth_color_wheel: true
                                    consolidate_entities: true
              - type: horizontal-stack
                cards:
                  - type: custom:slider-button-card
                    entity: light.living_room_01
                    name: Стол
                    action_button:
                      mode: custom
                      show: true
                      tap_action:
                        action: toggle
                    style: |
                      ha-card .slider,
                      ha-card .slider .slider-bg,
                      ha-card .button.off {    
                         background-color: transparent !important;
                      }                
                      ha-card .slider-thumb {
                        transform: translateX(calc(-100% + var(--slider-value)));
                        background-color: var(--slider-color, #ffffff);
                      }
                      ha-card .off .slider-thumb {
                        display: none;
                      }
                      :host {
                        --action-icon-color-on: #e9e9e8;
                        --action-icon-color-off: #e9e9e888;
                        --paper-item-icon-active-color: #ffffff;
                        --slider-color: #ffffff;
                        --label-color-on: #111111;
                        --label-color-off: #bbbbbb;
                        --card-background-color: #00000000
                      }
                    slider:
                      direction: left-right
                      background: solid
                      use_state_color: false
                      use_percentage_bg_opacity: false
                      show_track: true
                      toggle_on_click: false
                      force_square: false
                    show_name: true
                    show_state: false
                    compact: true
                    icon:
                      show: true
                      use_state_color: true
                      icon: fas:lightbulb
                      tap_action:
                        action: fire-dom-event
                        browser_mod:
                          command: popup
                          title: Стол
                          hide_header: true
                          style: |
                            :host .content {
                              width: 50vw;
                              height: 80vh;
                            }
                          deviceID: this
                          card:
                            type: custom:light-popup-card
                            entity: light.living_room_01
                            displayType: slider
                            fullscreen: true
                            brightnessWidth: 130px
                            brightnessHeight: 360px
                            borderRadius: 1.7em
                            sliderColor: '#c7c7c7'
                            sliderTrackColor: rgba(25, 25, 25, 0.9)
                            actionSize: 4.5em
                            actionsInARow: 4
                            actions:
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_01
                                  color_temp: 153
                                color: '#c8d7de'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_01
                                  color_temp: 220
                                color: '#e6e3e1'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_01
                                  color_temp: 370
                                color: '#ce944b'
                              - action: fire-dom-event
                                browser_mod:
                                  command: popup
                                  deviceID: this
                                  title: Стол
                                  hide_header: true
                                  card:
                                    type: entities
                                    show_header_toggle: false
                                    entities:
                                      - entity: light.living_room_01
                                        secondary_info: last-changed
                                      - type: custom:light-entity-card
                                        entity: light.living_room_01
                                        brightness: false
                                        color_temp: true
                                        full_width_sliders: true
                                        hide_header: true
                                        show_slider_percent: true
                                        smooth_color_wheel: true
                                        consolidate_entities: true
                  - type: custom:slider-button-card
                    entity: light.living_room_02
                    name: Зал
                    action_button:
                      mode: custom
                      show: true
                      tap_action:
                        action: toggle
                    style: |
                      ha-card .slider,
                      ha-card .slider .slider-bg,
                      ha-card .button.off {    
                         background-color: transparent !important;
                      }                
                      ha-card .slider-thumb {
                        transform: translateX(calc(-100% + var(--slider-value)));
                        background-color: var(--slider-color, #ffffff);
                      }
                      ha-card .off .slider-thumb {
                        display: none;
                      }
                      :host {
                        --action-icon-color-on: #e9e9e8;
                        --action-icon-color-off: #e9e9e888;
                        --paper-item-icon-active-color: #ffffff;
                        --slider-color: #ffffff;
                        --label-color-on: #111111;
                        --label-color-off: #bbbbbb;
                        --card-background-color: #00000000
                      }
                    slider:
                      direction: left-right
                      background: solid
                      use_state_color: false
                      use_percentage_bg_opacity: false
                      show_track: true
                      toggle_on_click: false
                      force_square: false
                    show_name: true
                    show_state: false
                    compact: true
                    icon:
                      show: true
                      use_state_color: true
                      icon: fas:lightbulb
                      tap_action:
                        action: fire-dom-event
                        browser_mod:
                          command: popup
                          title: Зал
                          hide_header: true
                          style: |
                            :host .content {
                              width: 50vw;
                              height: 80vh;
                            }
                          deviceID: this
                          card:
                            type: custom:light-popup-card
                            entity: light.living_room_02
                            displayType: slider
                            fullscreen: true
                            brightnessWidth: 130px
                            brightnessHeight: 360px
                            borderRadius: 1.7em
                            sliderColor: '#c7c7c7'
                            sliderTrackColor: rgba(25, 25, 25, 0.9)
                            actionSize: 4.5em
                            actionsInARow: 4
                            actions:
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_02
                                  color_temp: 153
                                color: '#c8d7de'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_02
                                  color_temp: 220
                                color: '#e6e3e1'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_02
                                  color_temp: 370
                                color: '#ce944b'
                              - action: fire-dom-event
                                browser_mod:
                                  command: popup
                                  deviceID: this
                                  title: Зал
                                  hide_header: true
                                  card:
                                    type: entities
                                    show_header_toggle: false
                                    entities:
                                      - entity: light.living_room_02
                                        secondary_info: last-changed
                                      - type: custom:light-entity-card
                                        entity: light.living_room_02
                                        brightness: false
                                        color_temp: true
                                        full_width_sliders: true
                                        hide_header: true
                                        show_slider_percent: true
                                        smooth_color_wheel: true
                                        consolidate_entities: true
              - type: horizontal-stack
                cards:
                  - type: custom:slider-button-card
                    entity: light.living_room_color
                    name: ТВ
                    action_button:
                      mode: custom
                      show: true
                      tap_action:
                        action: toggle
                    style: |
                      ha-card .slider,
                      ha-card .slider .slider-bg,
                      ha-card .button.off {    
                         background-color: transparent !important;
                      }                
                      ha-card .slider-thumb {
                        transform: translateX(calc(-100% + var(--slider-value)));
                        background-color: var(--slider-color, #ffffff);
                      }
                      ha-card .off .slider-thumb {
                        display: none;
                      }
                      :host {
                        --action-icon-color-on: #e9e9e8;
                        --action-icon-color-off: #e9e9e888;
                        --paper-item-icon-active-color: #ffffff;
                        --slider-color: #ffffff;
                        --label-color-on: #111111;
                        --label-color-off: #bbbbbb;
                        --card-background-color: #00000000
                      }
                    slider:
                      direction: left-right
                      background: solid
                      use_state_color: false
                      use_percentage_bg_opacity: false
                      show_track: true
                      toggle_on_click: false
                      force_square: false
                    show_name: true
                    show_state: false
                    compact: true
                    icon:
                      show: true
                      use_state_color: true
                      icon: fas:lightbulb
                      tap_action:
                        action: fire-dom-event
                        browser_mod:
                          command: popup
                          title: ТВ
                          hide_header: true
                          style: |
                            :host .content {
                              width: 50vw;
                              height: 80vh;
                            }
                          deviceID: this
                          card:
                            type: custom:light-popup-card
                            entity: light.living_room_color
                            displayType: slider
                            fullscreen: true
                            brightnessWidth: 130px
                            brightnessHeight: 360px
                            borderRadius: 1.7em
                            sliderColor: '#c7c7c7'
                            sliderTrackColor: rgba(25, 25, 25, 0.9)
                            actionSize: 4.5em
                            actionsInARow: 4
                            actions:
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_color
                                  color_temp: 153
                                color: '#c8d7de'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_color
                                  color_temp: 220
                                color: '#e6e3e1'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_color
                                  color_temp: 370
                                color: '#ce944b'
                              - action: fire-dom-event
                                browser_mod:
                                  command: popup
                                  deviceID: this
                                  title: ТВ
                                  hide_header: true
                                  card:
                                    type: entities
                                    show_header_toggle: false
                                    entities:
                                      - entity: light.living_room_color
                                        secondary_info: last-changed
                                      - type: custom:light-entity-card
                                        entity: light.living_room_color
                                        brightness: false
                                        color_temp: true
                                        full_width_sliders: true
                                        hide_header: true
                                        show_slider_percent: true
                                        smooth_color_wheel: true
                                        consolidate_entities: true
                  - type: custom:slider-button-card
                    entity: light.kitchen
                    name: Кухня
                    action_button:
                      mode: custom
                      show: true
                      tap_action:
                        action: toggle
                    style: |
                      ha-card .slider,
                      ha-card .slider .slider-bg,
                      ha-card .button.off {    
                         background-color: transparent !important;
                      }                
                      ha-card .slider-thumb {
                        transform: translateX(calc(-100% + var(--slider-value)));
                        background-color: var(--slider-color, #ffffff);
                      }
                      ha-card .off .slider-thumb {
                        display: none;
                      }
                      :host {
                        --action-icon-color-on: #e9e9e8;
                        --action-icon-color-off: #e9e9e888;
                        --paper-item-icon-active-color: #ffffff;
                        --slider-color: #ffffff;
                        --label-color-on: #111111;
                        --label-color-off: #bbbbbb;
                        --card-background-color: #00000000
                      }
                    slider:
                      direction: left-right
                      background: solid
                      use_state_color: false
                      use_percentage_bg_opacity: false
                      show_track: true
                      toggle_on_click: false
                      force_square: false
                    show_name: true
                    show_state: false
                    compact: true
                    icon:
                      show: true
                      use_state_color: true
                      icon: fas:lightbulb
                      tap_action:
                        action: fire-dom-event
                        browser_mod:
                          command: popup
                          title: Кухня
                          hide_header: true
                          style: |
                            :host .content {
                              width: 50vw;
                              height: 80vh;
                            }
                          deviceID: this
                          card:
                            type: custom:light-popup-card
                            entity: light.kitchen
                            displayType: slider
                            fullscreen: true
                            brightnessWidth: 130px
                            brightnessHeight: 360px
                            borderRadius: 1.7em
                            sliderColor: '#c7c7c7'
                            sliderTrackColor: rgba(25, 25, 25, 0.9)
                            actionSize: 4.5em
                            actionsInARow: 4
                            actions:
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.kitchen
                                  color_temp: 153
                                color: '#c8d7de'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.living_room_01
                                  color_temp: 220
                                color: '#e6e3e1'
                              - service: light.turn_on
                                service_data:
                                  entity_id: light.kitchen
                                  color_temp: 370
                                color: '#ce944b'
                              - action: fire-dom-event
                                browser_mod:
                                  command: popup
                                  deviceID: this
                                  title: Кухня
                                  hide_header: true
                                  card:
                                    type: entities
                                    show_header_toggle: false
                                    entities:
                                      - entity: light.kitchen
                                        secondary_info: last-changed
                                      - type: custom:light-entity-card
                                        entity: light.kitchen
                                        brightness: false
                                        color_temp: true
                                        full_width_sliders: true
                                        hide_header: true
                                        show_slider_percent: true
                                        smooth_color_wheel: true
                                        consolidate_entities: true

Look at the custom decluttering card

Probably you are talking about yaml anchors which in some cases are replaced by a code after “save”.

As David said, the decluttering-card is the 1st step.
Using the card not only will save a huge amount of code but also allows you to use “edit once - use in many places” approach.
As the 2nd step - start using “yaml” mode, it will really allow you to keep things in order.

That’s exactly what i wanted, thank you.
Didn’t know it exists, but it works great!

1 Like

Exactly, did not know the correct name for yaml anchors.

The reason, why i don’t want to use YAML mode is the need to restart server anytime i do a change. Maybe later, when i won’t be doing any changes every couple of days.

Not required.
Post your simplified config for lovelace.