Here is a configuration to set the time of an automation :
Disabling the alarm clock prevents editing of the configuration.
The change of color and icon is done thanks to the customize part.
Rest assured the colors will match your theme 
This card uses:
- card-mod : https://github.com/thomasloven/lovelace-card-mod
- time-picker-card : https://github.com/GeorgeSG/lovelace-time-picker-card
- button-card: https://github.com/custom-cards/button-card
- custom-ui: https://github.com/Mariusthvdb/custom-ui
- a transparent image : --> here |
| <-- here
Card code
elements:
- entity: sensor.vide
prefix: Réveil 1
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 13%
pointer-events: none
top: 70%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_1
style:
'--paper-item-icon-color': var(--primary-color)
left: 13%
top: 35%
tap_action:
action: toggle
type: state-icon
- entity: input_datetime.wake_time_1
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
left: 45%
top: 50%
type: 'custom:time-picker-card'
- entity: input_boolean.wakeweekday_mon_1
icon: 'mdi:alpha-l-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_tue_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_wed_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 22%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_thu_1
icon: 'mdi:alpha-j-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 12%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_fri_1
icon: 'mdi:alpha-v-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 2%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sat_1
icon: 'mdi:alpha-s-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sun_1
icon: 'mdi:alpha-d-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
image: /local/images/transparent/transparent.png
type: picture-elements
Entities code
#Input_booleans
input_boolean:
wakestatus_1:
name: Alarm 1
icon: mdi:alarm
wakeweekday_sun_1:
name: Sunday
icon: mdi:calendar
wakeweekday_mon_1:
name: Monday
icon: mdi:calendar
wakeweekday_tue_1:
name: Tuesday
icon: mdi:calendar
wakeweekday_wed_1:
name: Wednesday
icon: mdi:calendar
wakeweekday_thu_1:
name: Thursday
icon: mdi:calendar
wakeweekday_fri_1:
name: Friday
icon: mdi:calendar
wakeweekday_sat_1:
name: Saturday
icon: mdi:calendar
#Input_datetime
input_datetime:
wake_time_1:
name: wake_time_1
has_date: false
has_time: true
#Sensors
sensor:
- platform: template
sensors:
vide:
value_template: ""
automation:
- id: 'wake_1_detect_time'
alias: Wake 1
trigger:
platform: template
value_template: "{{states('sensor.time') == (state_attr('input_datetime.wake_time_1','timestamp') | int | timestamp_custom('%H:%M', False))}}"
condition:
condition: template
value_template: >
{% set today = 'input_boolean.wakeweekday_' ~ now().strftime("%a") | lower ~ '_1' %}
{{ is_state('input_boolean.wakestatus_1', 'on') and is_state(today, 'on') }}
action:
homeassistant:
customize:
input_boolean.wakestatus_1:
templates:
icon_color: if (state === 'on') return 'green'; else return 'red';
icon: if (state === 'on') return 'mdi:alarm-check'; else return 'mdi:alarm-off';
You win Home Assistant. 
I’m also interested in how you added the ‘now playing’ in your setup. Looks great!
thanks a lot I’ll have a look and will try to understand and maybe implemented it to my dashboard. Thanks a lot so far dude