diff --git a/README.md b/README.md index 357b56d..f4d175a 100644 --- a/README.md +++ b/README.md @@ -10,20 +10,13 @@ A generalized version of [*iOS Dark Mode Theme*](https://github.com/basnijholt/lovelace-ios-dark-mode-theme)! This includes both **Dark and Light Mode** and 7 different HomeKit backgrounds. Installing this theme adds 28 different themes: -- `ios-light-mode-dark-green` -- `ios-dark-mode-dark-green` -- `ios-light-mode-light-blue` -- `ios-dark-mode-light-blue` -- `ios-light-mode-light-green` -- `ios-dark-mode-light-green` -- `ios-light-mode-orange` -- `ios-dark-mode-orange` -- `ios-light-mode-blue-red` -- `ios-dark-mode-blue-red` -- `ios-light-mode-red` -- `ios-dark-mode-red` -- `ios-light-mode-dark-blue` -- `ios-dark-mode-dark-blue` +- `ios-dark-green` +- `ios-light-blue` +- `ios-light-green` +- `ios-orange` +- `ios-blue-red` +- `ios-red` +- `ios-dark-blue` - `...` and versions with the `-alternative` suffix ## Screenshots diff --git a/create-themes.py b/create-themes.py index 54a0289..6ffb57a 100644 --- a/create-themes.py +++ b/create-themes.py @@ -35,28 +35,30 @@ def average_color(fname): for background in Path("themes").glob("homekit-bg-*.jpg"): color = background.stem.split("homekit-bg-")[-1] app_header_background_color = average_color(background) - for which in ["light", "dark"]: - for state_icon_yellow in [False, True]: - settings = {k: parse(v[which]) for k, v in all_settings.items()} - - if state_icon_yellow: - settings["state_icon_active_color"] = "rgba(255, 214, 10, 1)" - suffix = "" - else: - suffix = "-alternative" - - with open("template.jinja2") as f: - template = jinja2.Template("".join(f.readlines())) - - result = template.render( - **settings, - folder=folder, - which=which, - app_header_background_color=app_header_background_color, - background_jpg=str(background.name), - color=color, - suffix=suffix, - ) - - with fname.open("a") as f: - f.write("\n" + result + "\n") + + for state_icon_yellow in [False, True]: + settings = { + k: {_k: parse(_v) for _k, _v in v.items()} + for k, v in all_settings.items() + } + if state_icon_yellow: + dct = settings["state_icon_active_color"] + dct["light"] = dct["dark"] = "rgba(255, 214, 10, 1)" + suffix = "" + else: + suffix = "-alternative" + + with open("template.jinja2") as f: + template = jinja2.Template("".join(f.readlines())) + + result = template.render( + **settings, + folder=folder, + app_header_background_color=app_header_background_color, + background_jpg=str(background.name), + color=color, + suffix=suffix, + ) + + with fname.open("a") as f: + f.write("\n" + result + "\n") diff --git a/manual-install/ios-themes.yaml b/manual-install/ios-themes.yaml index ba587f9..0f03601 100644 --- a/manual-install/ios-themes.yaml +++ b/manual-install/ios-themes.yaml @@ -1,41 +1,29 @@ --- # From https://github.com/basnijholt/lovelace-ios-themes # -# iOS Light Mode Theme - dark-green +# iOS Dark/Light Mode Theme - dark-green # -ios-light-mode-dark-green-alternative: +ios-dark-green-alternative: # Global background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -43,12 +31,10 @@ ios-light-mode-dark-green-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -60,57 +46,101 @@ ios-light-mode-dark-green-alternative: 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(61, 107, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - dark-green +# iOS Dark/Light Mode Theme - dark-green # -ios-light-mode-dark-green: +ios-dark-green: # Global background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -118,12 +148,10 @@ ios-light-mode-dark-green: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -135,807 +163,101 @@ ios-light-mode-dark-green: 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(61, 107, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-green +# iOS Dark/Light Mode Theme - light-blue # -ios-dark-mode-dark-green-alternative: +ios-light-blue-alternative: # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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(61, 107, 86, 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 - -# -# iOS Dark Mode Theme - dark-green -# -ios-dark-mode-dark-green: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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(61, 107, 86, 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 - -# -# iOS Light Mode Theme - light-blue -# -ios-light-mode-light-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# iOS Light Mode Theme - light-blue -# -ios-light-mode-light-blue: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# iOS Dark Mode Theme - light-blue -# -ios-dark-mode-light-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# iOS Dark Mode Theme - light-blue -# -ios-dark-mode-light-blue: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# iOS Light Mode Theme - light-green -# -ios-light-mode-light-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# iOS Light Mode Theme - light-green -# -ios-light-mode-light-green: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# iOS Dark Mode Theme - light-green -# -ios-dark-mode-light-green-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# iOS Dark Mode Theme - light-green -# -ios-dark-mode-light-green: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# iOS Light Mode Theme - orange -# -ios-light-mode-orange-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-orange.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -943,12 +265,10 @@ ios-light-mode-orange-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -960,57 +280,101 @@ ios-light-mode-orange-alternative: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - orange +# iOS Dark/Light Mode Theme - light-blue # -ios-light-mode-orange: +ios-light-blue: # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-orange.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -1018,12 +382,10 @@ ios-light-mode-orange: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1035,57 +397,101 @@ ios-light-mode-orange: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - orange +# iOS Dark/Light Mode Theme - light-green # -ios-dark-mode-orange-alternative: +ios-light-green-alternative: # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-orange.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" 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" @@ -1093,12 +499,10 @@ ios-dark-mode-orange-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1110,57 +514,101 @@ ios-dark-mode-orange-alternative: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - orange +# iOS Dark/Light Mode Theme - light-green # -ios-dark-mode-orange: +ios-light-green: # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-orange.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" 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" @@ -1168,12 +616,10 @@ ios-dark-mode-orange: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1185,57 +631,101 @@ ios-dark-mode-orange: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - blue-red +# iOS Dark/Light Mode Theme - orange # -ios-light-mode-blue-red-alternative: +ios-orange-alternative: # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-blue-red.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -1243,12 +733,10 @@ ios-light-mode-blue-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1260,57 +748,101 @@ ios-light-mode-blue-red-alternative: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - blue-red +# iOS Dark/Light Mode Theme - orange # -ios-light-mode-blue-red: +ios-orange: # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-blue-red.jpg')" + background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -1318,12 +850,10 @@ ios-light-mode-blue-red: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1335,57 +865,101 @@ ios-light-mode-blue-red: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - blue-red +# iOS Dark/Light Mode Theme - blue-red # -ios-dark-mode-blue-red-alternative: +ios-blue-red-alternative: # Global background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-blue-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: "#98989d" # 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: "#FFF" 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" @@ -1393,12 +967,10 @@ ios-dark-mode-blue-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1410,207 +982,101 @@ ios-dark-mode-blue-red-alternative: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - blue-red +# iOS Dark/Light Mode Theme - blue-red # -ios-dark-mode-blue-red: +ios-blue-red: # Global background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-blue-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: "#98989d" # 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: "#FFF" - 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) - # 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(63, 36, 75, 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 - -# -# iOS Light Mode Theme - red -# -ios-light-mode-red-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" - 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) - # 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(249, 129, 97, 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 - -# -# iOS Light Mode Theme - red -# -ios-light-mode-red: - # Global - background-image: "center / cover no-repeat fixed url('/local/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: "#8e8e93" # 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: "#FFF" 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" @@ -1618,12 +1084,10 @@ ios-light-mode-red: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1635,57 +1099,101 @@ ios-light-mode-red: 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(249, 129, 97, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - red +# iOS Dark/Light Mode Theme - red # -ios-dark-mode-red-alternative: +ios-red-alternative: # Global background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" 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" @@ -1693,12 +1201,10 @@ ios-dark-mode-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1710,207 +1216,101 @@ ios-dark-mode-red-alternative: 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(249, 129, 97, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - red +# iOS Dark/Light Mode Theme - red # -ios-dark-mode-red: +ios-red: # Global background-image: "center / cover no-repeat fixed url('/local/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: "#98989d" # 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: "#FFF" - 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) - # 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(249, 129, 97, 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 - -# -# iOS Light Mode Theme - dark-blue -# -ios-light-mode-dark-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-dark-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: "#8e8e93" # 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: "#FFF" - 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) - # 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(118, 129, 167, 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 - -# -# iOS Light Mode Theme - dark-blue -# -ios-light-mode-dark-blue: - # Global - background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-dark-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: "#8e8e93" # 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: "#FFF" 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" @@ -1918,12 +1318,10 @@ ios-light-mode-dark-blue: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1935,57 +1333,101 @@ ios-light-mode-dark-blue: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-blue +# iOS Dark/Light Mode Theme - dark-blue # -ios-dark-mode-dark-blue-alternative: +ios-dark-blue-alternative: # Global background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-dark-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: "#98989d" # 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: "#FFF" 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" @@ -1993,12 +1435,10 @@ ios-dark-mode-dark-blue-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2010,57 +1450,101 @@ ios-dark-mode-dark-blue-alternative: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-blue +# iOS Dark/Light Mode Theme - dark-blue # -ios-dark-mode-dark-blue: +ios-dark-blue: # Global background-image: "center / cover no-repeat fixed url('/local/themes/ios-themes/homekit-bg-dark-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: "#98989d" # 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: "#FFF" 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" @@ -2068,12 +1552,10 @@ ios-dark-mode-dark-blue: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2085,17 +1567,73 @@ ios-dark-mode-dark-blue: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" diff --git a/template.jinja2 b/template.jinja2 index 4fc4ad2..7f770fb 100644 --- a/template.jinja2 +++ b/template.jinja2 @@ -1,39 +1,27 @@ # -# iOS {{ which.capitalize() }} Mode Theme - {{ color }} +# iOS Dark/Light Mode Theme - {{ color }} # -ios-{{ which }}-mode-{{ color }}{{ suffix }}: +ios-{{ color }}{{ suffix }}: # Global background-image: "center / cover no-repeat fixed url('/{{ folder }}/themes/ios-themes/{{ background_jpg }}')" lovelace-background: var(--background-image) - primary-color: {{ primary_color }} # from Apple systemOrange {{ which }} mode - light-primary-color: {{ light_primary_color }} # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) - primary-background-color: {{ primary_background_color }} # systemGray5 {{ which }} mode - secondary-background-color: {{ secondary_background_color }} - divider-color: {{ divider_color }} # from Apple systemGray {{ which }} mode accent-color: rgba(255, 159, 9, 1) # Text - primary-text-color: {{ primary_text_color }} - secondary-text-color: {{ secondary_text_color }} 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: {{ sidebar_text_color }} sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: {{ sidebar_selected_icon_color }} # (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: {{ state_icon_active_color }} # 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: {{ state_icon_active_color }} # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 # Sliders paper-slider-knob-color: "#FFF" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) - paper-slider-active-color: {{ paper_slider_active_color }} # from Apple systemBlue {{ which }} 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" @@ -41,12 +29,10 @@ ios-{{ which }}-mode-{{ color }}{{ suffix }}: # Labels label-badge-background-color: "#23232E" label-badge-text-color: "#F1F1F1" - label-badge-red: {{ label_badge_red }} # from Apple systemOrange {{ which }} 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: {{ ha_card_background }} paper-card-background-color: var(--ha-card-background) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -58,17 +44,44 @@ ios-{{ which }}-mode-{{ color }}{{ suffix }}: 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: {{ switch_checked_track_color }} # from Apple systemGreen {{ which }} mode switch-checked-button-color: "#FFF" # Other - paper-dialog-background-color: {{ paper_dialog_background_color }} # e.g., background of more-info - paper-item-icon-color: {{ paper_item_icon_color }} # also should mini-media-player icon white (but doesn't work by itself) - more-info-header-background: {{ more_info_header_background }} lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42 - app-header-background-color: {{ app_header_background_color }} - markdown-code-background-color: {{ markdown_code_background_color }} - code-editor-background-color: {{ code_editor_background_color }} # Custom mcg-title-letter-spacing: .15em mini-media-player-base-color: white mini-media-player-icon-color: white + modes: + {%- for which in ['light', 'dark'] %} + {{which }}: + # Global + primary-color: {{ primary_color[which] }} # from Apple systemOrange {{ which }} mode + light-primary-color: {{ primary_color[which] }} # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX) + primary-background-color: {{ primary_background_color[which] }} # systemGray5 {{ which }} mode + secondary-background-color: {{ secondary_background_color[which] }} + divider-color: {{ divider_color[which] }} # from Apple systemGray {{ which }} mode + # Text + primary-text-color: {{ primary_text_color[which] }} + secondary-text-color: {{ secondary_text_color[which] }} + # Sidebar Menu + sidebar-text-color: {{ sidebar_text_color[which] }} + sidebar-selected-icon-color: {{ sidebar_selected_icon_color[which] }} # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: {{ state_icon_active_color[which] }} # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: {{ state_icon_active_color[which] }} # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: {{ paper_slider_active_color[which] }} # from Apple systemBlue {{ which }} mode + # Labels + label-badge-red: {{ label_badge_red[which] }} # from Apple systemOrange {{ which }} mode + # Cards + ha-card-background: {{ ha_card_background[which] }} + # Switches + switch-checked-track-color: {{ switch_checked_track_color[which] }} # from Apple systemGreen {{ which }} mode + # Other + paper-dialog-background-color: {{ paper_dialog_background_color[which] }} # e.g., background of more-info + paper-item-icon-color: {{ paper_item_icon_color[which] }} # also should mini-media-player icon white (but doesn't work by itself) + more-info-header-background: {{ more_info_header_background[which] }} + app-header-background-color: {{ app_header_background_color }} + markdown-code-background-color: {{ markdown_code_background_color[which] }} + code-editor-background-color: {{ code_editor_background_color[which] }} + {%- endfor -%} diff --git a/themes/ios-themes.yaml b/themes/ios-themes.yaml index 5f547bd..5ac6e91 100644 --- a/themes/ios-themes.yaml +++ b/themes/ios-themes.yaml @@ -1,41 +1,29 @@ --- # From https://github.com/basnijholt/lovelace-ios-themes # -# iOS Light Mode Theme - dark-green +# iOS Dark/Light Mode Theme - dark-green # -ios-light-mode-dark-green-alternative: +ios-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: "#8e8e93" # 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: "#FFF" 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" @@ -43,12 +31,10 @@ ios-light-mode-dark-green-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -60,57 +46,101 @@ ios-light-mode-dark-green-alternative: 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(61, 107, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - dark-green +# iOS Dark/Light Mode Theme - dark-green # -ios-light-mode-dark-green: +ios-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: "#8e8e93" # 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: "#FFF" 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" @@ -118,12 +148,10 @@ ios-light-mode-dark-green: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -135,807 +163,101 @@ ios-light-mode-dark-green: 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(61, 107, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(61, 107, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-green +# iOS Dark/Light Mode Theme - light-blue # -ios-dark-mode-dark-green-alternative: +ios-light-blue-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: "#98989d" # 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: "#FFF" - 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) - # 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(61, 107, 86, 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 - -# -# 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: "#98989d" # 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: "#FFF" - 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) - # 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(61, 107, 86, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# 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: "#98989d" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# 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: "#98989d" # 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: "#FFF" - 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) - # 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, 133, 162, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# 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: "#98989d" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# 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: "#98989d" # 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: "#FFF" - 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) - # 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(116, 184, 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 - -# -# 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')" + 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: "#8e8e93" # 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: "#FFF" 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" @@ -943,12 +265,10 @@ ios-light-mode-orange-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -960,57 +280,101 @@ ios-light-mode-orange-alternative: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - orange +# iOS Dark/Light Mode Theme - light-blue # -ios-light-mode-orange: +ios-light-blue: # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + 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: "#8e8e93" # 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: "#FFF" 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" @@ -1018,12 +382,10 @@ ios-light-mode-orange: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1035,57 +397,101 @@ ios-light-mode-orange: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(1, 133, 162, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - orange +# iOS Dark/Light Mode Theme - light-green # -ios-dark-mode-orange-alternative: +ios-light-green-alternative: # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + 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: "#98989d" # 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: "#FFF" 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" @@ -1093,12 +499,10 @@ ios-dark-mode-orange-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1110,57 +514,101 @@ ios-dark-mode-orange-alternative: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - orange +# iOS Dark/Light Mode Theme - light-green # -ios-dark-mode-orange: +ios-light-green: # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-orange.jpg')" + 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: "#98989d" # 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: "#FFF" 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" @@ -1168,12 +616,10 @@ ios-dark-mode-orange: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1185,57 +631,101 @@ ios-dark-mode-orange: 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(254, 190, 86, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(116, 184, 139, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - blue-red +# iOS Dark/Light Mode Theme - orange # -ios-light-mode-blue-red-alternative: +ios-orange-alternative: # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')" + 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: "#8e8e93" # 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: "#FFF" 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" @@ -1243,12 +733,10 @@ ios-light-mode-blue-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1260,57 +748,101 @@ ios-light-mode-blue-red-alternative: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Light Mode Theme - blue-red +# iOS Dark/Light Mode Theme - orange # -ios-light-mode-blue-red: +ios-orange: # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')" + 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: "#8e8e93" # 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: "#FFF" 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" @@ -1318,12 +850,10 @@ ios-light-mode-blue-red: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1335,57 +865,101 @@ ios-light-mode-blue-red: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(254, 190, 86, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - blue-red +# iOS Dark/Light Mode Theme - blue-red # -ios-dark-mode-blue-red-alternative: +ios-blue-red-alternative: # Global background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-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: "#98989d" # 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: "#FFF" 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" @@ -1393,12 +967,10 @@ ios-dark-mode-blue-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1410,207 +982,101 @@ ios-dark-mode-blue-red-alternative: 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(63, 36, 75, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - blue-red +# iOS Dark/Light Mode Theme - blue-red # -ios-dark-mode-blue-red: +ios-blue-red: # Global background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-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: "#98989d" # 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: "#FFF" - 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) - # 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(63, 36, 75, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" - 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) - # 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(249, 129, 97, 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 - -# -# 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: "#8e8e93" # 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: "#FFF" 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" @@ -1618,12 +1084,10 @@ ios-light-mode-red: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1635,57 +1099,101 @@ ios-light-mode-red: 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(249, 129, 97, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(63, 36, 75, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - red +# iOS Dark/Light Mode Theme - red # -ios-dark-mode-red-alternative: +ios-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: "#98989d" # 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: "#FFF" 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" @@ -1693,12 +1201,10 @@ ios-dark-mode-red-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1710,207 +1216,101 @@ ios-dark-mode-red-alternative: 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(249, 129, 97, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - red +# iOS Dark/Light Mode Theme - red # -ios-dark-mode-red: +ios-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: "#98989d" # 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: "#FFF" - 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) - # 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(249, 129, 97, 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 - -# -# iOS Light Mode Theme - dark-blue -# -ios-light-mode-dark-blue-alternative: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-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: "#8e8e93" # 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: "#FFF" - 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) - # 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(118, 129, 167, 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 - -# -# iOS Light Mode Theme - dark-blue -# -ios-light-mode-dark-blue: - # Global - background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-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: "#8e8e93" # 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: "#FFF" 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" @@ -1918,12 +1318,10 @@ ios-light-mode-dark-blue: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -1935,57 +1333,101 @@ ios-light-mode-dark-blue: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(249, 129, 97, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-blue +# iOS Dark/Light Mode Theme - dark-blue # -ios-dark-mode-dark-blue-alternative: +ios-dark-blue-alternative: # Global background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-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: "#98989d" # 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: "#FFF" 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" @@ -1993,12 +1435,10 @@ ios-dark-mode-dark-blue-alternative: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2010,57 +1450,101 @@ ios-dark-mode-dark-blue-alternative: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#333333" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#333333" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1) + paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30 + # Sliders + paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616" # -# iOS Dark Mode Theme - dark-blue +# iOS Dark/Light Mode Theme - dark-blue # -ios-dark-mode-dark-blue: +ios-dark-blue: # Global background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-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: "#98989d" # 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: "#FFF" 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" @@ -2068,12 +1552,10 @@ ios-dark-mode-dark-blue: # 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) # Toggles paper-toggle-button-checked-button-color: "#484848" @@ -2085,17 +1567,73 @@ ios-dark-mode-dark-blue: 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(118, 129, 167, 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 + modes: + light: + # Global + primary-color: "#ff9409" # from Apple systemOrange light mode + light-primary-color: "#ff9409" # (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: "#8e8e93" # from Apple systemGray light mode + # Text + primary-text-color: "#464a47" + secondary-text-color: "#000000" + # Sidebar Menu + sidebar-text-color: var(--light-primary-color) + sidebar-selected-icon-color: "#8e8e93" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#007aff" # from Apple systemBlue light mode + # Labels + label-badge-red: rgba(255, 149, 9, 0.7) # from Apple systemOrange light mode + # Cards + ha-card-background: rgba(245, 245, 245, 0.4) + # Switches + switch-checked-track-color: "#34c759" # from Apple systemGreen light mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#FFFFFF" + code-editor-background-color: "#FFF" + dark: + # Global + primary-color: "#ff9f09" # from Apple systemOrange dark mode + light-primary-color: "#ff9f09" # (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: "#98989d" # from Apple systemGray dark mode + # Text + primary-text-color: "#FFF" + secondary-text-color: "#d3d3d3" + # Sidebar Menu + sidebar-text-color: "#F1F1F1" + sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX) + # States and Badges + state-icon-active-color: rgba(255, 214, 10, 1) # or make light icons yellow when active: rgba(255, 214, 10, 1) + 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-active-color: "#0984ff" # from Apple systemBlue dark mode + # Labels + label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode + # Cards + ha-card-background: rgba(10, 10, 10, 0.4) + # Switches + switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode + # 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) + app-header-background-color: rgba(118, 129, 167, 0.4) + markdown-code-background-color: "#464646" + code-editor-background-color: "#161616"