# Bubble Light & Dark v1.2

# Noctis from aFFekopp was my initial theme (thanks dude!)
# Bubble is a modified one and is maintained by Clooos
# Added a split between light and dark themes for automatic change 

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

      # Text
      text-color: "#ffffff"
      primary-text-color: "var(--text-color)"
      text-primary-color: "var(--text-color)"
      sidebar-text-color: "var(--text-color)"
      pbs-button-color: "var(--text-color)"
      pbs-button-rgb-color: "var(--text-color)"
      pbs-button-rgb-state-color: "var(--text-color)"
      pbs-button-rgb-default-color: "var(--text-color)"
      rgb-state-default-color: "var(--text-color)"
      pbs-button-rgb-fallback: "var(--text-color)"
      secondary-text-color: "rgb(244, 238, 224)" #'rgb(193 211 170)' #"#BAC0C6"
      text-medium-light-color: "#A0A2A8"
      text-medium-color: "#80828A"
      disabled-text-color: "#626569"
      primary-color: "var(--accent-color)"

      # Text Fields an Dropdown
      mdc-text-field-fill-color: "var(--background-color)"
      mdc-text-field-ink-color: "var(--text-color)"
      mdc-select-fill-color: "var(--background-color)"
      mdc-text-field-label-ink-color: "var(--secondary-text-color)"
      input-fill-color: "var(--background-color)"
      input-ink-color: "var(--text-color)"
      input-label-ink-color: "var(--text-color)"
      input-disabled-fill-color: "var(--background-color)"
      input-disabled-ink-color: "var(--disabled-text-color)"
      input-disabled-label-ink-color: "var(--disabled-text-color)"
      input-idle-line-color: "var(--background-color)"
      input-dropdown-icon-color: "var(--secondary-text-color)"
      input-hover-line-color: "var(--primary-color)"
      code-editor-background-color: "#222c40"
      codemirror-property: "var(--accent-color)"

      # Main Colors
      app-header-background-color: "var(--background-color)" #'#242e42'
      accent-color: "rgb(80, 110, 172)"
      accent-medium-color: "var(--accent-color)"

      # Background
      background-color: "rgba(57, 54, 70, 1)" #'rgb(23, 24, 26)'
      primary-background-color: "var(--background-color)"
      background-color-2: "rgb(92, 83, 103)" #'#2e4a74'
      secondary-background-color: "var(--background-color-2)"
      markdown-code-background-color: "var(--background-color)"

      # Card
      card-background-color: "var(--ha-card-background)"
      ha-card-background: "rgba(79, 69, 87, 1)" #'rgb(36, 37, 41)'
      ha-card-box-shadow: "none"
      ha-card-border-radius: "28px"
      ha-card-border-style: "solid"
      ha-card-border-width: "0px"
      ha-card-border-color: "none"
      border-color: "none"
      grid-card-gap: "18px"
      horizontal-stack-card-margin: "0 10px"
      border-style: "none"
      ha-card-background-active: "rgba(103,114,209, 0.4) radial-gradient(at bottom, rgba(103,114,209, 0.5) 0%, rgba(103,114,209, 0) 70%)"
      control-button-border-radius: "50px"
      control-button-background-color: "var(--ha-card-background)"

      # Icons
      paper-item-icon-color: "var(--text-color)"
      paper-item-icon-active-color: "var(--accent-color)"

      # Sidebar
      sidebar-background-color: "var(--background-color)"
      sidebar-icon-color: "#98a7b9"
      sidebar-selected-icon-color: "var(--accent-color)"
      sidebar-selected-text-color: "var(--text-color)"
      paper-listbox-background-color: "var(--sidebar-background-color)"
      divider-color: "var(--background-color)"
      light-primary-color: "var(--ha-card-background)"

      # Sliders
      paper-slider-knob-color: "var(--accent-color)"
      paper-slider-pin-color: "var(--background-color-2)"
      paper-slider-active-color: "var(--accent-color)"
      paper-slider-container-color: "var(--background-color-2)"

      # Toggle:
      paper-toggle-button-checked-bar-color: "var(--accent-color)"
      mdc-theme-primary: "var(--accent-color)"

      # Switch
      switch-unchecked-color: "#70889e"
      switch-checked-button-color: "var(--accent-color)"
      switch-unchecked-track-color: "var(--background-color-2)"
      switch-checked-track-color: "var(--background-color-2)"

      # Radio Button
      paper-radio-button-checked-color: "var(--accent-color)"

      # Popups
      more-info-header-background: "var(--secondary-background-color)"
      paper-dialog-background-color: "var(--background-color)"

      # Tables
      table-row-background-color: "var(--background-color)"
      table-row-alternative-background-color: "var(--ha-card-background)"

      # Badges
      label-badge-background-color: "var(--background-color)"
      label-badge-text-color: "var(--text-primary-color)"
      label-badge-red: "rgba(73,85,108,1)"
      label-badge-blue: "rgba(26,137,245,1)"
      label-badge-green: "rgba(0,202,139,1)"
      label-badge-yellow: "rgba(222,176,107,1)"

      paper-input-container-focus-color: "var(--accent-color)"

      # Custom Header
      ch-background: "var(--background-color)"
      ch-active-tab-color: "var(--accent-color)"
      ch-notification-dot-color: "var(--accent-color)"
      ch-all-tabs-color: "var(--sidebar-icon-color)"
      ch-tab-indicator-color: "var(--accent-color)"

      # Mini Mediaplayer
      mini-media-player-base-color: "var(--text-color)"
      mini-media-player-accent-color: "var(--accent-color)"

      # Alarm
      alarm-color-armed: "rgba(247,53,67,1)"

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

      # Text
      text-color: "#4c4f69"
      primary-text-color: "var(--text-color)"
      text-primary-color: "var(--text-color)"
      sidebar-text-color: "var(--text-color)"
      pbs-button-color: "var(--text-color)"
      pbs-button-rgb-color: "var(--text-color)"
      pbs-button-rgb-state-color: "var(--text-color)"
      pbs-button-rgb-default-color: "var(--text-color)"
      rgb-state-default-color: "var(--text-color)"
      pbs-button-rgb-fallback: "var(--text-color)"
      secondary-text-color: "#5c5f77" #"rgb(244, 238, 224)" #'rgb(193 211 170)' #"#BAC0C6"
      text-medium-light-color: "#6c6f85"
      text-medium-color: "#6c6f85"
      disabled-text-color: "#6c6f85"
      primary-color: "var(--accent-color)"

      # Text Fields an Dropdown
      mdc-text-field-fill-color: "var(--background-color)"
      mdc-text-field-ink-color: "var(--text-color)"
      mdc-select-fill-color: "var(--background-color)"
      mdc-text-field-label-ink-color: "var(--secondary-text-color)"
      input-fill-color: "var(--background-color)"
      input-ink-color: "var(--text-color)"
      input-label-ink-color: "var(--text-color)"
      input-disabled-fill-color: "var(--background-color)"
      input-disabled-ink-color: "var(--disabled-text-color)"
      input-disabled-label-ink-color: "var(--disabled-text-color)"
      input-idle-line-color: "var(--background-color)"
      input-dropdown-icon-color: "var(--secondary-text-color)"
      input-hover-line-color: "var(--primary-color)"
      code-editor-background-color: "#ccd0da"
      codemirror-property: "var(--accent-color)"

      # Main Colors
      app-header-background-color: "var(--background-color)" #'#242e42'
      accent-color: "#e69c9c" #84c3e5
      accent-medium-color: "var(--accent-color)"

      # Background
      background-color: "#eff1f5" #"rgba(57, 54, 70, 1)" #'rgb(23, 24, 26)'
      primary-background-color: "var(--background-color)"
      background-color-2: "#ccd0da" #"rgb(92, 83, 103)" #'#2e4a74'
      secondary-background-color: "none"
      markdown-code-background-color: "var(--background-color)"

      # Card
      card-background-color: "var(--ha-card-background)"
      ha-card-background: "#dce0e8" #"rgba(79, 69, 87, 1)" #'rgb(36, 37, 41)'
      ha-card-box-shadow: "none"
      ha-card-border-radius: "28px"
      ha-card-border-style: "solid !important"
      ha-card-border-width: "1px !important"
      ha-card-border-color: "none !important"
      border-color: "none"
      grid-card-gap: "18px"
      horizontal-stack-card-margin: "0 10px"
      border-style: "none !important"
      ha-card-background-active: "rgba(220, 224, 232, 0.4) radial-gradient(at bottom, rgba(220, 224, 232, 0.5) 0%, rgba(220, 224, 232, 0) 70%)"
      control-button-border-radius: "50px"
      control-button-background-color: "var(--ha-card-background)"

      # Icons
      paper-item-icon-color: "var(--text-color)"
      paper-item-icon-active-color: "var(--accent-color)"

      # Sidebar
      sidebar-background-color: "var(--background-color)"
      sidebar-icon-color: "#ccd0da"
      sidebar-selected-icon-color: "var(--accent-color)"
      sidebar-selected-text-color: "var(--text-color)"
      paper-listbox-background-color: "var(--sidebar-background-color)"
      divider-color: "var(--background-color)"
      light-primary-color: "var(--ha-card-background)"

      # Sliders
      paper-slider-knob-color: "var(--accent-color)"
      paper-slider-pin-color: "var(--background-color-2)"
      paper-slider-active-color: "var(--accent-color)"
      paper-slider-container-color: "var(--background-color-2)"

      # Toggle:
      paper-toggle-button-checked-bar-color: "var(--accent-color)"
      mdc-theme-primary: "var(--accent-color)"

      # Switch
      switch-unchecked-color: "#9ca0b0"
      on: "#6c6f85"
      switch-checked-button-color: "var(--on)"
      switch-unchecked-track-color: "var(--background-color-2)"
      switch-checked-track-color: "var(--background-color-2)"

      # Radio Button
      paper-radio-button-checked-color: "var(--accent-color)"

      # Popups
      more-info-header-background: "var(--secondary-background-color)"
      paper-dialog-background-color: "var(--background-color)"

      # Tables
      table-row-background-color: "var(--background-color)"
      table-row-alternative-background-color: "var(--ha-card-background)"

      # Badges
      label-badge-background-color: "var(--background-color)"
      label-badge-text-color: "var(--text-primary-color)"
      label-badge-red: "rgba(73,85,108,1)"
      label-badge-blue: "rgba(26,137,245,1)"
      label-badge-green: "rgba(0,202,139,1)"
      label-badge-yellow: "rgba(222,176,107,1)"

      paper-input-container-focus-color: "var(--accent-color)"

      # Custom Header
      ch-background: "var(--background-color)"
      ch-active-tab-color: "var(--accent-color)"
      ch-notification-dot-color: "var(--accent-color)"
      ch-all-tabs-color: "var(--sidebar-icon-color)"
      ch-tab-indicator-color: "var(--accent-color)"

      # Mini Mediaplayer
      mini-media-player-base-color: "var(--text-color)"
      mini-media-player-accent-color: "var(--accent-color)"

  card-mod-theme: Bubble

  card-mod-root-yaml: |
    .: |
      @media only screen and (max-width: 768px) {
          .header {
            display: none;
            opacity: 0;
          }
          #view {
            padding-top: 0 !important;
            margin-top: 0 !important;
            height: calc(100vh - env(safe-area-inset-top)) !important;
          }
      }

  card-mod-more-info-yaml: |
    $: |
     .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
     } 
     .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
     }
    .: |
     :host {
        --ha-card-box-shadow: none;
     }
  card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container {
            overflow: hidden;
            /* padding: 6px; */
        }
        @media only screen and (min-width: 768px) {
            .container {
              max-width: 520px;
              margin: auto !important;
              width: -webkit-fill-available;
            }
        }
        #wrapper: |
          $: |
            #progressContainer {
                border-radius: 14px !important;
        }
      .: |
        "#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
            border-radius: 14px !important;
        }

  card-mod-card: |
    ha-card {
      transition: none;
      border-style: none !important;
    }