Merge pull request #153 from taigrr/appcolor

feat: Enables setting colors for individual cards
bastienwirtz · Nov 11, 2020 · ade77e4 · ade77e4
2 parents f8d0761 + be30825
commit ade77e4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git 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
@@ -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">