feat: Add richer card theme support (#1809)

src/config/management.ts

@@ -26,6 +26,7 @@ import {
   CONF_VIEW_DEFAULT_RESET_ENTITIES,
   CONF_VIEW_DEFAULT_RESET_EVERY_SECONDS,
   CONF_VIEW_DEFAULT_RESET_INTERACTION_MODE,
+  CONF_VIEW_DIM,
   CONF_VIEW_INTERACTION_SECONDS,
   CONF_VIEW_TRIGGERS,
   CONF_VIEW_TRIGGERS_ACTIONS_TRIGGER,
@@ -881,4 +882,9 @@ const UPGRADES = [
   },
   upgradeMoveToWithOverrides('dimensions.max_height', CONF_DIMENSIONS_HEIGHT),
   deleteWithOverrides('dimensions.min_height'),
+
+  // v6.1.2+
+  upgradeMoveToWithOverrides('view.dark_mode', CONF_VIEW_DIM, {
+    transform: (val) => val === 'on',
+  }),
 ];

src/config/types.ts

@@ -1515,7 +1515,10 @@ const viewConfigDefault = {
     interaction_mode: 'inactive' as const,
   },
   default_cycle_camera: false,
-  dark_mode: 'off' as const,
+  dim: false,
+  theme: {
+    themes: ['traditional' as const],
+  },
   triggers: {
     show_trigger_status: false,
     filter_selected_camera: true,
@@ -1553,6 +1556,15 @@ export const triggersSchema = z.object({
 });
 export type TriggersOptions = z.infer<typeof triggersSchema>;
 
+const themeName = z.enum(['ha', 'dark', 'light', 'traditional']);
+export type ThemeName = z.infer<typeof themeName>;
+
+const themeConfigSchema = z.object({
+  themes: themeName.array().default(viewConfigDefault.theme.themes),
+  overrides: z.record(z.string()).optional(),
+});
+export type ThemeConfig = z.infer<typeof themeConfigSchema>;
+
 const viewConfigSchema = z
   .object({
     default: z
@@ -1578,7 +1590,10 @@ const viewConfigSchema = z
       .default(viewConfigDefault.default_reset),
 
     render_entities: z.string().array().optional(),
-    dark_mode: z.enum(['on', 'off', 'auto']).optional(),
+
+    theme: themeConfigSchema.default(viewConfigDefault.theme),
+
+    dim: z.boolean().default(viewConfigDefault.dim),
     triggers: triggersSchema.default(viewConfigDefault.triggers),
     keyboard_shortcuts: keyboardShortcutsSchema.default(
       viewConfigDefault.keyboard_shortcuts,
@@ -1721,7 +1736,7 @@ const statusBarItemDefault = {
 };
 
 const statusBarConfigDefault = {
-  height: 30,
+  height: 40,
   items: {
     engine: statusBarItemDefault,
     resolution: statusBarItemDefault,