Frosted Glass Dark.yaml

# 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-scrim: 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 ---