Hey everyone,
I finally got my theme to a place where I feel like it’s share worthy. It’s still a work in progress… well since I am a perfectionists it will always be :).
I call it the Palm Springs theme, hope you guys like it!
Let me know if you have any questions or suggestion in how to make it even better.
/Mikael
Custom Lovelace:
Mini Media Player – Lovelace: Mini Media Player
Slider Entity Row – My Lovelace Plugins
Card Tools – My Lovelace Plugins
Card Modder – My Lovelace Plugins
Button Card – Lovelace: Button card
Moment.js – https://momentjs.com
clock-card.js:
class ClockCard extends Polymer.Element { static get template() { return Polymer.html` <style> :host { cursor: pointer; } .content { padding: 24px 16px; display:flex; } .gtlogo{ background-image: url("/local/images/gt-logo.png"); background-size: contain; background-repeat: no-repeat; width:92px; } .time { font-family: var(--paper-font-headline_-_font-family); -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); font-size: 3em; font-weight: var(--paper-font-headline_-_font-weight); letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: 1em; text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering); } .date { color: var(--accent-color); font-family: var(--paper-font-headline_-_font-family); -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); font-size: 1.3em; font-weight: var(--paper-font-headline_-_font-weight); letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: var(--paper-font-headline_-_line-height); text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering); } </style> <ha-card> <div class="content"> <div class="gtlogo"></div> <div class="clock"> <div class="time" id="time">3:45 PM</div> <div class="date" id="date">Wednesday, December 3</div> </div> </div> </ha-card> ` } static get properties() { return { _hass: Object } } ready() { super.ready(); this.time = this.$.time; this.date = this.$.date; this._updateTime(); setInterval(() => this._updateTime(), 500); } setConfig(config) { this.config = config; } set hass(hass) { this._hass = hass; } _updateTime(force = false) { this.time.innerHTML = moment().format('h:mm A'); this.date.innerHTML = moment().format('dddd, MMMM DD'); } // The height of your card. Home Assistant uses this to automatically // distribute all cards over the available columns. getCardSize() { return 3; } } customElements.define('clock-card', ClockCard);
Theme:
palms: primary-color: "#ec9ba3" accent-color: "#ddadb2" dark-primary-color: var(--accent-color) light-primary-color: var(--accent-color) ### Text ### primary-text-color: "#aa8674" secondary-text-color: var(--accent-color) text-primary-color: "#ffffff" disabled-text-color: "#efdfd8" # Switches paper-toggle-button-checked-button-color: var(--paper-card-background-color) paper-toggle-button-checked-bar-color: var(--primary-color) paper-toggle-button-checked-ink-color: var(--primary-color) paper-toggle-button-unchecked-button-color: var(--paper-card-background-color) paper-toggle-button-unchecked-bar-color: "#e2c6c8" paper-toggle-button-unchecked-ink-color: "#e2c6c8" # Paper card paper-card-header-color: var(--accent-color) paper-card-background-color: "rgba(252,244,240,0.97)" paper-dialog-background-color: var(--paper-card-background-color) paper-item-icon-color: "#e5b3b8" paper-item-icon-active-color: "#af6a71" paper-item-icon_-_color: "red" paper-item-selected_-_background-color: "red" paper-tabs-selection-bar-color: "red" paper-listbox-background-color: var(--primary-background-color) ### Sliders ### paper-slider-knob-color: "#ec9ba3" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: "#ec9ba3" paper-slider-container-color: var(--disabled-text-color) paper-slider-disabled-active-color: var(--disabled-text-color) paper-slider-disabled-secondary-color: var(--disabled-text-color)
Lovelace:
background: center / auto repeat url("/local/wallpaper/bananaleaf.png") fixed resources: - type: module url: /local/mini-media-player-bundle.js - type: js url: /local/clock-card.js - type: js url: /local/moment.js - type: js url: /local/slider-entity-row.js - type: js url: /local/card-tools.js - type: js url: /local/card-modder.js - type: module url: /local/button-card.js title: Guice-Tyrsen views: - badges: [] cards: - cards: - card: type: 'custom:clock-card' style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' type: horizontal-stack - type: vertical-stack cards: - card: entity: weather.dark_sky type: weather-forecast style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: columns: 4 entities: - entity: input_select.house_mode name: Home - entity: lock.front_door name: Front Door tap_action: action: toggle - entity: device_tracker.cdefda43_d747_4fb8_9425_d88cb46facc0 name: Mikael - entity: device_tracker.e8b57665_72f6_4c72_bdfc_e5096afd3349 name: Angela type: glance style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - cards: - card: entities: - entity: light.bar full_row: false icon: 'mdi:glass-cocktail' name: Bar toggle: true type: 'custom:slider-entity-row' - entity: light.dining_table full_row: false icon: 'mdi:silverware' name: Dining Table toggle: true type: 'custom:slider-entity-row' - entity: light.kitchen_island full_row: false icon: 'mdi:fridge-outline' name: Kitchen Island toggle: true type: 'custom:slider-entity-row' - entity: light.living_room_ambiance full_row: false icon: 'mdi:white-balance-iridescent' name: Ambiance toggle: true type: 'custom:slider-entity-row' show_header_toggle: false title: Lights type: entities style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - type: horizontal-stack cards: - card: entity: input_boolean.living_room_candles icon: 'mdi:candle' name: Candles color_type: icon size: 50% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle theme: palms_off_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: input_boolean.living_room_tv icon: 'mdi:television' name: TV color_type: icon size: 50% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - cards: - card: entity: script.scene_upstairs_cozy icon: 'mdi:sofa' name: Cozy color_type: card style: - color: '#d8c2ac' - font-size: 14px color_off: 'rgb(35,80,72)' size: 30% tap_action: action: call-service service: script.turn_on service_data: entity_id: script.scene_upstairs_cozy theme: palms_scene_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: script.scene_upstairs_movie_time icon: 'mdi:television' name: Movie Time color_type: card style: - color: '#d8c2ac' - font-size: 14px color_off: 'rgb(35,80,72)' size: 30% tap_action: action: call-service service: script.turn_on service_data: entity_id: script.scene_upstairs_movie_time theme: palms_scene_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' type: horizontal-stack - cards: - card: entity: script.scene_upstairs_cocktail_time icon: 'mdi:glass-cocktail' name: Cocktail Time color_type: card style: - color: '#d8c2ac' - font-size: 14px color_off: 'rgb(35,80,72)' size: 30% tap_action: action: call-service service: script.turn_on service_data: entity_id: script.scene_upstairs_cocktail_time theme: palms_scene_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: script.scene_upstairs_bright icon: 'mdi:lightbulb-on' name: Bright color_type: card style: - color: '#d8c2ac' - font-size: 14px color_off: 'rgb(35,80,72)' size: 30% tap_action: action: call-service service: script.turn_on service_data: entity_id: script.scene_upstairs_bright theme: palms_scene_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' type: horizontal-stack type: vertical-stack - type: vertical-stack cards: - type: horizontal-stack cards: - card: entity: switch.outdoor_fountain icon: 'mdi:fountain' name: Fountain color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle theme: palms_off_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - type: horizontal-stack cards: - card: entity: group.outdoor_lights icon: 'mdi:spotlight-beam' name: Garden color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: switch.outdoor_patio icon: 'mdi:lightbulb' name: Patio color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle theme: palms_off_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: switch.outdoor_seating_area icon: 'mdi:lightbulb' name: Seating color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle theme: palms_off_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - type: 'custom:card-modder' style: border-radius: 10px overflow: hidden background-color: '#ec9ba3' color: white font-family: Avenir-Black letter-spacing: 10px font-size: 15px margin-bottom: '-220px' padding-bottom: 200px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' card: type: markdown content: <center><h2>OFFICE</h2></center> - type: horizontal-stack cards: - card: entity: light.conference_room icon: 'mdi:lamp' name: Conference Room color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle type: 'custom:button-card' style: border-radius: 10px overflow: hidden margin-left: 10px margin-right: 2px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - card: entity: switch.nucontext_sign icon: 'mdi:lightbulb' name: NC Sign color_type: icon size: 30% color: '#af6a71' color_off: '#f1d6c8' style: - font-size: 14px tap_action: action: toggle theme: palms_off_card type: 'custom:button-card' style: border-radius: 10px overflow: hidden margin-left: 2px margin-right: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' - style: border-radius: 10px overflow: hidden margin-left: 10px margin-right: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' card: type: entities entities: - input_select.office_mode - cards: - type: conditional conditions: - entity: media_player.upstairs_speakers state: playing card: style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' overflow: hidden type: 'custom:card-modder' card: type: entities entities: - card: entity: media_player.spotify artwork: full-cover hide: volume: true power: true source: true icon: true controls: true info: true name: true type: 'custom:mini-media-player' style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' overflow: hidden type: 'custom:card-modder' - type: 'custom:mini-media-player' entity: media_player.upstairs_speakers max_volume: 50 group: true hide: power: true mute: true progress: true volume: true icon: true shortcuts: columns: 1 buttons: - id: 'spotify:album:5CvI10y16ATzPfGt7SUhFH' name: Sam Cooke At The Copa type: playlist - id: 'spotify:album:2m0W0n7zBYmRNs1QAgoa6Z' name: Frank Sinatra At The Sands type: playlist - id: 'spotify:user:kickr:playlist:0yu8kQRLyh8wlnDJwWkH20' name: Mexico Feels type: playlist - id: 'spotify:user:kickr:playlist:7LeMOhUgvoF9U8U7jFRwGM' name: Hollywood Chill type: playlist - id: 'spotify:album:1k39wDj3JzRzt80EIPUyUR' name: Julie London type: playlist - type: 'custom:mini-media-player' artwork: none entity: media_player.upstairs_speakers icon: 'mdi:speaker' max_volume: 50 group: true hide: info: true controls: true power: true mute: true progress: true type: vertical-stack - style: border-radius: 10px box-shadow: '0px 5px 5px rgba(0,0,0,0.3)' type: 'custom:card-modder' card: type: shopping-list title: Shopping List icon: '' path: default_view title: Home
