dark support for intro background

src/assets/styles/app/_home.scss

@@ -11,13 +11,17 @@
 
     .introduction {
         background-color: var(--surface-a);
-        background: url('./assets/images/home/intro-bg.jpg');
+        background-image: url('./assets/images/home/intro-bg.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         padding: 115px 30px 135px 50px;
         color: #455C71;
         position: relative;
 
+        &.introduction-dark {
+            background-blend-mode: color-burn;
+        }
+
         .introduction-promo {
             display: inline-block;
             margin-left: -50px;

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="home">
-        <div class="introduction">
+        <div :class="introductionClass">
             <span class="introduction-promo">
                 <img alt="Gold Sponsor" src="../assets/images/home/vue-gold.png" />
                 <span>Vue.js Gold Sponsor</span>
@@ -211,7 +211,14 @@
 </template>
 
 <script>
+import EventBus from '@/EventBus';
+
 export default {
+    data() {
+        return {
+            dark: false
+        }
+    },
     mounted() {
         let afId = this.$route.query['af_id'];
         if (afId) {
@@ -221,6 +228,21 @@ export default {
             document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
         }
 
+        EventBus.$on('change-theme', event => {
+            if (event.dark)
+                this.dark = true;
+            else
+                this.dark = false;
+        });
+    },
+    beforeDestroy() {
+        EventBus.$off('change-theme');
+    },
+    computed: {
+        introductionClass() {
+            return ['introduction', {'introduction-dark': this.dark}];
         }
+    }
+
 }
 </script>