Improve custom CSS support (#227)

MrBartusek · Oct 16, 2023 · 7439fe6 · 7439fe6
1 parent 30f8e49
commit 7439fe6
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -132,6 +132,35 @@ Expect Meteoalarm this card supports many other integrations:
 [weatheralerts]: https://github.com/custom-components/weatheralerts
 [weatheralerts-direct]: https://www.weather.gov
 
+## Customizing the Card's Appearance
+
+You can customize card appearance using provided CSS variables and [card-mod](https://github.com/thomasloven/lovelace-card-mod). For example:
+
+```yaml
+type: custom:meteoalarm-card
+entities:
+  entity: binary_sensor.meteoalarm
+integration: meteoalarm
+style: |
+  ha-card {
+    --inactive-background-color: blue;
+  }
+```
+
+Which produces result:
+
+![result](https://i.imgur.com/D0hZ86G.png)
+
+
+Below are the available CSS variables that you can modify:
+
+- `--text-color`: The text color of inactive card.
+- `--text-color-active`: The text color for card with active warnings.
+- `--red-level-color`: The background color for red level alerts.
+- `--orange-level-background-color`: The background color for orange level alerts.
+- `--yellow-level-background-color`: The background color for yellow-level alerts.
+- `--inactive-background-color`: This variable defines the background color when there are no warnings active.
+
 ## Contributing
 
 Want to contribute to the project?

diff --git a/src/data.ts b/src/data.ts
@@ -20,7 +20,7 @@ export class MeteoalarmLevelInfo {
 	constructor(
 		public type: MeteoalarmLevelType,
 		public fullName: string,
-		public color: string,
+		public cssClass: string,
 	) {}
 
 	get translationKey(): string {
@@ -79,10 +79,10 @@ export class MeteoalarmData {
 
 	static get levels(): MeteoalarmLevelInfo[] {
 		return [
-			new MeteoalarmLevelInfo(MeteoalarmLevelType.Red, 'Red', '#db4437'),
-			new MeteoalarmLevelInfo(MeteoalarmLevelType.Orange, 'Orange', '#EE5A24'),
-			new MeteoalarmLevelInfo(MeteoalarmLevelType.Yellow, 'Yellow', '#ff9800'),
-			new MeteoalarmLevelInfo(MeteoalarmLevelType.None, 'None', 'inherit'),
+			new MeteoalarmLevelInfo(MeteoalarmLevelType.Red, 'Red', 'event-red'),
+			new MeteoalarmLevelInfo(MeteoalarmLevelType.Orange, 'Orange', 'event-orange'),
+			new MeteoalarmLevelInfo(MeteoalarmLevelType.Yellow, 'Yellow', 'event-yellow'),
+			new MeteoalarmLevelInfo(MeteoalarmLevelType.None, 'None', 'event-none'),
 		];
 	}
 

diff --git a/src/events-praser.ts b/src/events-praser.ts
@@ -64,7 +64,7 @@ class EventsParser {
 				isActive: true,
 				entity: alert._entity!,
 				icon: event.icon,
-				color: level.color,
+				cssClass: level.cssClass,
 				headlines: headlines,
 				caption: caption,
 				captionIcon: captionIcon,

diff --git a/src/meteoalarm-card.ts b/src/meteoalarm-card.ts
@@ -322,10 +322,7 @@ export class MeteoalarmCard extends LitElement {
 								${events.map(
 									(event) => html`
 										<div
-											class="swiper-slide"
-											style="background-color: ${event.color}; color: ${event.isActive
-												? '#fff'
-												: 'inherit'}"
+											class="swiper-slide ${event.cssClass}"
 											entity_id=${ifDefined(event.entity?.entity_id)}
 										>
 											<div class="content">

diff --git a/src/predefined-cards.ts b/src/predefined-cards.ts
@@ -9,7 +9,7 @@ export class PredefinedCards {
 			isActive: true,
 			entity: undefined,
 			icon: 'cloud-question',
-			color: MeteoalarmData.getLevel(MeteoalarmLevelType.None).color,
+			cssClass: MeteoalarmData.getLevel(MeteoalarmLevelType.None).cssClass,
 			headlines: [localize('common.unavailable.long'), localize('common.unavailable.short')],
 		};
 	}
@@ -19,7 +19,7 @@ export class PredefinedCards {
 			isActive: false,
 			entity: entity,
 			icon: 'shield-outline',
-			color: MeteoalarmData.getLevel(MeteoalarmLevelType.None).color,
+			cssClass: MeteoalarmData.getLevel(MeteoalarmLevelType.None).cssClass,
 			headlines: [localize('events.no_warnings')],
 		};
 	}

diff --git a/src/styles.ts b/src/styles.ts
@@ -5,6 +5,14 @@ export default css`
 		display: flex;
 		flex: 1;
 		flex-direction: column;
+
+		--text-color: inherit;
+		--text-color-active: white;
+
+		--red-level-color: var(---error-color, #db4437);
+		--orange-level-background-color: #ee5a24;
+		--yellow-level-background-color: var(--warning-color, #ffa600);
+		--inactive-background-color: inherit;
 	}
 
 	ha-card {
@@ -21,6 +29,7 @@ export default css`
 		);
 		overflow: hidden;
 		transition: all 0.3s ease-out 0s;
+		color: var(--text-color);
 	}
 
 	a {
@@ -81,6 +90,28 @@ export default css`
 		display: none;
 	}
 
+	.event-red {
+		background-color: var(--red-level-color);
+	}
+
+	.event-orange {
+		background-color: var(--red-level-color);
+	}
+
+	.event-yellow {
+		background-color: var(--yellow-level-background-color);
+	}
+
+	.event-red,
+	.event-orange,
+	.event-yellow {
+		color: var(--text-color-active);
+	}
+
+	.event-none {
+		background-color: var(--inactive-background-color);
+	}
+
 	.swiper {
 		--swiper-pagination-bullet-size: 5px;
 	}

diff --git a/src/types.ts b/src/types.ts
@@ -97,7 +97,7 @@ export interface MeteoalarmAlertParsed {
 	 */
 	isActive: boolean;
 	icon: string;
-	color: string;
+	cssClass: string;
 	headlines: string[];
 	captionIcon?: string;
 	caption?: string;