feat: add configurable text_shadow option

demo.html

@@ -613,6 +613,11 @@ <h2 class="panel-title" data-i18n="configuration">⚙️ Configuration</h2>
                     <input type="number" id="overlay-opacity-input" value="0.1" min="0" max="1" step="0.05">
                 </div>
 
+                <div class="control-group">
+                    <label class="control-label">Text Shadow (0-3)</label>
+                    <input type="number" id="text-shadow-strength" value="1" min="0" max="3" step="0.1">
+                </div>
+
                 <div class="control-group">
                     <label class="control-label" data-i18n="windSpeedUnit">Wind Speed Unit</label>
                     <select id="wind-speed-unit-select">
@@ -1099,7 +1104,8 @@ <h2 class="panel-title" data-i18n="configuration">⚙️ Configuration</h2>
                 showClock: document.getElementById('show-clock').checked,
                 clockPosition: document.getElementById('clock-position-select').value,
                 clockFormat: document.getElementById('clock-format-select').value,
-                language: document.getElementById('language-select').value
+                language: document.getElementById('language-select').value,
+                textShadow: parseFloat(document.getElementById('text-shadow-strength').value)
             };
 
             card = document.createElement('dynamic-weather-card');
@@ -1127,6 +1133,7 @@ <h2 class="panel-title" data-i18n="configuration">⚙️ Configuration</h2>
                 entity: 'weather.test',
                 height: config.height,
                 overlay_opacity: config.overlayOpacity,
+                text_shadow: config.textShadow,
                 wind_speed_unit: config.windSpeedUnit,
                 show_feels_like: config.showFeelsLike,
                 show_wind: config.showWind,

src/components/card.ts

