Dino-Tech
January 8, 2019, 3:23am
33
I have been trying to figure out how to create a black on black theme and all of the text be visible. I was told it wasn’t possible due to the way HA theme is designed. Well…good enough for me!
Darkest-Nightz:
dark-primary-color: "#4d4d4d"
disabled-text-color: "#5e5e6e"
light-primary-color: "#a2a2a9"
paper-card-background-color: "#121317"
paper-grey-200: "#acacb9"
paper-item-icon-color: "#c8c8d0"
paper-listbox-background-color: "#0b0e0f"
primary-background-color: "#0b0e0f"
primary-color: "4d4d4d" # # # # # # # # # <<---- DO NOT CHANGE # # #
primary-text-color: "#f2f2f2"
secondary-text-color: "#babac4"
text-primary-color: "#d6d6dc"
secondary-background-color: "#737373"
sidebar-text_-_background: "#66757f"
paper-card-header-color: "var(--paper-item-icon-color)"
paper-item-icon-active-color: "#e4da00"
paper-item-icon_-_color: "var(--primary-text-color)"
paper-listbox-color: "var(--primary-text-color)"
paper-grey-50: "var(--primary-text-color)"
paper-slider-active-color: "var(--light-primary-color)"
paper-slider-knob-color: "var(--paper-item-icon-color)"
paper-slider-knob-start-color: "var(--secondary-background-color)"
paper-slider-pin-color: "var(--secondary-background-color)"
paper-slider-secondary-color: "var(--dark-primary-color)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "#e4da00"
paper-toggle-button-unchecked-button-color: "var(--table-row-background-color)"
paper-toggle-button-checked-bar-color: "var(--paper-item-icon-color)"
paper-toggle-button-unchecked-bar-color: "var(--paper-item-icon-color)"
table-row-background-color: "#22232b"
table-row-alternative-background-color: "var(--paper-card-background-color)"
sidebar-icon-color: "#838395"
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: "var(--primary-background-color)"
sidebar-selected-icon-color: "#b3b3b3"
sidebar-selected-text-color: "var(--sidebar-selected-icon-color)"
divider-color: 'hsl(220, 5%, 38%)'
dark-divider-opacity: '0.5'
light-divider-opacity: '0.1'
shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 27%)'
shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(220, 5%, 38%)'
paper-font-headline_-_letter-spacing: '-0.2px'
paper-font-headline_-_font-weight: '500'
paper-font-body1_-_font-weight: '500'
label-badge-red: 'hsla(0, 0%, 0%, 0)'
label-badge-border-color: 'var(--label-badge-red)'
label-badge-background-color: 'var(--paper-card-background-color)'
label-badge-text-color: 'var(--primary-text-color)'
primary-font-family: "Verdana"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
google-red-500: "#cc0000"
google-blue-500: "#0033cc"
google-green-500: "#00cc00"
google-yellow-500: "#ffff66"
Let me know what you think.
6 Likes
Aimtjie
January 8, 2019, 4:54am
34
Awesome! Looks really good!
1 Like
Dino-Tech
January 9, 2019, 5:51am
35
minor adjustment if you prefer a darker green as I do…
google-green-500: "#13eb13"
cpuram
January 9, 2019, 10:24am
36
trying to get rounded corners but, looks like it doesn’t work with picture-elements card. I am getting a square picture on top of rounded box
1 Like
cjsimmons
January 9, 2019, 10:52am
37
Have you tried overflow:hidden
2 Likes
Dino-Tech
January 9, 2019, 5:40pm
38
1 Like
cpuram
January 11, 2019, 3:29am
39
trying to make mini graph card semi transparent (like you did for office temp/humidity, etc). transparency seems to work but the image is not appearing from beneath. please see below the relevant code.
- card:
cards:
- card:
detail: 2
height: 50
entity: >-
sensor.philio_technology_corporation_phpab01eu_micromodule_energy_meter_power
hide:
- icon
- state
name: Power Usage
type: 'custom:mini-graph-card'
style:
background-color: rgba(0,0,0,0.3)
background-size: 100% 100%
border-radius: 15px 15px 0px 0px
type: 'custom:card-modder'
type: 'custom:vertical-stack-in-card'
id: powerusage
style:
background-image: url('/local/images/powerMeter.jpg') fixed
background-size: 100% 100%
border-radius: 15px
type: 'custom:card-modder'
Dino-Tech
January 13, 2019, 5:34am
40
Can you please post image so I can see what is displaying. Thanks
cpuram
January 14, 2019, 5:13am
41
what I am doing is little different to what you did above though. I am trying to set a back ground at the vertical stack level (yours goes all the way down). please see below the sample code. Thanks for looking into this.
- card:
cards:
- card:
entities:
- light.ceiling_light_front_room_2
- light.front_room_light
- switch.plug_stair_lights
- switch.plug_tv_light_strip
title: top1Card
type: entities
style:
background-size: 100% 100%
border-radius: 15px 15px 0px 0px
background-color: rgba(0,0,0,0)
type: 'custom:card-modder'
- card:
entities:
- light.ceiling_light_front_room_2
- light.front_room_light
- switch.plug_stair_lights
- switch.plug_tv_light_strip
title: top2Card
type: entities
style:
background-size: 100% 100%
border-radius: 0px 0px 15px 15px
background-color: rgba(0,0,0,0)
type: 'custom:card-modder'
id: rooms
type: custom:vertical-stack-in-card
style:
background-size: 100% 100%
border-radius: 15px
background-image: url('/local/images/bg3.jpg')
type: 'custom:card-modder'
Dino-Tech
January 15, 2019, 1:16am
42
I need to see what it is displaying so I can try to help. Thanks!
balloob
January 18, 2019, 7:53am
43
@Dino-Tech we’re working on updating the Home Assistant demo on the website and would love to include parts of your config. Would you want to contribute the config of 2 or 3 tabs for the demo? Instructions how to contribute can be found here https://github.com/home-assistant/home-assistant-polymer/wiki/Contributing-a-Lovelace-config-for-the-demo
1 Like
Dino-Tech
January 18, 2019, 4:16pm
44
Would be honored. I’ll follow up on this today.
Dino-Tech
January 19, 2019, 7:47am
45
Just started working on some new style views thanks to @thomasloven ’s layout card and card-modder . Switching background and card images with input_select and I’ll try to automate that randomly. I’d like to randomly have them change when view is clicked or a set timer.
Automated now…
Dino-Tech
January 28, 2019, 5:41pm
46
Have been working on this simple and easy *NO custom cards view:
Use with Darkest-Nightz theme as main HA theme and use Clear-Nightz-II theme for the view.
Code:
title: radar_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/backgroundz/Purple-fractals.jpg") fixed
icon: mdi:weather-partlycloudy
cards:
- type: vertical-stack
cards:
- type: entities
title: 'Dark Sky Summary'
show_header_toggle: false
entities:
- sensor.dark_sky_summary
- sensor.dark_sky_minutely_summary
- sensor.dark_sky_hourly_summary
- sensor.dark_sky_daily_summary
- type: divider
- sensor.dark_sky_temperature
- sensor.dark_sky_apparent_temperature
- type: iframe
url: https://embed.windy.com/embed2.html
aspect_ratio: 72%
- type: vertical-stack
cards:
- type: weather-forecast
entity: weather.covington_forecast
- type: entities
entities:
- type: divider
- type: entities
entities:
- sensor.dark_sky_daytime_high_temperature_0
- sensor.dark_sky_overnight_low_temperature_0
- sensor.dark_sky_precip_intensity
- sensor.dark_sky_precip_probability
- sensor.dark_sky_humidity
- sensor.dark_sky_dew_point
- sensor.dark_sky_pressure
- sensor.dark_sky_wind_speed
- type: vertical-stack
cards:
- type: history-graph
title: 'Outside Conditions'
entities:
- entity: sensor.outside_ht_temp
name: Patio Temp
unit_of_measurement: F
- entity: sensor.outside_ht_humidity
name: Patio Humidity
- entity: sensor.dark_sky_temperature
name: Outside Temp
unit_of_measurement: F
- entity: sensor.dark_sky_humidity
name: Outside Humidity
- entity: sensor.garage_smoke_temp
name: Garage Temp
unit_of_measurement: F
- type: markdown
content: >
##
Local Radar
- type: horizontal-stack
cards:
- type: picture-entity
entity: camera.local_radar
camera_image: camera.local_radar
show_state: false
show_name: false
- type: picture-entity
entity: camera.new_orleans_radar
camera_image: camera.new_orleans_radar
show_state: false
show_name: false
3 Likes
Dino-Tech
January 30, 2019, 5:40am
47
Okay. I got this working, but not the way I want…yet . Live camera feeds as background image. Haven’t seen this yet, but it has potential. Just pulling random input selections for images for now. Would like to have PIR detection designate the camera feed displayed. I know this has been done with the custom : surveillance-card, but would like help if anyone has an idea of how to accomplish.
horrible hardware here, but good enough to get the idea…
do you have a link for this? It didn’t come up when I searched
Is Tinycam Pro / Wyzecam working stable for you ? I have the same setup and get lots of timeouts / errors. I’m running TCP on a VM with android though, so maybe thats the issue.
atomicpapa
January 30, 2019, 2:01pm
52
care to share how you managed to accomplish this?
1 Like
You really need a github for the awesome stuff you come up with lol