From 7dac2e243fd647c30942788a8f4cbe484206ac2b Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Mon, 23 Mar 2026 15:23:32 +0100 Subject: [PATCH] Improve theme --- src/components/ha-retro-theme.ts | 280 ++++++++++--------------------- src/data/ws-themes.ts | 8 +- 2 files changed, 89 insertions(+), 199 deletions(-) diff --git a/src/components/ha-retro-theme.ts b/src/components/ha-retro-theme.ts index 41dce4c0c9..a6f3c80224 100644 --- a/src/components/ha-retro-theme.ts +++ b/src/components/ha-retro-theme.ts @@ -1,6 +1,4 @@ -import type { Theme } from "../data/ws-themes"; - -export const RETRO_THEME: Theme = { +export const RETRO_THEME = { // Sharp corners "ha-border-radius-sm": "0", "ha-border-radius-md": "0", @@ -31,6 +29,7 @@ export const RETRO_THEME: Theme = { modes: { light: { + // Base colors "primary-color": "#000080", "dark-primary-color": "#00006B", "light-primary-color": "#4040C0", @@ -40,98 +39,87 @@ export const RETRO_THEME: Theme = { "text-primary-color": "#ffffff", "text-light-primary-color": "#000000", "disabled-text-color": "#808080", - "primary-background-color": "#008080", + + // Backgrounds + "primary-background-color": "#C0C0C0", + "lovelace-background": "#008080", "secondary-background-color": "#C0C0C0", "card-background-color": "#C0C0C0", "clear-background-color": "#C0C0C0", + + // RGB values "rgb-primary-color": "0, 0, 128", "rgb-accent-color": "0, 0, 128", "rgb-primary-text-color": "0, 0, 0", "rgb-secondary-text-color": "64, 64, 64", "rgb-text-primary-color": "255, 255, 255", "rgb-card-background-color": "192, 192, 192", + + // UI chrome "divider-color": "#808080", "outline-color": "#808080", "outline-hover-color": "#404040", "shadow-color": "rgba(0, 0, 0, 0.5)", "scrollbar-thumb-color": "#808080", - "disabled-color": "#C0C0C0", + "disabled-color": "#808080", + + // Cards - retro bevel effect "ha-card-border-width": "1px", "ha-card-border-color": "#808080", "ha-card-box-shadow": "1px 1px 0 #404040, -1px -1px 0 #ffffff", "ha-card-border-radius": "0", + + // Dialogs "ha-dialog-border-radius": "0", "ha-dialog-surface-background": "#C0C0C0", "dialog-box-shadow": "1px 1px 0 #404040, -1px -1px 0 #ffffff", + + // Box shadows - retro bevel "ha-box-shadow-s": "1px 1px 0 #404040, -1px -1px 0 #ffffff", "ha-box-shadow-m": "1px 1px 0 #404040, -1px -1px 0 #ffffff", "ha-box-shadow-l": "1px 1px 0 #404040, -1px -1px 0 #ffffff", + + // Header + "app-header-background-color": "#000080", + "app-header-text-color": "#ffffff", + "app-header-border-bottom": "2px outset #C0C0C0", + + // Sidebar "sidebar-background-color": "#C0C0C0", "sidebar-text-color": "#000000", "sidebar-selected-text-color": "#ffffff", "sidebar-selected-icon-color": "#000080", "sidebar-icon-color": "#000000", - "dark-divider-opacity": "0.3", - "app-header-background-color": "#000080", - "app-header-text-color": "#ffffff", - "app-header-border-bottom": "2px outset #C0C0C0", - "switch-checked-color": "#000080", - "switch-checked-button-color": "#C0C0C0", - "switch-checked-track-color": "#000080", - "switch-unchecked-button-color": "#C0C0C0", - "switch-unchecked-track-color": "#808080", - "slider-color": "#000080", - "table-row-background-color": "#C0C0C0", - "table-row-alternative-background-color": "#D4D0C8", - "table-header-background-color": "#D4D0C8", - "data-table-background-color": "#C0C0C0", - "data-table-border-width": "0", - "label-badge-background-color": "#C0C0C0", - "label-badge-text-color": "#000000", - "input-fill-color": "#ffffff", + + // Input + "input-fill-color": "#C0C0C0", "input-disabled-fill-color": "#C0C0C0", "input-ink-color": "#000000", "input-label-ink-color": "#000000", "input-disabled-ink-color": "#808080", "input-idle-line-color": "#808080", "input-hover-line-color": "#000000", - "input-disabled-line-color": "#C0C0C0", + "input-disabled-line-color": "#808080", "input-outlined-idle-border-color": "#808080", "input-outlined-hover-border-color": "#000000", "input-outlined-disabled-border-color": "#C0C0C0", "input-dropdown-icon-color": "#000000", + + // Status colors "error-color": "#FF0000", "warning-color": "#FF8000", "success-color": "#008000", "info-color": "#000080", + + // State "state-icon-color": "#000080", "state-active-color": "#000080", "state-inactive-color": "#808080", - "mdc-theme-primary": "#000080", - "mdc-theme-secondary": "#000080", - "mdc-theme-background": "#008080", - "mdc-theme-surface": "#C0C0C0", - "mdc-theme-on-primary": "#ffffff", - "mdc-theme-on-secondary": "#ffffff", - "mdc-theme-on-surface": "#000000", - "mdc-theme-error": "#FF0000", - "mdc-checkbox-unchecked-color": "#808080", - "mdc-radio-unchecked-color": "#808080", - "mdc-tab-text-label-color-default": "#000000", - "mdc-button-outline-color": "#808080", - "mdc-dialog-heading-ink-color": "#000000", - "mdc-dialog-content-ink-color": "#000000", - "mdc-text-field-fill-color": "#ffffff", - "mdc-text-field-ink-color": "#000000", - "mdc-text-field-label-ink-color": "#000000", - "mdc-text-field-idle-line-color": "#808080", - "mdc-text-field-hover-line-color": "#000000", - "mdc-select-fill-color": "#ffffff", - "mdc-select-ink-color": "#000000", - "mdc-select-label-ink-color": "#000000", - "mdc-select-idle-line-color": "#808080", - "mdc-select-hover-line-color": "#000000", - "mdc-select-dropdown-icon-color": "#000000", + + // Data table + "data-table-border-width": "0", + + // Primary scale "ha-color-primary-05": "#00003A", "ha-color-primary-10": "#000050", "ha-color-primary-20": "#000066", @@ -141,8 +129,10 @@ export const RETRO_THEME: Theme = { "ha-color-primary-60": "#4040C0", "ha-color-primary-70": "#6060D0", "ha-color-primary-80": "#8080E0", - "ha-color-primary-90": "#C0C0F0", - "ha-color-primary-95": "#E0E0FF", + "ha-color-primary-90": "#C8C8D8", + "ha-color-primary-95": "#D8D8E0", + + // Neutral scale "ha-color-neutral-05": "#000000", "ha-color-neutral-10": "#404040", "ha-color-neutral-20": "#606060", @@ -151,54 +141,11 @@ export const RETRO_THEME: Theme = { "ha-color-neutral-50": "#A0A0A0", "ha-color-neutral-60": "#B0B0B0", "ha-color-neutral-70": "#C0C0C0", - "ha-color-neutral-80": "#D4D0C8", - "ha-color-neutral-90": "#DFDFDF", - "ha-color-neutral-95": "#F0F0F0", - "ha-color-text-primary": "#000000", - "ha-color-text-secondary": "#404040", - "ha-color-text-disabled": "#808080", - "ha-color-text-link": "#000080", - "ha-color-surface-default": "#C0C0C0", - "ha-color-on-surface-default": "#000000", - "ha-color-border-neutral-quiet": "#C0C0C0", - "ha-color-border-neutral-normal": "#808080", - "ha-color-border-neutral-loud": "#404040", - "ha-color-fill-primary-quiet-resting": "#C0C0F0", - "ha-color-fill-primary-quiet-hover": "#A0A0E0", - "ha-color-fill-primary-quiet-active": "#8080D0", - "ha-color-fill-primary-normal-resting": "#8080D0", - "ha-color-fill-primary-normal-hover": "#6060C0", - "ha-color-fill-primary-normal-active": "#4040B0", - "ha-color-fill-primary-loud-resting": "#000080", - "ha-color-fill-primary-loud-hover": "#00006B", - "ha-color-fill-primary-loud-active": "#000060", - "ha-color-fill-neutral-quiet-resting": "#D4D0C8", - "ha-color-fill-neutral-quiet-hover": "#C0C0C0", - "ha-color-fill-neutral-quiet-active": "#B0B0B0", - "ha-color-fill-neutral-normal-resting": "#C0C0C0", - "ha-color-fill-neutral-normal-hover": "#B0B0B0", - "ha-color-fill-neutral-normal-active": "#A0A0A0", - "ha-color-fill-neutral-loud-resting": "#808080", - "ha-color-fill-neutral-loud-hover": "#606060", - "ha-color-fill-neutral-loud-active": "#404040", - "ha-color-on-primary-quiet": "#000080", - "ha-color-on-primary-normal": "#000080", - "ha-color-on-primary-loud": "#ffffff", - "ha-color-on-neutral-quiet": "#808080", - "ha-color-on-neutral-normal": "#606060", - "ha-color-on-neutral-loud": "#ffffff", - "ha-color-fill-danger-loud-resting": "#FF0000", - "ha-color-fill-danger-loud-hover": "#CC0000", - "ha-color-fill-danger-loud-active": "#AA0000", - "ha-color-fill-warning-loud-resting": "#FF8000", - "ha-color-fill-warning-loud-hover": "#CC6600", - "ha-color-fill-warning-loud-active": "#AA5500", - "ha-color-fill-success-loud-resting": "#008000", - "ha-color-fill-success-loud-hover": "#006600", - "ha-color-fill-success-loud-active": "#005500", - "ha-assist-chip-filled-container-color": "#D4D0C8", - "chip-background-color": "#D4D0C8", - "markdown-code-background-color": "#D4D0C8", + "ha-color-neutral-80": "#C0C0C0", + "ha-color-neutral-90": "#C8C8C8", + "ha-color-neutral-95": "#D0D0D0", + + // Codemirror "codemirror-keyword": "#000080", "codemirror-operator": "#000000", "codemirror-variable": "#008080", @@ -219,6 +166,7 @@ export const RETRO_THEME: Theme = { "codemirror-type": "#000080", }, dark: { + // Base colors "primary-color": "#4040C0", "dark-primary-color": "#000080", "light-primary-color": "#6060D0", @@ -228,55 +176,60 @@ export const RETRO_THEME: Theme = { "text-primary-color": "#ffffff", "text-light-primary-color": "#C0C0C0", "disabled-text-color": "#606060", - "primary-background-color": "#003030", + + // Backgrounds + "primary-background-color": "#2A2A2A", + "lovelace-background": "#003030", "secondary-background-color": "#2A2A2A", "card-background-color": "#3A3A3A", "clear-background-color": "#2A2A2A", + + // RGB values "rgb-primary-color": "64, 64, 192", "rgb-accent-color": "64, 64, 192", "rgb-primary-text-color": "192, 192, 192", "rgb-secondary-text-color": "160, 160, 160", "rgb-text-primary-color": "255, 255, 255", "rgb-card-background-color": "58, 58, 58", + + // UI chrome "divider-color": "#606060", "outline-color": "#606060", "outline-hover-color": "#808080", "shadow-color": "rgba(0, 0, 0, 0.7)", "scrollbar-thumb-color": "#606060", "disabled-color": "#606060", + + // Cards - retro bevel effect "ha-card-border-width": "1px", "ha-card-border-color": "#606060", "ha-card-box-shadow": "1px 1px 0 #1A1A1A, -1px -1px 0 #5A5A5A", "ha-card-border-radius": "0", + + // Dialogs "ha-dialog-border-radius": "0", "ha-dialog-surface-background": "#3A3A3A", "dialog-box-shadow": "1px 1px 0 #1A1A1A, -1px -1px 0 #5A5A5A", + + // Box shadows - retro bevel "ha-box-shadow-s": "1px 1px 0 #1A1A1A, -1px -1px 0 #5A5A5A", "ha-box-shadow-m": "1px 1px 0 #1A1A1A, -1px -1px 0 #5A5A5A", "ha-box-shadow-l": "1px 1px 0 #1A1A1A, -1px -1px 0 #5A5A5A", + + // Header + "app-header-background-color": "#000060", + "app-header-text-color": "#ffffff", + "app-header-border-bottom": "2px outset #3A3A3A", + + // Sidebar "sidebar-background-color": "#2A2A2A", "sidebar-text-color": "#C0C0C0", "sidebar-selected-text-color": "#ffffff", "sidebar-selected-icon-color": "#4040C0", "sidebar-icon-color": "#A0A0A0", - "dark-divider-opacity": "0.3", - "app-header-background-color": "#000060", - "app-header-text-color": "#ffffff", - "app-header-border-bottom": "2px outset #3A3A3A", - "switch-checked-color": "#4040C0", - "switch-checked-button-color": "#808080", - "switch-checked-track-color": "#4040C0", - "switch-unchecked-button-color": "#808080", - "switch-unchecked-track-color": "#404040", - "slider-color": "#4040C0", - "table-row-background-color": "#3A3A3A", - "table-row-alternative-background-color": "#2A2A2A", - "table-header-background-color": "#4A4A4A", - "data-table-background-color": "#3A3A3A", - "data-table-border-width": "0", - "label-badge-background-color": "#3A3A3A", - "label-badge-text-color": "#C0C0C0", - "input-fill-color": "#2A2A2A", + + // Input + "input-fill-color": "#3A3A3A", "input-disabled-fill-color": "#3A3A3A", "input-ink-color": "#C0C0C0", "input-label-ink-color": "#A0A0A0", @@ -288,38 +241,22 @@ export const RETRO_THEME: Theme = { "input-outlined-hover-border-color": "#808080", "input-outlined-disabled-border-color": "#404040", "input-dropdown-icon-color": "#A0A0A0", + + // Status colors "error-color": "#FF4040", "warning-color": "#FFA040", "success-color": "#40C040", "info-color": "#4040C0", + + // State "state-icon-color": "#4040C0", "state-active-color": "#4040C0", "state-inactive-color": "#606060", - "mdc-theme-primary": "#4040C0", - "mdc-theme-secondary": "#4040C0", - "mdc-theme-background": "#003030", - "mdc-theme-surface": "#3A3A3A", - "mdc-theme-on-primary": "#ffffff", - "mdc-theme-on-secondary": "#ffffff", - "mdc-theme-on-surface": "#C0C0C0", - "mdc-theme-error": "#FF4040", - "mdc-checkbox-unchecked-color": "#606060", - "mdc-radio-unchecked-color": "#606060", - "mdc-tab-text-label-color-default": "#C0C0C0", - "mdc-button-outline-color": "#606060", - "mdc-dialog-heading-ink-color": "#C0C0C0", - "mdc-dialog-content-ink-color": "#C0C0C0", - "mdc-text-field-fill-color": "#2A2A2A", - "mdc-text-field-ink-color": "#C0C0C0", - "mdc-text-field-label-ink-color": "#A0A0A0", - "mdc-text-field-idle-line-color": "#606060", - "mdc-text-field-hover-line-color": "#808080", - "mdc-select-fill-color": "#2A2A2A", - "mdc-select-ink-color": "#C0C0C0", - "mdc-select-label-ink-color": "#A0A0A0", - "mdc-select-idle-line-color": "#606060", - "mdc-select-hover-line-color": "#808080", - "mdc-select-dropdown-icon-color": "#A0A0A0", + + // Data table + "data-table-border-width": "0", + + // Primary scale "ha-color-primary-05": "#00002A", "ha-color-primary-10": "#000040", "ha-color-primary-20": "#000060", @@ -329,8 +266,10 @@ export const RETRO_THEME: Theme = { "ha-color-primary-60": "#8080E0", "ha-color-primary-70": "#A0A0F0", "ha-color-primary-80": "#C0C0FF", - "ha-color-primary-90": "#E0E0FF", - "ha-color-primary-95": "#F0F0FF", + "ha-color-primary-90": "#3A3A50", + "ha-color-primary-95": "#303040", + + // Neutral scale "ha-color-neutral-05": "#1A1A1A", "ha-color-neutral-10": "#2A2A2A", "ha-color-neutral-20": "#3A3A3A", @@ -340,53 +279,10 @@ export const RETRO_THEME: Theme = { "ha-color-neutral-60": "#A0A0A0", "ha-color-neutral-70": "#B0B0B0", "ha-color-neutral-80": "#C0C0C0", - "ha-color-neutral-90": "#D4D0C8", - "ha-color-neutral-95": "#E0E0E0", - "ha-color-text-primary": "#C0C0C0", - "ha-color-text-secondary": "#A0A0A0", - "ha-color-text-disabled": "#606060", - "ha-color-text-link": "#8080E0", - "ha-color-surface-default": "#3A3A3A", - "ha-color-on-surface-default": "#C0C0C0", - "ha-color-border-neutral-quiet": "#4A4A4A", - "ha-color-border-neutral-normal": "#606060", - "ha-color-border-neutral-loud": "#808080", - "ha-color-fill-primary-quiet-resting": "#00002A", - "ha-color-fill-primary-quiet-hover": "#000040", - "ha-color-fill-primary-quiet-active": "#000060", - "ha-color-fill-primary-normal-resting": "#000040", - "ha-color-fill-primary-normal-hover": "#000060", - "ha-color-fill-primary-normal-active": "#000080", - "ha-color-fill-primary-loud-resting": "#4040C0", - "ha-color-fill-primary-loud-hover": "#3030A0", - "ha-color-fill-primary-loud-active": "#2020A0", - "ha-color-fill-neutral-quiet-resting": "#2A2A2A", - "ha-color-fill-neutral-quiet-hover": "#3A3A3A", - "ha-color-fill-neutral-quiet-active": "#2A2A2A", - "ha-color-fill-neutral-normal-resting": "#3A3A3A", - "ha-color-fill-neutral-normal-hover": "#4A4A4A", - "ha-color-fill-neutral-normal-active": "#3A3A3A", - "ha-color-fill-neutral-loud-resting": "#606060", - "ha-color-fill-neutral-loud-hover": "#4A4A4A", - "ha-color-fill-neutral-loud-active": "#606060", - "ha-color-on-primary-quiet": "#8080E0", - "ha-color-on-primary-normal": "#6060D0", - "ha-color-on-primary-loud": "#ffffff", - "ha-color-on-neutral-quiet": "#A0A0A0", - "ha-color-on-neutral-normal": "#808080", - "ha-color-on-neutral-loud": "#ffffff", - "ha-color-fill-danger-loud-resting": "#FF4040", - "ha-color-fill-danger-loud-hover": "#CC3030", - "ha-color-fill-danger-loud-active": "#AA2020", - "ha-color-fill-warning-loud-resting": "#FFA040", - "ha-color-fill-warning-loud-hover": "#CC8030", - "ha-color-fill-warning-loud-active": "#AA6020", - "ha-color-fill-success-loud-resting": "#40C040", - "ha-color-fill-success-loud-hover": "#30A030", - "ha-color-fill-success-loud-active": "#208020", - "ha-assist-chip-filled-container-color": "#4A4A4A", - "chip-background-color": "#4A4A4A", - "markdown-code-background-color": "#2A2A2A", + "ha-color-neutral-90": "#4A4A4A", + "ha-color-neutral-95": "#505050", + + // Codemirror "codemirror-keyword": "#8080E0", "codemirror-operator": "#C0C0C0", "codemirror-variable": "#40C0C0", diff --git a/src/data/ws-themes.ts b/src/data/ws-themes.ts index 0c04a2382c..08fcc11688 100644 --- a/src/data/ws-themes.ts +++ b/src/data/ws-themes.ts @@ -1,13 +1,7 @@ import type { Connection } from "home-assistant-js-websocket"; import { createCollection } from "home-assistant-js-websocket"; -export interface ThemeVars { - // Incomplete - "primary-color": string; - "text-primary-color": string; - "accent-color": string; - [key: string]: string; -} +export type ThemeVars = Record; export type Theme = ThemeVars & { modes?: {