In the ZIP dev2 i have 2 folders for config: ha-config & ha-config-beta.
Wich one i copy?
If you don’t have a lovelace folder then create one. You do not use 2 ui-lovelace files. look if youy need any of the code provided in the zip file, if not just leave it. I guess the best for you is to use the ha-config folder and not the beta.
Hello all,
I am designing a new card for air quality and CO2 index. For the last card I was wondering if it is possible to add a second history on top of the first. The second should be a line. The bar represents the CO2 index where the line should represent the consumed fossil fuel. Did any one ever try this? On the amoebelabs site I can’t find any information about a second history chart on top of the first.
I tried it with two bars but then the card ‘disappears’ from the screen, so that does not work.
Hi,
I’ve a issue with the card :
i.setConfig is not a function
With the code :
type: custom:swiss-army-knife-card
entities:
- entity: sensor.dsmr_reading_electricity_currently_delivered
decimals: 3
name: Total
area: Tha Moon
- entity: sensor.dsmr_reading_electricity_currently_returned
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_delivered_l1
name: L1
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_returned_l1
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_delivered_l2
name: L2
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_returned_l2
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_delivered_l3
name: L3
decimals: 3
- entity: sensor.dsmr_reading_phase_currently_returned_l3
decimals: 3
Conf:
Core 2024.5.5 Supervisor 2024.05.1 Operating System 12.3 Frontend 20240501.1
File (configuration.yaml):
frontend: extra_module_url: - /hacsfiles/Bubble-Card/bubble-pop-up.js - /hacsfiles/lovelace-card-mod/card-mod.js - /hacsfiles/swiss-army-knife-card/swiss-army-knife-card.js
Hi guys.
First of all: Thank you for creating such an inventive and versatile card. It’s quite amazing to work with.
I have a question and I’m not sure if it has been asked and answered before. I tried searching for it but no results came up.
When I use the Light example card (Example 2) and change the entities to my own lights, the card does not respond to the lights being switched off. It remains in the ‘on’ state showing both the active icon color and the brightness percentage as if the light was still on.
EDIT: If I refresh the page after switching the light off the card does turn to its ‘off’ state color scheme and layout.
This happens to both mqtt lights and also lights controlled by Tuya or Sonoff integration.
Am I missing something here?
Thanks in advance guys!
I’m searching for a solution to this same error seen with the button-card, where it intermittently shows up maybe 50% of the time. I see it reported as bugs and forum posts SOLVED: My dashboard is haunted (intermitten strage error I can't figure out) and some of my button cards dont work but as of yet I have not yet seen a fix coming for it.
When I google for this error, it shows up on many home-assistant frontend integrations, with the same reported intermittent behavior. Does it point to some larger home assistant issue. Would any devs know what might be causing it?
Hi. Does anyone know if this is something new (the changes were made 2 months ago)
PS. Interesting links:
https://tweakers.net/gallery/94045/
https://gathering.tweakers.net/forum/list_messages/2099646/4
I noticed the changes too in the hope there would be some development. Or at least communication
Hello all. I was wondering if any one did get a light-card working where the icon has the same color as the light itself. p.e. the custom button card has this option: var(–button-card-light-color), does the SAK has something like this? I tried var(–paper-item-icon-active-color) but this does not do anything.
Hope Mars is still reading and find time to pick-up further development of this magnificent card.
Hello,
This is not really related to Swiss Army Knife cards, but I really like the NM - Gonsboro theme made by AmoebeLabs (Marco). 
I’m having a very difficult time finding instruction on how to change from light theme to dark on these examples. Can someone help?
Normally a theme has two versions, either a dark section and a light section. In this case you must select it in the settings.
But in some themes made by Marco there is only the light or dark part.
This is the case of the NM - Gonsboro theme that I use which contains only a light part.
Check in the description of the theme you are using, what it contains.
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