mirror of
https://github.com/Mathijs0/home_assistant_thema_mrl.git
synced 2024-11-22 16:20:16 +01:00
Toegevoegd eerste thema
This commit is contained in:
parent
01a7073a01
commit
518f7e85e1
1 changed files with 310 additions and 0 deletions
310
themes/mrl.yaml
Normal file
310
themes/mrl.yaml
Normal file
|
|
@ -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)
|
||||||
Loading…
Reference in a new issue