waves:
  modes:
    dark:
      #Fonts
      primary-font-family: "Ubuntu,sans-serif"
      secondary-font-family: "Oxygen,sans-serif"
      paper-font-common-base_-_font-family: "var(--secondary-font-family)"
      paper-font-common-code_-_font-family: "var(--secondary-font-family)"
      paper-font-body1_-_font-family: "var(--secondary-font-family)"
      paper-font-subhead_-_font-family: "var(--secondary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--secondary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      ha-card-header-font-family: "var(--primary-font-family)"

      # Change the value below 6px to 0px to remove the rounded corners
      ha-card-border-radius: 6px
      # Place the backgrounds in the folder  /config/www/waves/
      background-image: "center / cover no-repeat url('/local/waves/background.png') fixed"
      lovelace-background: var(--background-image)
      # Main colors
      primary-color: rgba(41, 128, 185, 1)
      secondary-color: rgba(40, 62, 84, 1)
      light-primary-color: rgba(206, 206, 206, 1)
      accent-color: rgba(33, 135, 204, 1)
      graph-color: var(--primary-color)
      primary-background-color: rgba(34, 53, 72, 1)
      secondary-background-color: var(--primary-background-color)
      divider-color: rgba(34, 53, 72, 1)
      disabled-color: rgba(232, 233, 243, 1)
      # Text colors
      primary-text-color: rgba(206, 206, 206, 1)
      text-primary-color: rgba(229, 229, 229, 1)
      secondary-text-color: rgba(186, 192, 198, 1)
      text-medium-light-color: rgba(160, 162, 168, 1)
      text-medium-color: rgba(128, 130, 138, 1)
      disabled-text-color: rgba(98, 101, 105, 1)
      error-color: rgba(231, 76, 60, 1)
      success-color: rgba(46, 204, 113, 1)
      info-color: rgba(155, 89, 182, 1)
      warning-color: rgba(243, 156, 18, 1)
      # Sidebar colors
      sidebar-background-color: rgba(34, 53, 72, 1)
      sidebar-icon-color: var(--light-primary-color)
      sidebar-text-color: var(--primary-text-color)
      sidebar-selected-background-color: var(--secondary-color)
      sidebar-selected-icon-color: var(--primary-color)
      sidebar-selected-text-color: var(--primary-text-color)
      # App Header
      app-header-background-color: rgba(34, 53, 72, 1)
      app-header-icon-color: var(--light-primary-color)
      app-header-text-color: var(--primary-text-color)
      app-header-selection-bar-color: var(--primary-color)
      app-header-selection-color: var(--secondar-color)
      # Icons colors
      state-icon-color: var(--disabled-color)
      state-icon-active-color: var(--primary-color)
      state-icon-unavailable-color: var(--primary-background-color)
      # Fix for 2023.01.25 and higher.
      state-cover-open-color: var(--primary-color)
      state-cover-opening-color: var(--primary-color)
      state-cover-closing-color: var(--primary-color)
      state-light-color: var(--primary-color)
      state-light-on-color: var(--primary-color)
      state-remote-on-color: var(--primary-color)
      state-switch-on-color: var(--primary-color)
      # Settins and colors of Mini Media Player
      mini-media-player-icon-color: var(--primary-color)
      mini-media-player-accent-color: var(--primary-color)
      mini-media-player-progress-height: 8px
      # Papers slider colors
      paper-slider-knob-color: var(--primary-color)
      paper-slider-knob-start-color: var(--paper-slider-knob-color)
      paper-slider-pin-color: var(--paper-slider-knob-color)
      paper-slider-active-color: var(--paper-slider-knob-color)
      paper-slider-container-color: var(--disabled-color)
      # Labels colors
      label-badge-background-color: var(--accent-color)
      label-badge-text-color: var(--primary-text-color)
      label-badge-red: var(--primary-color)
      label-badge-blue: var(--light-primary-color)
      # Cards colors / border
      ha-card-background: rgba(26, 40, 55, 0.5)
      card-background-color: var(--secondary-background-color)
      paper-card-background-color: var(--ha-card-background)
      paper-listbox-background-color: var(--primary-background-color)
      ha-card-border-width: 0px
      # Toggle button colors
      paper-toggle-button-checked-button-color: var(--primary-color)
      paper-toggle-button-checked-bar-color: var(--light-primary-color)
      paper-toggle-button-unchecked-button-color: var(--disabled-color)
      paper-toggle-button-unchecked-bar-color: var(--primary-background-color)
      # Switch colors
      switch-checked-color: var(--paper-toggle-button-checked-button-color)
      switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
      switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
      switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
      # Table colors
      table-row-background-color: var(--divider-color)
      table-row-alternative-background-color: var(--secondary-color)
      # Animated icons - Place the icons in /config/www/waves/
      weather-icon-clear-night: url("/local/waves/clear-night.svg")
      weather-icon-cloudy: url("/local/waves/cloudy.svg")
      weather-icon-fog: url("/local/waves/fog.svg")
      weather-icon-lightning: url("/local/waves/lightning.svg")
      weather-icon-lightning-rainy: url("/local/waves/lightning-rainy.svg")
      weather-icon-partlycloudy: url("/local/waves/partlycloudy.svg")
      weather-icon-pouring: url("/local/waves/pouring.svg")
      weather-icon-rainy: url("/local/waves/rainy.svg")
      weather-icon-hail: url("/local/waves/hail.svg")
      weather-icon-snowy: url("/local/waves/snowy.svg")
      weather-icon-snowy-rainy: url("/local/waves/snowy-rainy.svg")
      weather-icon-sunny: url("/local/waves/sunny.svg")
      weather-icon-windy: url("/local/waves/windy.svg")
      weather-icon-windy-variant: url("/local/waves/windy-variant.svg")
      weather-icon-exceptional: url("/local/waves/exceptional.svg")
      # Shadown
      ha-card-box-shadow: "0px 0px 3px 0px #0d141c"
      # HACS
      hacs-badge-color: var(--primary-color)
      link-text-color: var(--disabled-color)
      markdown-code-background-color: "#2f3542"
      google-blue-500: var(--primary-color)
      hacs-accent-color: var(--light-primary-color)
      hacs-chip-color: var(--accent-color)
      hacs-error-color: var(--error-color)
      hacs-warning-color: var(--warning-color)
      hacs-update-color: var(--success-color)
      hacs-new-color: var(--info-color)
      # Code Editor
      code-editor-background-color: "#2f3542"
      codemirror-property: "#16a085"
      mdc-text-field-fill-color: var(--primary-background-color)
      mdc-text-field-ink-color: var(--primary-text-color)
      mdc-text-field-label-ink-color: var(--primary-text-color)
      input-fill-color: var(--primary-background-color)
      input-ink-color: var(--primary-text-color)
      input-label-ink-color: var(--primary-text-color)
      input-disabled-fill-color: var(--primary-background-color)
      input-disabled-ink-color: var(--disabled-text-color)
      input-disabled-label-ink-color: var(--disabled-text-color)
      input-idle-line-color: var(--primary-background-color)
      input-dropdown-icon-color: var(--primary-text-color)
      input-hover-line-color: var(--primary-color)

    light:
      #Fonts
      primary-font-family: "Ubuntu,sans-serif"
      secondary-font-family: "Oxygen,sans-serif"
      paper-font-common-base_-_font-family: "var(--secondary-font-family)"
      paper-font-common-code_-_font-family: "var(--secondary-font-family)"
      paper-font-body1_-_font-family: "var(--secondary-font-family)"
      paper-font-subhead_-_font-family: "var(--secondary-font-family)"
      paper-font-headline_-_font-family: "var(--primary-font-family)"
      paper-font-caption_-_font-family: "var(--secondary-font-family)"
      paper-font-title_-_font-family: "var(--primary-font-family)"
      ha-card-header-font-family: "var(--primary-font-family)"

      # Change the value below 6px to 0px to remove the rounded corners
      ha-card-border-radius: 6px
      # Place the backgrounds in the folder  config/www/waves
      background-image: "center / cover no-repeat url('/local/waves/background-light.png') fixed"
      lovelace-background: var(--background-image)
      # Main colors
      primary-color: rgba(41, 128, 185, 1)
      secondary-color: rgba(52, 152, 219, 1)
      light-primary-color: rgba(236, 240, 241, 1)
      accent-color: rgba(33, 135, 204, 1)
      graph-color: var(--primary-color)
      primary-background-color: var(--light-primary-color)
      secondary-background-color: var(--light-primary-color)
      divider-color: var(--light-primary-color)
      disabled-color: rgba(232, 233, 254, 1)
      # Text colors
      primary-text-color: rgba(52, 73, 94,1.0)
      text-primary-color: var(--light-primary-color)
      secondary-text-color: rgba(52, 73, 94,0.7)
      text-medium-light-color: rgba(149, 165, 166,0.5)
      text-medium-color: rgba(149, 165, 166,1.0)
      disabled-text-color: var(--secondary-text-color)
      error-color: rgba(231, 76, 60,1.0)
      success-color: rgba(46, 204, 113,1.0)
      info-color: rgba(155, 89, 182,1.0)
      warning-color: rgba(230, 126, 34,1.0)
      # Sidebar colors
      sidebar-background-color: var(--light-primary-color)
      sidebar-icon-color: var(--primary-color)
      sidebar-text-color: var(--primary-color)
      sidebar-selected-background-color: var(--secondary-color)
      sidebar-selected-icon-color: var(--primary-color)
      sidebar-selected-text-color: var(--primary-text-color)
      # App Header
      app-header-background-color: var(--primary-color)
      app-header-icon-color: var(--light-primary-color)
      app-header-text-color: var(--light-primary-color)
      app-header-selection-bar-color: var(--primary-color)
      app-header-selection-color: var(--primary-text-color)
      # Icons colors
      state-icon-color: var(--disabled-color)
      state-icon-active-color: var(--secondary-color)
      state-icon-unavailable-color: var(--light-primary-color)
      # Fix for 2023.01.25 and higher.
      state-cover-open-color: var(--primary-color)
      state-cover-opening-color: var(--primary-color)
      state-cover-closing-color: var(--primary-color)
      state-light-color: var(--primary-color)
      state-light-on-color: var(--primary-color)
      state-remote-on-color: var(--primary-color)
      state-switch-on-color: var(--primary-color)
      # Settins and colors of Mini Media Player
      mini-media-player-icon-color: var(--primary-color)
      mini-media-player-accent-color: var(--primary-color)
      mini-media-player-progress-height: 12px
      # Papers slider colors
      paper-slider-knob-color: var(--primary-color)
      paper-slider-knob-start-color: var(--paper-slider-knob-color)
      paper-slider-pin-color: var(--paper-slider-knob-color)
      paper-slider-active-color: var(--paper-slider-knob-color)
      paper-slider-container-color: var(--disabled-color)
      # Labels colors
      label-badge-background-color: var(--accent-color)
      label-badge-text-color: var(--primary-text-color)
      label-badge-red: var(--primary-color)
      label-badge-blue: var(--light-primary-color)
      # Cards colors / border
      ha-card-background: rgba(236, 240, 241,0.7)
      card-background-color: var(--secondary-background-color)
      paper-card-background-color: var(--ha-card-background)
      paper-listbox-background-color: var(--ha-card-background)
      paper-item-icon-color: var(--primary-text-color)
      ha-card-border-width: 0px
      # Toggle button colors
      paper-toggle-button-checked-button-color: var(--primary-color)
      paper-toggle-button-checked-bar-color: var(--light-primary-color)
      paper-toggle-button-unchecked-button-color: var(--disabled-color)
      paper-toggle-button-unchecked-bar-color: var(--primary-background-color)
      # Switch colors
      switch-checked-color: var(--paper-toggle-button-checked-button-color)
      switch-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color)
      switch-unchecked-color: var(--paper-toggle-button-unchecked-bar-color)
      switch-unchecked-track-color: var(--paper-toggle-button-unchecked-bar-color)
      # Table colors
      table-row-background-color: var(--divider-color)
      table-row-alternative-background-color: rgba(189, 195, 199,0.15)
      # Animated icons - Place the icons in /config/www/waves/
      weather-icon-clear-night: url("/local/waves/clear-night.svg")
      weather-icon-cloudy: url("/local/waves/cloudy.svg")
      weather-icon-fog: url("/local/waves/fog.svg")
      weather-icon-lightning: url("/local/waves/lightning.svg")
      weather-icon-lightning-rainy: url("/local/waves/lightning-rainy.svg")
      weather-icon-partlycloudy: url("/local/waves/partlycloudy.svg")
      weather-icon-pouring: url("/local/waves/pouring.svg")
      weather-icon-rainy: url("/local/waves/rainy.svg")
      weather-icon-hail: url("/local/waves/hail.svg")
      weather-icon-snowy: url("/local/waves/snowy.svg")
      weather-icon-snowy-rainy: url("/local/waves/snowy-rainy.svg")
      weather-icon-sunny: url("/local/waves/sunny.svg")
      weather-icon-windy: url("/local/waves/windy.svg")
      weather-icon-windy-variant: url("/local/waves/windy-variant.svg")
      weather-icon-exceptional: url("/local/waves/exceptional.svg")
      # Shadown
      ha-card-box-shadow: "inset 0px 0px 0px 0px var(--divider-color)"
      # HACS
      hacs-badge-color: var(--primary-color)
      link-text-color: var(--hacs-chip-color)
      google-blue-500: var(--primary-color)
      hacs-accent-color: var(--light-primary-color)
      hacs-chip-color: var(--accent-color)
      hacs-error-color: var(--error-color)
      hacs-warning-color: var(--warning-color)
      hacs-update-color: var(--success-color)
      hacs-new-color: var(--hacs-chip-color)
      # Code Editor
      code-editor-background-color: var(--light-primary-color)
      codemirror-property: "#16a085"
      mdc-text-field-fill-color: var(--primary-background-color)
      mdc-text-field-ink-color: var(--primary-text-color)
      mdc-text-field-label-ink-color: var(--primary-text-color)
      input-fill-color: var(--primary-background-color)
      input-ink-color: var(--primary-text-color)
      input-label-ink-color: var(--primary-text-color)
      input-disabled-fill-color: var(--primary-background-color)
      input-disabled-ink-color: var(--disabled-text-color)
      input-disabled-label-ink-color: var(--disabled-text-color)
      input-idle-line-color: var(--primary-background-color)
      input-dropdown-icon-color: var(--primary-text-color)
      input-hover-line-color: var(--primary-color)
      # Misc
      scrollbar-thumb-color: var(--app-header-background-color)