Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-02 00:27:49 +01:00
Code Activity

Improve theme

Browse Source
This commit is contained in:
Paul Bottein
2026-03-23 15:23:32 +01:00
parent f9e1023a2e
commit 7dac2e243f
2 changed files with 89 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/components/ha-retro-theme.ts
View File

@@ -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",

8
src/data/ws-themes.ts
View File

@@ -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<string, string>;
export type Theme = ThemeVars & {
modes?: {