Merge pull request #153 from taigrr/appcolor

feat: Enables setting colors for individual cards

2 files changed, 6 insertions, 1 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index 43e9ba1..32de050 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -115,6 +115,7 @@ services:
         type: "PiHole" # optional, loads a specific component that provides extra features. MUST MATCH a file name (without file extension) available in `src/components/services`
         target: "_blank" # optional html a tag target attribute
         # class: "green" # optional custom CSS class for card, useful with custom stylesheet
+        # background: red # optional color for card to set color directly without custom stylesheet
 ```
 
 If you choose to fetch message information from an endpoint, the output format should be:
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
index f19ee18..627bcde 100644
--- a/src/components/services/Generic.vue
+++ b/src/components/services/Generic.vue
@@ -12,7 +12,11 @@ export default {};
 
 <template>
   <div>
-    <div class="card" :class="item.class">
+    <div
+      class="card"
+      :style="`background-color:${item.background};`"
+      :class="item.class"
+    >
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">