diff --git a/configuration.yaml b/configuration.yaml index 586030f..eaedbe9 100644 --- a/configuration.yaml +++ b/configuration.yaml @@ -15,7 +15,7 @@ homeassistant: trusted_networks: - 192.168.2.0/24 trusted_users: - - 192.168.2.170: lenovo + 192.168.2.170: d60f15dc903c4db087bfe493d3fba434 allow_bypass_login: true - type: homeassistant #d60f15dc903c4db087bfe493d3fba434 diff --git a/entities/templates/ttgo_display.yaml b/depr_packages/ttgo_display.yaml similarity index 100% rename from entities/templates/ttgo_display.yaml rename to depr_packages/ttgo_display.yaml diff --git a/entities/templates/eink_display.yaml b/entities/templates/eink_display.yaml index da6b68c..09316e7 100755 --- a/entities/templates/eink_display.yaml +++ b/entities/templates/eink_display.yaml @@ -36,8 +36,8 @@ sensor: weather_condition_0: > {% set cond0 = daily["weather.forecast_home"].forecast[0].condition %} - {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} - {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} + # {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} + # {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} {% set cond0_time = as_timestamp(daily["weather.forecast_home"].forecast[0].datetime) %} {% if cond0_time > next_setting and cond0_time < next_rising %} {% if cond0 == 'sunny' %} night {% elif cond0 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond0 }} {% endif %} @@ -46,13 +46,12 @@ sensor: {% endif %} weather_temperature_0: > {{ daily["weather.forecast_home"].forecast[0].temperature | round }} - #{{ daily["weather.forecast_home"].forecast[0].temperature | round }} weather_timestamp_0: > {{ as_timestamp(daily["weather.forecast_home"].forecast[0].datetime) | timestamp_custom('%a') }} weather_condition_1: > {% set cond1 = daily["weather.forecast_home"].forecast[1].condition %} - {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} - {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} + # {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} + # {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} {% set cond1_time = as_timestamp(daily["weather.forecast_home"].forecast[1].datetime) %} {% if cond1_time > next_setting and cond1_time < next_rising %} {% if cond1 == 'sunny' %} night {% elif cond1 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond1 }} {% endif %} @@ -65,8 +64,8 @@ sensor: {{ as_timestamp(daily["weather.forecast_home"].forecast[1].datetime) | timestamp_custom('%a') }} weather_condition_2: > {% set cond2 = daily["weather.forecast_home"].forecast[2].condition %} - {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} - {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} + # {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} + # {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} {% set cond2_time = as_timestamp(daily["weather.forecast_home"].forecast[2].datetime) %} {% if cond2_time > next_setting and cond2_time < next_rising %} {% if cond2 == 'sunny' %} night {% elif cond2 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond2 }} {% endif %} @@ -79,8 +78,8 @@ sensor: {{ as_timestamp(daily["weather.forecast_home"].forecast[2].datetime) | timestamp_custom('%a') }} weather_condition_3: > {% set cond3 = daily["weather.forecast_home"].forecast[3].condition %} - {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} - {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} + # {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %} + # {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %} {% set cond3_time = as_timestamp(daily["weather.forecast_home"].forecast[3].datetime) %} {% if cond3_time > next_setting and cond3_time < next_rising %} {% if cond3 == 'sunny' %} night {% elif cond3 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond3 }} {% endif %} @@ -111,8 +110,8 @@ sensor: {{ state_attr('Sun.sun', 'next_rising') }} sun_next_setting: > {{ state_attr('Sun.sun', 'next_setting') }} - moon_phase_icon: > - {{ state_attr('sensor.moon_phase', 'icon') }} + # moon_phase_icon: > + # {{ state_attr('sensor.moon_phase', 'icon') }} media_playing_status: > {{ states('media_player.keuken') }} diff --git a/esphome/display-keuken.yaml b/esphome/display-keuken.yaml index 5abd130..340b87a 100644 --- a/esphome/display-keuken.yaml +++ b/esphome/display-keuken.yaml @@ -124,15 +124,6 @@ font: id: font_month size: 40 - # - file: fonts/materialdesignicons-webfont.ttf - # id: font_wifi - # size: 20 - # glyphs: - # - "\U000F091F" - # - "\U000F0922" - # - "\U000F0925" - # - "\U000F0928" - # - "\U000F092B" # Include Material Design Icons font # Thanks to https://community.home-assistant.io/t/display-materialdesign-icons-on-esphome-attached-to-screen/199790/16 @@ -173,18 +164,6 @@ font: - "\U000f010b" # mdi-car - "\U000f0819" # trash - # - file: 'fonts/materialdesignicons-webfont.ttf' - # id: font_mdi_medlarge - # size: 60 - # glyphs: - # - "\U000f0f64" # new moon - # - "\U000f0f67" # mdi-moon-waxing-crescent - # - "\U000F0F61" # mdi-moon-first-quarter - # - "\U000F0F68" # mdi-moon-waxing-gibbous - # - "\U000F0F62" # mdi-moon-full - # - "\U000F0F66" # mdi-moon-waning-gibbous - # - "\U000F0F63" # mdi-moon-last-quarter - # - "\U000F0F65" # mdi-moon-waning-crescent - file: 'fonts/materialdesignicons-webfont.ttf' id: font_mdi_medium size: 36 @@ -203,7 +182,7 @@ sensor: id: weather_temperature on_value: then: - - lambda: 'id(data_updated) = true;' + - lambda: 'id(data_updated) = true;' - !include { file: sensors/homeassistant.yaml, vars: { id: weather_temperature_0, entity_id: sensor.e_ink_display_data }} - !include { file: sensors/homeassistant.yaml, vars: { id: weather_temperature_1, entity_id: sensor.e_ink_display_data }} @@ -246,9 +225,9 @@ sensor: unit_of_measurement: "refreshes" text_sensor: - - platform: homeassistant - entity_id: weather.forecast_home - id: weather_state + # - platform: homeassistant + # entity_id: weather.forecast_home + # id: weather_state - !include { file: sensors/homeassistant.yaml, vars: { id: weather_condition_now, entity_id: sensor.e_ink_display_data }} - !include { file: sensors/homeassistant.yaml, vars: { id: weather_condition_0, entity_id: sensor.e_ink_display_data}} @@ -265,19 +244,6 @@ text_sensor: - !include { file: sensors/homeassistant.yaml, vars: { id: travel_ASML_name, entity_id: sensor.e_ink_display_data }} - !include { file: sensors/homeassistant.yaml, vars: { id: travel_euretco_name, entity_id: sensor.e_ink_display_data }} - - platform: homeassistant - entity_id: sensor.moon_phase - #attribute: icon - id: moon_phase - on_value: - then: - - lambda: 'id(data_updated) = true;' - - - platform: homeassistant - entity_id: sensor.moon - id: moon - internal: true - # Sunrise - platform: sun type: sunrise @@ -295,24 +261,6 @@ text_sensor: then: - lambda: 'id(data_updated) = true;' - - platform: wifi_info - ssid: - name: "${device_name} Connected SSID" - id: ssid - icon: mdi:wifi-strength-2 - entity_category: diagnostic - - bssid: - name: "${device_name} Connected BSSID" - id: bssid - icon: mdi:wifi-strength-2 - entity_category: diagnostic - - mac_address: - name: "${device_name} WiFi Mac Address" - id: macaddress - icon: mdi:wifi-strength-2 - entity_category: diagnostic - platform: sun id: sunrise @@ -361,12 +309,13 @@ display: - platform: waveshare_epaper cs_pin: GPIO27 dc_pin: GPIO16 - busy_pin: GPIO25 + busy_pin: + number: 25 + inverted: True reset_pin: GPIO26 - model: 7.50in-bV2 - #model: 7.50inv2b - #model: 7.50inv2 - #model: 7.50inV2alt + reset_duration: 2ms + model: 7.50in-bv2-rb + #model: 7.50in-bV2 update_interval: 30min id: eink_display rotation: 90° @@ -379,39 +328,9 @@ display: int wifi_x_a = xres-x_pad; int wifi_y_a = yres-y_pad+2; - - - // Fill background in black. it.fill(COLOR_OFF); - // wifi strength - // if (id(sensor_wifi_signal).has_state()) - // { - // if (id(sensor_wifi_signal).state >= -50) { - // //Excellent - // it.print(wifi_x_a, wifi_y_a, id(font_wifi), TextAlign::BASELINE_RIGHT, "󰤨"); - // ESP_LOGI("WiFi", "Excellent"); - // } else if (id(sensor_wifi_signal).state >= -60) { - // //Good - // it.print(wifi_x_a, wifi_y_a, id(font_wifi), TextAlign::BASELINE_RIGHT, "󰤥"); - // ESP_LOGI("WiFi", "Good"); - // } else if (id(sensor_wifi_signal).state >= -67) { - // //Fair - // it.print(wifi_x_a, wifi_y_a, id(font_wifi), TextAlign::BASELINE_RIGHT, "󰤢"); - // ESP_LOGI("WiFi", "Fair"); - // } else if (id(sensor_wifi_signal).state >= -70) { - // //Weak - // it.print(wifi_x_a, wifi_y_a, id(font_wifi), TextAlign::BASELINE_RIGHT, "󰤟"); - // ESP_LOGI("WiFi", "Weak"); - // } else { - // //Unlikely working signal - // it.print(wifi_x_a, wifi_y_a, id(font_wifi), TextAlign::BASELINE_RIGHT, "󰤫"); - // ESP_LOGI("WiFi", "Unlikely"); - // } - //} - - // clock section int clk_yoffset = 50; int clk_xoffset = 310; @@ -437,7 +356,7 @@ display: if(id(sun_sunset).has_state ()) { it.printf(385, sry_offset, id(font_small_bold), TextAlign::CENTER_RIGHT, "%s", id(sun_sunset).state.c_str()); } - // Moonphae + // Moonphase //it.printf(265, sry_offset, id(font_mdi_medlarge), TextAlign::CENTER, "%s", moon_icon_map[id(moon_phase).state.c_str()].c_str()); it.line(30, sry_offset+30, 420, sry_offset+30); diff --git a/esphome/include/epaper75.h b/esphome/include/epaper75.h index c410092..a627eb4 100755 --- a/esphome/include/epaper75.h +++ b/esphome/include/epaper75.h @@ -2,38 +2,6 @@ #include -// #define ICON_stop "\U000F04DB" -// #define ICON_play "\U000F040A" -// #define ICON_pause "\U000F03E4" - -// std::string playbackStatusToIcon(bool playing, bool paused) { -// if (playing) return ICON_play; -// else if (paused) return ICON_pause; -// else return ICON_stop; -// } - -// #define ICON_moon_first_quarter "\U000F0F61" -// #define ICON_moon_full "\U000F0F62" -// #define ICON_moon_last_quarter "\U000F0F63" -// #define ICON_moon_new "\U000F0F64" -// #define ICON_moon_waning_crescent "\U000F0F65" -// #define ICON_moon_waning_gibbous "\U000F0F66" -// #define ICON_moon_waxing_crescent "\U000F0F67" -// #define ICON_moon_waxing_gibbous "\U000F0F68" - -// std::string moonToIcon(std::string moonPhase) -// { -// if (moonPhase == "new_moon") return ICON_moon_new; -// if (moonPhase == "waxing_crescent") return ICON_moon_waxing_crescent; -// if (moonPhase == "first_quarter") return ICON_moon_first_quarter; -// if (moonPhase == "waxing_gibbous") return ICON_moon_waxing_gibbous; -// if (moonPhase == "full_moon") return ICON_moon_full; -// if (moonPhase == "waning_gibbous") return ICON_moon_waning_gibbous; -// if (moonPhase == "last_quarter") return ICON_moon_last_quarter; -// if (moonPhase == "waning_crescent") return ICON_moon_waning_crescent; -// return ""; -// } - // Map weather states to MDI characters. std::map weather_icon_map { @@ -70,76 +38,67 @@ std::map weather_icon_map {"car", "\U000f010b"}, {"trash", "\U000F0819"}, }; -// std::map moon_icon_map + + + +// #define ICON_w_clear_night "\U000F0594" +// #define ICON_w_cloudy "\U000F0590" +// #define ICON_w_fog "\U000F0591" +// #define ICON_w_hail "\U000F0592" +// #define ICON_w_lightning "\U000F0593" +// #define ICON_w_lightning_rainy "\U000F067E" +// #define ICON_w_night_partly_cloudy "\U000F0F31" +// #define ICON_w_partly_cloudy "\U000F0595" +// #define ICON_w_pouring "\U000F0596" +// #define ICON_w_rainy "\U000F0597" +// #define ICON_w_snowy "\U000F0F36" +// #define ICON_w_snowy_rainy "\U000F067F" +// #define ICON_w_sunny "\U000F0599" +// #define ICON_w_windy "\U000F059D" +// #define ICON_w_windy_variant "\U000F059E" +// #define ICON_w_exceptional "\U000F0F38" + +// std::string conditionToIcon(std::string condition, bool daytime) // { -// { "mdi:moon-waxing-crescent", "\U000f0f67" }, -// { "mdi:moon-first-quarter", "\U000F0F61" }, -// { "mdi:moon-waxing-gibbous", "\U000F0F68" }, -// { "mdi:moon-full", "\U000F0F62" }, -// { "mdi:moon-waning-gibbous", "\U000F0F66" }, -// { "mdi:moon-last-quarter", "\U000F0F63" }, -// { "mdi:moon-waning-crescent", "\U000F0F65" }, -// }; - - -#define ICON_w_clear_night "\U000F0594" -#define ICON_w_cloudy "\U000F0590" -#define ICON_w_fog "\U000F0591" -#define ICON_w_hail "\U000F0592" -#define ICON_w_lightning "\U000F0593" -#define ICON_w_lightning_rainy "\U000F067E" -#define ICON_w_night_partly_cloudy "\U000F0F31" -#define ICON_w_partly_cloudy "\U000F0595" -#define ICON_w_pouring "\U000F0596" -#define ICON_w_rainy "\U000F0597" -#define ICON_w_snowy "\U000F0F36" -#define ICON_w_snowy_rainy "\U000F067F" -#define ICON_w_sunny "\U000F0599" -#define ICON_w_windy "\U000F059D" -#define ICON_w_windy_variant "\U000F059E" -#define ICON_w_exceptional "\U000F0F38" - -std::string conditionToIcon(std::string condition, bool daytime) -{ - if (condition == "clear") return ICON_w_clear_night; - if (condition == "clear-night") return ICON_w_clear_night; - if (condition == "cloudy") return ICON_w_cloudy; - if (condition == "dust") return ICON_w_fog; - if (condition == "dusty") return ICON_w_fog; - if (condition == "fog") return ICON_w_fog; - if (condition == "frost") return ICON_w_snowy; - if (condition == "hail") return ICON_w_hail; - if (condition == "haze") return ICON_w_fog; - if (condition == "hazy") return ICON_w_fog; - if (condition == "heavy_shower") return ICON_w_rainy; - if (condition == "heavy_showers") return ICON_w_rainy; - if (condition == "light_rain") return ICON_w_rainy; - if (condition == "light_showers") return ICON_w_rainy; - if (condition == "light_shower") return ICON_w_rainy; - if (condition == "lightning") return ICON_w_lightning; - if (condition == "lightning-rainy") return ICON_w_lightning_rainy; - if (condition == "mostly_sunny") return ICON_w_sunny; - if (condition == "night") return ICON_w_clear_night; - if (condition == "partlycloudy" && !daytime) return ICON_w_night_partly_cloudy; - if (condition == "partlycloudy" && daytime) return ICON_w_partly_cloudy; - if (condition == "partly_cloudy" && !daytime) return ICON_w_night_partly_cloudy; - if (condition == "partly_cloudy" && daytime) return ICON_w_partly_cloudy; - if (condition == "pouring") return ICON_w_pouring; - if (condition == "rain") return ICON_w_rainy; - if (condition == "rainy") return ICON_w_rainy; - if (condition == "shower") return ICON_w_rainy; - if (condition == "showers") return ICON_w_rainy; - if (condition == "snow") return ICON_w_snowy; - if (condition == "snowy") return ICON_w_snowy; - if (condition == "snowy-rainy") return ICON_w_snowy_rainy; - if (condition == "storm") return ICON_w_lightning_rainy; - if (condition == "storms") return ICON_w_lightning_rainy; - if (condition == "sunny") return ICON_w_sunny; - if (condition == "wind") return ICON_w_windy; - if (condition == "windy") return ICON_w_windy; - if (condition == "windy-variant") return ICON_w_windy_variant; - if (condition == "exceptional") return ICON_w_exceptional; - return ""; -} +// if (condition == "clear") return ICON_w_clear_night; +// if (condition == "clear-night") return ICON_w_clear_night; +// if (condition == "cloudy") return ICON_w_cloudy; +// if (condition == "dust") return ICON_w_fog; +// if (condition == "dusty") return ICON_w_fog; +// if (condition == "fog") return ICON_w_fog; +// if (condition == "frost") return ICON_w_snowy; +// if (condition == "hail") return ICON_w_hail; +// if (condition == "haze") return ICON_w_fog; +// if (condition == "hazy") return ICON_w_fog; +// if (condition == "heavy_shower") return ICON_w_rainy; +// if (condition == "heavy_showers") return ICON_w_rainy; +// if (condition == "light_rain") return ICON_w_rainy; +// if (condition == "light_showers") return ICON_w_rainy; +// if (condition == "light_shower") return ICON_w_rainy; +// if (condition == "lightning") return ICON_w_lightning; +// if (condition == "lightning-rainy") return ICON_w_lightning_rainy; +// if (condition == "mostly_sunny") return ICON_w_sunny; +// if (condition == "night") return ICON_w_clear_night; +// if (condition == "partlycloudy" && !daytime) return ICON_w_night_partly_cloudy; +// if (condition == "partlycloudy" && daytime) return ICON_w_partly_cloudy; +// if (condition == "partly_cloudy" && !daytime) return ICON_w_night_partly_cloudy; +// if (condition == "partly_cloudy" && daytime) return ICON_w_partly_cloudy; +// if (condition == "pouring") return ICON_w_pouring; +// if (condition == "rain") return ICON_w_rainy; +// if (condition == "rainy") return ICON_w_rainy; +// if (condition == "shower") return ICON_w_rainy; +// if (condition == "showers") return ICON_w_rainy; +// if (condition == "snow") return ICON_w_snowy; +// if (condition == "snowy") return ICON_w_snowy; +// if (condition == "snowy-rainy") return ICON_w_snowy_rainy; +// if (condition == "storm") return ICON_w_lightning_rainy; +// if (condition == "storms") return ICON_w_lightning_rainy; +// if (condition == "sunny") return ICON_w_sunny; +// if (condition == "wind") return ICON_w_windy; +// if (condition == "windy") return ICON_w_windy; +// if (condition == "windy-variant") return ICON_w_windy_variant; +// if (condition == "exceptional") return ICON_w_exceptional; +// return ""; +// } \ No newline at end of file diff --git a/themes/ios-themes/ios-themes.yaml b/themes/ios-themes/ios-themes.yaml index 1fbe7ee..b504102 100644 --- a/themes/ios-themes/ios-themes.yaml +++ b/themes/ios-themes/ios-themes.yaml @@ -1,1397 +1,5 @@ --- # From https://github.com/basnijholt/lovelace-ios-themes -# -# iOS Light Mode Theme - dark-green -# -ios-light-mode-dark-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(48, 89, 71, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - dark-green -# -ios-light-mode-dark-green: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(48, 89, 71, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - dark-green -# -ios-dark-mode-dark-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(48, 89, 71, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - dark-green -# -ios-dark-mode-dark-green: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(48, 89, 71, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - light-blue -# -ios-light-mode-light-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(1, 195, 220, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - light-blue -# -ios-light-mode-light-blue: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(1, 195, 220, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - light-blue -# -ios-dark-mode-light-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(1, 195, 220, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - light-blue -# -ios-dark-mode-light-blue: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(1, 195, 220, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - light-green -# -ios-light-mode-light-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(114, 188, 139, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - light-green -# -ios-light-mode-light-green: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(114, 188, 139, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - light-green -# -ios-dark-mode-light-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(114, 188, 139, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - light-green -# -ios-dark-mode-light-green: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(114, 188, 139, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - orange -# -ios-light-mode-orange-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(255, 229, 116, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - orange -# -ios-light-mode-orange: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(255, 229, 116, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - orange -# -ios-dark-mode-orange-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(255, 229, 116, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - orange -# -ios-dark-mode-orange: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(255, 229, 116, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - # # iOS Light Mode Theme - blue-red # @@ -1442,6 +50,7 @@ ios-light-mode-blue-red-alternative: ha-card-border-radius: 20px ha-card-background: rgba(245, 245, 245, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1463,6 +72,7 @@ ios-light-mode-blue-red-alternative: app-header-background-color: rgba(30, 2, 61, 0.4) markdown-code-background-color: "#FFFFFF" code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -1529,6 +139,7 @@ ios-light-mode-blue-red: ha-card-border-radius: 20px ha-card-background: rgba(245, 245, 245, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1550,6 +161,7 @@ ios-light-mode-blue-red: app-header-background-color: rgba(30, 2, 61, 0.4) markdown-code-background-color: "#FFFFFF" code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -1616,6 +228,7 @@ ios-dark-mode-blue-red-alternative: ha-card-border-radius: 20px ha-card-background: rgba(10, 10, 10, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1637,6 +250,7 @@ ios-dark-mode-blue-red-alternative: app-header-background-color: rgba(30, 2, 61, 0.4) markdown-code-background-color: "#464646" code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -1703,6 +317,7 @@ ios-dark-mode-blue-red: ha-card-border-radius: 20px ha-card-background: rgba(10, 10, 10, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1724,354 +339,7 @@ ios-dark-mode-blue-red: app-header-background-color: rgba(30, 2, 61, 0.4) markdown-code-background-color: "#464646" code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - red -# -ios-light-mode-red-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(234, 88, 63, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Light Mode Theme - red -# -ios-light-mode-red: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9409" # from Apple systemOrange light mode - light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#e5e5ea" # systemGray5 light mode - secondary-background-color: rgba(255, 255, 255, 0.9) - divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#464a47" - secondary-text-color: "#000000" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: var(--light-primary-color) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#007aff" # from Apple systemBlue light mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(245, 245, 245, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#34c759" # from Apple systemGreen light mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info - paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(230, 230, 230, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(234, 88, 63, 0.4) - markdown-code-background-color: "#FFFFFF" - code-editor-background-color: "#FFF" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - red -# -ios-dark-mode-red-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(234, 88, 63, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" - # Custom - mcg-title-letter-spacing: .15em - mini-media-player-base-color: white - mini-media-player-icon-color: white - # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 - input-ink-color: var(--primary-text-color) - input-fill-color: transparent - input-disabled-fill-color: transparent - input-label-ink-color: var(--primary-text-color) - input-disabled-ink-color: var(--disabled-text-color) - input-dropdown-icon-color: var(--primary-text-color) - input-idle-line-color: var(--secondary-text-color) - input-hover-line-color: var(--secondary-text-color) - codemirror-property: var(--accent-color) - -# -# iOS Dark Mode Theme - red -# -ios-dark-mode-red: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" - lovelace-background: var(--background-image) - primary-color: "#ff9f09" # from Apple systemOrange dark mode - light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: "#2c2c2e" # systemGray5 dark mode - secondary-background-color: rgba(25, 25, 25, 0.9) - divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode - accent-color: rgba(255, 159, 9, 1) - # Text - primary-text-color: "#FFF" - secondary-text-color: "#d3d3d3" - text-primary-color: "#FFF" - disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 - text-dark-color: "#FFF" - # Sidebar Menu - sidebar-background-color: var(--primary-background-color) - sidebar-icon-color: var(--light-primary-color) - sidebar-text-color: "#F1F1F1" - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # States and Badges - state-icon-color: "#FFF" - state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) - state-icon-unavailable-color: var(--disabled-text-color) - paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 - # Sliders - paper-slider-knob-color: "#FFFFFF" - paper-slider-knob-start-color: var(--paper-slider-knob-color) - paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode - paper-slider-secondary-color: var(--paper-slider-knob-color) - paper-slider-container-color: rgba(255, 255, 255, 0.5) - paper-slider-font-color: "#000" - ha-slider-background: none !important - # Labels - label-badge-background-color: "#23232E" - label-badge-text-color: "#F1F1F1" - label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode - # Cards - card-background-color: var(--secondary-background-color) # Unused entities table background - paper-listbox-background-color: var(--primary-background-color) - ha-card-border-radius: 20px - ha-card-background: rgba(10, 10, 10, 0.4) - paper-card-background-color: var(--ha-card-background) - ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 - # Toggles - paper-toggle-button-checked-button-color: "#484848" - paper-toggle-button-checked-bar-color: "#484848" - paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) - paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) - # Table row - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - # Switches - switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA - switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode - switch-checked-button-color: "#FFF" - # Other - paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info - paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: rgba(25, 25, 25, 0.5) - lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: rgba(234, 88, 63, 0.4) - markdown-code-background-color: "#464646" - code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -2138,6 +406,7 @@ ios-light-mode-dark-blue-alternative: ha-card-border-radius: 20px ha-card-background: rgba(245, 245, 245, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2159,6 +428,7 @@ ios-light-mode-dark-blue-alternative: app-header-background-color: rgba(48, 69, 124, 0.4) markdown-code-background-color: "#FFFFFF" code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -2225,6 +495,7 @@ ios-light-mode-dark-blue: ha-card-border-radius: 20px ha-card-background: rgba(245, 245, 245, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2246,6 +517,7 @@ ios-light-mode-dark-blue: app-header-background-color: rgba(48, 69, 124, 0.4) markdown-code-background-color: "#FFFFFF" code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -2312,6 +584,7 @@ ios-dark-mode-dark-blue-alternative: ha-card-border-radius: 20px ha-card-background: rgba(10, 10, 10, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2333,6 +606,7 @@ ios-dark-mode-dark-blue-alternative: app-header-background-color: rgba(48, 69, 124, 0.4) markdown-code-background-color: "#464646" code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white @@ -2399,6 +673,7 @@ ios-dark-mode-dark-blue: ha-card-border-radius: 20px ha-card-background: rgba(10, 10, 10, 0.4) paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2420,6 +695,1787 @@ ios-dark-mode-dark-blue: app-header-background-color: rgba(48, 69, 124, 0.4) markdown-code-background-color: "#464646" code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - dark-green +# +ios-light-mode-dark-green-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(48, 89, 71, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - dark-green +# +ios-light-mode-dark-green: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(48, 89, 71, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - dark-green +# +ios-dark-mode-dark-green-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(48, 89, 71, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - dark-green +# +ios-dark-mode-dark-green: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(48, 89, 71, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - light-blue +# +ios-light-mode-light-blue-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(1, 195, 220, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - light-blue +# +ios-light-mode-light-blue: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(1, 195, 220, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - light-blue +# +ios-dark-mode-light-blue-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(1, 195, 220, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - light-blue +# +ios-dark-mode-light-blue: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(1, 195, 220, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - light-green +# +ios-light-mode-light-green-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(114, 188, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - light-green +# +ios-light-mode-light-green: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(114, 188, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - light-green +# +ios-dark-mode-light-green-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(114, 188, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - light-green +# +ios-dark-mode-light-green: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-green.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(114, 188, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - orange +# +ios-light-mode-orange-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(255, 229, 116, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - orange +# +ios-light-mode-orange: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(255, 229, 116, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - orange +# +ios-dark-mode-orange-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(255, 229, 116, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - orange +# +ios-dark-mode-orange: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(255, 229, 116, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - red +# +ios-light-mode-red-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(234, 88, 63, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Light Mode Theme - red +# +ios-light-mode-red: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#2c2c2e" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#e5e5ea" # systemGray5 light mode + secondary-background-color: rgba(255, 255, 255, 0.9) + divider-color: rgba(142, 142, 147, 0.3) # from Apple systemGray light mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: var(--light-primary-color) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(245, 245, 245, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(200, 200, 200, 0.8) # e.g., background of more-info + paper-item-icon-color: "#333333" # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(230, 230, 230, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(234, 88, 63, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - red +# +ios-dark-mode-red-alternative: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(234, 88, 63, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 + # Custom + mcg-title-letter-spacing: .15em + mini-media-player-base-color: white + mini-media-player-icon-color: white + # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72 + input-ink-color: var(--primary-text-color) + input-fill-color: transparent + input-disabled-fill-color: transparent + input-label-ink-color: var(--primary-text-color) + input-disabled-ink-color: var(--disabled-text-color) + input-dropdown-icon-color: var(--primary-text-color) + input-idle-line-color: var(--secondary-text-color) + input-hover-line-color: var(--secondary-text-color) + codemirror-property: var(--accent-color) + +# +# iOS Dark Mode Theme - red +# +ios-dark-mode-red: + # Global + background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-red.jpg')" + lovelace-background: var(--background-image) + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: "#2c2c2e" # systemGray5 dark mode + secondary-background-color: rgba(25, 25, 25, 0.9) + divider-color: rgba(152, 152, 157, 0.3) # from Apple systemGray dark mode + accent-color: rgba(255, 159, 9, 1) + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + text-primary-color: "#FFF" + disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2 + text-dark-color: "#FFF" + # Sidebar Menu + sidebar-background-color: var(--primary-background-color) + sidebar-icon-color: var(--light-primary-color) + sidebar-text-color: "#F1F1F1" + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # States and Badges + state-icon-color: "#FFF" + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + state-icon-unavailable-color: var(--disabled-text-color) + paper-item-icon-active-color: rgba(255, 214, 10, 1) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-knob-color: "#FFFFFF" + paper-slider-knob-start-color: var(--paper-slider-knob-color) + paper-slider-pin-color: var(--paper-slider-knob-color) + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + paper-slider-secondary-color: var(--paper-slider-knob-color) + paper-slider-container-color: rgba(255, 255, 255, 0.5) + paper-slider-font-color: "#000" + ha-slider-background: none !important + # Labels + label-badge-background-color: "#23232E" + label-badge-text-color: "#F1F1F1" + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + card-background-color: var(--secondary-background-color) # Unused entities table background + paper-listbox-background-color: var(--primary-background-color) + ha-card-border-radius: 20px + ha-card-background: rgba(10, 10, 10, 0.4) + paper-card-background-color: var(--ha-card-background) + rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60 + ha-card-border-width: 0 # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357 + # Toggles + paper-toggle-button-checked-button-color: "#484848" + paper-toggle-button-checked-bar-color: "#484848" + paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) + paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) + # Table row + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + # Switches + switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + switch-checked-button-color: "#FFF" + # Other + paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info + paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: rgba(25, 25, 25, 0.5) + lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 + app-header-background-color: rgba(234, 88, 63, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" + clear-background-color: var(--ha-card-background) # see https://github.com/basnijholt/lovelace-ios-themes/issues/64 # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white diff --git a/www/community/lovelace-mushroom/mushroom.js b/www/community/lovelace-mushroom/mushroom.js index 2ea50db..0a53878 100644 --- a/www/community/lovelace-mushroom/mushroom.js +++ b/www/community/lovelace-mushroom/mushroom.js @@ -3333,6 +3333,7 @@ const Ts={},Os=He(class extends Ye{constructor(t){if(super(t),t.type!==Be&&t.typ @closed=${t=>t.stopPropagation()} .value=${null!=t?t:""} naturalMenuWidth + fixedMenuPosition > ${e.map((t=>Y` @@ -3392,7 +3393,7 @@ const Ts={},Os=He(class extends Ye{constructor(t){if(super(t),t.type!==Be&&t.typ flex: 1; --mdc-theme-primary: rgb(var(--rgb-state-entity)); } - `]}};bm=n([pt(pm)],bm);const ym=`${Nl}-template-card`,xm=`${ym}-editor`;Pl({type:ym,name:"Mushroom Template Card",description:"Card for custom rendering with templates"});const wm=["icon","icon_color","badge_color","badge_icon","primary","secondary","picture"];let km=class extends jl{constructor(){super(...arguments),this._templateResults={},this._unsubRenderTemplates=new Map,this._inGrid=!1}static async getConfigElement(){return await Promise.resolve().then((function(){return Cp})),document.createElement(xm)}static async getStubConfig(t){return{type:`custom:${ym}`,primary:"Hello, {{user}}",secondary:"How are you?",icon:"mdi:home"}}getCardSize(){let t=1;if(!this._config)return t;return"vertical"===$l(this._config).layout&&(t+=1),t}getGridSize(){const{grid_columns:t,grid_rows:e}=this.getLayoutOptions();return[t,e]}getLayoutOptions(){this._inGrid=!0;const t={grid_columns:2,grid_rows:1};if(!this._config)return t;const e=$l(this._config);return"vertical"===e.layout&&(t.grid_rows+=1),"horizontal"===e.layout&&(t.grid_columns=4),t}setConfig(t){wm.forEach((e=>{var i,o;(null===(i=this._config)||void 0===i?void 0:i[e])===t[e]&&(null===(o=this._config)||void 0===o?void 0:o.entity)==t.entity||this._tryDisconnectKey(e)})),this._config=Object.assign({tap_action:{action:"toggle"},hold_action:{action:"more-info"}},t)}connectedCallback(){super.connectedCallback(),this._tryConnect()}disconnectedCallback(){this._tryDisconnect()}_handleAction(t){Ge(this,this.hass,this._config,t.detail.action)}isTemplate(t){var e;const i=null===(e=this._config)||void 0===e?void 0:e[t];return null==i?void 0:i.includes("{")}getValue(t){var e,i,o;return this.isTemplate(t)?null===(i=null===(e=this._templateResults[t])||void 0===e?void 0:e.result)||void 0===i?void 0:i.toString():null===(o=this._config)||void 0===o?void 0:o[t]}render(){if(!this._config||!this.hass)return G;const t=this.getValue("icon"),e=this.getValue("icon_color"),i=this.getValue("badge_icon"),o=this.getValue("badge_color"),n=this.getValue("primary"),r=this.getValue("secondary"),a=this.getValue("picture"),l=this._config.multiline_secondary,s=Ie(this.hass),c=$l({fill_container:this._config.fill_container,layout:this._config.layout,icon_type:Boolean(a)?"entity-picture":Boolean(t)?"icon":"none",primary_info:Boolean(n)?"name":"none",secondary_info:Boolean(r)?"state":"none"}),d=fs(t);return Y` + `]}};bm=n([pt(pm)],bm);const ym=`${Nl}-template-card`,xm=`${ym}-editor`;Pl({type:ym,name:"Mushroom Template Card",description:"Card for custom rendering with templates"});const wm=["icon","icon_color","badge_color","badge_icon","primary","secondary","picture"];let km=class extends jl{constructor(){super(...arguments),this._templateResults={},this._unsubRenderTemplates=new Map,this._inGrid=!1}static async getConfigElement(){return await Promise.resolve().then((function(){return Cp})),document.createElement(xm)}static async getStubConfig(t){return{type:`custom:${ym}`,primary:"Hello, {{user}}",secondary:"How are you?",icon:"mdi:home"}}getCardSize(){let t=1;if(!this._config)return t;return"vertical"===$l(this._config).layout&&(t+=1),t}getGridSize(){const{grid_columns:t,grid_rows:e}=this.getLayoutOptions();return[t,e]}getLayoutOptions(){var t;this._inGrid=!0;const e={grid_columns:2,grid_rows:1};if(!this._config)return e;const i=$l(this._config);return"vertical"===i.layout&&(e.grid_rows+=1),"horizontal"===i.layout&&(e.grid_columns=4),(null===(t=this._config)||void 0===t?void 0:t.multiline_secondary)&&(e.grid_rows=void 0),e}setConfig(t){wm.forEach((e=>{var i,o;(null===(i=this._config)||void 0===i?void 0:i[e])===t[e]&&(null===(o=this._config)||void 0===o?void 0:o.entity)==t.entity||this._tryDisconnectKey(e)})),this._config=Object.assign({tap_action:{action:"toggle"},hold_action:{action:"more-info"}},t)}connectedCallback(){super.connectedCallback(),this._tryConnect()}disconnectedCallback(){this._tryDisconnect()}_handleAction(t){Ge(this,this.hass,this._config,t.detail.action)}isTemplate(t){var e;const i=null===(e=this._config)||void 0===e?void 0:e[t];return null==i?void 0:i.includes("{")}getValue(t){var e,i,o;return this.isTemplate(t)?null===(i=null===(e=this._templateResults[t])||void 0===e?void 0:e.result)||void 0===i?void 0:i.toString():null===(o=this._config)||void 0===o?void 0:o[t]}render(){if(!this._config||!this.hass)return G;const t=this.getValue("icon"),e=this.getValue("icon_color"),i=this.getValue("badge_icon"),o=this.getValue("badge_color"),n=this.getValue("primary"),r=this.getValue("secondary"),a=this.getValue("picture"),l=this._config.multiline_secondary,s=Ie(this.hass),c=$l({fill_container:this._config.fill_container,layout:this._config.layout,icon_type:Boolean(a)?"entity-picture":Boolean(t)?"icon":"none",primary_info:Boolean(n)?"name":"none",secondary_info:Boolean(r)?"state":"none"}),d=fs(t);return Y` [{name:"tap_action",selector:{"ui-action":{actions:t}}},{name:"hold_action",selector:{"ui-action":{actions:t}}},{name:"double_tap_action",selector:{"ui-action":{actions:t}}}],Wm=Ce({layout:$e(Se([we("horizontal"),we("vertical"),we("default")])),fill_container:$e(ye()),primary_info:$e(xe(ol)),secondary_info:$e(xe(ol)),icon_type:$e(xe(nl))}),Xm=[{type:"grid",name:"",schema:[{name:"layout",selector:{mush_layout:{}}},{name:"fill_container",selector:{boolean:{}}}]},{type:"grid",name:"",schema:[{name:"primary_info",selector:{mush_info:{}}},{name:"secondary_info",selector:{mush_info:{}}},{name:"icon_type",selector:{mush_icon_type:{}}}]}],Gm=["icon_color","layout","fill_container","primary_info","secondary_info","icon_type","content_info","use_entity_picture","collapsible_controls","icon_animation"],Km=Ce({entity:$e(Ee()),name:$e(Ee()),icon:$e(Ee())}),qm=Ce({index:$e(ke()),view_index:$e(ke()),view_layout:ve(),type:Ee()}),Zm=fe(qm,fe(Km,Wm,Hm),Ce({states:$e(be()),show_keypad:$e(ye())})),Jm=["more-info","navigate","url","call-service","assist","none"],Qm=["armed_home","armed_away","armed_night","armed_vacation","armed_custom_bypass"],tp=["show_keypad"],ep=Tt((t=>[{name:"entity",selector:{entity:{domain:Vl}}},{name:"name",selector:{text:{}}},{name:"icon",selector:{icon:{}},context:{icon_entity:"entity"}},...Xm,{type:"multi_select",name:"states",options:Qm.map((e=>[e,t(`ui.card.alarm_control_panel.${e.replace("armed","arm")}`)]))},{name:"show_keypad",selector:{boolean:{}}},...Ym(Jm)]));let ip=class extends jl{constructor(){super(...arguments),this._computeLabel=t=>{const e=Oo(this.hass);return Gm.includes(t.name)?e(`editor.card.generic.${t.name}`):tp.includes(t.name)?e(`editor.card.alarm_control_panel.${t.name}`):"states"===t.name?this.hass.localize("ui.panel.lovelace.editor.card.alarm-panel.available_states"):this.hass.localize(`ui.panel.lovelace.editor.card.generic.${t.name}`)}}connectedCallback(){super.connectedCallback(),vs()}setConfig(t){me(t,Zm),this._config=t}render(){if(!this.hass||!this._config)return G;const t=ep(this.hass.localize);return Y` + `]}};Um=n([pt(jm)],Um),console.info("%c🍄 Mushroom 🍄 - 3.5.4","color: #ef5350; font-weight: 700;");const Hm=Ce({tap_action:$e(ni),hold_action:$e(ni),double_tap_action:$e(ni)}),Ym=t=>[{name:"tap_action",selector:{"ui-action":{actions:t}}},{name:"hold_action",selector:{"ui-action":{actions:t}}},{name:"double_tap_action",selector:{"ui-action":{actions:t}}}],Wm=Ce({layout:$e(Se([we("horizontal"),we("vertical"),we("default")])),fill_container:$e(ye()),primary_info:$e(xe(ol)),secondary_info:$e(xe(ol)),icon_type:$e(xe(nl))}),Xm=[{type:"grid",name:"",schema:[{name:"layout",selector:{mush_layout:{}}},{name:"fill_container",selector:{boolean:{}}}]},{type:"grid",name:"",schema:[{name:"primary_info",selector:{mush_info:{}}},{name:"secondary_info",selector:{mush_info:{}}},{name:"icon_type",selector:{mush_icon_type:{}}}]}],Gm=["icon_color","layout","fill_container","primary_info","secondary_info","icon_type","content_info","use_entity_picture","collapsible_controls","icon_animation"],Km=Ce({entity:$e(Ee()),name:$e(Ee()),icon:$e(Ee())}),qm=Ce({index:$e(ke()),view_index:$e(ke()),view_layout:ve(),type:Ee(),layout_options:ve()}),Zm=fe(qm,fe(Km,Wm,Hm),Ce({states:$e(be()),show_keypad:$e(ye())})),Jm=["more-info","navigate","url","call-service","assist","none"],Qm=["armed_home","armed_away","armed_night","armed_vacation","armed_custom_bypass"],tp=["show_keypad"],ep=Tt((t=>[{name:"entity",selector:{entity:{domain:Vl}}},{name:"name",selector:{text:{}}},{name:"icon",selector:{icon:{}},context:{icon_entity:"entity"}},...Xm,{type:"multi_select",name:"states",options:Qm.map((e=>[e,t(`ui.card.alarm_control_panel.${e.replace("armed","arm")}`)]))},{name:"show_keypad",selector:{boolean:{}}},...Ym(Jm)]));let ip=class extends jl{constructor(){super(...arguments),this._computeLabel=t=>{const e=Oo(this.hass);return Gm.includes(t.name)?e(`editor.card.generic.${t.name}`):tp.includes(t.name)?e(`editor.card.alarm_control_panel.${t.name}`):"states"===t.name?this.hass.localize("ui.panel.lovelace.editor.card.alarm-panel.available_states"):this.hass.localize(`ui.panel.lovelace.editor.card.generic.${t.name}`)}}connectedCallback(){super.connectedCallback(),vs()}setConfig(t){me(t,Zm),this._config=t}render(){if(!this.hass||!this._config)return G;const t=ep(this.hass.localize);return Y`