mirror of
https://github.com/Mathijs0/home_assistant_thema_mrl.git
synced 2024-11-20 16:20:17 +01:00
311 lines
8.8 KiB
YAML
311 lines
8.8 KiB
YAML
|
####################### 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)
|