From 28db18ebbd0702e278743fa2ad84a566a8c6c953 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 16 Oct 2023 16:59:15 +0530
Subject: [PATCH] chore: Shows articles in dark mode for widget (#8115)

---
 app/javascript/portal/portalHelpers.js |  8 ++++----
 app/javascript/widget/views/Home.vue   | 10 ++++++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index e0513d339..6c0a87ffc 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -60,10 +60,10 @@ export const InitializationHelpers = {
   appendPlainParamToURLs: () => {
     document.getElementsByTagName('a').forEach(aTagElement => {
       if (aTagElement.href && aTagElement.href.includes('/hc/')) {
-        aTagElement.setAttribute(
-          'href',
-          aTagElement.href + '?show_plain_layout=true'
-        );
+        const url = new URL(aTagElement.href);
+        url.searchParams.set('show_plain_layout', 'true');
+
+        aTagElement.setAttribute('href', url);
       }
     });
   },
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 3b38c4b58..35b4ab899 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -39,6 +39,7 @@ import ArticleHero from 'widget/components/ArticleHero.vue';
 import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader.vue';
 
 import { mapGetters } from 'vuex';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
 
@@ -49,7 +50,7 @@ export default {
     TeamAvailability,
     ArticleCardSkeletonLoader,
   },
-  mixins: [configMixin, routerMixin],
+  mixins: [configMixin, routerMixin, darkModeMixin],
   props: {
     hasFetched: {
       type: Boolean,
@@ -113,9 +114,14 @@ export default {
       return this.replaceRoute('messages');
     },
     openArticleInArticleViewer(link) {
+      let linkToOpen = `${link}?show_plain_layout=true`;
+      const isDark = this.prefersDarkMode;
+      if (isDark) {
+        linkToOpen = `${linkToOpen}&theme=dark`;
+      }
       this.$router.push({
         name: 'article-viewer',
-        params: { link: `${link}?show_plain_layout=true` },
+        params: { link: linkToOpen },
       });
     },
     viewAllArticles() {