Skip to content

feat: support styling via home assistant themes #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
troinine merged 4 commits into from
Dec 25, 2025
Merged

feat: support styling via home assistant themes #36

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
383a57b
feat: support for styling most aspects via hass themes
troinine Dec 25, 2025
0f4ff73
docs: updated README.md on styling
troinine Dec 25, 2025
24b9865
test: added tests to verify theme variables are referenced correctly
troinine Dec 25, 2025
e874ec7
fix: review fix
troinine Dec 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,77 @@ icons_path: /local/img/weather-icons

This will load icons from `/local/img/weather-icons/sunny.svg`, `/local/img/weather-icons/rainy.svg`, etc.

## Styling

The card can be customized using Home Assistant theme variables. Most colors, sizes, and visual elements can be overridden by defining CSS variables in your theme configuration.

### Theme Variables

Add these variables to your Home Assistant theme to customize the card's appearance:

| Variable Name | Description |
| :------------------------------------------------------ | :------------------------------------------ |
| `weather-forecast-card-wind-low-color` | Wind indicator color for low wind speeds |
| `weather-forecast-card-wind-medium-color` | Wind indicator color for medium wind speeds |
| `weather-forecast-card-wind-high-color` | Wind indicator color for high wind speeds |
| `weather-forecast-card-chart-temp-low-line-color` | Chart line color for low temperature |
| `weather-forecast-card-chart-temp-high-line-color` | Chart line color for high temperature |
| `weather-forecast-card-chart-label-color` | Default color for chart labels |
| `weather-forecast-card-chart-temp-high-label-color` | Chart label color for high temperature |
| `weather-forecast-card-chart-temp-low-label-color` | Chart label color for low temperature |
| `weather-forecast-card-chart-precipitation-label-color` | Chart label color for precipitation |
| `weather-forecast-card-chart-grid-color` | Chart grid line color |
| `weather-forecast-card-precipitation-bar-color` | Precipitation bar color |
| `weather-forecast-card-sunrise-color` | Sunrise time indicator color |
| `weather-forecast-card-sunset-color` | Sunset time indicator color |
| `weather-forecast-card-day-indicator-color` | Background color for day indicator badge |
| `weather-forecast-card-day-indicator-text-color` | Text color for day indicator badge |
| `weather-forecast-card-current-conditions-icon-size` | Size of the current weather condition icon |
| `weather-forecast-card-forecast-conditions-icon-size` | Size of forecast weather condition icons |

### Weather Effects Variables

Customize the appearance of animated weather effects when `show_condition_effects` is enabled:

| Variable Name | Description |
| :----------------------------------------------------- | :----------------------------------------------------- |
| `weather-forecast-card-effects-sun-size` | Size of the animated sun |
| `weather-forecast-card-effects-sun-spin-duration` | Duration of the sun ray rotation animation |
| `weather-forecast-card-effects-sun-color` | Color of the sun |
| `weather-forecast-card-effects-sun-ray-color` | Color of the sun rays |
| `weather-forecast-card-effects-moon-size` | Size of the moon |
| `weather-forecast-card-effects-moon-color` | Color of the moon |
| `weather-forecast-card-effects-star-color` | Color of the stars in night sky |
| `weather-forecast-card-effects-snow-color` | Color of snowflakes |
| `weather-forecast-card-effects-rain-color` | Color of rain drops |
| `weather-forecast-card-effects-drop-height` | Height of individual rain drops |
| `weather-forecast-card-effects-sky-visibility` | Visibility of sky gradient background (visible/hidden) |
| `weather-forecast-card-effects-clear-sky-color` | Day clear sky gradient primary color |
| `weather-forecast-card-effects-clear-sky-accent` | Day clear sky gradient accent color |
| `weather-forecast-card-effects-clear-sky-horizon` | Day clear sky gradient horizon color |
| `weather-forecast-card-effects-clear-night-sky-color` | Night clear sky gradient primary color |
| `weather-forecast-card-effects-clear-night-sky-accent` | Night clear sky gradient accent color |
| `weather-forecast-card-effects-clear-night-horizon` | Night clear sky gradient horizon color |

> [!NOTE]
> Weather effects variables support both light and dark themes. Colors automatically adjust based on your theme's dark mode setting, with separate default values optimized for each mode.

### Example Theme Configuration

Add any of the variables to your themes to customize the card:

```yaml
my-custom-theme:
# Weather Forecast Card customization
weather-forecast-card-chart-temp-high-line-color: "#ff5722"

# Weather Forecast Card effects customization
weather-forecast-card-effects-sun-color: "#fbbf24"
```

> [!NOTE]
> These variables are applied through Home Assistant's theme system. Make sure to reload your theme after making changes.

## License

