My dashboard is in YAML mode so I believe I have to apply the Dark Theme in the YAML view. I just can’t find how its done this way. But thank you for the detailed explanation.
Even if you are in YAML mode you can change the theme the way ValMar has described. It’s that for the Gonsboro theme there is no dark theme available. If you want a dark theme for that you have to copy the Gonsboro theme, change the name and start fiddleling around with the different colors until you find something you like. Yes that is a lot of trial and error. The fun part? If you don’t like it, or you completely messed things up you can delete the theme and start over again.
# Adjusted from nm_steelblue
# Neumorphic - ai01_blue-theme
ai01_blue-theme:
#
# Theming the box-shadow for a card.
# ----------------------------------
#
# My decluttering templates use this for box-shadows. In that way I can control the box-shadow from the theme.
#
# origineel 6px, 6px, 12px en -6px, -6px, 12px
ha-card-box-shadow: "2px 2px 4px var(--cs-theme-shadow-darker), -1px -1px 2px var(--cs-theme-shadow-lighter)"
theme-card-box-shadow: "var(--shadow-elevation-2dp_-_box-shadow)"
#
# Theming the default gradient.
# -----------------------------
#
# A theme has a default gradient, which can be used to color the mini-graph-card for instance (colorstops)
# This gives a nice look and feel if you're after such a color scheme
#
# Use this to generate the gradient: http://www.perbang.dk/rgbgradient/
#
# Gradient is from the primary color (orange) to the secondary text color (blue)
#
# Color set via http://mcg.mbitson.com/#!?mcgpalette0=%23ffb414
# Oranje (default)
theme-graph-default-graph-color: "#ffb414"
theme-gradient-color-02-1pct: "rgba(255, 218, 138, 0.01)"
theme-gradient-color-02-5pct: "rgba(255, 218, 138, 0.05)"
theme-gradient-color-02-10pct: "rgba(255, 218, 138, 0.1)"
theme-gradient-color-02-20pct: "rgba(255, 218, 138, 0.2)"
theme-gradient-color-02-50pct: "rgba(255, 218, 138, 0.5)"
theme-gradient-color-02-80pct: "rgba(255, 218, 138, 0.8)"
theme-gradient-color-05-20pct: "rgba(255, 218, 138, 0.2)"
theme-gradient-color-05-50pct: "rgba(255, 218, 138, 0.5)"
theme-gradient-color-05-80pct: "rgba(255, 218, 138, 0.8)"
theme-gradient-color-01: "#FFF6E3"
theme-gradient-color-02: "#FFF6E3"
theme-gradient-color-03: "#FFF6E3"
theme-gradient-color-04: "#FFCB5B"
theme-gradient-color-05: "#FFBF37"
theme-gradient-color-06: "#FFB414"
theme-gradient-color-07: "#FFAD12"
theme-gradient-color-08: "#FFA40E"
theme-gradient-color-09: "#FFA40E"
theme-gradient-color-10: "#FF8C06"
theme-gradient-color-11: "#FF8305"
# http://mcg.mbitson.com/#!?mcgpalette0=%23efeeee
cs-theme-default-lighten-50: "#FFF3E0"
cs-theme-default-lighten-40: "#FFE0B2"
cs-theme-default-lighten-30: "#FFCC80"
cs-theme-default-lighten-20: "#7BA9B8"
cs-theme-default-lighten-10: "#FFA726"
#cs-theme-default-base: '#438499'
# Donker blauw/grijs
cs-theme-default-base: "#152429"
cs-theme-default-darken-10: "#7BA9B8"
cs-theme-default-darken-20: "#F57C00"
cs-theme-default-darken-30: "#F57C00"
cs-theme-default-darken-40: "#E65100"
cs-theme-default-accent-10: "#FFD180"
cs-theme-default-accent-20: "#FFAB40"
cs-theme-default-accent-40: "#FF6D00"
cs-theme-default-accent-70: "#FF6D00"
cs-theme-default-lighten-05: "#E8F0F3"
cs-theme-default-darken-15: "#3b7587"
cs-orange-lighten-50: "#FFF3E0"
cs-orange-lighten-40: "#FFE0B2"
cs-orange-lighten-30: "#FFCC80"
# originele kleur oranje
#cs-orange-lighten-20: "#FFB74D"
# blauwe/groene kleur optie #1
#cs-orange-lighten-20: "#75EBF3"
# blauw/groene kleur optie #2
#cs-orange-lighten-20: "#6FE3EA"
# blauw/groen optie #3
cs-orange-lighten-20: "#58DEEE"
cs-orange-lighten-10: "#FFA726"
# Oranje (origineel)
#cs-orange-base: '#FF9800'
# Blauw
cs-orange-base: "#2E85F3"
cs-orange-darken-10: "#FB8C00"
cs-orange-darken-20: "#F57C00"
# Origineel
#cs-orange-darken-30: '#EF6C00'
# Lichtblauw
cs-orange-darken-30: "#29BCFF"
cs-orange-darken-40: "#E65100"
cs-orange-accent-10: "#FFD180"
cs-orange-accent-20: "#FFAB40"
cs-orange-accent-30: "#FF9100"
cs-orange-accent-40: "#FF6D00"
cs-theme-shadow-darker: "#397082"
cs-theme-shadow-lighter: "#4d98b0"
cs-theme-default-primary: "var(--cs-orange-base)"
cs-theme-default-accent: "var(--cs-orange-accent-40)"
cs-theme-default-primary-light: "var(--cs-orange-lighten-40)"
cs-theme-default-primary-dark: "var(--cs-orange-darken-40)"
cs-theme-default-font-primary: "#f6f5f7"
cs-theme-default-font-secondary: "var(--cs-orange-darken-30)"
cs-theme-default-background-primary: "var(--cs-theme-default-base)"
cs-theme-default-background-secondary: "#397082"
cs-theme-default-icon-primary: "var(--cs-grey-lighten-10)"
adc-wheat: "#e5d7b9"
adc-whitesmoke: "#edf4f6"
md-grey-0: "#FFFFFFF"
md-grey-30: "#FCFCFC"
cs-grey-lighten-50: "#edf4f6"
cs-grey-lighten-40: "#edf4f6"
cs-grey-lighten-38: "#edf4f6"
cs-grey-lighten-35: "#edf4f6"
cs-grey-lighten-30: "#edf4f6"
cs-grey-lighten-20: "#edf4f6"
cs-grey-lighten-10: "#edf4f6"
cs-grey-base: "#A2A9AB"
cs-grey-darken-10: "#e5d7b9"
cs-grey-darken-20: "#e5d7b9"
cs-grey-darken-30: "#e5d7b9"
cs-grey-darken-35: "#e5d7b9"
cs-grey-darken-40: "#212121"
#cs-grey-darken-45: '#e5d7b9'
cs-grey-darken-45: "#88c6d9"
cs-black: "#222222"
cs-white: "#FFFFFF"
##
# Card colors per state. Used by buttons, lights and mini graph cards for instance
#
# In this way, we can 'theme' all the states and use a generic template (button for instance) for the states.
#
# Card with state Not Applicable, ie no state!
# - background is opaque white with 20% transparancy, so blends well with choosen dark background
# By using a transparent color instead of an opaque setting, the text remains readable!
#
theme-button-card-color-state-na: "var(--paper-card-background-color)"
theme-button-icon-color-state-na: "var(--secondary-text-color)"
theme-button-text-color-state-na: "var(--primary-text-color)"
theme-button-area-color-state-na: "var(--primary-text-color)"
theme-button-label-color-state-na: "var(--primary-text-color)"
theme-button-lock-color-state-na: "var(--primary-text-color)"
theme-button-name-color-state-na: "var(--primary-text-color)"
theme-button-state-color-state-na: "var(--primary-text-color)"
# Card with state = 'on'
theme-button-card-color-state-on: "var(--paper-card-background-color)"
# Changed 2019.08.25 to normal background 'var(--cs-theme-default-darken-10)'
#'rgba(255, 255, 255, 0.23)'
#theme-button-card-color-state-on: 'var(--paper-dialog-background-color)'
# 'var(--primary-color)'
#'var(--paper-dialog-background-color)'
#'var(--dark-primary-color)'
theme-button-area-color-state-on: "var(--primary-text-color)"
# As per the button documentation, the button will set the color of the icon according to the light value
# Does not work always strange enough when set from the light template?!?
theme-button-icon-color-state-on: "var(--paper-item-icon-active-color)"
theme-button-label-color-state-on: "var(--primary-color)"
theme-button-lock-color-state-on: "var(--primary-text-color)"
theme-button-name-color-state-on: "var(--primary-text-color)"
theme-button-state-color-state-on:
"var(--primary-color)"
#'var(--cs-orange-darken-40)'
# Card with state = 'off'
theme-button-card-color-state-off: "var(--paper-card-background-color)"
theme-button-area-color-state-off: "var(--cs-grey-base)"
theme-button-icon-color-state-off: "var(--cs-grey-base)"
theme-button-label-color-state-off: "var(--cs-grey-base)"
theme-button-lock-color-state-off: "var(--cs-grey-base)"
theme-button-name-color-state-off: "var(--cs-grey-base)"
theme-button-state-color-state-off: "var(--cs-grey-base)"
# Card with fake state 'menu'. This is injected using a fake entity, input_select: ismenu, with an initial state of 'menu'
#theme-button-card-color-state-menu: 'rgba(255, 255, 255, 0.11)'
theme-button-card-color-state-menu: "rgba(255, 255, 255, 0.0)"
theme-button-area-color-state-menu: "var(--cs-grey-lighten-50)"
theme-button-icon-color-state-menu: "var(--adc-wheat)"
#'var(--secondary-text-color)'
theme-button-label-color-state-menu: "var(--primary-text-color)"
theme-button-lock-color-state-menu: "var(--primary-text-color)"
theme-button-name-color-state-menu: "var(--primary-text-color)"
theme-button-state-color-state-menu: "var(--primary-text-color)"
theme-button-card-color-state-undefined: "var(--paper-card-background-color)"
theme-button-area-color-state-undefined: "var(--cs-grey-base)"
theme-button-icon-color-state-undefined: "var(--cs-grey-base)"
theme-button-label-color-state-undefined: "var(--cs-grey-base)"
theme-button-lock-color-state-undefined: "var(--cs-grey-base)"
theme-button-name-color-state-undefined: "var(--cs-grey-base)"
theme-button-state-color-state-undefined: "var(--cs-grey-base)"
theme-button-card-color-state-unavailable: "var(--paper-card-background-color)"
theme-button-area-color-state-unavailable: "var(--cs-grey-base)"
theme-button-icon-color-state-unavailable: "var(--cs-grey-base)"
theme-button-label-color-state-unavailable: "var(--cs-grey-base)"
theme-button-lock-color-state-unavailable: "var(--cs-grey-base)"
theme-button-name-color-state-unavailable: "var(--cs-grey-base)"
theme-button-state-color-state-unavailable: "var(--cs-grey-base)"
theme-button-card-color-state-idle: "rgba(255, 251, 239, 0.7)"
theme-button-area-color-state-idle: "var(--cs-grey-lighten-50)"
theme-button-icon-color-state-idle: "var(--cs-grey-lighten-50)"
theme-button-label-color-state-idle: "var(--cs-grey-lighten-50)"
theme-button-lock-color-state-idle: "var(--cs-grey-lighten-50)"
theme-button-name-color-state-idle: "var(--cs-grey-lighten-50)"
theme-button-state-color-state-idle: "var(--cs-grey-lighten-50)"
# Card with alarm state 'pending'
theme-button-card-color-state-pending: "rgba(255, 251, 239, 1.0)"
theme-button-area-color-state-pending: "var(--cs-black)"
theme-button-icon-color-state-pending: "red"
theme-button-icon-animation-state-pending: "blink 1s ease infinite"
theme-button-label-color-state-pending: "var(--cs-orange-darken-40)"
theme-button-lock-color-state-pending: "var(--cs-black)"
theme-button-name-color-state-pending: "var(--cs-black)"
theme-button-state-color-state-pending: "var(--cs-orange-darken-40)"
# Card with alarm state 'disarmed'
#theme-button-card-color-state-disarmed: 'rgba(255, 251, 239, .2)'
theme-button-card-color-state-disarmed: "var(--paper-card-background-color)"
theme-button-area-color-state-disarmed: "var(--cs-grey-base)"
theme-button-icon-color-state-disarmed: "green"
theme-button-label-color-state-disarmed: "var(--cs-grey-base)"
theme-button-lock-color-state-disarmed: "var(--cs-grey-base)"
theme-button-name-color-state-disarmed: "var(--cs-grey-base)"
theme-button-state-color-state-disarmed: "var(--cs-grey-base)"
# Card with alarm state 'armed_home'
theme-button-card-color-state-armed_home: "rgba(255, 251, 239, 1.0)"
theme-button-area-color-state-armed_home: "var(--cs-black)"
theme-button-icon-color-state-armed_home: "red"
theme-button-icon-animation-state-armed_home: "blink 2s ease infinite"
theme-button-label-color-state-armed_home: "var(--cs-orange-darken-40)"
theme-button-lock-color-state-armed_home: "var(--cs-black)"
theme-button-name-color-state-armed_home: "var(--cs-black)"
theme-button-state-color-state-armed_home: "var(--cs-orange-darken-40)"
# Card with alarm state 'armed_away'
theme-button-card-color-state-armed_away: "rgba(255, 251, 239, 1.0)"
theme-button-area-color-state-armed_away: "var(--cs-black)"
theme-button-icon-color-state-armed_away: "red"
theme-button-icon-animation-state-armed_away: "blink 2s ease infinite"
theme-button-label-color-state-armed_away: "var(--cs-orange-darken-40)"
theme-button-lock-color-state-armed_away: "var(--cs-black)"
theme-button-name-color-state-armed_away: "var(--cs-black)"
theme-button-state-color-state-armed_away: "var(--cs-orange-darken-40)"
#
# Theming for the custom:mini-graph-card
#
theme-graph-card-color: "var(--paper-card-background-color)"
theme-graph-icon-color: "var(--secondary-text-color)"
theme-graph-text-color: "var(--cs-grey-lighten-50)"
## custom:thermostat-card settings
#
theme-thermostat-text-color: "var(--primary-text-color)"
theme-thermostat-off-fill: "var(--primary-background-color)"
theme-thermostat-cool-fill: "#007AF1"
theme-thermostat-heat-fill: "#E36304"
theme-thermostat-path-color: "var(--adc-wheat)"
#'rgba(255,255,255, 0.3)'
theme-thermostat-path-active-color: "rgba(255,255,255, 0.8)"
theme-thermostat-path-active-color-large: "rgba(255,255,255, 1.0)"
theme-thermostat-path-heat-color: "rgba(255,255,255,0.4)"
## Use rgba instead of rgb with opacity to have text still visible, instead of opaque!!
# Below color is #FFFBEF, a very light gradient of some orange stuff.
# See also here: https://convertingcolors.com/rgb-color-255_251_239.html
#
# Theming for custom:simple-weather-card
theme-weather-day-color: "var(--paper-card-background-color)"
theme-weather-night-color: "var(--paper-card-background-color)"
theme-weather-text-color: "var(--cs-grey-lighten-50)"
upcoming-color: black
##
# Main colors of Home Assistant
# Base colors...
primary-color: "var(--cs-theme-default-primary)"
accent-color: "var(--cs-theme-default-accent)"
dark-primary-color: "var(--cs-theme-default-primary-dark)"
light-primary-color: "var(--cs-theme-default-primary-light)"
# Text colors
primary-text-color: "var(--cs-theme-default-font-primary)"
text-primary-color: "var(--cs-theme-default-font-primary)"
secondary-text-color: "var(--cs-theme-default-font-secondary)"
# 2020.09.25 Set disabled text color to some slate color, not grey!
# disabled-text-color: 'var(--cs-grey-darken-10)'
disabled-text-color: "var(--cs-theme-default-darken-10)"
label-badge-border-color: "var(--cs-theme-default-lighten-50)"
# Sidebar
#sidebar-icon-color: 'var(--cs-grey-lighten-1)'
# Aangepast naar grijs-blauw
sidebar-icon-color: "var(--cs-theme-default-lighten-20)"
## Notes on Backgrounds
#
# Elevation Level White Overlay Transparency
# 00dp 0% --> primary-background-color
# 01dp 5%
# 02dp 7% --> paper-card-background-color
# 03dp 8%
# 04dp 9% --> paper-dialog-background-color
# 06dp 11%
# 08dp 12%
# 12dp 14%
# 16dp 15%
# 24dp 16%
# Background colors
# Primary is background, secondary is for menu
primary-background-color: "var(--cs-theme-default-background-primary)"
secondary-background-color: "var(--cs-theme-default-background-secondary)"
divider-color: "rgba(229, 215, 185, .25)"
table-row-background-color: "rgba(22, 25, 26, .11)"
table-row-alternative-background-color: "rgba(22, 25, 26, .05)"
# Nav Menu
# Nav Menu background is listbox-background-color. A bit lighter than the primary background
paper-listbox-color: "var(--cs-theme-default-background-secondary)"
paper-listbox-background-color: "var(--cs-theme-default-background-secondary)"
paper-grey-50: "var(--primary-text-color)"
paper-grey-200: "var(--cs-theme-default-background-secondary)"
# Paper card
# Colors for the ha-cards
# Paper card background color is on primary-background-color
paper-card-header-color: "var(--light-primary-color)"
# Set to 02dp - 7% of primary-background-color
# Primary is set to cs-grey-darken-4, ie rgb(13, 13, 13).
# Assumption is that paper-card is ALWAYS on primary background.
# 2020.09.23
# The latest versions of hass us this color also for popup and overlay windows.
# This means you can't use rgba colors, as the background is visible
# Using a color picker with the rgba color, results in rgb(82,95,98).
#paper-card-background-color: 'rgba(255, 255, 255, 0.07)'
paper-card-background-color: "var(--cs-theme-default-background-primary)"
# Used to be fixed:
#paper-card-background-color: 'var(--cs-grey-darken-3)'
# primary dark in rgb is (90, 32, 0)
# primary light in rgb is (255, 204, 128)
# paper-card-background-color: 'rgba(255,204, 128, 0.08)'
# Used to be fixed:
# paper-dialog-background-color: 'rgba(255, 255, 255, 0.09)'
paper-dialog-background-color: "var(--cs-theme-default-background-primary)"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-icon-active-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--secondary-text-color)"
paper-item-selected_-_background-color: "var(--cs-theme-default-darken-20)"
paper-tabs-selection-bar-color: "var(--secondary-text-color)"
# Labels
label-badge-red: "var(--primary-color)"
label-badge-text-color: "var(--primary-text-color)"
# Find name of text on label. It is not the previous one label-badge-text-color... That is the value of the badge.
ha-label-badge-label-color: "var(--cs-grey-darken-40)"
label-badge-background-color: "var(--cs-grey-darken-40)"
# Switches
paper-toggle-button-checked-button-color: "var(--light-primary-color)"
paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
paper-toggle-button-checked-ink-color: "var(--light-primary-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# Sliders
paper-slider-knob-color: "var(--light-primary-color)"
paper-slider-knob-start-color: "var(--light-primary-color)"
paper-slider-pin-color: "var(--light-primary-color)"
paper-slider-active-color: "var(--light-primary-color)"
paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-slider-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
# Google colors
google-red-500: "var(--dark-primary-color)"
google-green-500: "var(--light-primary-color)"
#Changes to fix history/logbook menus
lumo-primary-text-color: "var(--light-primary-color)"
lumo-secondary-text-color: "var(--light-primary-color)"
lumo-primary-color: "var(--light-primary-color)"
#Calendar day numbers
lumo-body-text-color: "var(--light-primary-color)"
#Calendar/Date-Picker Background
lumo-base-color: "var(--cs-grey-darken-40)"
#Month/Year header
lumo-header-text-color: "var(--lumo-body-text-color)"
#DayOfWeek Header
lumo-tertiary-text-color: "var(--lumo-body-text-color)"
lumo-shade: "var(--cs-theme-default-darken-40)"
lumo-shade-90pct: "rgba(31, 41, 43, .9)"
lumo-shade-80pct: "rgba(31, 41, 43, .8)"
lumo-shade-70pct: "rgba(31, 41, 43, .7)"
lumo-shade-60pct: "rgba(31, 41, 43, .6)"
lumo-shade-50pct: "rgba(31, 41, 43, .5)"
lumo-shade-40pct: "rgba(31, 41, 43, .4)"
lumo-shade-30pct: "rgba(31, 41, 43, .3)"
lumo-shade-20pct: "rgba(31, 41, 43, .2)"
lumo-shade-10pct: "rgba(31, 41, 43, .1)"
lumo-shade-5pct: "rgba(31, 41, 43, .05)"
lumo-tint-5pct:
"var(--cs-theme-default-darken-40)"
# fix for device configuration screen
card-background-color: "var(--paper-card-background-color)"
# Fix for Person Device Chooser - thanks to vajonam!
material-background-color: "var(--paper-listbox-background-color)"
material-secondary-background-color: "#222222"
material-body-text-color: "#FFFFFF"
# simple-thermostat buttons
st-mode-background: "var(--primary-background-color)"
# fix white on white markdown code sections (eg. the addons infos)
markdown-code-background-color: "var(--secondary-background-color)"
So above is an example of a adjusted theme. I’m still working on this because it is not quite what it should be. For lazyness I kept the original names and only adjusted the colors but if you would do it correctly you should also change the names.
Love this card. Any chance you’d post the code?
Wow! Just discovered this card. Amazing! Unfortunately I do not dare use it to redesign my setup since the maintainer has been inactive on github for a year. It is really unfortunate!
Hi @AmoebeLabs Marco,
Do you already have a nice yaml file for this one ? Really enjoy the way you visualized it !
Kr,
Bart
Hi, I had fun getting this card to work. I don’t have all the sensors needed for the card, but it works fine. Here is the yaml.
- type: custom:swiss-army-knife-card
entities:
# ## Today actual power
# # 0..3
- entity: sensor.hydro_quebec_production_total
name: 'Total'
- entity: sensor.hydro_quebec_demande_de_puissance_reseau
name: 'L1'
- entity: sensor.hydro_quebec_production_autres
name: 'L2'
- entity: sensor.hydro_quebec_production_solaire
name: 'L3'
# ## Returned actual power
# # 4..7
- entity: sensor.hydro_quebec_production_total
name: 'Total'
- entity: sensor.hydro_quebec_demande_de_puissance_reseau
name: 'L1'
- entity: sensor.hydro_quebec_production_autres
name: 'L2'
- entity: sensor.hydro_quebec_production_solaire
name: 'L3'
# ## Today actual energy
# # 8..10
- entity: sensor.hydro_quebec_production_eolien
name: 'Today'
decimals: 2
- entity: sensor.hydro_quebec_production_autres
name: 'This Month'
decimals: 1
- entity: sensor.hydro_quebec_production_hydraulique
name: 'This Year'
decimals: 0
# ## Returned stuff
# # 11..13
- entity: sensor.hydro_quebec_production_eolien
name: 'Today'
decimals: 2
- entity: sensor.hydro_quebec_production_autres
name: 'This Month'
decimals: 1
- entity: sensor.hydro_quebec_production_hydraulique
name: 'This Year'
decimals: 0
layout:
template:
name: sak_layout_fce2_electricity4
HI,
Thanks a lot !!! Where can I find the template ? sak_layout_fce2_… ?
You did a good job there, really nice !
Kr,
Bart
The template is in the following directory.
/homeassistant/lovelace/sak_templates/templates/51-layouts/sak-fce-series-2
You also need to install the v2.5.1-dev-2 version of Swiss Army Knife card for this card to work. Copy all the directories that are in this github.
Hi, wow, what a project, thank you for that.
I am no coder, no designer, just a user, a very curious one, wih intentions to take his HA instance one step further.
I am in the process of installing SAKC, a tough one, though I am a stuborn, so, never give up.
there`re some questions I have related to the install process.
1- in the step 2, 2a, preciselly, the folder tree should be as follows, at least is what the manual says
lovelace/
.
├─ sak_templates/
│ ├─ definitions/
│ │ ├─ user-svg-definitions.yaml
│ │ └─ user-css-definitions.yaml
│ ├─ sak_templates.yaml
│ └─ templates/
│ └─<templates>.yaml
I have downloaded this zip file from the git, and there is no user-svg-definitions.yaml file under definitions folder.
2- so there is not any *.yaml under templates, if this is what is meant in the manual, but a bunch of folders
wich contain among others, *.yaml files, is that correct?
The Lovelace directory should contain this.
If the Lovelace directory does not exist you must create it in the /homeassistant directory.
/homeassistant/lovelace/
The examples in the installation documentation do not exist, they are just examples.
well, my instance has this folder tree, Have to say that I had to create lovelace folder
and by the way my log is full of warnings, this is the log
The directory seems OK. In my case I don’t have the decluttering_templates directory, because I don’t use these templates. I also don’t have the views directory, because I didn’t install the examples. If you think you don’t use them you can delete these directories.
For the warnings, I have some too, but not as many as you. They probably come from the decluttering_templates and views directories.
On the other hand, this project doesn’t seem to be maintained by its owner anymore. It’s up to you if you want to invest a lot of time to add these cards.
solved now, seems to work, but on the firs try I get a i.setConfig is not a function 
Several people have this error, unfortunately there does not seem to be a solution.
1 Like
don´t know if the owner is still maintaining this repo
I manager to install the SAK card. But i find very difficult to Code something.
What do you do to see changes on every Code modification?
Do you restart HAOS everytime?
Just managed to install It. Now trying to d
Get some result
If you create a new card, you can add the definition directly in the same page as this person did. This avoids restarts. When you are done, you can create a template with the layout section to lighten the code.
Exemple de jwaz73:
Cealing fan/light card
- type: custom:swiss-army-knife-card
aspectratio: 5/1
disable_card: false
entities:
- entity: light.sonoff_1001589996_1
name: "Ceiling Fan Light"
icon: mdi:ceiling-fan-light
- entity: fan.sonoff_1001589996
name: "Ceiling Fan"
icon: mdi:fan
- entity: fan.sonoff_1001589996
name: "Preset Mode"
icon: mdi:fan
attribute: preset_mode
layout:
toolsets:
- toolset: half-circle
position:
cx: 0
cy: 50
tools:
- type: circle
position:
cx: 50
cy: 50
radius: 48
styles:
circle:
fill: none
stroke: var(--theme-sys-color-secondary)
stroke-width: 3em
- type: icon
position:
cx: 72
cy: 50
align: center
icon_size: 40
icon: mdi:ceiling-fan
styles:
icon:
fill: var(--theme-sys-color-secondary)
opacity: 0.9
- toolset: card-label
position:
cx: 125
cy: 50
tools:
- type: text
position:
cx: 0
cy: 50
text: "Ceiling Fan"
styles:
text:
text-anchor: start
font-size: 20em
font-weight: 700
opacity: 1
overflow: hidden
- toolset: vertical-line-1
position:
cx: 200
cy: 50
tools:
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 75
styles:
line:
fill: var(--theme-sys-color-secondary)
opacity: 0.7
- toolset: light-state-button
position:
cx: 250
cy: 50
tools:
- type: circle
position:
cx: 50
cy: 50
radius: 35
entity_index: 0
animations:
- state: "on"
styles:
circle:
stroke: orange
opacity: 1
filter: url(#is-1)
- state: "off"
styles:
circle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
styles:
circle:
fill: none
stroke-width: 4em
transition: 'all 0.8s ease'
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 50
entity_index: 0
animations:
- state: "on"
styles:
icon:
color: orange
fill: orange
opacity: 1
- state: "off"
styles:
icon:
color: var(--theme-sys-color-secondary)
fill: var(--theme-sys-color-secondary)
opacity: 1
styles:
icon:
transition: 'all 0.8s ease'
- type: circle # transparent shape that covers the whole button to act as the link
position:
cx: 50
cy: 50
radius: 35
entity_index: 0
styles:
circle:
fill: rgba(0,0,0,0)
stroke: none
user_actions:
tap_action:
haptic: success
actions:
- action: call-service
service: light.toggle
- toolset: fan-state-button
position:
cx: 350
cy: 50
tools:
- type: circle
position:
cx: 50
cy: 50
radius: 35
entity_index: 1
animations:
- state: "on"
styles:
circle:
stroke: orange
opacity: 1
filter: url(#is-1)
- state: "off"
styles:
circle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
styles:
circle:
fill: none
stroke-width: 4em
transition: 'all 0.8s ease'
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 50
entity_index: 1
animations:
- state: "on"
styles:
icon:
color: orange
fill: orange
opacity: 1
- state: "off"
styles:
icon:
color: var(--theme-sys-color-secondary)
fill: var(--theme-sys-color-secondary)
opacity: 1
styles:
icon:
transition: 'all 0.8s ease'
- type: circle # transparent shape that covers the whole button to act as the link
position:
cx: 50
cy: 50
radius: 35
entity_index: 1
styles:
circle:
fill: rgba(0,0,0,0)
stroke: none
user_actions:
tap_action:
haptic: success
actions:
- action: call-service
service: fan.toggle
- toolset: preset-mode-buttons
position:
cx: 450
cy: 50
tools:
# Preset Mode: Low
- type: rectangle
position:
cx: 50
cy: 25
height: 20
width: 70
rx: 10
entity_index: 2
animations:
- state: "low"
styles:
rectangle:
stroke: orange
opacity: 1
- state: "medium"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "high"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "off" # this state value is never recorded.
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
styles:
rectangle:
fill: none
stroke-width: 2em
transition: 'all 0.8s ease'
- type: text
position:
cx: 50
cy: 25
text: "Low"
styles:
text:
text-anchor: middle
font-size: 12em
font-weight: 700
opacity: 1
- type: rectangle # transparent shape that covers the whole button to act as the link
position:
cx: 50
cy: 25
height: 20
width: 70
rx: 10
entity_index: 2
styles:
rectangle:
fill: rgba(0,0,0,0)
stroke: none
user_actions:
tap_action:
haptic: success
actions:
- action: call-service
service: fan.set_preset_mode
service_data:
preset_mode: "low"
# Preset Mode: Medium
- type: rectangle
position:
cx: 50
cy: 50
height: 20
width: 70
rx: 10
entity_index: 2
animations:
- state: "low"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "medium"
styles:
rectangle:
stroke: orange
opacity: 1
- state: "high"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "off"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
styles:
rectangle:
fill: none
stroke-width: 2em
transition: 'all 0.8s ease'
- type: text
position:
cx: 50
cy: 50
text: "Medium"
styles:
text:
text-anchor: middle
font-size: 12em
font-weight: 700
opacity: 1
- type: rectangle # transparent shape that covers the whole button to act as the link
position:
cx: 50
cy: 50
height: 20
width: 70
rx: 10
entity_index: 2
styles:
rectangle:
fill: rgba(0,0,0,0)
stroke: none
user_actions:
tap_action:
haptic: success
actions:
- action: call-service
service: fan.set_preset_mode
service_data:
preset_mode: "medium"
# Preset Mode: High
- type: rectangle
position:
cx: 50
cy: 75
height: 20
width: 70
rx: 10
entity_index: 2
animations:
- state: "low"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "medium"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
- state: "high"
styles:
rectangle:
stroke: orange
opacity: 1
- state: "off"
styles:
rectangle:
stroke: var(--theme-sys-color-secondary)
opacity: 1
styles:
rectangle:
fill: none
stroke-width: 2em
transition: 'all 0.8s ease'
- type: text
position:
cx: 50
cy: 75
text: "High"
styles:
text:
text-anchor: middle
font-size: 12em
font-weight: 700
opacity: 1
- type: rectangle # transparent shape that covers the whole button to act as the link
position:
cx: 50
cy: 75
height: 20
width: 70
rx: 10
entity_index: 2
styles:
rectangle:
fill: rgba(0,0,0,0)
stroke: none
user_actions:
tap_action:
haptic: success
actions:
- action: call-service
service: fan.set_preset_mode
service_data:
preset_mode: "high"
1 Like
I was happy because I made the swiss work, but suddenly the isetConfig error appeared again, so I quit. Unless the card is maintained