3 files changed, 17 insertions, 12 deletions

diff --git a/src/components/DynamicTheme.vue b/src/components/DynamicTheme.vue
index 2ccb47b..fc2fd55 100644
--- a/src/components/DynamicTheme.vue
+++ b/src/components/DynamicTheme.vue
@@ -1,17 +1,15 @@
 <template>
   <DynamicStyle>
-    /* light / dark theme switch based on system pref if available */ body #app
-    {
+    :root, body #app.is-light {
     {{ getVars(themes.light) }}
     } @media (prefers-color-scheme: light), (prefers-color-scheme:
-    no-preference) { body #app {
+    no-preference) { :root, body #app {
     {{ getVars(themes.light) }}
-    } } @media (prefers-color-scheme: dark) { body #app { } } /* light / dark
-    theme override base on user choice. */ body #app.is-dark {
+    } } body #app.is-dark {
     {{ getVars(themes.dark) }}
-    } body #app.is-light {
-    {{ getVars(themes.light) }}
-    }
+    } @media (prefers-color-scheme: dark) { :root, body #app {
+    {{ getVars(themes.dark) }}
+    } }
   </DynamicStyle>
 </template>
 
diff --git a/src/components/Message.vue b/src/components/Message.vue
index d007d3e..5a1e0ea 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,7 +1,10 @@
 <template>
   <article v-if="show" class="message" :class="message.style">
-    <div v-if="message.title" class="message-header">
-      <p>{{ message.title }}</p>
+    <div v-if="message.title || message.icon" class="message-header">
+      <p>
+        <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
+        {{ message.title }}
+      </p>
     </div>
     <div
       v-if="message.content"
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 88e6e69..81ad8a2 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="card">
+    <div class="card" :class="item.class">
       <a :href="item.url" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
@@ -37,4 +37,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.media-left img {
+  max-height: 100%;
+}
+</style>