diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..0324d6f Binary files /dev/null and b/.DS_Store differ diff --git a/themes/google_theme.yaml b/themes/google_theme.yaml old mode 100644 new mode 100755 index 05e2533..79bde99 --- a/themes/google_theme.yaml +++ b/themes/google_theme.yaml @@ -1,181 +1,182 @@ -# Theme based on Google light and dark modem UI -# Creator: Juan - @juanmtech -# Website: https://www.juanmtech.com -# YouTube Channel: https://youtube.com/juanmtech -# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files -# -# -Google Theme: - modes: - light: - # Header: - app-header-background-color: rgb(248, 248, 248) - app-header-text-color: rgb(95, 99, 104) - # Main Interface Colors - primary-color: rgb(26, 115, 232) - light-primary-color: var(--primary-color) - primary-background-color: rgb(248, 248, 248) - secondary-background-color: rgb(230, 230, 230) - divider-color: var(--primary-background-color) - accent-color: rgb(26, 115, 232) - # Text - primary-text-color: rgb(32, 33, 36) - secondary-text-color: rgb(95, 99, 104) - text-primary-color: rgb(255, 255, 255) - disabled-text-color: rgba(95, 99, 104, 0.4) - # Sidebar Menu - sidebar-icon-color: rgb(95, 99, 104) - sidebar-text-color: var(--sidebar-icon-color) - sidebar-background-color: rgb(255, 255, 255) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: rgb(26, 115, 232) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # Buttons - paper-item-icon-color: rgb(95, 99, 104) - paper-item-icon-active-color: rgb(26, 115, 232) - # States and Badges - state-icon-color: rgb(26, 115, 232) - state-icon-active-color: rgb(95, 99, 104) - state-icon-unavailable-color: var(--disabled-text-color) - # Sliders - paper-slider-knob-color: rgb(26, 115, 232) - 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-secondary-color: var(--light-primary-color) - # Labels - label-badge-background-color: rgb(248, 250, 249) - label-badge-text-color: rgb(77, 85, 117) - label-badge-red: rgb(199, 72, 76) - label-badge-green: rgb(109, 192, 113) - label-badge-blue: rgb(26, 115, 232) - label-badge-yellow: rgb(217, 183, 87) - label-badge-gray: rgb(95, 98, 103) - # Cards - card-background-color: rgb(255, 255, 255) - ha-card-border-radius: "10px" - ha-card-box-shadow: 1px 1px 5px 0px rgb(230, 230, 230) - paper-dialog-background-color: var(--card-background-color) - paper-listbox-background-color: var(--card-background-color) - paper-card-background-color: var(--card-background-color) - # Switches - switch-checked-button-color: rgb(26, 115, 232) - switch-checked-track-color: rgb(26, 115, 232) - switch-unchecked-button-color: rgb(189, 193, 198) - switch-unchecked-track-color: rgb(189, 193, 198) - # Toggles - paper-toggle-button-checked-button-color: var(--switch-checked-button-color) - paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) - paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) - paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) - # Table - table-row-background-color: var(--card-background-color) - table-row-alternative-background-color: var(--primary-background-color) - data-table-background-color: var(--primary-background-color) - # Dropdowns - material-background-color: var(--card-background-color) - material-secondary-background-color: var(--primary-background-color) - mdc-theme-surface: var(--primary-background-color) - # Pre/Code - markdown-code-background-color: rgb(242, 242, 242) - # Checkboxes - mdc-select-fill-color: rgb(255, 255, 255) - mdc-select-ink-color: var(--primary-text-color) - mdc-select-label-ink-color: var(--secondary-text-color) - mdc-select-idle-line-color: var(--primary-text-color) - mdc-select-dropdown-icon-color: var(--secondary-text-color) - mdc-select-hover-line-color: var(--accent-color) - # Input - input-fill-color: var(--secondary-background-color) - input-dropdown-icon-color: var(--secondary-text-color) - input-ink-color: var(--primary-text-color) - input-label-ink-color: var(--secondary-text-color) - input-idle-line-color: var(--primary-text-color) - input-hover-line-color: var(--accent-color) -# - dark: - # Header: - app-header-background-color: rgb(23, 23, 23) - app-header-text-color: rgb(198, 203, 210) - # Main Interface Colors - primary-color: rgb(138, 180, 248) - light-primary-color: var(--primary-color) - primary-background-color: rgb(23, 23, 23) - secondary-background-color: rgb(32, 33, 36) - divider-color: var(--primary-background-color) - accent-color: rgb(138, 180, 248) - # Text - primary-text-color: rgb(242, 242, 242) - secondary-text-color: rgb(166, 166, 166) - text-primary-color: var(--primary-text-color) - disabled-text-color: rgba(184, 190, 199, 0.4) - # Sidebar Menu - sidebar-icon-color: rgb(169, 177, 188) - sidebar-text-color: rgb(198, 203, 210) - sidebar-background-color: rgb(32, 33, 36) - sidebar-selected-background-color: var(--primary-background-color) - sidebar-selected-icon-color: rgb(138, 180, 248) - sidebar-selected-text-color: var(--sidebar-selected-icon-color) - # Buttons - paper-item-icon-color: rgb(169, 177, 188) - paper-item-icon-active-color: rgb(138, 180, 248) - # States and Badges - state-icon-color: rgb(138, 180, 248) - state-icon-active-color: rgb(169, 177, 188) - state-icon-unavailable-color: var(--disabled-text-color) - # Sliders - paper-slider-knob-color: rgb(138, 180, 248) - 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-secondary-color: var(--light-primary-color) - # Labels - label-badge-background-color: rgb(32, 33, 36) - label-badge-text-color: rgb(198, 203, 210) - label-badge-red: rgb(208, 101, 104) - label-badge-green: rgb(128, 200, 132) - label-badge-blue: rgb(138, 180, 248) - label-badge-yellow: rgb(223, 194, 113) - label-badge-gray: rgb(95, 98, 103) - # Cards - card-background-color: rgb(32, 33, 36) - ha-card-border-radius: "10px" - ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 12, 14) - paper-dialog-background-color: var(--card-background-color) - paper-listbox-background-color: var(--card-background-color) - paper-card-background-color: var(--card-background-color) - # Switches - switch-checked-button-color: rgb(138, 180, 248) - switch-checked-track-color: rgb(138, 180, 248) - switch-unchecked-button-color: rgb(172, 176, 185) - switch-unchecked-track-color: rgb(154, 160, 166) - # Toggles - paper-toggle-button-checked-button-color: var(--switch-checked-button-color) - paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) - paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) - paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) - # Table - table-row-background-color: var(--primary-background-color) - table-row-alternative-background-color: var(--secondary-background-color) - data-table-background-color: var(--primary-background-color) - mdc-checkbox-unchecked-color: rgb(169, 177, 188) - # Dropdowns - material-background-color: var(--secondary-background-color) - material-secondary-background-color: var(--primary-background-color) - mdc-theme-surface: var(--primary-background-color) - # Pre/Code - markdown-code-background-color: rgb(23, 23, 23) - # Checkboxes - mdc-select-fill-color: rgb(32, 33, 36) - mdc-select-ink-color: var(--primary-text-color) - mdc-select-label-ink-color: var(--secondary-text-color) - mdc-select-idle-line-color: var(--primary-text-color) - mdc-select-dropdown-icon-color: var(--secondary-text-color) - mdc-select-hover-line-color: var(--accent-color) - # Input - input-fill-color: var(--secondary-background-color) - input-dropdown-icon-color: var(--secondary-text-color) - input-ink-color: var(--primary-text-color) - input-label-ink-color: var(--secondary-text-color) - input-idle-line-color: var(--primary-text-color) +# Theme based on Google light and dark modem UI +# Creator: Juan - @juanmtech +# Website: https://www.juanmtech.com +# YouTube Channel: https://youtube.com/juanmtech +# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files +# +# +Google Theme: + modes: + light: + # Header: + app-header-background-color: rgb(248, 248, 248) + app-header-text-color: rgb(95, 99, 104) + # Main Interface Colors + primary-color: rgb(26, 115, 232) + light-primary-color: var(--primary-color) + primary-background-color: rgb(248, 248, 248) + secondary-background-color: rgb(230, 230, 230) + divider-color: var(--primary-background-color) + accent-color: rgb(26, 115, 232) + # Text + primary-text-color: rgb(32, 33, 36) + secondary-text-color: rgb(95, 99, 104) + text-primary-color: rgb(255, 255, 255) + disabled-text-color: rgba(95, 99, 104, 0.4) + # Sidebar Menu + sidebar-icon-color: rgb(95, 99, 104) + sidebar-text-color: var(--sidebar-icon-color) + sidebar-background-color: rgb(255, 255, 255) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: rgb(26, 115, 232) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(95, 99, 104) + paper-item-icon-active-color: rgb(26, 115, 232) + # States and Badges + state-icon-color: rgb(26, 115, 232) + state-icon-active-color: rgb(95, 99, 104) + state-icon-unavailable-color: var(--disabled-text-color) + # Sliders + paper-slider-knob-color: rgb(26, 115, 232) + 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-secondary-color: var(--light-primary-color) + # Labels + label-badge-background-color: rgb(248, 250, 249) + label-badge-text-color: rgb(77, 85, 117) + label-badge-red: rgb(199, 72, 76) + label-badge-green: rgb(109, 192, 113) + label-badge-blue: rgb(26, 115, 232) + label-badge-yellow: rgb(217, 183, 87) + label-badge-gray: rgb(95, 98, 103) + # Cards + card-background-color: rgb(255, 255, 255) + ha-card-background: rgb(255, 255, 255) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(26, 115, 232) + switch-checked-track-color: rgb(26, 115, 232) + switch-unchecked-button-color: rgb(189, 193, 198) + switch-unchecked-track-color: rgb(189, 193, 198) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: var(--card-background-color) + table-row-alternative-background-color: var(--primary-background-color) + data-table-background-color: var(--primary-background-color) + # Dropdowns + material-background-color: var(--card-background-color) + material-secondary-background-color: var(--primary-background-color) + mdc-theme-surface: var(--primary-background-color) + # Pre/Code + markdown-code-background-color: rgb(242, 242, 242) + # Checkboxes + mdc-select-fill-color: rgb(255, 255, 255) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: var(--secondary-text-color) + mdc-select-hover-line-color: var(--accent-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) + input-hover-line-color: var(--accent-color) +# + dark: + # Header: + app-header-background-color: rgb(23, 23, 23) + app-header-text-color: rgb(198, 203, 210) + # Main Interface Colors + primary-color: rgb(138, 180, 248) + light-primary-color: var(--primary-color) + primary-background-color: rgb(23, 23, 23) + secondary-background-color: rgb(32, 33, 36) + divider-color: var(--primary-background-color) + accent-color: rgb(138, 180, 248) + # Text + primary-text-color: rgb(242, 242, 242) + secondary-text-color: rgb(166, 166, 166) + text-primary-color: var(--primary-text-color) + disabled-text-color: rgba(184, 190, 199, 0.4) + # Sidebar Menu + sidebar-icon-color: rgb(169, 177, 188) + sidebar-text-color: rgb(198, 203, 210) + sidebar-background-color: rgb(32, 33, 36) + sidebar-selected-background-color: var(--primary-background-color) + sidebar-selected-icon-color: rgb(138, 180, 248) + sidebar-selected-text-color: var(--sidebar-selected-icon-color) + # Buttons + paper-item-icon-color: rgb(169, 177, 188) + paper-item-icon-active-color: rgb(138, 180, 248) + # States and Badges + state-icon-color: rgb(138, 180, 248) + state-icon-active-color: rgb(169, 177, 188) + state-icon-unavailable-color: var(--disabled-text-color) + # Sliders + paper-slider-knob-color: rgb(138, 180, 248) + 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-secondary-color: var(--light-primary-color) + # Labels + label-badge-background-color: rgb(32, 33, 36) + label-badge-text-color: rgb(198, 203, 210) + label-badge-red: rgb(208, 101, 104) + label-badge-green: rgb(128, 200, 132) + label-badge-blue: rgb(138, 180, 248) + label-badge-yellow: rgb(223, 194, 113) + label-badge-gray: rgb(95, 98, 103) + # Cards + card-background-color: rgb(32, 33, 36) + ha-card-border-color: none + ha-card-border-width: 0px + paper-dialog-background-color: var(--card-background-color) + paper-listbox-background-color: var(--card-background-color) + paper-card-background-color: var(--card-background-color) + # Switches + switch-checked-button-color: rgb(138, 180, 248) + switch-checked-track-color: rgb(138, 180, 248) + switch-unchecked-button-color: rgb(172, 176, 185) + switch-unchecked-track-color: rgb(154, 160, 166) + # Toggles + paper-toggle-button-checked-button-color: var(--switch-checked-button-color) + paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) + paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) + paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) + # Table + table-row-background-color: var(--primary-background-color) + table-row-alternative-background-color: var(--secondary-background-color) + data-table-background-color: var(--primary-background-color) + mdc-checkbox-unchecked-color: rgb(169, 177, 188) + # Dropdowns + material-background-color: var(--secondary-background-color) + material-secondary-background-color: var(--primary-background-color) + mdc-theme-surface: var(--primary-background-color) + # Pre/Code + markdown-code-background-color: rgb(23, 23, 23) + # Checkboxes + mdc-select-fill-color: rgb(32, 33, 36) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--secondary-text-color) + mdc-select-idle-line-color: var(--primary-text-color) + mdc-select-dropdown-icon-color: var(--secondary-text-color) + mdc-select-hover-line-color: var(--accent-color) + # Input + input-fill-color: var(--secondary-background-color) + input-dropdown-icon-color: var(--secondary-text-color) + input-ink-color: var(--primary-text-color) + input-label-ink-color: var(--secondary-text-color) + input-idle-line-color: var(--primary-text-color) input-hover-line-color: var(--accent-color) \ No newline at end of file