Custom Button Card Color and Custom Fields

custom_color_fields.yaml

## Change color, icon, grid and add custom field with custom button card ##
## https://www.youtube.com/watch?v=ClxxjLSZZMw ##
**Temperature**
type: custom:button-card
entity: sensor.outdoor_temperature
show_state: true
name: Outdoor
styles:
  grid:
    - grid-template-areas: '"n" "i" "s"'
    - grid-template-rows: 1fr
    - grid-template-columns: 1fr
  card:
    - border-radius: 10%
  icon:
    - color: |
        [[[
          if (entity.state < -15) return 'darkblue'
          if (entity.state < -5) return 'blue'
          if (entity.state < 5) return 'lightblue'
          if (entity.state < 15) return 'red'
          else return 'darkred';
        ]]]
icon: |-
  [[[ if (entity.state < 0) return "mdi:thermometer-minus";
      if (entity.state < 10) return "mdi:thermometer-low";
      if (entity.state < 20) return "mdi:thermometer";
      else return "mdi:thermometer-high" ]]]

**Light with temperature**
type: custom:button-card
entity: light.living_room
name: Living room
icon: >-
  [[[ if (entity.state == "off") return "mdi:sofa-outline"; else return
  "mdi:sofa" ]]]
show_state: false
size: 100%
styles:
  card:
    - border-radius: 10%
  grid:
    - grid-template-areas: '"l i i i temp" "l i i i s" "l i i i s" "n n n n n"'
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - padding-right: px
custom_fields:
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: yellow;">
        </ha-icon><span><span style="color: var(--text-color-sensor); font-size: 12px">${Math.round(states['sensor.living_room_temperature'].state)}°C</span></span>`
    ]]]
hold_action:
  action: more-info