Add colorscheme functionality (only Homer for now)

group_vars/all/vars.yml

@@ -39,6 +39,8 @@ enable_pikvm: true
 
 spindown_time: 600 # in seconds
 
+colorscheme: nord
+
 #
 # Apt mirrors
 #

roles/homer/files/custom.css

@@ -46,4 +46,16 @@ body #app .card {
 
 .card-content {
   height: 100% !important;
+}
+
+.status.offline::before {
+  background-color: var(--status-offline) !important;
+  border: unset !important;
+  box-shadow: 0 0 5px 1px var(--status-offline) !important;
+}
+
+.status.online::before {
+  background-color: var(--status-online) !important;
+  border: unset !important;
+  box-shadow: 0 0 5px 1px var(--status-online) !important;
 }

roles/homer/tasks/main.yml

@@ -1,4 +1,8 @@
 ---
+- name: Import the colorscheme variables
+  include_vars:
+    file: "vars/colorschemes/{{ colorscheme | lower }}.yml"
+
 - name: Get a list of containers
   delegate_to: localhost
   become: no
@@ -55,7 +59,6 @@
     owner: "{{ username }}"
     group: "{{ username }}"
 
-
 - name: Generate the Homer config file
   template:
     src: config.yml.j2

roles/homer/templates/config.yml.j2

@@ -14,30 +14,34 @@ connectivityCheck: true
 theme: default
 colors:
   light:
-    highlight-primary: "#282E38"
-    highlight-secondary: "#181818"
-    highlight-hover: "#303030"
-    background: "#232730"
-    card-background: "#282E38"
-    text: "#81a1c1"
-    text-header: "#81a1c1"
-    text-title: "#d8dee9"
-    text-subtitle: "#f5f5f5"
-    card-shadow: rgba(0, 0, 0, 0.4)
-    link-hover: "#ffdd57"
+    highlight-primary: "{{ highlight_primary }}"
+    highlight-secondary: "{{ highlight_secondary }}"
+    highlight-hover: "{{ highlight_hover }}"
+    background: "{{ background }}"
+    card-background: "{{ card_background }}"
+    text: "{{ text }}"
+    text-header: "{{ text_header }}"
+    text-title: "{{ text_title }}"
+    text-subtitle: "{{ text_subtitle }}"
+    card-shadow: "{{ card_shadow }}"
+    link-hover: "{{ link_hover }}"
+    status-offline: "{{ status_offline }}"
+    status-online: "{{ status_online }}"
 
   dark:
-    highlight-primary: "#282E38"
-    highlight-secondary: "#181818"
-    highlight-hover: "#303030"
-    background: "#232730"
-    card-background: "#282E38"
-    text: "#81a1c1"
-    text-header: "#81a1c1"
-    text-title: "#d8dee9"
-    text-subtitle: "#f5f5f5"
-    card-shadow: rgba(0, 0, 0, 0.4)
-    link-hover: "#ffdd57"
+    highlight-primary: "{{ highlight_primary }}"
+    highlight-secondary: "{{ highlight_secondary }}"
+    highlight-hover: "{{ highlight_hover }}"
+    background: "{{ background }}"
+    card-background: "{{ card_background }}"
+    text: "{{ text }}"
+    text-header: "{{ text_header }}"
+    text-title: "{{ text_title }}"
+    text-subtitle: "{{ text_subtitle }}"
+    card-shadow: "{{ card_shadow }}"
+    link-hover: "{{ link_hover }}"
+    status-offline: "{{ status_offline }}"
+    status-online: "{{ status_online }}"
 
 services:
   - name: "Media"

roles/homer/vars/colorschemes/gruvbox.yml

@@ -0,0 +1,13 @@
+highlight_primary: "#3c3836"
+highlight_secondary: "#282828"
+highlight_hover: "#32302f"
+background: "#1d2021"
+card_background: "#282828"
+text: "#a89984"
+text_header: "#a89984"
+text_title: "#ebdbb2"
+text_subtitle: "#ebdbb2"
+card_shadow: rgba(0, 0, 0, 0.4)
+link_hover: "#fabd2f"
+status_offline: "#cc241d"
+status_online: "#98971a"

roles/homer/vars/colorschemes/nord.yml

@@ -0,0 +1,13 @@
+highlight_primary: "#282E38"
+highlight_secondary: "#181818"
+highlight_hover: "#303030"
+background: "#232730"
+card_background: "#282E38"
+text: "#81a1c1"
+text_header: "#81a1c1"
+text_title: "#d8dee9"
+text_subtitle: "#f5f5f5"
+card_shadow: rgba(0, 0, 0, 0.4)
+link_hover: "#ffdd57"
+status_offline: "#bf616a"
+status_online: "#a3be8c"