feat: add basic theme support (#64)

Author: douglampe

README.md

@@ -47,3 +47,4 @@ If you'd prefer to jump right in, you can find sample configurations (including
   which provided the list of available colors.
 - Thanks to [LCARS Anomations](https://youtube.com/playlist?list=PLah0JzbIlDe8vDgRiKqmX7yTxDFh4yEYA&si=UuGOlyX1Z4b-LT1n)
   on YouTube for inspiration for components and demos.
+- Thanks to [The LCARS](https://www.thelcars.com/) for coming up with some cool themes that are supported here.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ha-lcars-panel",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "type": "module",
   "scripts": {

src/HAConfig.ts

@@ -18,14 +18,18 @@ import LCARSMarkdown from './components/LCARSMarkdown.vue'
 import type { ConfigItem } from './ConfigItem'
 import { ref } from 'vue'
 import LCARSSample from './components/LCARSSample.vue'
+import LCARSThemeSample from './components/LCARSThemeSample.vue'
 import StateValueTable from './components/StateValueTable.vue'
+import themeConfig from '@/assets/themes/themes.yaml?raw'
+import YAML from 'yaml'
 
 export interface HAConfig {
   type: string
   vars: Record<string, string>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   mixins: Record<string, any>
   children: ConfigItem[]
+  theme?: string
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,6 +50,7 @@ registerComponent('panel-all', PanelAll)
 registerComponent('table', LCARSTable)
 registerComponent('md', LCARSMarkdown)
 registerComponent('sample', LCARSSample)
+registerComponent('theme-sample', LCARSThemeSample)
 registerComponent('state-color', StateColor)
 registerComponent('state-value', StateValue)
 registerComponent('state-value-table', StateValueTable)
@@ -72,6 +77,15 @@ export function loadVariables(haConfig: HAConfig) {
   }
 }
 
+export function loadTheme(theme: string) {
+  const themes = YAML.parse(themeConfig)
+  const colors = themes[theme]
+  for (let i = 0; i < 10; i++) {
+    const index = i % colors.length
+    setVariable(`lcars-color-${i + 1}`, `var(--lcars-color-${colors[index] as string})`)
+  }
+}
+
 export function loadMixins(haConfig: HAConfig) {
   if (haConfig?.mixins) {
     mixins.value = haConfig.mixins

src/LCARSCard.ce.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 import type { HAConfig } from './HAConfig'
-import { loadMixins, loadVariables } from './HAConfig'
+import { loadMixins, loadTheme, loadVariables } from './HAConfig'
 import RecursiveComponent from './components/RecursiveComponent.vue'
 import testConfig from '@/assets/config/demo.yaml?raw'
 import YAML from 'yaml'
@@ -46,6 +46,11 @@ function addCssLink(href: string) {
 
 onMounted(() => {
   loadVariables(testConfigParsed ?? config)
+  if (config.theme) {
+    loadTheme(config.theme)
+  } else {
+    loadTheme('default')
+  }
   const cssRoot = getCssRoot()
   if (cssRoot) {
     addCssLink(`${cssRoot}ha-lcars-panel.css`)

src/assets/config/demo.yaml

@@ -58,6 +58,11 @@ children:
         text: Actions
         color: dodger-blue
         textColor: black
+      - type: el
+        nav: /demo/themes
+        text: Themes
+        color: indian-red
+        textColor: black
     children:
       - showForNav: /home
         children:
@@ -1050,3 +1055,21 @@ children:
                   service: light.turn_on
                   data:
                     entity_id: light.my_light
+
+      - showForNav: /demo/themes
+        children:
+          - type: sample
+            content: |
+              You can select a theme by setting the `theme` top-level config key.
+
+              Themes provide 10 numbered colors that can be set by simply specifying the number 1-10. You can create
+              your own custom theme by using the `vars` top-level configuration key to set the values of variables
+              `lcars-color-1` through `lcars-color-10` to any valid CSS color.
+
+              Supported themes are shown below.
+            configYaml: |
+              - type: pill
+                color: 1
+                text: Color 1
+                width: 4
+          - type: theme-sample

src/assets/themes/themes.yaml

@@ -0,0 +1,28 @@
+default:
+  - mauve #c9f
+  - flushed-mahogany #c44
+  - pizazz #f80
+  - atomic-tangerine #f96
+  - malibu #89f
+  - wax-flower #fba
+  - heliotrope #96f
+nemesis:
+  - tan #ca8
+  - zircon #ebf0ff
+  - blue-ribbon #26f
+  - malibu #69f
+  - crusta #f83
+  - peach-orange #fc9
+  - blue #23f
+  - comet #52526a
+lower-decks:
+  - vermilion #f40
+  - flush-orange #f70
+  - peach-orange #fc9
+  - yellow-orange #fa4
+  - west-side #f91
+lower-decks-padd:
+  - cornflower-blue #58e
+  - anakiwa #8ff
+  - danube #79d
+  - malibu #6cf

src/components/LCARSThemeSample.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import YAML from 'yaml'
+import themeConfig from '@/assets/themes/themes.yaml?raw'
+import LCARSElement from './LCARSElement.vue'
+import PanelTL from './PanelTL.vue'
+import LCARSCol from './LCARSCol.vue'
+
+const selectedTheme = ref<string>('default')
+
+const parsedConfig = computed(() => {
+  if (!themeConfig) {
+    return {}
+  }
+
+  return YAML.parse(themeConfig)
+})
+
+const themeNames = computed(() => {
+  const themes = parsedConfig.value
+  if (!themes) {
+    return []
+  }
+  return Object.keys(themes)
+})
+
+const theme = computed(() => {
+  let colors = []
+  if (selectedTheme.value) {
+    const themeConfig = parsedConfig.value[selectedTheme.value]
+    for (let i = 0; i < 10; i++) {
+      const index = i % themeConfig.length
+      colors.push(themeConfig[index])
+    }
+  }
+  return colors as string[]
+})
+</script>
+
+<template>
+  <PanelTL :width="1" color="1" :left-width="5">
+    <template #left>
+      <LCARSElement
+        v-for="(name, index) in themeNames"
+        :key="index"
+        :color="parsedConfig[name][0] ?? '1'"
+        :width="5"
+        text-color="black"
+        :button="true"
+        @click="selectedTheme = name"
+        text-transform="none"
+        :cap-right="selectedTheme === name"
+        >{{ name }}</LCARSElement
+      >
+    </template>
+    <LCARSElement
+      v-if="theme"
+      v-for="(color, index) in theme"
+      :key="index"
+      :color="color"
+      :width="5"
+      :pad-left="0.1"
+      text-color="black"
+      text-align="center"
+    >
+      Color {{ index + 1 }}
+    </LCARSElement>
+  </PanelTL>
+</template>

src/styles/colors.sass

@@ -136,6 +136,7 @@
   --lcars-color-blue-haze: #BDBACE
   --lcars-color-blue-lagoon: #00626F
   --lcars-color-blue-marguerite: #6A5BB1
+  --lcars-color-blue-ribbon: #0066FF
   --lcars-color-blue-romance: #D8F0D2
   --lcars-color-blue-smoke: #78857A
   --lcars-color-blue-stone: #166461
@@ -547,6 +548,8 @@
   --lcars-color-flint: #716E61
   --lcars-color-flirt: #7A2E4D
   --lcars-color-floral-white: #FFFAF0
+  --lcars-color-flush-orange: #FF7F00
+  --lcars-color-flushed-mahogany: #CA3435
   --lcars-color-foam: #D0EAE8
   --lcars-color-fog: #D5C7E8
   --lcars-color-foggy-grey: #A7A69D