This repo is [MIT Licensed](LICENSE)
79 changes: 50 additions & 29 deletions src/components/animation/wfc-animation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
:host {
--sun-size: var(--wfc-effects-sun-size, 140px);
--sun-spin-duration: var(--wfc-effects-sun-spin-duration, 100s);
--moon-size: var(--wfc-effects-moon-size, 80px);
--sky-visibility: var(--wfc-effects-sky-visibility, visible);
--sun-size: var(--weather-forecast-card-effects-sun-size, 140px);
--sun-spin-duration: var(
--weather-forecast-card-effects-sun-spin-duration,
100s
);
--moon-size: var(--weather-forecast-card-effects-moon-size, 80px);
--sky-visibility: var(
--weather-forecast-card-effects-sky-visibility,
visible
);
--drop-color-start: color-mix(in srgb, var(--rain-color), transparent 100%);
--drop-color-end: color-mix(in srgb, var(--rain-color), transparent 40%);
--drop-height: var(--wfc-effects-drop-height, 20px);
--drop-height: var(--weather-forecast-card-effects-drop-height, 20px);
--drop-start-pos-diff-y: 50px;
--snow-glow-color: var(--snow-color);
--container-height: 0px; /* Set dynamically in TS */
Expand All @@ -24,68 +30,83 @@
}

