Hey guys,
I am new here, I am working on a custom design for my Home assistant.
Currently it is template based, planning to make it a theme with color choices based on the user preferences.
Its a work in progress, Any feedbacks will be appreciated.
Thanks
This looks amazing! Is there an chance that you might publish the configuration for this?
Yes, that’s the plan. I’ll proceed once I’ve completed all the cards I’m currently working on. Right now, I’m focused on the Media Player designs.
Also if you are looking for any specific card or Entity design, let me know. It will help me making a better design theme
Thanks.
Use this for the car Card I have linked the Vehicle status card (GitHub - ngocjohn/vehicle-status-card: 🚘 Lovelace custom card for tracking Vehicle status)
and Bubble card as the popup for details.
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#pop-xuv-detail"
variables:
device_entity: device_tracker.xuv500
sensor_entity: sensor.xuv_sensor
running_color: '#98D2C0'
parking_color: '#C7D9DD'
idling_color: '#F6C794'
name: Some Car Name
name: '[[[ return variables.name ]]]'
label: |
[[[
var location_state = states[variables.device_entity].state;
return location_state == 'home' ? 'Home' : 'away';
]]]
show_name: true
show_label: true
triggers_update:
- '[[[ return variables.device_entity ]]]'
- '[[[ return variables.sensor_entity ]]]'
custom_fields:
odometer: |
[[[
return states[variables.sensor_entity].attributes.data.odometer + ' Km';
]]]
img: |
[[[
return '<img src="/local/ic/custom_imgs/xuv.png" style="width:150px;height:auto;">'
]]]
state: |
[[[
var state_val = states[variables.sensor_entity].attributes.data.vehicle_state;
var status = 'PARKED';
if(state_val == 2) {
status = 'RUNNING';
} else if(state_val == 3) {
status = 'IDLING';
}
return status;
]]]
styles:
grid:
- grid-template-areas: '"img n" "img state" "img odometer"'
- grid-template-rows: 1fr 1fr 1fr
- grid-template-columns: min-content 1fr
card:
- height: 100px
- background: |
[[[
var state_val = states[variables.sensor_entity].attributes.data.vehicle_state;
var colorBg = variables.parking_color;
if(state_val == 2) {
colorBg = variables.running_color;
} else if(state_val == 3) {
colorBg = variables.idling_color;
}
return colorBg;
]]]
- padding: 20px
- border-radius: 10px
name:
- justify-self: start
- font-size: 26px
- font-weight: 700
- color: '#F6F0F0'
- z-index: 1
- margin-left: '-5px'
label:
- justify-self: start
- position: absolute
- font-size: 95px
- font-weight: 800
- left: 30%
- margin-top: '-10px'
- opacity: 0.1
- color: '#2A4759'
- text-transform: uppercase
- z-index: 0
custom_fields:
img:
- margin-top: '-15px'
- margin-left: '-20px'
- align-self: start
- justify-self: center
- z-index: 1
state:
- justify-self: start
- font-weight: bold
- color: '#183B4E'
- font-weight: 800
- margin-left: '-5px'
- text-transform: uppercase
- z-index: 1
odometer:
- font-size: 22px
- justify-self: end
- font-weight: 500
- color: '#183B4E'
- margin-left: '-5px'
- z-index: 1
state:
- value: home
label: Away
- value: not home
label: Away
Also if you are looking for any specific card or Entity design, let me know. It will help me making a better design theme
All of them, I love them all 
Thanks,
Ill create a Github repo and share the link, Soon
