diff --git a/themes/mrl.yaml b/themes/mrl.yaml new file mode 100644 index 0000000..6bce8db --- /dev/null +++ b/themes/mrl.yaml @@ -0,0 +1,310 @@ +####################### LATTE ####################### +MRL light: + # Colors + text: "#4c4f69" + + subtext1: "#5c5f77" + subtext0: "#6c6f85" + + overlay2: "#7c7f93" + overlay1: "#8c8fa1" + overlay0: "#9ca0b0" + + surface2: "#acb0be" + surface1: "#bcc0cc" + surface0: "#ccd0da" + + base: "#eff1f5" + mantle: "#e6e9ef" + crust: "#dce0e8" + + rosewater: "#dc8a78" + flamingo: "#dd7878" + pink: "#ea76cb" + mauve: "#8839ef" + red: "#d20f39" + maroon: "#e64553" + peach: "#fe640b" + yellow: "#df8e1d" + green: "#40a02b" + teal: "#179299" + sky: "#04a5e5" + sapphire: "#209fb5" + blue: "#1e66f5" + lavender: "#7287fd" + + ########################### + + # Header + app-header-background-color: var(--mantle) + app-header-text-color: var(--text) + + # Main Interface colors + primary-color: var(--blue) + light-primary-color: var(--primary-color) + + primary-background-color: var(--mantle) + secondary-background-color: var(--mantle) + accent-color: var(--yellow) + + # Text + primary-text-color: var(--text) + secondary-text-color: var(--subtext1) + text-primary-color: var(--text) + divider-color: var(--base) + disabled-text-color: var(--overlay0) + text-accent-color: var(--text) + + # Sidebar + sidebar-background-color: var(--crust) + sidebar-selected-background-color: var(--primary-background-color) + + sidebar-icon-color: var(--subtext0) + sidebar-text-color: var(--subtext0) + sidebar-selected-icon-color: var(--mauve) + sidebar-selected-text-color: var(--mauve) + + # Buttons + paper-item-icon-color: var(--subtext0) + paper-item-icon-active-color: var(--primary-color) + + # States and Badges + state-icon-color: var(--lavender) + state-icon-active-color: var(--primary-color) + + state-icon-unavailable-color: var(--disabled-text-color) + + # Sliders + paper-slider-knob-color: var(--blue) + 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(--blue) + + # Labels + label-badge-background-color: var(--surface0) + label-badge-text-color: var(--text) + label-badge-red: var(--red) + label-badge-green: var(--green) + label-badge-blue: var(--blue) + label-badge-yellow: var(--yellow) + label-badge-gray: var(--overlay0) + + # Cards + card-background-color: var(--base) + ha-card-background: var(--card-background-color) + + ha-card-border-radius: "15px" + ha-card-box-shadow: none + paper-dialog-background-color: var(--overlay0) + paper-listbox-background-color: var(--overlay0) + paper-card-background-color: var(--card-background-color) + + # Switches + switch-checked-button-color: var(--green) + switch-checked-track-color: var(--surface0) + switch-unchecked-button-color: rgb(--overlay0) + switch-unchecked-track-color: rgb(--surface0) + # 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: var(--overlay0) + + # Dropdowns + material-background-color: var(--primary-background-color) + material-secondary-background-color: var(--primary-background-color) + mdc-theme-surface: var(--primary-background-color) + + # Pre/Code + markdown-code-background-color: var(--surface0) + + # Checkboxes + mdc-select-fill-color: var(--surface0) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--subtext1) + 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) + + # Toast + paper-toast-background-color: var(--overlay0) + + # Colors + error-color: var(--red) + warning-color: var(--yellow) + success-color: var(--green) + info-color: var(--blue) + + state-on-color: var(--green) + state-off-color: var(--red) + +####################### MRL dark ###################### + +MRL dark: + # Colors + text: "#c6d0f5" + subtext1: "#b5bfe2" + subtext0: "#a5adce" + + overlay2: "#949cbb" + overlay1: "#838ba7" + overlay0: "#737994" + + surface2: "#626880" + surface1: "#51576d" + surface0: "#414559" + + base: "#303446" + mantle: "#292c3c" + crust: "#232634" + + rosewater: "#f2d5cf" + flamingo: "#eebebe" + pink: "#f4b8e4" + mauve: "#ca9ee6" + red: "#e78284" + maroon: "#ea999c" + peach: "#ef9f76" + yellow: "#e5c890" + green: "#a6d189" + teal: "#81c8be" + sky: "#99d1db" + sapphire: "#85c1dc" + blue: "#8caaee" + lavender: "#babbf1" + + ########################### + + # Header + app-header-background-color: var(--mantle) + app-header-text-color: var(--text) + + # Main Interface colors + primary-color: var(--blue) + light-primary-color: var(--primary-color) + accent-color: var(--yellow) + + primary-background-color: var(--base) + secondary-background-color: var(--base) + + # Text + primary-text-color: var(--text) + secondary-text-color: var(--subtext1) + text-primary-color: var(--text) + divider-color: var(--base) + disabled-text-color: var(--overlay0) + text-accent-color: var(--base) + + # Sidebar + sidebar-background-color: var(--crust) + sidebar-selected-background-color: var(--primary-background-color) + + sidebar-icon-color: var(--subtext0) + sidebar-text-color: var(--subtext0) + sidebar-selected-icon-color: var(--mauve) + sidebar-selected-text-color: var(--mauve) + + # Buttons + paper-item-icon-color: var(--subtext0) + paper-item-icon-active-color: var(--primary-color) + + # States and Badges + state-icon-color: var(--lavender) + state-icon-active-color: var(--primary-color) + + state-icon-unavailable-color: var(--disabled-text-color) + + # Sliders + paper-slider-knob-color: var(--blue) + 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(--blue) + + # Labels + label-badge-background-color: var(--surface0) + label-badge-text-color: var(--text) + label-badge-red: var(--red) + label-badge-green: var(--green) + label-badge-blue: var(--blue) + label-badge-yellow: var(--yellow) + label-badge-gray: var(--overlay0) + + # Cards + card-background-color: var(--surface0) + ha-card-background: var(--card-background-color) + + ha-card-border-radius: "15px" + ha-card-box-shadow: none + paper-dialog-background-color: var(--overlay0) + paper-listbox-background-color: var(--overlay0) + paper-card-background-color: var(--card-background-color) + + # Switches + switch-checked-button-color: var(--green) + switch-checked-track-color: var(--surface2) + switch-unchecked-button-color: rgb(--overlay0) + switch-unchecked-track-color: rgb(--surface0) + + # 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: var(--overlay0) + + # Dropdowns + material-background-color: var(--primary-background-color) + material-secondary-background-color: var(--primary-background-color) + mdc-theme-surface: var(--primary-background-color) + + # Pre/Code + markdown-code-background-color: var(--surface0) + + # Checkboxes + mdc-select-fill-color: var(--surface0) + mdc-select-ink-color: var(--primary-text-color) + mdc-select-label-ink-color: var(--subtext1) + 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) + + # Toast + paper-toast-background-color: var(--overlay0) + + # Colors + error-color: var(--red) + warning-color: var(--yellow) + success-color: var(--green) + info-color: var(--blue) + + state-on-color: var(--green) + state-off-color: var(--red)