:host(.light) {
--sun-color: var(--wfc-effects-sun-color, #facc15);
--sun-ray-color: var(--wfc-effects-sun-ray-color, rgba(253, 224, 71, 0.4));
--sun-color: var(--weather-forecast-card-effects-sun-color, #facc15);
--sun-ray-color: var(
--weather-forecast-card-effects-sun-ray-color,
rgba(253, 224, 71, 0.4)
);
--sun-ray-opacity: 0.25;
--moon-color: var(--wfc-effects-moon-color, rgba(220, 220, 230, 1));
--star-color: var(--wfc-effects-star-color, #ffffff);
--snow-color: var(--wfc-effects-snow-color, #cbd5e1);
--moon-color: var(
--weather-forecast-card-effects-moon-color,
rgba(220, 220, 230, 1)
);
--star-color: var(--weather-forecast-card-effects-star-color, #ffffff);
--snow-color: var(--weather-forecast-card-effects-snow-color, #cbd5e1);
--glow-intensity: 0.9;
--rain-color: var(--wfc-effects-rain-color, #2563eb);
--rain-color: var(--weather-forecast-card-effects-rain-color, #2563eb);
--clear-sky-color: var(
--wfc-effects-clear-sky-color,
--weather-forecast-card-effects-clear-sky-color,
rgba(30, 130, 230, 0.6)
);
--clear-sky-accent: var(
--wfc-effects-clear-sky-accent,
--weather-forecast-card-effects-clear-sky-accent,
rgba(100, 180, 240, 0.45)
);
--clear-sky-horizon: var(
--wfc-effects-clear-sky-horizon,
--weather-forecast-card-effects-clear-sky-horizon,
rgba(210, 235, 255, 0.3)
);
--clear-night-sky-color: var(
--wfc-effects-clear-night-sky-color,
--weather-forecast-card-effects-clear-night-sky-color,
rgba(49, 46, 129, 0.7)
);
--clear-night-sky-accent: var(
--wfc-effects-clear-night-sky-accent,
--weather-forecast-card-effects-clear-night-sky-accent,
rgba(88, 28, 135, 0.55)
);
--clear-night-horizon: var(
--wfc-effects-clear-night-horizon,
--weather-forecast-card-effects-clear-night-horizon,
rgba(236, 72, 153, 0.4)
);
}

:host(.dark) {
--sun-color: var(--wfc-effects-sun-color, #fbbf24);
--sun-ray-color: var(--wfc-effects-sun-ray-color, rgba(251, 191, 36, 0.5));
--sun-color: var(--weather-forecast-card-effects-sun-color, #fbbf24);
--sun-ray-color: var(
--weather-forecast-card-effects-sun-ray-color,
rgba(251, 191, 36, 0.5)
);
--sun-ray-opacity: 0.15;
--moon-color: var(--wfc-effects-moon-color, rgba(220, 220, 230, 1));
--star-color: var(--wfc-effects-star-color, #ffffff);
--snow-color: var(--wfc-effects-snow-color, #ffffff);
--moon-color: var(
--weather-forecast-card-effects-moon-color,
rgba(220, 220, 230, 1)
);
--star-color: var(--weather-forecast-card-effects-star-color, #ffffff);
--snow-color: var(--weather-forecast-card-effects-snow-color, #ffffff);
--glow-intensity: 0.6;
--rain-color: var(--wfc-effects-rain-color, #6cb4ee);
--clear-sky-color: var(--wfc-effects-clear-sky-color, rgba(3, 105, 161, 0.8));
--rain-color: var(--weather-forecast-card-effects-rain-color, #6cb4ee);
--clear-sky-color: var(
--weather-forecast-card-effects-clear-sky-color,
rgba(3, 105, 161, 0.8)
);
--clear-sky-accent: var(
--wfc-effects-clear-sky-accent,
--weather-forecast-card-effects-clear-sky-accent,
rgba(7, 89, 133, 0.6)
);
--clear-sky-horizon: var(
--wfc-effects-clear-sky-horizon,
--weather-forecast-card-effects-clear-sky-horizon,
rgba(12, 74, 110, 0.4)
);
--clear-night-sky-color: var(
--wfc-effects-clear-night-sky-color,
--weather-forecast-card-effects-clear-night-sky-color,
rgba(10, 15, 40, 0.85)
);
--clear-night-sky-accent: var(
--wfc-effects-clear-night-sky-accent,
--weather-forecast-card-effects-clear-night-sky-accent,
rgba(20, 30, 80, 0.6)
);
--clear-night-horizon: var(
--wfc-effects-clear-night-horizon,
--weather-forecast-card-effects-clear-night-horizon,
rgba(40, 25, 100, 0.4)
);
}
Expand Down
86 changes: 63 additions & 23 deletions src/weather-forecast-card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,78 @@
:host {
--wfc-wind-low: var(--success-color, #43a047);
--wfc-wind-medium: var(--warning-color, #ffa600);
--wfc-wind-high: var(--error-color, #db4437);
--wfc-chart-temp-low-line-color: var(--secondary-color, #ffa600);
--wfc-chart-temp-high-line-color: var(--primary-color, #009ac7);
--wfc-chart-label-color: var(--primary-text-color, #000);
--wfc-chart-temp-high-label-color: var(--wfc-chart-label-color);
--wfc-chart-temp-low-label-color: var(--secondary-text-color, #9b9b9b);
--wfc-chart-precipitation-label-color: var(--wfc-chart-label-color);
--wfc-chart-grid-color: color-mix(
in srgb,
var(--primary-text-color, #000) 15%,
transparent
--wfc-wind-low: var(
--weather-forecast-card-wind-low-color,
var(--success-color, #43a047)
);
--wfc-precipitation-bar-color: color-mix(
in srgb,
var(--blue-color, #2196f3) 40%,
transparent
--wfc-wind-medium: var(
--weather-forecast-card-wind-medium-color,
var(--warning-color, #ffa600)
);
--wfc-wind-high: var(
--weather-forecast-card-wind-high-color,
var(--error-color, #db4437)
);
--wfc-chart-temp-low-line-color: var(
--weather-forecast-card-chart-temp-low-line-color,
var(--secondary-color, #ffa600)
);
--wfc-chart-temp-high-line-color: var(
--weather-forecast-card-chart-temp-high-line-color,
var(--primary-color, #009ac7)
);
--wfc-chart-label-color: var(
--weather-forecast-card-chart-label-color,
var(--primary-text-color, #000)
);
--wfc-chart-temp-high-label-color: var(
--weather-forecast-card-chart-temp-high-label-color,
var(--wfc-chart-label-color)
);
--wfc-chart-temp-low-label-color: var(
--weather-forecast-card-chart-temp-low-label-color,
var(--secondary-text-color, #9b9b9b)
);
--wfc-chart-precipitation-label-color: var(
--weather-forecast-card-chart-precipitation-label-color,
var(--wfc-chart-label-color)
);
--wfc-chart-grid-color: var(
--weather-forecast-card-chart-grid-color,
color-mix(in srgb, var(--primary-text-color, #000) 15%, transparent)
);
--wfc-precipitation-bar-color: var(
--weather-forecast-card-precipitation-bar-color,
color-mix(in srgb, var(--blue-color, #2196f3) 40%, transparent)
);
--wfc-sunrise-color: var(
--weather-forecast-card-sunrise-color,
var(--orange-color, #ff9800)
);
--wfc-sunset-color: var(
--weather-forecast-card-sunset-color,
var(--purple-color, #926bc7)
);
--wfc-day-indicator-color: var(
--weather-forecast-card-day-indicator-color,
#056bb8
);
--wfc-day-indicator-text-color: var(
--weather-forecast-card-day-indicator-text-color,
#ffffff
);
--wfc-sunrise-color: var(--orange-color, #ff9800);
--wfc-sunset-color: var(--purple-color, #926bc7);
--wfc-day-indicator-color: #056bb8;
--wfc-day-indicator-text-color: #ffffff;
--forecast-item-width: 50px; /* Initial minimum value. Updated in JS */
--forecast-item-gap: 0px; /* Initial minimum value. Updated in JS */
--forecast-precipitation-bar-max-height: calc(
var(--ha-font-size-s, 12px) + 2px
);
--fade-width: 15px;
--forecast-conditions-icon-size: var(
--wfc-forecast-conditions-icon-size,
--weather-forecast-card-forecast-conditions-icon-size,
28px
);
--current-conditions-icon-size: var(--wfc-current-conditions-icon-size, 64px);
--current-conditions-icon-size: var(
--weather-forecast-card-current-conditions-icon-size,
64px
);
--indicator-width: 20px;
}

Expand Down
Loading