Accès aux différentes pages avec de mini icones en haut de chaque page

mike413muo · Janvier 15, 2025, 8:17

j’ai corrigé mais j’ai toujours une icone à la place de mon image

j’ai modifier le yaml comme cela

mike-theme:
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }

      paper-tab[aria-label='choix-du-domicile1'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

et l’onglet home comme ceci j’ai même rajouté sous thème mike-theme
mais cela ne change rien encore

WarC0zes · Janvier 16, 2025, 3:39

Tu as rechargé les thèmes pour la prise en charge de ton nouveau thème ?

Dans l’outil de dev / actions. frontend.reload_themes , puis executer l’action.

Ton thème est bien dans /themes/mike-theme/mike-theme.yaml ?

Choisis le thème dans ton profil, voir :

mike413muo · Janvier 16, 2025, 6:13

Salut ca marche c’est cool !

Mais c’est tout noir
![Capture d’écran 2025-01-16 à 07.08.21|273x54]

est il possible de remettre de la couleur comme sur l’ancien theme qui était

Capture d’écran 2025-01-16 à 07.08.21

dernière question on est d’accord dans mon theme mike-theme

je dois renommer chaque

onglet_1
onglet_2

par le nom que j’ai aujourd’hui dans mes différentes page ?

Eclairage
Prises Pilotées

merci encore pour ton aide c’est top

Mike

mobile:
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='onglet_1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    paper-tab[aria-label='onglet_2']: *ref_tab_style
    paper-tab[aria-label='onglet_3']: *ref_tab_style
    paper-tab[aria-label='onglet_4’]: *ref_tab_style
    paper-tab[aria-label='onglet_5']: *ref_tab_style
    paper-tab[aria-label='onglet_6’]: *ref_tab_style
    paper-tab[aria-label='onglet_7’]: *ref_tab_style
    paper-tab[aria-label='onglet_8’]: *ref_tab_style
    paper-tab[aria-label='onglet_9’]: *ref_tab_style

    .: |

      paper-tab[aria-label='onglet_1'] ha-icon::before,
      paper-tab[aria-label='onglet_2'] ha-icon::before,
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='onglet_1'] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_2'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }
      paper-tab[aria-label='onglet_4’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_5’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_6’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_7’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
       }
      paper-tab[aria-label='onglet_8’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_9’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

WarC0zes · Janvier 16, 2025, 6:29

oui. ouvre ton thème ios et copie le code. Puis colle le dans ton theme mike-theme.
colle le avant le card-mod-theme:

mike-theme:
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme

oui , c’est bien ça.

mike413muo · Janvier 16, 2025, 11:53

salut

merci encore pour ton aide j’ai rajouté tous le code que tu m’a donner et je l’ai collé dans mike-theme.yaml comme ceci

mais mon fond d’écran est toujours noire

mike-theme:
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }

      paper-tab[aria-label='choix-du-domicile1'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

WarC0zes · Janvier 16, 2025, 12:01

ta recharger les thèmes ?

après j’ai mis un code de thème , mais je ne sais pas si c’est bien celui que tu utilises.
Ca te permet d’avoir un exemple, mais dans le doute utilise le code de ton thème.

mike413muo · Janvier 16, 2025, 5:17

salut

oui j’ai rechargé le thème depuis cette commande ci

mais cela reste noire …

j’ai rechargé encore une fois et maintenant c’est blanc !!

WarC0zes · Janvier 16, 2025, 5:45

Montre le code complet de ton thème ios que tu utilises.

mike413muo · Janvier 16, 2025, 5:58

j’ai tout cela sous le thème ios dans le theme yaml

# From https://github.com/basnijholt/lovelace-ios-themes
#
# iOS Light Mode Theme - blue-red
#
ios-light-mode-blue-red-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-blue-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(30, 2, 61, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - blue-red
#
ios-light-mode-blue-red:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-blue-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(30, 2, 61, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - blue-red
#
ios-dark-mode-blue-red-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/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: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(30, 2, 61, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - blue-red
#
ios-dark-mode-blue-red:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(30, 2, 61, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - dark-blue
#
ios-light-mode-dark-blue-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - dark-blue
#
ios-light-mode-dark-blue:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - dark-blue
#
ios-dark-mode-dark-blue-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/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: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - dark-blue
#
ios-dark-mode-dark-blue:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - dark-green
#
ios-light-mode-dark-green-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-dark-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 89, 71, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - dark-green
#
ios-light-mode-dark-green:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 89, 71, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - dark-green
#
ios-dark-mode-dark-green-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-dark-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 89, 71, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - dark-green
#
ios-dark-mode-dark-green:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-dark-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 89, 71, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - light-blue
#
ios-light-mode-light-blue-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - light-blue
#
ios-light-mode-light-blue:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - light-blue
#
ios-dark-mode-light-blue-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - light-blue
#
ios-dark-mode-light-blue:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-light-blue.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(1, 195, 220, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - light-green
#
ios-light-mode-light-green-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-light-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(114, 188, 139, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - light-green
#
ios-light-mode-light-green:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-light-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(114, 188, 139, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - light-green
#
ios-dark-mode-light-green-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-light-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(114, 188, 139, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - light-green
#
ios-dark-mode-light-green:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-light-green.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(114, 188, 139, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - orange
#
ios-light-mode-orange-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-orange.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(255, 229, 116, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - orange
#
ios-light-mode-orange:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-orange.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(255, 229, 116, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - orange
#
ios-dark-mode-orange-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-orange.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(255, 229, 116, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - orange
#
ios-dark-mode-orange:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-orange.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(255, 229, 116, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - red
#
ios-light-mode-red-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#333333"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#333333"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(234, 88, 63, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Light Mode Theme - red
#
ios-light-mode-red:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9409"  # from Apple systemOrange light mode
  light-primary-color: "#2c2c2e"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#e5e5ea"  # systemGray5 light mode
  secondary-background-color: rgba(255, 255, 255, 0.9)
  divider-color: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(234, 88, 63, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - red
#
ios-dark-mode-red-alternative:
  # Global
  background-image: "center / cover no-repeat fixed url('/local/ios-themes/homekit-bg-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(234, 88, 63, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

#
# iOS Dark Mode Theme - red
#
ios-dark-mode-red:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/themes/homekit-bg-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(10, 10, 10) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(234, 88, 63, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

WarC0zes · Janvier 16, 2025, 6:09

test ca:

# iOS Light Mode Theme - dark-blue

mike-theme:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }

      paper-tab[aria-label='choix-du-domicile1'] ha-icon {
        display: contents;
      }

mike413muo · Janvier 17, 2025, 6:21

salut

j’ai remplacé tout le code de mon thème par ton dernière message mais tout reste blanc

un question est si on essaiyait de mettre le code dans le thème

Capture d’écran 2025-01-17 à 07.18.44

qui est comme cela

ce serait pas possible de faire cela ?

merci pour ton prochain retour

WarC0zes · Janvier 17, 2025, 7:39

j’ai tester le theme de ce post et ca fonctionne chez moi. j’ai juste changé l’image de l’icône et le nom de mon onglet.

il y a un soucis chez toi. essaye de vider le cache du navigateur.

mike413muo · Janvier 17, 2025, 4:58

Salut

j’ai vidé le cache du naviguateur mais c’est toujours pareille tu m’a dit essayé ca

# iOS Light Mode Theme - dark-blue mike-theme: # Global background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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-backgroun…

mais je le met comment dans mon yaml ? car il me semble qu’il est pas complet

actuellement j’ai cela …

# iOS Light Mode Theme - dark-blue

mike-theme:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }

      paper-tab[aria-label='choix-du-domicile1'] ha-icon {
        display: contents;
      }

WarC0zes · Janvier 17, 2025, 5:12

Oui ,je n’ai pas copié tout le thème IOS, parce que ça inclus le même thème avec des couleurs différente. j’ai utilisé que la partie IOS dark blue, que tu utilises.

C’est bien ca.

je te remet le code, que j’ai utiliser chez moi. ( attention a changer le nom de ton onglet et l’image )

mike-theme:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='Infos']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    .: |
      paper-tab[aria-label='Infos'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='Infos'] ha-icon::before {
        background: url("/local/images/sud radio.png");
      }
      paper-tab[aria-label='Infos'] ha-icon {
        display: contents;
      }

mike413muo · Janvier 18, 2025, 7:51

salut

merci encore cela marche j’ai la couleur qui est apparue !!

je m’occupe maintenant de mes icones

mais en parrallèle j’ai 2 questions toujours sur cette affaire car
à la base j’ai deux objets et toutes mes icones sont à double
( à cause des deux objets )

Belmont
Blonay

est il possible quand on est sur la page du choix du domicile
d’avoir uniquement à l’écran les 2 icones affichées

Belmont
Blonay

et quand on clique sur le site par exemple Blonay

d’avoir à ce moment là les icônes correspondantes au site qui s’affiche ?

Capture d’écran 2025-01-18 à 08.49.41

et ma deuxième question peut on augmenter un tout petit peu la taille des icônes de sélection ?

en tous les cas merci infiniment pour le coup de main

Mike

WarC0zes · Janvier 18, 2025, 8:08

1er question ,je ne sais pas.
2eme question, pour les icones je ne sais pas.
Pour une image, avec le code que je t’es passer , il faut changer la taille de l’image ici:

      paper-tab[aria-label='Infos'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }

exemple

        height: 40px;
        width: 40px;

edit:
pour la taille de l’icône, a utiliser dans un thème:

  card-mod-root-yaml: |
    .: |
      paper-tab[aria-label='onglet_1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        --mdc-icon-size: 40px;
      }

mike413muo · Janvier 19, 2025, 9:33

Salut

merci pour les infos !

j’ai fini de compiler le toute avec les infos que tu m’avais donné
et j’ai remplacé dans mon yaml theme les différents liens
malheureusement à par la première icone qui est bonne les autres non pas suivie !!

peux tu jeter un oeil à mon fichier yaml et me dire ce qui est faux ?

d’avance je te remercie pour l’aide que tu m’apportes

mike-theme1:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    paper-tab[aria-label='Belmont']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees']: *ref_tab_style
    paper-tab[aria-label='chauffage belmont’]: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
    paper-tab[aria-label='STORES']: *ref_tab_style
    paper-tab[aria-label='Cameras']: *ref_tab_style
    paper-tab[aria-label='RADIOS']: *ref_tab_style
    paper-tab[aria-label='SCENARIOS’]: *ref_tab_style
    paper-tab[aria-label='sophe_belmont’]: *ref_tab_style
    paper-tab[aria-label='MULTIMEDIA’]: *ref_tab_style
    paper-tab[aria-label='VOITURE’]: *ref_tab_style
    paper-tab[aria-label='Blonay']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage B']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees B']: *ref_tab_style
    paper-tab[aria-label='Nettoyage B’]: *ref_tab_style
    paper-tab[aria-label='Chauffage B']: *ref_tab_style
    paper-tab[aria-label='Scénarios B’]: *ref_tab_style
    paper-tab[aria-label='Stores B’]: *ref_tab_style
    paper-tab[aria-label='Radios B’]: *ref_tab_style
    paper-tab[aria-label='Sophrologie B’]: *ref_tab_style
    paper-tab[aria-label='Multimédia B’]: *ref_tab_style
    paper-tab[aria-label='Voiture B’]: *ref_tab_style

    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before,
      paper-tab[aria-label='Belmont'] ha-icon::before,
      paper-tab[aria-label='Eclairage'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees'] ha-icon::before,
      paper-tab[aria-label='chauffage belmont’] ha-icon::before,
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before,
      paper-tab[aria-label='STORES’] ha-icon::before,
      paper-tab[aria-label='cameras-belmont’] ha-icon::before,
      paper-tab[aria-label=‘RADIOS’] ha-icon::before,
      paper-tab[aria-label='SCENARIOS’] ha-icon::before,
      paper-tab[aria-label='sophe_belmont’] ha-icon::before,
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before,
      paper-tab[aria-label='VOITURE’] ha-icon::before,
      paper-tab[aria-label='Blonay'] ha-icon::before,
      paper-tab[aria-label='Eclairage B'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees B'] ha-icon::before,
      paper-tab[aria-label='Nettoyage B'] ha-icon::before,
      paper-tab[aria-label='Chauffage B’] ha-icon::before,
      paper-tab[aria-label='Scénarios B’] ha-icon::before,
      paper-tab[aria-label='Stores B’] ha-icon::before,
      paper-tab[aria-label='cameras-blonay’] ha-icon::before,
      paper-tab[aria-label='Radios B’] ha-icon::before,
      paper-tab[aria-label='Sophrologie B’] ha-icon::before,
      paper-tab[aria-label='Multimédia B’] ha-icon::before,
      paper-tab[aria-label='Voiture B’] ha-icon::before,{
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 42px;
        width: 42px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }
      paper-tab[aria-label='Belmont'] ha-icon::before {
        background: url("/local/images/Belmont_11.png");
      }
      paper-tab[aria-label=‘Eclairage'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='chauffage belmont’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='SCENARIOS’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");     
      }
      paper-tab[aria-label='STORES’] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='RADIOS’] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='sophe_belmont’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
       }
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='VOITURE’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='Blonay'] ha-icon::before {
        background: url("/local/images/Blonay_11.png");
      }
      paper-tab[aria-label=‘Eclairage B'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees B'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='Nettoyage B’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='Chauffage B’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='Scénarios B’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='Stores B’] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='Radios B’] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='Sophrologie B’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
      }
      paper-tab[aria-label='Multimédia B’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='Voiture B’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

WarC0zes · Janvier 19, 2025, 9:39

mike413muo:

      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }

Normal, tu n’as pas configuré, c’est partie. Il faut y ajouter tous les onglets que tu as configurés plus haut.

mike413muo · Janvier 19, 2025, 9:49

j’ai modifié mais les icones n’apparaissement toujours pas

mike-theme1:
  # Global
  background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/basnijholt/lovelace-ios-themes@a37376d918fcfe4785be99910dc9a7200ac37da9/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: rgba(142, 142, 147, 0.3)  # from Apple systemGray light mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#464a47"
  secondary-text-color: "#000000"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: var(--light-primary-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#8e8e93"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#007aff"  # from Apple systemBlue light mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 149, 9, 0.7)  # from Apple systemOrange light mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: rgba(245, 245, 245, 0.4)
  paper-card-background-color: var(--ha-card-background)
  rgb-card-background-color: rgb(245, 245, 245) # see https://github.com/basnijholt/lovelace-ios-themes/issues/60
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#34c759"  # from Apple systemGreen light mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(200, 200, 200, 0.8)  # e.g., background of more-info
  paper-item-icon-color: "#333333"  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(230, 230, 230, 0.5)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(48, 69, 124, 0.4)
  markdown-code-background-color: "#FFFFFF"
  code-editor-background-color: "#FFF"
  clear-background-color: var(--ha-card-background)  # see https://github.com/basnijholt/lovelace-ios-themes/issues/64
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='choix-du-domicile1']: &ref_tab_style
    paper-tab[aria-label='Belmont']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees']: *ref_tab_style
    paper-tab[aria-label='chauffage belmont’]: *ref_tab_style
    paper-tab[aria-label='NETTOYAGE']: *ref_tab_style
    paper-tab[aria-label='STORES']: *ref_tab_style
    paper-tab[aria-label='Cameras']: *ref_tab_style
    paper-tab[aria-label='RADIOS']: *ref_tab_style
    paper-tab[aria-label='SCENARIOS’]: *ref_tab_style
    paper-tab[aria-label='sophe_belmont’]: *ref_tab_style
    paper-tab[aria-label='MULTIMEDIA’]: *ref_tab_style
    paper-tab[aria-label='VOITURE’]: *ref_tab_style
    paper-tab[aria-label='Blonay']: *ref_tab_style
    paper-tab[aria-label=‘Eclairage B']: *ref_tab_style
    paper-tab[aria-label=‘Prises Pilotees B']: *ref_tab_style
    paper-tab[aria-label='Nettoyage B’]: *ref_tab_style
    paper-tab[aria-label='Chauffage B']: *ref_tab_style
    paper-tab[aria-label='Scénarios B’]: *ref_tab_style
    paper-tab[aria-label='Stores B’]: *ref_tab_style
    paper-tab[aria-label='Radios B’]: *ref_tab_style
    paper-tab[aria-label='Sophrologie B’]: *ref_tab_style
    paper-tab[aria-label='Multimédia B’]: *ref_tab_style
    paper-tab[aria-label='Voiture B’]: *ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    
    .: |

      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before,
      paper-tab[aria-label='Belmont'] ha-icon::before,
      paper-tab[aria-label='Eclairage'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees'] ha-icon::before,
      paper-tab[aria-label='chauffage belmont’] ha-icon::before,
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before,
      paper-tab[aria-label='STORES’] ha-icon::before,
      paper-tab[aria-label='cameras-belmont’] ha-icon::before,
      paper-tab[aria-label=‘RADIOS’] ha-icon::before,
      paper-tab[aria-label='SCENARIOS’] ha-icon::before,
      paper-tab[aria-label='sophe_belmont’] ha-icon::before,
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before,
      paper-tab[aria-label='VOITURE’] ha-icon::before,
      paper-tab[aria-label='Blonay'] ha-icon::before,
      paper-tab[aria-label='Eclairage B'] ha-icon::before,
      paper-tab[aria-label='Prises Pilotees B'] ha-icon::before,
      paper-tab[aria-label='Nettoyage B'] ha-icon::before,
      paper-tab[aria-label='Chauffage B’] ha-icon::before,
      paper-tab[aria-label='Scénarios B’] ha-icon::before,
      paper-tab[aria-label='Stores B’] ha-icon::before,
      paper-tab[aria-label='cameras-blonay’] ha-icon::before,
      paper-tab[aria-label='Radios B’] ha-icon::before,
      paper-tab[aria-label='Sophrologie B’] ha-icon::before,
      paper-tab[aria-label='Multimédia B’] ha-icon::before,
      paper-tab[aria-label='Voiture B’] ha-icon::before,{
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 42px;
        width: 42px;
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon::before {
        background: url("/local/images/Home assistant_p.png");
      }
      paper-tab[aria-label='Belmont'] ha-icon::before {
        background: url("/local/images/Belmont_11.png");
      }
      paper-tab[aria-label=‘Eclairage'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='NETTOYAGE’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='chauffage belmont’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='SCENARIOS’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");     
      }
      paper-tab[aria-label='STORES’] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='RADIOS’] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='sophe_belmont’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
       }
      paper-tab[aria-label='MULTIMEDIA’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='VOITURE’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='Blonay'] ha-icon::before {
        background: url("/local/images/Blonay_11.png");
      }
      paper-tab[aria-label=‘Eclairage B'] ha-icon::before {
        background: url("/local/images/eclairage_i.png");
      }
      paper-tab[aria-label=‘Prises Pilotees B'] ha-icon::before {
        background: url("/local/images/prise pilotees_i.png");
      }
      paper-tab[aria-label='Nettoyage B’] ha-icon::before {
        background: url("/local/images/nettoyage_i.png");
      }
      paper-tab[aria-label='Chauffage B’] ha-icon::before {
        background: url("/local/images/chauffage_i.png");
      }
      paper-tab[aria-label='Scénarios B’] ha-icon::before {
        background: url("/local/images/scenarios_i.png");
      }
      paper-tab[aria-label='Stores B’] ha-icon::before {
        background: url("/local/images/stores_i.png");
      }
      paper-tab[aria-label='Radios B’] ha-icon::before {
        background: url("/local/images/radio_i.png");
      }
      paper-tab[aria-label='Sophrologie B’] ha-icon::before {
        background: url("/local/images/sophrologie_i.png");
      }
      paper-tab[aria-label='Multimédia B’] ha-icon::before {
        background: url("/local/images/multimedia_i.png");
      }
      paper-tab[aria-label='Voiture B’] ha-icon::before {
        background: url("/local/images/voiture_i.png");
      }
      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

et à la base j’avais utilisé cela venant de toi qui est la même chose à mon avis

mobile:
  card-mod-theme: mike-theme
  card-mod-root-yaml: |
    paper-tab[aria-label='onglet_1']: &ref_tab_style
      $: |
        .tab-content {
          opacity: 1 !important;
        }
      ha-icon $: |
        ha-svg-icon {
          display: none !important;
        }
    paper-tab[aria-label='onglet_2']: *ref_tab_style
    paper-tab[aria-label='onglet_3']: *ref_tab_style
    paper-tab[aria-label='onglet_4’]: *ref_tab_style
    paper-tab[aria-label='onglet_5']: *ref_tab_style
    paper-tab[aria-label='onglet_6’]: *ref_tab_style
    paper-tab[aria-label='onglet_7’]: *ref_tab_style
    paper-tab[aria-label='onglet_8’]: *ref_tab_style
    paper-tab[aria-label='onglet_9’]: *ref_tab_style

    .: |

      paper-tab[aria-label='onglet_1'] ha-icon::before,
      paper-tab[aria-label='onglet_2'] ha-icon::before,
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        content: "-";
        color: transparent;
        background-size: 100% 100% !important;
        height: 32px;
        width: 32px;
      }
      paper-tab[aria-label='onglet_1'] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_2'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }
      paper-tab[aria-label='onglet_3'] ha-icon::before {
        background: url("/local/images/onglet_2.png");
      }
      paper-tab[aria-label='onglet_4’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_5’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_6’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_7’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
       }
      paper-tab[aria-label='onglet_8’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_9’] ha-icon::before {
        background: url("/local/images/onglet_1.png");
      }
      paper-tab[aria-label='onglet_1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

WarC0zes · Janvier 19, 2025, 9:53

Tu n’as pas compris, le code de ce thème est bon :

Mais à la fin du code, il te manque à configurer les autres onglets, que tu as déclaré plus haut.

mike413muo:

      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='onglet_2'] ha-icon,
      paper-tab[aria-label='onglet_3'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}

exemple :

      paper-tab[aria-label='choix-du-domicile1'] ha-icon,
      paper-tab[aria-label='Belmont'] ha-icon,
      paper-tab[aria-label='Eclairage'] ha-icon,
      paper-tab[aria-label='Prises Pilotees'] ha-icon {
        display: contents;
      }
  modes:
    light: {}
    dark: {}