Initial Home Assistant commit
This commit is contained in:
@@ -0,0 +1,950 @@
|
||||
# Frosted Glass Lite
|
||||
# ver. 1.2.2 - (2025-11-22)
|
||||
|
||||
# Frosted Glass Custom Lite
|
||||
# ver. 1.2.2 - (2025-11-22)
|
||||
|
||||
Frosted Glass Custom Lite:
|
||||
modes:
|
||||
light:
|
||||
card-mod-theme: "Frosted Glass Light Lite"
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
app-theme-color: 'rgb(91, 138, 168)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
|
||||
# Sidebar blur (card-mod-root section at end handles blur effect!)
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)' # 1.2 Glass – fix: remove stray quotes inside rgba
|
||||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08)); /* 1.2 Glass – subtle tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept as your exclusions) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion you had before # 1.2 Glass – bugfix
|
||||
so standard Markdown gets the glass. The text-only variant remains excluded below. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to bubble cards === # 1.2 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to mushroom-chips-card outer container === # 1.2 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(255, 255, 255, 0.3); # 1.1.9 change - added blur & saturation for badges
|
||||
|
||||
/* Glass system tokens (new) */
|
||||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #fff !important; /* or your color */
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important; /* adjust as needed */
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||||
}
|
||||
|
||||
|
||||
# Tokens (used throughout cards/UI)
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 240, 243, 255;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(255, 255, 255);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
background: rgba(234, 235, 238, 0.7) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – subtle inner edge for consistency */
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); /* 1.2 Glass – ensure border follows tokens */
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#050713'
|
||||
ha-color-primary-10: '#0B0E27'
|
||||
ha-color-primary-20: '#171C4E'
|
||||
ha-color-primary-30: '#222A76'
|
||||
ha-color-primary-40: '#2E399D'
|
||||
ha-color-primary-50: '#6A73D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#616CD0'
|
||||
ha-color-primary-70: '#8890DC'
|
||||
ha-color-primary-80: '#B0B5E7'
|
||||
ha-color-primary-90: '#D7DAF3'
|
||||
ha-color-primary-95: '#EFF0FA'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#050713'
|
||||
color-primary-10: '#0B0E27'
|
||||
color-primary-20: '#171C4E'
|
||||
color-primary-30: '#222A76'
|
||||
color-primary-40: '#2E399D'
|
||||
color-primary-50: '#6A73D3'
|
||||
color-primary-60: '#616CD0'
|
||||
color-primary-70: '#8890DC'
|
||||
color-primary-80: '#B0B5E7'
|
||||
color-primary-90: '#D7DAF3'
|
||||
color-primary-95: '#EFF0FA'
|
||||
|
||||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||||
lovelace-background: var(--background-image)
|
||||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(0, 77, 153)'
|
||||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||||
codemirror-number: 'rgb(204, 85, 0)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119)'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
dark:
|
||||
card-mod-theme: 'Frosted Glass Dark Lite'
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
app-theme-color: 'rgb(0, 0, 0)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer (variable-driven, matches Light) */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18)); /* 1.2 Glass – subtle dark tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept excluded) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(30, 33, 54, 0.18) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass from applying to bubble cards === # 1.1.9 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass on mushroom-chips-card outer container === # 1.1.9 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||||
|
||||
/* Glass system tokens (new, dark-tuned) */
|
||||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||||
|
||||
/* Tokens - match structure to Light theme for consistency */
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 234, 235, 238;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(234, 235, 238);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
background: rgba(25, 28, 45, 0.8) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; # 1.2 Glass – subtle inner edge for consistency
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); # 1.2 Glass – ensure border follows tokens
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
|
||||
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
|
||||
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(30, 33, 54, 0.7) !important;
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #181929 !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(234, 235, 238, 1) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#050713'
|
||||
ha-color-primary-10: '#0B0E27'
|
||||
ha-color-primary-20: '#171C4E'
|
||||
ha-color-primary-30: '#222A76'
|
||||
ha-color-primary-40: '#2E399D'
|
||||
ha-color-primary-50: '#6A73D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#616CD0'
|
||||
ha-color-primary-70: '#8890DC'
|
||||
ha-color-primary-80: '#B0B5E7'
|
||||
ha-color-primary-90: '#D7DAF3'
|
||||
ha-color-primary-95: '#EFF0FA'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#050713'
|
||||
color-primary-10: '#0B0E27'
|
||||
color-primary-20: '#171C4E'
|
||||
color-primary-30: '#222A76'
|
||||
color-primary-40: '#2E399D'
|
||||
color-primary-50: '#6A73D3'
|
||||
color-primary-60: '#616CD0'
|
||||
color-primary-70: '#8890DC'
|
||||
color-primary-80: '#B0B5E7'
|
||||
color-primary-90: '#D7DAF3'
|
||||
color-primary-95: '#EFF0FA'
|
||||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||||
lovelace-background: 'var(--background-image)'
|
||||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(164, 209, 255)'
|
||||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||||
codemirror-number: 'rgb(255, 171, 64)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
# --- End of Theme
|
||||
@@ -0,0 +1,988 @@
|
||||
# Frosted Glass
|
||||
|
||||
Frosted Glass Custom:
|
||||
modes:
|
||||
light:
|
||||
card-mod-theme: "Frosted Glass Light"
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-backdrop-filter: 'blur(6px) saturate(1.2)'
|
||||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
app-theme-color: 'rgb(91, 138, 168)'
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-backdrop-filter: 'blur(8px)'
|
||||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.7)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.7)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.6)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Glass layer */
|
||||
ha-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08));
|
||||
backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow,
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important;
|
||||
}
|
||||
|
||||
/* Markdown card with text_only */
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Bubble cards */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom chips */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(255, 255, 255, 0.3);
|
||||
--ha-card-backdrop-filter: blur(8px) saturate(1.2);
|
||||
|
||||
/* Glass system tokens */
|
||||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08);
|
||||
--ha-card-glass-inset-shadow:
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #fff !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||||
}
|
||||
|
||||
|
||||
# Tokens
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 240, 243, 255;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(255, 255, 255);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
backdrop-filter: blur(6px) saturate(1.2) !important;
|
||||
-webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
|
||||
background: rgba(234, 235, 238, 0.7) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important;
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||||
backdrop-filter: blur(12px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
|
||||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
backdrop-filter: blur(6px) !important;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
ha-color-primary-05: '#050713'
|
||||
ha-color-primary-10: '#0B0E27'
|
||||
ha-color-primary-20: '#171C4E'
|
||||
ha-color-primary-30: '#222A76'
|
||||
ha-color-primary-40: '#2E399D'
|
||||
ha-color-primary-50: '#6A73D3'
|
||||
ha-color-primary-60: '#616CD0'
|
||||
ha-color-primary-70: '#8890DC'
|
||||
ha-color-primary-80: '#B0B5E7'
|
||||
ha-color-primary-90: '#D7DAF3'
|
||||
ha-color-primary-95: '#EFF0FA'
|
||||
|
||||
color-primary-05: '#050713'
|
||||
color-primary-10: '#0B0E27'
|
||||
color-primary-20: '#171C4E'
|
||||
color-primary-30: '#222A76'
|
||||
color-primary-40: '#2E399D'
|
||||
color-primary-50: '#6A73D3'
|
||||
color-primary-60: '#616CD0'
|
||||
color-primary-70: '#8890DC'
|
||||
color-primary-80: '#B0B5E7'
|
||||
color-primary-90: '#D7DAF3'
|
||||
color-primary-95: '#EFF0FA'
|
||||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||||
lovelace-background: var(--background-image)
|
||||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(0, 77, 153)'
|
||||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||||
codemirror-number: 'rgb(204, 85, 0)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119)'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
dark:
|
||||
card-mod-theme: 'Frosted Glass Dark'
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-backdrop-filter: 'blur(8px) saturate(1.1)'
|
||||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
app-theme-color: 'rgb(0, 0, 0)'
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-backdrop-filter: 'blur(8px)'
|
||||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.7)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.7)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.8)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Glass layer (variable-driven, matches Light) */
|
||||
ha-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18));
|
||||
backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow,
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(30, 33, 54, 0.18) !important;
|
||||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important;
|
||||
}
|
||||
|
||||
/* Markdown card with text_only */
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Bubble cards */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom chips */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||||
--ha-card-backdrop-filter: blur(10px) saturate(1.2);
|
||||
|
||||
/* Glass system tokens */
|
||||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18);
|
||||
--ha-card-glass-inset-shadow:
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||||
|
||||
/* Tokens - match structure to Light theme */
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 234, 235, 238;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(234, 235, 238);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
backdrop-filter: blur(8px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
|
||||
background: rgba(25, 28, 45, 0.8) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important;
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color));
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
|
||||
backdrop-filter: blur(10px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
|
||||
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
|
||||
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(30, 33, 54, 0.7) !important;
|
||||
backdrop-filter: blur(6px) !important;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #181929 !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(234, 235, 238, 1) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#050713'
|
||||
ha-color-primary-10: '#0B0E27'
|
||||
ha-color-primary-20: '#171C4E'
|
||||
ha-color-primary-30: '#222A76'
|
||||
ha-color-primary-40: '#2E399D'
|
||||
ha-color-primary-50: '#6A73D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#616CD0'
|
||||
ha-color-primary-70: '#8890DC'
|
||||
ha-color-primary-80: '#B0B5E7'
|
||||
ha-color-primary-90: '#D7DAF3'
|
||||
ha-color-primary-95: '#EFF0FA'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#050713'
|
||||
color-primary-10: '#0B0E27'
|
||||
color-primary-20: '#171C4E'
|
||||
color-primary-30: '#222A76'
|
||||
color-primary-40: '#2E399D'
|
||||
color-primary-50: '#6A73D3'
|
||||
color-primary-60: '#616CD0'
|
||||
color-primary-70: '#8890DC'
|
||||
color-primary-80: '#B0B5E7'
|
||||
color-primary-90: '#D7DAF3'
|
||||
color-primary-95: '#EFF0FA'
|
||||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||||
lovelace-background: 'var(--background-image)'
|
||||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(164, 209, 255)'
|
||||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||||
codemirror-number: 'rgb(255, 171, 64)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
# --- End of Theme ---
|
||||
@@ -0,0 +1,429 @@
|
||||
# Frosted Glass Dark Lite
|
||||
# ver. 1.3 - (2025-11-24)
|
||||
|
||||
Frosted Glass Dark Lite:
|
||||
card-mod-theme: 'Frosted Glass Dark Lite'
|
||||
|
||||
modes: # 1.2.1 - change add modes: dark-only declaration
|
||||
dark: {}
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
app-theme-color: 'rgb(0, 0, 0)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer (variable-driven, matches Light) */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18)); /* 1.2 Glass – subtle dark tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept excluded) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(30, 33, 54, 0.18) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass from applying to bubble cards === # 1.1.9 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass on mushroom-chips-card outer container === # 1.1.9 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||||
|
||||
/* Glass system tokens (new, dark-tuned) */
|
||||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||||
|
||||
/* Tokens - match structure to Light theme for consistency */
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 234, 235, 238;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(234, 235, 238);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
|
||||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||||
lovelace-background: 'var(--background-image)'
|
||||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(164, 209, 255)'
|
||||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||||
codemirror-number: 'rgb(255, 171, 64)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
|
||||
# --- End of Theme ---
|
||||
@@ -0,0 +1,506 @@
|
||||
# Frosted Glass Dark
|
||||
# ver. 1.3 - (2025-11-24)
|
||||
|
||||
Frosted Glass Dark:
|
||||
card-mod-theme: 'Frosted Glass Dark'
|
||||
|
||||
modes: # 1.2.1 - change add modes: dark-only declaration
|
||||
dark: {}
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-backdrop-filter: 'blur(8px) saturate(1.1)'
|
||||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
app-theme-color: 'rgb(0, 0, 0)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-backdrop-filter: 'blur(8px)' # 1.2 Glass – same blur as cards
|
||||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.7)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.7)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.8)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Glass layer (variable-driven, matches Light) */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18)); /* 1.2 Glass – subtle dark tint */
|
||||
backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(10px) saturate(1.2));
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept excluded) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(30, 33, 54, 0.18) !important;
|
||||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass from applying to bubble cards === # 1.1.9 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass on mushroom-chips-card outer container === # 1.1.9 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||||
--ha-card-backdrop-filter: blur(10px) saturate(1.2); # 1.2 Glass – same engine as Light, tuned for Dark
|
||||
|
||||
/* Glass system tokens (new, dark-tuned) */
|
||||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||||
|
||||
/* Tokens - match structure to Light theme for consistency */
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 234, 235, 238;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(234, 235, 238);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
backdrop-filter: blur(8px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
|
||||
background: rgba(25, 28, 45, 0.8) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; # 1.2 Glass – subtle inner edge for consistency
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); # 1.2 Glass – ensure border follows tokens
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
|
||||
backdrop-filter: blur(10px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
|
||||
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
|
||||
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(30, 33, 54, 0.7) !important;
|
||||
backdrop-filter: blur(6px) !important;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #181929 !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(234, 235, 238, 1) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
|
||||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||||
lovelace-background: 'var(--background-image)'
|
||||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(164, 209, 255)'
|
||||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||||
codemirror-number: 'rgb(255, 171, 64)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
|
||||
# --- End of Theme ---
|
||||
@@ -0,0 +1,480 @@
|
||||
# Frosted Glass Light Lite
|
||||
# ver. 1.3 - (2025-11-24)
|
||||
|
||||
Frosted Glass Light Lite:
|
||||
card-mod-theme: "Frosted Glass Light Lite"
|
||||
|
||||
modes: # 1.2.1 - change add modes: light-only declaration
|
||||
light: {}
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
app-theme-color: 'rgb(91, 138, 168)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
|
||||
# Sidebar blur (card-mod-root section at end handles blur effect!)
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)' # 1.2 Glass – fix: remove stray quotes inside rgba
|
||||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08)); /* 1.2 Glass – subtle tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept as your exclusions) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion you had before # 1.2 Glass – bugfix
|
||||
so standard Markdown gets the glass. The text-only variant remains excluded below. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to bubble cards === # 1.2 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to mushroom-chips-card outer container === # 1.2 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
/* Glass system tokens (new) */
|
||||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #fff !important; /* or your color */
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important; /* adjust as needed */
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||||
}
|
||||
|
||||
|
||||
# Tokens (used throughout cards/UI)
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 240, 243, 255;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(255, 255, 255);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
background: rgba(234, 235, 238, 0.7) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – subtle inner edge for consistency */
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); /* 1.2 Glass – ensure border follows tokens */
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
|
||||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||||
lovelace-background: var(--background-image)
|
||||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(0, 77, 153)'
|
||||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||||
codemirror-number: 'rgb(204, 85, 0)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119)'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
|
||||
# --- End of Theme ---
|
||||
@@ -0,0 +1,509 @@
|
||||
# Frosted Glass Light
|
||||
# ver. 1.3 - (2025-11-24)
|
||||
|
||||
Frosted Glass Light:
|
||||
card-mod-theme: "Frosted Glass Light"
|
||||
|
||||
modes: # 1.2.1 - change add modes: light-only declaration
|
||||
light: {}
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-backdrop-filter: 'blur(6px) saturate(1.2)'
|
||||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
app-theme-color: 'rgb(91, 138, 168)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
|
||||
# Sidebar blur (card-mod-root section at end handles blur effect!)
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-backdrop-filter: 'blur(8px)'
|
||||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.7)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)' # 1.2 Glass – fix: remove stray quotes inside rgba
|
||||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.7)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.6)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* Glass layer */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08)); /* 1.2 Glass – subtle tint */
|
||||
backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, blur(8px) saturate(1.2));
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept as your exclusions) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion you had before # 1.2 Glass – bugfix
|
||||
so standard Markdown gets the glass. The text-only variant remains excluded below. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
-webkit-backdrop-filter: var(--ha-card-backdrop-filter) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to bubble cards === # 1.2 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to mushroom-chips-card outer container === # 1.2 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(255, 255, 255, 0.3);
|
||||
--ha-card-backdrop-filter: blur(8px) saturate(1.2); # 1.1.9 change - added blur & saturation for badges
|
||||
|
||||
/* Glass system tokens (new) */
|
||||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #fff !important; /* or your color */
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important; /* adjust as needed */
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||||
}
|
||||
|
||||
|
||||
# Tokens (used throughout cards/UI)
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 240, 243, 255;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(255, 255, 255);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
backdrop-filter: blur(6px) saturate(1.2) !important;
|
||||
-webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
|
||||
background: rgba(234, 235, 238, 0.7) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – subtle inner edge for consistency */
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); /* 1.2 Glass – ensure border follows tokens */
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||||
backdrop-filter: blur(12px) saturate(1.1) !important;
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
|
||||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
backdrop-filter: blur(6px) !important;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
|
||||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||||
lovelace-background: var(--background-image)
|
||||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(0, 77, 153)'
|
||||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||||
codemirror-number: 'rgb(204, 85, 0)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
|
||||
# --- End of Theme ---
|
||||
@@ -0,0 +1,948 @@
|
||||
# Frosted Glass Light Lite
|
||||
# ver. 1.3 - (2025-11-24)
|
||||
|
||||
Frosted Glass Lite:
|
||||
modes:
|
||||
light:
|
||||
card-mod-theme: "Frosted Glass Light Lite"
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(234, 235, 238, 0.1)'
|
||||
app-header-text-color: 'rgba(19, 21, 54, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(255, 255, 255, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
app-theme-color: 'rgb(91, 138, 168)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(254, 244, 242, 0.7)'
|
||||
sidebar-icon-color: 'rgba(19, 21, 54, 0.6)'
|
||||
sidebar-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
|
||||
# Sidebar blur (card-mod-root section at end handles blur effect!)
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(234, 235, 238, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)' # 1.2 Glass – fix: remove stray quotes inside rgba
|
||||
paper-dialog-background-color: 'rgba(234, 235, 238, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(255, 255, 255, 0.08)); /* 1.2 Glass – subtle tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept as your exclusions) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown cards to be glassy; only exclude text-only variant */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion you had before # 1.2 Glass – bugfix
|
||||
so standard Markdown gets the glass. The text-only variant remains excluded below. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to bubble cards === # 1.2 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted glass from applying to mushroom-chips-card outer container === # 1.2 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(242, 245, 255, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(255, 255, 255, 0.3); # 1.1.9 change - added blur & saturation for badges
|
||||
|
||||
/* Glass system tokens (new) */
|
||||
--ha-card-glass-tint: rgba(255, 255, 255, 0.08); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.30) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.30) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.10) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #fff !important; /* or your color */
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important; /* adjust as needed */
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(19, 21, 54, 1) !important;
|
||||
}
|
||||
|
||||
|
||||
# Tokens (used throughout cards/UI)
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 240, 243, 255;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(19, 21, 54, 0.95);
|
||||
--token-color-icon-secondary: rgba(19, 21, 54, 0.75);
|
||||
--token-color-icon-sidebar: rgba(19, 21, 54, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(19, 21, 54, 0.98);
|
||||
--token-color-text-secondary: rgba(19, 21, 54, 0.8);
|
||||
--token-color-text-disabled: rgba(19, 21, 54, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(19, 21, 54, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-black));
|
||||
--token-color-background-base: rgba(234, 235, 238, 0.6);
|
||||
--token-color-background-secondary: rgba(245, 245, 245, 0.5);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(255, 255, 255, 0.7);
|
||||
--token-color-background-input-disabled: rgba(245, 245, 245, 0.6);
|
||||
--token-color-background-label-badge: rgb(230, 230, 230);
|
||||
--token-color-background-card: rgba(255, 255, 255, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.6);
|
||||
--token-color-background-divider: rgba(224, 224, 224, 0.3);
|
||||
--token-color-background-scrollbar-thumb: rgb(180, 180, 180);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(255, 255, 255, 0.3);
|
||||
--token-color-switch-button-unchecked: rgba(0, 0, 0, 0.6);
|
||||
--token-color-switch-track-unchecked: rgba(0, 0, 0, 0.3);
|
||||
--token-color-codemirror-string: rgb(0, 77, 153);
|
||||
--token-color-codemirror-keyword: rgb(70, 112, 216);
|
||||
--token-color-codemirror-number: rgb(204, 85, 0);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.15);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(255, 255, 255);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
background: rgba(234, 235, 238, 0.7) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – subtle inner edge for consistency */
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); /* 1.2 Glass – ensure border follows tokens */
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(230, 230, 230, 0.2) !important;
|
||||
--label-badge-text-color: rgba(19, 21, 54, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
|
||||
border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(255, 255, 255, 0.7) !important;
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
|
||||
primary-text-color: 'rgba(19, 21, 54, 0.98)'
|
||||
secondary-text-color: 'rgba(19, 21, 54, 0.8)'
|
||||
text-primary-color: 'rgba(19, 21, 54, 0.98)'
|
||||
disabled-text-color: 'rgba(19, 21, 54, 0.45)'
|
||||
text-light-primary-color: 'rgb(28, 29, 33)'
|
||||
paper-item-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-inactive-color: 'rgba(19, 21, 54, 0.8)'
|
||||
state-icon-color: 'rgba(19, 21, 54, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(19, 21, 54, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(0, 0, 0)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(224, 224, 224, 0.3)'
|
||||
scrollbar-thumb-color: 'rgb(180, 180, 180)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-light-background.jpg')"
|
||||
lovelace-background: var(--background-image)
|
||||
primary-background-color: 'rgba(254, 244, 242, 1)'
|
||||
secondary-background-color: 'rgba(245, 245, 245, 0.5)'
|
||||
clear-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
card-background-color: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-background: 'rgba(254, 244, 242, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(255, 255, 255, 0.3)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(255, 255, 255, 0.3)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.15)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
switch-unchecked-track-color: 'rgba(0, 0, 0, 0.3)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(0, 0, 0, 0.6)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(0, 0, 0, 0.3)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(19, 21, 54, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(254, 255, 252, 0.8)'
|
||||
input-background-token-color-disabled: 'rgba(254, 255, 252, 0.8)'
|
||||
input-fill-color: 'rgba(255, 255, 252, 0.8)'
|
||||
input-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-label-ink-color: 'rgba(19, 21, 54, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(245, 245, 245, 0.6)'
|
||||
input-disabled-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(19, 21, 54, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(19, 21, 54, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(234, 235, 238, 1)'
|
||||
codemirror-meta: 'rgba(19, 21, 54, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(0, 77, 153)'
|
||||
codemirror-keyword: 'rgb(70, 112, 216)'
|
||||
codemirror-number: 'rgb(204, 85, 0)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119)'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
dark:
|
||||
card-mod-theme: 'Frosted Glass Dark Lite'
|
||||
|
||||
# =========================
|
||||
# HEADER (Top Bar)
|
||||
# =========================
|
||||
app-header-background-color: 'rgba(30, 30, 30, 0.01)'
|
||||
app-header-text-color: 'rgba(240, 243, 255, 0.95)'
|
||||
app-header-edit-background-color: 'rgba(30, 33, 54, 0.8)'
|
||||
app-header-edit-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
app-theme-color: 'rgb(0, 0, 0)' # 1.2 Glass – header theme color hint for browsers
|
||||
|
||||
# =========================
|
||||
# SIDEBAR / DRAWER
|
||||
# =========================
|
||||
sidebar-background-color: 'rgba(30, 30, 30, 0.8)'
|
||||
sidebar-icon-color: 'rgba(234, 235, 238, 0.6)'
|
||||
sidebar-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
sidebar-selected-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
sidebar-selected-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
|
||||
# =========================
|
||||
# DIALOGS
|
||||
# =========================
|
||||
ha-dialog-surface-background: 'rgba(30, 30, 30, 0.9)'
|
||||
dialog-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.25)'
|
||||
paper-dialog-background-color: 'rgba(30, 30, 30, 0.9)'
|
||||
mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.9)'
|
||||
|
||||
# =========================
|
||||
# CARDS / CARD-MOD
|
||||
# =========================
|
||||
card-mod-card: |
|
||||
/* Base reset */
|
||||
ha-card {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Glass layer (variable-driven, matches Light) */
|
||||
ha-card::before { /* 1.2 Glass – glass overlay */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--ha-card-glass-tint, rgba(28, 29, 33, 0.18)); /* 1.2 Glass – subtle dark tint */
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow, /* 1.2 Glass – inner bevel/glow */
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.22) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.18) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18)
|
||||
);
|
||||
}
|
||||
|
||||
/* Headings + Glance (kept excluded) */
|
||||
:host(hui-heading-card) ha-card,
|
||||
:host(hui-glance-card) ha-card {
|
||||
background: none !important;
|
||||
}
|
||||
:host(hui-heading-card) ha-card::before,
|
||||
:host(hui-glance-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* IMPORTANT: Allow normal Markdown to be glassy; only exclude text-only */
|
||||
/* (Fix) Removed global :host(hui-markdown-card) exclusion so standard Markdown gets glass. */
|
||||
|
||||
/* Data tables */
|
||||
.mdc-data-table {
|
||||
background: none !important;
|
||||
}
|
||||
.mdc-data-table__header-cell {
|
||||
background: rgba(30, 33, 54, 0.18) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; /* 1.2 Glass – consistent bevel */
|
||||
}
|
||||
|
||||
/* Markdown card with text_only → no background or blur */ # 1.1.9 Change - text only markdown and mushroom title card no background // Beginning
|
||||
:host(.text-only) ha-card,
|
||||
:host(.text-only) ha-card::before,
|
||||
ha-card.text-only,
|
||||
ha-card.text-only::before { /* 1.2 Glass – add ha-card.text-only for compatibility */
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Mushroom title card (no background or blur) */
|
||||
:host(mushroom-title-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important; /* 1.2 Glass – ensure no bevel */
|
||||
}
|
||||
:host(mushroom-title-card) ha-card::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass from applying to bubble cards === # 1.1.9 Change - Bubble cards are no longer applied */
|
||||
:host(.type-custom-bubble-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
:host(.type-custom-bubble-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* === Prevent frosted/glass on mushroom-chips-card outer container === # 1.1.9 Change - Outer mushroom chips no longer applied */
|
||||
:host(mushroom-chips-card) ha-card {
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:host(mushroom-chips-card) ha-card::before {
|
||||
content: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* (Removed) .bubble-button-card-container styling to avoid conflicts # 1.2 Glass – matches Light exclusions */
|
||||
|
||||
# =========================
|
||||
# CARD-MOD-ROOT GLOBAL CSS
|
||||
# =========================
|
||||
card-mod-root: |
|
||||
:host {
|
||||
--ha-card-background: rgba(30, 30, 30, 0.1);
|
||||
--ha-card-box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--ha-card-border-width: 0.5px;
|
||||
--ha-card-border-color: rgba(234, 235, 238, 0.1);
|
||||
|
||||
/* Glass system tokens (new, dark-tuned) */
|
||||
--ha-card-glass-tint: rgba(28, 29, 33, 0.18); # 1.2 Glass – global tint layer
|
||||
--ha-card-glass-inset-shadow: # 1.2 Glass – inner bevel/glow (Liquid Glass inspired)
|
||||
3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.15) inset,
|
||||
-2px -2px 0.5px -2px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 8px 1px rgba(255, 255, 255, 0.06) inset,
|
||||
0 0 2px 0 rgba(0, 0, 0, 0.18);
|
||||
|
||||
/* Tokens - match structure to Light theme for consistency */
|
||||
--token-rgb-primary: 106, 116, 211;
|
||||
--token-rgb-black: 0, 0, 0;
|
||||
--token-rgb-white: 234, 235, 238;
|
||||
--token-rgb-purple: 129, 45, 250;
|
||||
--token-rgb-pink: 204, 0, 136;
|
||||
--token-rgb-red: 204, 0, 51;
|
||||
--token-rgb-deep-purple: 98, 0, 234;
|
||||
--token-rgb-indigo: 48, 63, 159;
|
||||
--token-rgb-blue: 33, 150, 243;
|
||||
--token-rgb-light-blue: 3, 169, 244;
|
||||
--token-rgb-cyan: 106, 116, 211;
|
||||
--token-rgb-teal: 106, 116, 211;
|
||||
--token-rgb-green: 56, 142, 60;
|
||||
--token-rgb-light-green: 139, 195, 74;
|
||||
--token-rgb-lime: 205, 220, 57;
|
||||
--token-rgb-yellow: 250, 183, 0;
|
||||
--token-rgb-amber: 255, 193, 7;
|
||||
--token-rgb-orange: 255, 158, 0;
|
||||
--token-rgb-deep-orange: 255, 87, 34;
|
||||
--token-rgb-brown: 121, 85, 72;
|
||||
--token-rgb-grey: 103, 104, 119;
|
||||
--token-rgb-blue-grey: 96, 125, 139;
|
||||
--token-rgb-disabled: 189, 189, 189;
|
||||
--token-rgb-state-inactive: 176, 190, 197;
|
||||
|
||||
--token-color-primary: rgb(var(--token-rgb-primary));
|
||||
--token-color-primary-light: rgb(167 182 199);
|
||||
--token-color-accent: rgb(var(--token-rgb-teal));
|
||||
--token-color-disabled: rgb(173 176 184);
|
||||
--token-color-feedback-info: rgb(106, 116, 211);
|
||||
--token-color-feedback-warning: rgb(255, 219, 117);
|
||||
--token-color-feedback-error: rgb(234, 114, 135);
|
||||
--token-color-feedback-success: rgb(118, 214, 152);
|
||||
--token-color-icon-primary: rgba(234, 235, 238, 0.95);
|
||||
--token-color-icon-secondary: rgba(234, 235, 238, 0.75);
|
||||
--token-color-icon-sidebar: rgba(234, 235, 238, 0.6);
|
||||
--token-color-icon-sidebar-selected: var(--token-color-icon-primary);
|
||||
--token-color-text-primary: rgba(234, 235, 238, 0.98);
|
||||
--token-color-text-secondary: rgba(234, 235, 238, 0.8);
|
||||
--token-color-text-disabled: rgba(234, 235, 238, 0.45);
|
||||
--token-color-text-sidebar-selected: var(--token-color-text-primary);
|
||||
--token-color-text-sidebar: var(--token-color-text-secondary);
|
||||
--token-color-text-label-badge: rgba(234, 235, 238, 0.85);
|
||||
--token-color-text-chip: rgb(var(--token-rgb-white));
|
||||
--token-color-background-base: rgba(25, 28, 45, 0.8);
|
||||
--token-color-background-secondary: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-sidebar: var(--token-color-background-base);
|
||||
--token-color-background-input-base: rgba(30, 33, 54, 0.7);
|
||||
--token-color-background-input-disabled: rgba(30, 33, 54, 0.5);
|
||||
--token-color-background-label-badge: rgb(60, 60, 78);
|
||||
--token-color-background-card: rgba(28, 29, 33, 0.85);
|
||||
--token-color-background-skrim: rgba(0, 0, 0, 0.7);
|
||||
--token-color-background-divider: rgba(84, 84, 98, 0.28);
|
||||
--token-color-background-scrollbar-thumb: rgb(68, 68, 88);
|
||||
--token-color-background-label-badge-red: var(--token-color-feedback-error);
|
||||
--token-color-background-label-badge-blue: var(--token-color-feedback-info);
|
||||
--token-color-background-label-badge-green: rgb(78, 183, 128);
|
||||
--token-color-background-label-badge-yellow: var(--token-color-feedback-warning);
|
||||
--token-color-background-label-badge-grey: rgb(83, 90, 103);
|
||||
--token-color-background-popup-scrim: rgba(0, 0, 0, 1);
|
||||
--token-color-border-card: rgba(234, 235, 238, 0.22);
|
||||
--token-color-switch-button-unchecked: rgba(234, 235, 238, 0.3);
|
||||
--token-color-switch-track-unchecked: rgba(234, 235, 238, 0.18);
|
||||
--token-color-codemirror-string: rgb(164, 209, 255);
|
||||
--token-color-codemirror-keyword: rgb(148, 182, 255);
|
||||
--token-color-codemirror-number: rgb(255, 171, 64);
|
||||
--token-shadow-card-medium: 0 12px 20px rgba(0, 0, 0, 0.28);
|
||||
--token-size-radius-small: 10px;
|
||||
--token-size-radius-medium: 14px;
|
||||
--token-size-radius-large: 18px;
|
||||
--token-size-radius-card: var(--token-size-radius-large);
|
||||
--token-size-width-border-card: 0.5px;
|
||||
--token-size-height-slider: 5px;
|
||||
--token-size-height-navbar: 60px;
|
||||
--token-size-font-xs: calc(10px * var(--ha-font-size-scale));
|
||||
--token-size-font-s: calc(12px * var(--ha-font-size-scale));
|
||||
--token-size-font-m: calc(14px * var(--ha-font-size-scale));
|
||||
--token-size-font-l: calc(15px * var(--ha-font-size-scale));
|
||||
--token-size-font-xl: calc(20px * var(--ha-font-size-scale));
|
||||
--token-size-font-2xl: calc(25px * var(--ha-font-size-scale));
|
||||
--token-size-font-3xl: calc(29px * var(--ha-font-size-scale));
|
||||
--token-size-font-4xl: calc(33px * var(--ha-font-size-scale));
|
||||
--token-size-font-5xl: calc(42px * var(--ha-font-size-scale));
|
||||
--token-size-spacing-medium: 17px;
|
||||
--token-size-section-min-width: 320px;
|
||||
--token-color-transparent: rgba(0, 0, 0, 0);
|
||||
--token-color-black: rgb(0, 0, 0);
|
||||
--token-color-white: rgb(234, 235, 238);
|
||||
--token-opacity-ripple-hover: 0.1;
|
||||
--token-font-family-primary: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--token-weight-font-title-card: 500;
|
||||
|
||||
# Additional color variables
|
||||
--token-color-red: rgb(var(--token-rgb-red));
|
||||
--token-color-green: rgb(var(--token-rgb-green));
|
||||
--token-color-blue: rgb(var(--token-rgb-blue));
|
||||
--token-color-yellow: rgb(var(--token-rgb-yellow));
|
||||
--token-color-orange: rgb(var(--token-rgb-orange));
|
||||
--token-color-purple: rgb(var(--token-rgb-purple));
|
||||
--token-color-pink: rgb(var(--token-rgb-pink));
|
||||
--token-color-amber: rgb(var(--token-rgb-amber));
|
||||
--token-color-cyan: rgb(var(--token-rgb-cyan));
|
||||
--token-color-teal: rgb(var(--token-rgb-teal));
|
||||
--token-color-lime: rgb(var(--token-rgb-lime));
|
||||
--token-color-light-green: rgb(var(--token-rgb-light-green));
|
||||
--token-color-deep-orange: rgb(var(--token-rgb-deep-orange));
|
||||
--token-color-brown: rgb(var(--token-rgb-brown));
|
||||
--token-color-grey: rgb(var(--token-rgb-grey));
|
||||
--token-color-blue-grey: rgb(var(--token-rgb-blue-grey));
|
||||
--token-color-indigo: rgb(var(--token-rgb-indigo));
|
||||
--token-color-deep-purple: rgb(var(--token-rgb-deep-purple));
|
||||
--token-color-light-blue: rgb(var(--token-rgb-light-blue));
|
||||
}
|
||||
|
||||
/* SIDEBAR BLUR */
|
||||
.mdc-drawer .mdc-drawer__content {
|
||||
background: rgba(25, 28, 45, 0.8) !important;
|
||||
box-shadow: var(--ha-card-glass-inset-shadow) !important; # 1.2 Glass – subtle inner edge for consistency
|
||||
}
|
||||
|
||||
/* CARDS RADIUS */
|
||||
ha-card {
|
||||
border-radius: var(--token-size-radius-large);
|
||||
border: var(--ha-card-border, var(--ha-card-border-width) solid var(--ha-card-border-color)); # 1.2 Glass – ensure border follows tokens
|
||||
box-shadow: var(--ha-card-box-shadow);
|
||||
}
|
||||
ha-card ha-card {
|
||||
--ha-card-border-width: 0px;
|
||||
}
|
||||
|
||||
/* DRAWER SCRIM */
|
||||
ha-drawer {
|
||||
--mdc-drawer-scrim-color: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
|
||||
/* LABEL BADGE */
|
||||
ha-label-badge {
|
||||
--label-badge-background-color: rgba(60, 60, 78, 0.28) !important;
|
||||
--label-badge-text-color: rgba(234, 235, 238, 0.9) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10) !important;
|
||||
border: 0.5px solid rgba(234, 235, 238, 0.22) !important;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input, ha-textfield, ha-select {
|
||||
background: rgba(30, 33, 54, 0.7) !important;
|
||||
border-radius: var(--token-size-radius-small);
|
||||
border: none !important;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.09) !important;
|
||||
}
|
||||
|
||||
/* Custom text divider row size fix */
|
||||
custom-text-divider-row .text-divider-content {
|
||||
background: #181929 !important;
|
||||
opacity: 1 !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 0 8px !important;
|
||||
--text-divider-font-size: 16px !important;
|
||||
--text-divider-line-size: 1px;
|
||||
--text-divider-color: rgba(234, 235, 238, 1) !important;
|
||||
}
|
||||
|
||||
# =========================
|
||||
# TYPOGRAPHY
|
||||
# =========================
|
||||
ha-font-family-body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-code: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-font-family-longform: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
ha-card-header-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-button-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
mdc-typography-body1-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
md-list-item-label-text-font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-base_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-common-code_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-body1_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-subhead_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-headline_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-caption_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
paper-font-title_-_font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
|
||||
|
||||
ha-font-weight-normal: '400'
|
||||
ha-font-weight-medium: '500'
|
||||
ha-font-weight-bold: '700'
|
||||
ha-font-weight-body: '400'
|
||||
ha-font-weight-heading: '500'
|
||||
ha-font-weight-action: '500'
|
||||
mdc-typography-button-font-weight: '500'
|
||||
title-font-weight: 'var(--token-weight-font-title-card)'
|
||||
|
||||
ha-font-size-xs: '10px'
|
||||
ha-font-size-s: '12px'
|
||||
ha-font-size-m: '14px'
|
||||
ha-font-size-l: '15px'
|
||||
ha-font-size-xl: '20px'
|
||||
ha-font-size-2xl: '25px'
|
||||
ha-font-size-3xl: '29px'
|
||||
ha-font-size-4xl: '33px'
|
||||
ha-font-size-5xl: '42px'
|
||||
title-font-size: '20px'
|
||||
ha-heading-card-title-font-size: 'var(--token-size-font-l)'
|
||||
ha-heading-card-title-font-weight: '500'
|
||||
ha-font-smoothing: 'antialiased'
|
||||
|
||||
# =========================
|
||||
# COLORS & MISCELLANEOUS
|
||||
# =========================
|
||||
# 1.2.1 - change add HA 2025.8 primary color scale aligned to theme
|
||||
ha-color-primary-05: '#0D0E19'
|
||||
ha-color-primary-10: '#131526'
|
||||
ha-color-primary-20: '#20233F'
|
||||
ha-color-primary-30: '#30345F'
|
||||
ha-color-primary-40: '#40467F'
|
||||
ha-color-primary-50: '#6A74D3' # base theme primary (kept)
|
||||
ha-color-primary-60: '#8F97DE'
|
||||
ha-color-primary-70: '#ADB3E7'
|
||||
ha-color-primary-80: '#D2D5F2'
|
||||
ha-color-primary-90: '#EAECF9'
|
||||
ha-color-primary-95: '#F6F7FC'
|
||||
|
||||
# 1.2.1 - change add aliases for compatibility (some threads reference --color-primary-xx)
|
||||
color-primary-05: '#0D0E19'
|
||||
color-primary-10: '#131526'
|
||||
color-primary-20: '#20233F'
|
||||
color-primary-30: '#30345F'
|
||||
color-primary-40: '#40467F'
|
||||
color-primary-50: '#6A74D3'
|
||||
color-primary-60: '#8F97DE'
|
||||
color-primary-70: '#ADB3E7'
|
||||
color-primary-80: '#D2D5F2'
|
||||
color-primary-90: '#EAECF9'
|
||||
color-primary-95: '#F6F7FC'
|
||||
primary-text-color: 'rgba(234, 235, 238, 0.98)'
|
||||
secondary-text-color: 'rgba(234, 235, 238, 0.8)'
|
||||
text-primary-color: 'rgba(234, 235, 238, 0.98)'
|
||||
disabled-text-color: 'rgba(234, 235, 238, 0.45)'
|
||||
text-light-primary-color: 'rgb(234, 235, 238)'
|
||||
paper-item-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-inactive-color: 'rgba(234, 235, 238, 0.8)'
|
||||
state-icon-color: 'rgba(234, 235, 238, 0.95)'
|
||||
state-on-color: 'rgb(118, 214, 152)'
|
||||
state-off-color: 'rgb(234, 114, 135)'
|
||||
label-badge-text-color: 'rgba(234, 235, 238, 0.85)'
|
||||
label-badge-red: 'rgb(234, 114, 135)'
|
||||
label-badge-blue: 'rgb(106, 116, 211)'
|
||||
label-badge-green: 'rgb(78, 183, 128)'
|
||||
label-badge-yellow: 'rgb(255, 219, 117)'
|
||||
label-badge-grey: 'rgb(83, 90, 103)'
|
||||
ha-chip-text-color: 'rgb(234, 235, 238)'
|
||||
|
||||
primary-color: 'rgb(106, 116, 211)'
|
||||
dark-primary-color: 'rgb(106, 116, 211)'
|
||||
light-primary-color: 'rgb(167, 182, 199)'
|
||||
accent-color: 'rgb(106, 116, 211)'
|
||||
divider-color: 'rgba(84, 84, 98, 0.28)'
|
||||
scrollbar-thumb-color: 'rgb(68, 68, 88)'
|
||||
disabled-color: 'rgb(173, 176, 184)'
|
||||
info-color: 'rgb(106, 116, 211)'
|
||||
success-color: 'rgb(118, 214, 152)'
|
||||
warning-color: 'rgb(255, 219, 117)'
|
||||
error-color: 'rgb(234, 114, 135)'
|
||||
background-image: "center / cover no-repeat fixed url('https://cdn.jsdelivr.net/gh/wessamlauf/homeassistant-frosted-glass-themes@refs/heads/main/themes/frosted-glass-dark-background.jpg')"
|
||||
lovelace-background: 'var(--background-image)'
|
||||
primary-background-color: 'rgba(30, 30, 30, 1)' # 1.2 change - improved background color for a darker feel
|
||||
secondary-background-color: 'rgba(30, 33, 54, 0.6)'
|
||||
clear-background-color: 'rgba(30, 33, 54, 0.7)'
|
||||
card-background-color: 'rgba(30, 30, 30, 0.85)'
|
||||
ha-card-background: 'rgba(30, 30, 30, 0.9)'
|
||||
ha-card-border-radius: '18px'
|
||||
ha-card-border-color: 'rgba(234, 235, 238, 0.22)'
|
||||
ha-card-border-width: '0.5px'
|
||||
ha-card-border-style: 'solid'
|
||||
ha-card-border: '0.5px solid rgba(234, 235, 238, 0.1)'
|
||||
ha-card-box-shadow: '0 12px 20px rgba(0, 0, 0, 0.28)'
|
||||
ha-view-sections-column-gap: '17px'
|
||||
ha-view-sections-column-min-width: 320px
|
||||
|
||||
# Sliders, toggles, switches
|
||||
paper-slider-knob-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-knob-start-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-pin-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-active-color: 'rgb(106, 116, 211)'
|
||||
paper-slider-secondary-color: 'rgb(167, 182, 199)'
|
||||
switch-checked-button-color: 'rgb(106, 116, 211)'
|
||||
switch-checked-track-color: 'rgb(106, 116, 211)'
|
||||
switch-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
switch-unchecked-track-color: 'rgba(234, 235, 238, 0.18)'
|
||||
paper-toggle-button-checked-button-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-checked-bar-color: 'rgb(106, 116, 211)'
|
||||
paper-toggle-button-unchecked-button-color: 'rgba(234, 235, 238, 0.3)'
|
||||
paper-toggle-button-unchecked-bar-color: 'rgba(234, 235, 238, 0.18)'
|
||||
mdc-checkbox-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-radio-unchecked-color: 'rgba(234, 235, 238, 0.75)'
|
||||
mdc-ripple-hover-opacity: '0.1'
|
||||
|
||||
# Inputs
|
||||
input-background-color: 'rgba(50, 50, 50, 0.1)'
|
||||
input-background-token-color-disabled: 'rgba(50, 50, 50, 0.1)'
|
||||
input-fill-color: 'rgba(50,50, 50, 0.1)'
|
||||
input-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-label-ink-color: 'rgba(234, 235, 238, 0.98)'
|
||||
input-disabled-fill-color: 'rgba(30, 33, 54, 0.5)'
|
||||
input-disabled-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-disabled-label-ink-color: 'rgba(234, 235, 238, 0.45)'
|
||||
input-idle-line-color: 'transparent'
|
||||
input-dropdown-icon-color: 'rgba(234, 235, 238, 0.8)'
|
||||
input-hover-line-color: 'rgb(106, 116, 211)'
|
||||
mdc-select-idle-line-color: 'transparent'
|
||||
mdc-text-field-idle-line-color: 'transparent'
|
||||
|
||||
# Code Editor & Misc
|
||||
code-editor-background-color: 'rgba(25, 28, 45, 1)'
|
||||
codemirror-meta: 'rgba(234, 235, 238, 0.98)'
|
||||
codemirror-property: 'rgb(106, 116, 211)'
|
||||
codemirror-atom: 'rgb(106, 116, 211)'
|
||||
codemirror-string: 'rgb(164, 209, 255)'
|
||||
codemirror-keyword: 'rgb(148, 182, 255)'
|
||||
codemirror-number: 'rgb(255, 171, 64)'
|
||||
mcg-title-font-weight: '400'
|
||||
mush-title-font-weight: '500'
|
||||
mush-title-font-size: 'var(--token-size-font-2xl)'
|
||||
light-grey-color: 'rgb(103, 104, 119)'
|
||||
mush-rgb-grey: '103, 104, 119'
|
||||
|
||||
# Misc sizes
|
||||
paper-slider-height: '5px'
|
||||
border-radius: '18px'
|
||||
|
||||
|
||||
# --- End of Theme ---
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 583 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,216 @@
|
||||
# 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: var(--primary-text-color)
|
||||
app-header-selection-bar-color: var(--primary-color)
|
||||
app-header-edit-background-color: rgb(178, 183, 190)
|
||||
# Main Interface Colors
|
||||
primary-color: rgb(26, 115, 232)
|
||||
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: var(--primary-text-color)
|
||||
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-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: var(--primary-color)
|
||||
mdc-button-outline-color: rgb(26, 115, 232)
|
||||
# States and Badges
|
||||
state-icon-color: var(--paper-item-icon-color)
|
||||
state-icon-active-color: var(--paper-item-icon-active-color)
|
||||
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: var(--primary-text-color)
|
||||
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: rgb(235, 235, 235)
|
||||
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)
|
||||
code-editor-background-color: rgb(242, 242, 242)
|
||||
# Checkboxes
|
||||
mdc-checkbox-unchecked-color: rgb(191, 191, 191)
|
||||
mdc-checkbox-disable-color: var(--disabled-text-color)
|
||||
mdc-select-fill-color: rgb(245, 245, 245)
|
||||
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)
|
||||
mdc-text-field-fill-color: var(--mdc-select-fill-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)
|
||||
#RGB
|
||||
rgb-primary-text-color: 32, 33, 36
|
||||
rgb-primary-color: 32, 33, 36
|
||||
rgb-accent-color: 26, 115, 232
|
||||
rgb-state-switch-color: var(--rgb-accent-color)
|
||||
rgb-state-light-color: var(--rgb-accent-color)
|
||||
rgb-state-fan-color: var(--rgb-accent-color)
|
||||
rgb-state-script-color: var(--rgb-accent-color)
|
||||
rgb-state-vacuum-color: var(--rgb-accent-color)
|
||||
rgb-state-remote-color: var(--rgb-accent-color)
|
||||
rgb-state-input-boolean-color: var(--rgb-accent-color)
|
||||
rgb-state-humidifier-color: var(--rgb-accent-color)
|
||||
rgb-state-cover-color: var(--rgb-accent-color)
|
||||
#
|
||||
dark:
|
||||
# Header:
|
||||
app-header-background-color: rgb(23, 23, 23)
|
||||
app-header-text-color: rgb(198, 203, 210)
|
||||
app-header-selection-bar-color: var(--primary-color)
|
||||
app-header-edit-background-color: rgb(136, 136, 136)
|
||||
# Main Interface Colors
|
||||
primary-color: rgb(138, 180, 248)
|
||||
primary-background-color: rgb(23, 23, 23)
|
||||
secondary-background-color: rgb(32, 33, 36)
|
||||
divider-color: var(--primary-background-color)
|
||||
accent-color: var(--primary-color)
|
||||
# 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-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)
|
||||
mdc-button-outline-color: rgb(138, 180, 248)
|
||||
# States and Badges
|
||||
state-icon-color: var(--paper-item-icon-color)
|
||||
state-icon-active-color: var(--paper-item-icon-active-color)
|
||||
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: var(--secondary-background-color)
|
||||
label-badge-text-color: var(--primary-text-color)
|
||||
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-background: rgb(32, 33, 36)
|
||||
ha-card-border-color: rgb(42, 43, 46)
|
||||
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)
|
||||
# Dropdowns
|
||||
material-background-color: var(--table-row-background-color)
|
||||
material-secondary-background-color: var(--table-row-alternative-background-color)
|
||||
mdc-theme-surface: var(--secondary-background-color)
|
||||
# Pre/Code
|
||||
markdown-code-background-color: rgb(23, 23, 23)
|
||||
code-editor-background-color: rgb(23, 23, 23)
|
||||
# Checkboxes
|
||||
mdc-checkbox-unchecked-color: rgb(169, 177, 188)
|
||||
mdc-checkbox-disable-color: var(--disabled-text-color)
|
||||
mdc-select-fill-color: rgb(42, 43, 46)
|
||||
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)
|
||||
mdc-text-field-fill-color: var(--mdc-select-fill-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)
|
||||
#RGB
|
||||
rgb-primary-text-color: 169, 177, 188
|
||||
rgb-primary-color: 169, 177, 188
|
||||
rgb-accent-color: 138, 180, 248
|
||||
rgb-state-switch-color: var(--rgb-accent-color)
|
||||
rgb-state-light-color: var(--rgb-accent-color)
|
||||
rgb-state-fan-color: var(--rgb-accent-color)
|
||||
rgb-state-script-color: var(--rgb-accent-color)
|
||||
rgb-state-vacuum-color: var(--rgb-accent-color)
|
||||
rgb-state-remote-color: var(--rgb-accent-color)
|
||||
rgb-state-input-boolean-color: var(--rgb-accent-color)
|
||||
rgb-state-humidifier-color: var(--rgb-accent-color)
|
||||
rgb-state-cover-color: var(--rgb-accent-color)
|
||||
@@ -0,0 +1,11 @@
|
||||
# DO NOT EDIT THIS FILE.
|
||||
# This file will be reset with updates.
|
||||
# If you want to customize it, copy the content in another folder and file and change the name.
|
||||
# https://www.home-assistant.io/integrations/frontend/#defining-themes
|
||||
Mushroom Shadow:
|
||||
# Home Assistant override
|
||||
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
|
||||
ha-card-border-width: 0
|
||||
modes:
|
||||
light: {}
|
||||
dark: {}
|
||||
@@ -0,0 +1,22 @@
|
||||
# DO NOT EDIT THIS FILE.
|
||||
# This file will be reset with updates.
|
||||
# If you want to customize it, copy the content in another folder and file and change the name.
|
||||
# https://www.home-assistant.io/integrations/frontend/#defining-themes
|
||||
Mushroom Square Shadow:
|
||||
# Home Assistant override
|
||||
ha-badge-border-radius: 6px
|
||||
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
|
||||
ha-card-border-width: 0
|
||||
ha-card-border-radius: 6px
|
||||
ha-card-features-border-radius: 6px
|
||||
ha-tile-icon-border-radius: 6px
|
||||
# Layout
|
||||
mush-spacing: 8px
|
||||
# Elements
|
||||
mush-icon-border-radius: 6px
|
||||
mush-control-border-radius: 6px
|
||||
# Chips
|
||||
mush-chip-border-radius: 6px
|
||||
modes:
|
||||
light: {}
|
||||
dark: {}
|
||||
@@ -0,0 +1,20 @@
|
||||
# DO NOT EDIT THIS FILE.
|
||||
# This file will be reset with updates.
|
||||
# If you want to customize it, copy the content in another folder and file and change the name.
|
||||
# https://www.home-assistant.io/integrations/frontend/#defining-themes
|
||||
Mushroom Square:
|
||||
# Home Assistant override
|
||||
ha-badge-border-radius: 6px
|
||||
ha-card-border-radius: 6px
|
||||
ha-card-features-border-radius: 6px
|
||||
ha-tile-icon-border-radius: 6px
|
||||
# Layout
|
||||
mush-spacing: 8px
|
||||
# Elements
|
||||
mush-icon-border-radius: 6px
|
||||
mush-control-border-radius: 6px
|
||||
# Chips
|
||||
mush-chip-border-radius: 6px
|
||||
modes:
|
||||
light: {}
|
||||
dark: {}
|
||||
@@ -0,0 +1,9 @@
|
||||
# DO NOT EDIT THIS FILE.
|
||||
# This file will be reset with updates.
|
||||
# If you want to customize it, copy the content in another folder and file and change the name.
|
||||
# https://www.home-assistant.io/integrations/frontend/#defining-themes
|
||||
Mushroom:
|
||||
# Nothing here as it's the default HA theme since 2022.11
|
||||
modes:
|
||||
light: {}
|
||||
dark: {}
|
||||
Reference in New Issue
Block a user