From 5b0fcfa5923637f27b00812b270c6629563f682a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 5 Jul 2020 14:31:20 +0300
Subject: [PATCH] dark support for intro background

---
 src/assets/styles/app/_home.scss |  6 +++++-
 src/views/Home.vue               | 24 +++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss
index c1748c390..edee772c4 100644
--- a/src/assets/styles/app/_home.scss
+++ b/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;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1940062ae..f09865eb4 100755
--- a/src/views/Home.vue
+++ b/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>