chore: Shows articles in dark mode for widget (#8115)

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);
       }
     });
   },

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() {