@@ -175,6 +175,7 @@ export class AnimatedWeatherCard extends LitElement {
       clockPosition: config.clock_position || DEFAULT_CONFIG.clockPosition,
       clockFormat: config.clock_format || DEFAULT_CONFIG.clockFormat,
       overlayOpacity: config.overlay_opacity !== undefined ? config.overlay_opacity : DEFAULT_CONFIG.overlayOpacity,
+      textShadow: config.text_shadow !== undefined ? config.text_shadow : DEFAULT_CONFIG.textShadow,
       language: config.language || DEFAULT_CONFIG.language,
       windSpeedUnit: config.wind_speed_unit || DEFAULT_CONFIG.windSpeedUnit,
       sunriseEntity: config.sunrise_entity || null,
@@ -237,6 +238,19 @@ export class AnimatedWeatherCard extends LitElement {
       : DEFAULT_CONFIG.overlayOpacity;
     const overlayStyle = `--overlay-opacity: ${overlayOpacity};`;
 
+    const shadowStrength = this.config.textShadow ?? DEFAULT_CONFIG.textShadow;
+    const textShadowValue = shadowStrength === 0
+      ? 'none'
+      : [
+        `0 1px 2px rgba(0,0,0,${Math.min(1, 0.4 * shadowStrength).toFixed(2)})`,
+        `0 2px 6px rgba(0,0,0,${Math.min(1, 0.3 * shadowStrength).toFixed(2)})`,
+        `0 4px 12px rgba(0,0,0,${Math.min(1, 0.2 * shadowStrength).toFixed(2)})`
+      ].join(', ');
+    const iconFilterValue = shadowStrength === 0
+      ? 'none'
+      : `drop-shadow(0px 1px 3px rgba(0,0,0,${Math.min(1, 0.6 * shadowStrength).toFixed(2)}))`;
+    const shadowStyle = `--card-text-shadow: ${textShadowValue}; --card-icon-filter: ${iconFilterValue};`;
+
     const hourlyForecast = this.config.showHourlyForecast
       ? this.forecastService.getHourlyForecast(
         this.config.hourlyForecastHours ?? DEFAULT_CONFIG.hourlyForecastHours,
@@ -258,7 +272,7 @@ export class AnimatedWeatherCard extends LitElement {
         @pointerup=${(e: PointerEvent) => this.actionHandler.handlePointerUp(e)}
         @pointercancel=${(e: PointerEvent) => this.actionHandler.handlePointerUp(e)}
       >
-        <div class="${cardClasses}" style="min-height: ${minHeight}; ${bgStyle}; ${overlayStyle} cursor: pointer;">
+        <div class="${cardClasses}" style="min-height: ${minHeight}; ${bgStyle}; ${overlayStyle} ${shadowStyle} cursor: pointer;">
           <div class="canvas-container"></div>
           <div class="content">
             ${this.config.name && this.config.name.trim() !== '' ? html`

src/components/clock.ts

@@ -26,10 +26,7 @@ export class WeatherClock extends LitElement {
       line-height: 1;
       color: white;
       text-align: right;
-      text-shadow:
-        0 1px 2px rgba(0, 0, 0, 0.4),
-        0 2px 6px rgba(0, 0, 0, 0.3),
-        0 4px 12px rgba(0, 0, 0, 0.2);
+      text-shadow: var(--card-text-shadow);
       z-index: 2;
       pointer-events: none;
     }

src/components/details.ts

@@ -26,6 +26,7 @@ export class WeatherDetails extends LitElement {
       gap: 6px 12px;
       font-size: 13px;
       opacity: 0.9;
+      text-shadow: var(--card-text-shadow);
     }
 
     .info-item {
@@ -46,6 +47,7 @@ export class WeatherDetails extends LitElement {
       align-items: center;
       justify-content: center;
       color: white;
+      filter: var(--card-icon-filter);
     }
 
     .info-icon svg {

src/components/editor.ts

@@ -36,6 +36,7 @@ export class DynamicWeatherCardEditor extends LitElement {
       clock_position: DEFAULT_CONFIG.clockPosition,
       clock_format: DEFAULT_CONFIG.clockFormat,
       overlay_opacity: DEFAULT_CONFIG.overlayOpacity,
+      text_shadow: DEFAULT_CONFIG.textShadow,
       language: DEFAULT_CONFIG.language,
       wind_speed_unit: DEFAULT_CONFIG.windSpeedUnit,
       sunrise_entity: '',
@@ -97,6 +98,7 @@ export class DynamicWeatherCardEditor extends LitElement {
         }
       },
       { name: 'overlay_opacity', selector: { number: { min: 0, max: 1, step: 0.05, mode: 'box' } } },
+      { name: 'text_shadow', selector: { number: { min: 0, max: 3, step: 1, mode: 'box' } } },
       {
         name: 'language',
         selector: {

src/components/forecast-service.ts

@@ -30,7 +30,7 @@ export class ForecastService {
       return;
     }
 
-    this.unsubscribe();
+    await this.unsubscribe();
 
     try {
       this.hourlySubscription = hass.connection.subscribeMessage<ForecastEvent>(

src/components/forecast-styles.ts

@@ -24,6 +24,7 @@ export const forecastStyles = css`
     margin-bottom: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
+    text-shadow: var(--card-text-shadow);
   }
 
   .forecast-scroll {
@@ -68,10 +69,12 @@ export const forecastStyles = css`
     font-size: 12px;
     opacity: 0.7;
     font-weight: 400;
+    text-shadow: var(--card-text-shadow);
   }
 
   .forecast-icon {
     line-height: 1;
+    filter: var(--card-icon-filter);
   }
 
   .forecast-icon svg {
@@ -84,6 +87,7 @@ export const forecastStyles = css`
     font-size: 16px;
     font-weight: 500;
     opacity: 0.9;
+    text-shadow: var(--card-text-shadow);
   }
 
   .forecast-unavailable {

src/components/styles.ts

@@ -90,10 +90,7 @@ export const cardStyles = css`
     flex-direction: column;
     justify-content: space-between;
     color: white;
-    text-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.4),
-      0 2px 6px rgba(0, 0, 0, 0.3),
-      0 4px 12px rgba(0, 0, 0, 0.2);
+    text-shadow: var(--card-text-shadow);
   }
 
   .header {
@@ -291,10 +288,7 @@ export const cardStyles = css`
     line-height: 1;
     color: white;
     text-align: right;
-    text-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.4),
-      0 2px 6px rgba(0, 0, 0, 0.3),
-      0 4px 12px rgba(0, 0, 0, 0.2);
+    text-shadow: var(--card-text-shadow);
     z-index: 2;
     pointer-events: none;
   }

src/constants.ts

@@ -39,6 +39,7 @@ export const DEFAULT_CONFIG: Required<Omit<WeatherCardConfig, 'entity' | 'type'>
   clockPosition: 'top',
   clockFormat: '24h',
   overlayOpacity: 0.1,
+  textShadow: 1,
   language: 'auto',
   height: null,
   windSpeedUnit: 'ms'

src/internationalization/locales/de/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12-Stunden (AM/PM)",
     "clock_format_24h": "24-Stunden",
     "overlay_opacity": "Überlagerungs-Transparenz",
+    "text_shadow": "Textschatten-Stärke",
     "language": "Sprache",
     "language_auto": "Automatisch",
     "language_en": "Englisch",

src/internationalization/locales/en/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12-hour (AM/PM)",
     "clock_format_24h": "24-hour",
     "overlay_opacity": "Overlay Opacity",
+    "text_shadow": "Text Shadow Strength",
     "language": "Language",
     "language_auto": "Auto",
     "language_en": "English",

src/internationalization/locales/es/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12 horas (AM/PM)",
     "clock_format_24h": "24 horas",
     "overlay_opacity": "Opacidad de superposición",
+    "text_shadow": "Intensidad de sombra de texto",
     "language": "Idioma",
     "language_auto": "Automático",
     "language_en": "Inglés",

src/internationalization/locales/fr/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12 heures (AM/PM)",
     "clock_format_24h": "24 heures",
     "overlay_opacity": "Opacité du voile",
+    "text_shadow": "Intensité de l'ombre du texte",
     "language": "Langue",
     "language_auto": "Auto",
     "language_en": "Anglais",

src/internationalization/locales/hu/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12 órás (DE/DU)",
     "clock_format_24h": "24 órás",
     "overlay_opacity": "Fedőréteg átlátszóság",
+    "text_shadow": "Szövegárnyék erőssége",
     "language": "Nyelv",
     "language_auto": "Automatikus",
     "language_en": "Angol",

src/internationalization/locales/it/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12 ore (AM/PM)",
     "clock_format_24h": "24 ore",
     "overlay_opacity": "Opacità sovrapposizione",
+    "text_shadow": "Intensità ombra testo",
     "language": "Lingua",
     "language_auto": "Auto",
     "language_en": "Inglese",

src/internationalization/locales/nl/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12-uurs (AM/PM)",
     "clock_format_24h": "24-uurs",
     "overlay_opacity": "Overlay-doorzichtigheid",
+    "text_shadow": "Tekstschaduw sterkte",
     "language": "Taal",
     "language_auto": "Automatisch",
     "language_en": "Engels",

src/internationalization/locales/ru/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12-часовой (AM/PM)",
     "clock_format_24h": "24-часовой",
     "overlay_opacity": "Прозрачность подложки",
+    "text_shadow": "Интенсивность тени текста",
     "language": "Язык",
     "language_auto": "Авто",
     "language_en": "Английский",

src/internationalization/locales/sk/translation.json

@@ -56,6 +56,7 @@
     "clock_format_12h": "12-hodinový (AM/PM)",
     "clock_format_24h": "24-hodinový",
     "overlay_opacity": "Priehľadnosť vrstvy",
+    "text_shadow": "Intenzita tieňa textu",
     "language": "Jazyk",
     "language_auto": "Automaticky",
     "language_en": "Angličtina",

src/types.ts

@@ -125,6 +125,7 @@ export interface WeatherCardConfig {
   clockPosition?: 'top' | 'details';
   clockFormat?: '12h' | '24h';
   overlayOpacity?: number;
+  textShadow?: number;
   language?: 'auto' | 'en' | 'ru' | 'de' | 'nl' | 'fr' | 'es' | 'it' | 'sk' | 'hu';
   height?: number | null;
   windSpeedUnit?: 'ms' | 'kmh';
@@ -217,6 +218,7 @@ export interface ConfigInput {
   clock_position?: 'top' | 'details';
   clock_format?: '12h' | '24h';
   overlay_opacity?: number;
+  text_shadow?: number;
   language?: 'auto' | 'en' | 'ru' | 'de' | 'nl' | 'fr' | 'es' | 'it' | 'sk' | 'hu';
   wind_speed_unit?: 'ms' | 'kmh';
   sunrise_entity?: string;