Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasloven/lovelace-card-mod
🔹 Add CSS styles to (almost) any lovelace card
https://github.com/thomasloven/lovelace-card-mod
Last synced: 30 days ago
JSON representation
🔹 Add CSS styles to (almost) any lovelace card
- Host: GitHub
- URL: https://github.com/thomasloven/lovelace-card-mod
- Owner: thomasloven
- License: mit
- Created: 2019-06-08T19:34:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T20:11:22.000Z (about 1 month ago)
- Last Synced: 2024-09-26T22:40:14.815Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 787 KB
- Stars: 1,126
- Watchers: 28
- Forks: 168
- Open Issues: 73
-
Metadata Files:
- Readme: README-developers.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-home-assistant - Card Modder - Style your Lovelace cards. (Dashboards / Custom Cards)
README
You can apply card mod styling to things you made by:
```js
customElements.whenDefined("card-mod").then((cardMod) => {
cardMod.applyToElement(
el, // The root element
"type", // Determines which theme variables should apply (card-mod-, card-mod--yaml)
config, // The card mod configuration. See below
variables, // Any variables passed on to jinja templates, preferably { config: }. Default: {}
shadow // whether the styles should be based in the #shadow-root of el. Default: true
cls // An extra class to apply to the element. Default: undefined
)
}
```
The card mod configuration is an objecty with the following optional properties:
- `style` - card mod style definition (string or object)
- `class` - string or array of classes to apply to the element
- `debug` - boolean to enable debugging mode for the element (default `false`)
## Example
```js
class CardModdingCard extends HTMLElement {
setConfig(config) {
this._config = config;
}
connectedCallback() {
const div = document.createElement("div");
this.appendChild(div);
div.innerHTML = `
This is a custom card
It doesn't have a ha-card element, but it will still use any styles for cards from the card-mod configuration or theme.
`;
customElements
.whenDefined("card-mod")
.then((cardMod) =>
cardMod.applyToElement(
div,
"card",
this._config.card_mod,
{ config: this._config },
false,
"type-custom-card-modding-card"
)
);
}
}
customElements.define("card-modding-card", CardModdingCard);
```
With the following dashboard configuration:
```yaml
type: custom:card-modding-card
card_mod:
style: |
h1 {color: blue;}
```
And this theme:
```yaml
test:
card-mod-theme: test
card-mod-card-yaml: |
.: |
b {
color: red;
}
```
We get this:
