From b71a580573d0fea88fe9d2e2dfc9605e8e9b4ea6 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 4 Oct 2023 11:56:00 +0530
Subject: [PATCH] feat: Adds dark theme support for public portal [CW-2525]
 (#7979)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../public/api/v1/portals/base_controller.rb  |  9 +++
 app/helpers/portal_helper.rb                  | 11 ++++
 .../portal/components/PublicSearchInput.vue   |  8 +--
 .../portal/components/SearchSuggestions.vue   | 21 +++++--
 .../portal/components/TableOfContents.vue     |  4 +-
 app/views/layouts/portal.html.erb             |  9 ++-
 .../api/v1/portals/_category-block.html.erb   | 18 +++---
 .../public/api/v1/portals/_footer.html.erb    |  2 +-
 .../public/api/v1/portals/_header.html.erb    | 16 ++---
 .../public/api/v1/portals/_hero.html.erb      |  6 +-
 .../v1/portals/_uncategorized-block.html.erb  | 12 ++--
 .../portals/articles/_article_header.html.erb |  6 +-
 .../api/v1/portals/articles/index.html.erb    | 12 ++--
 .../api/v1/portals/articles/show.html.erb     | 16 ++---
 .../categories/_category-block.html.erb       | 18 +++---
 .../categories/_category-hero.html.erb        |  8 +--
 .../api/v1/portals/categories/_hero.html.erb  |  6 +-
 .../api/v1/portals/categories/show.html.erb   | 12 ++--
 public/assets/images/hc/grid_dark.svg         |  4 ++
 spec/helpers/portal_helper_spec.rb            | 60 +++++++++++++++++++
 20 files changed, 178 insertions(+), 80 deletions(-)
 create mode 100644 app/helpers/portal_helper.rb
 create mode 100644 public/assets/images/hc/grid_dark.svg
 create mode 100644 spec/helpers/portal_helper_spec.rb

diff --git a/app/controllers/public/api/v1/portals/base_controller.rb b/app/controllers/public/api/v1/portals/base_controller.rb
index 68619baf8..d9fec27b1 100644
--- a/app/controllers/public/api/v1/portals/base_controller.rb
+++ b/app/controllers/public/api/v1/portals/base_controller.rb
@@ -1,5 +1,6 @@
 class Public::Api::V1::Portals::BaseController < PublicController
   before_action :show_plain_layout
+  before_action :set_color_scheme
   around_action :set_locale
   after_action :allow_iframe_requests
 
@@ -9,6 +10,14 @@ class Public::Api::V1::Portals::BaseController < PublicController
     @is_plain_layout_enabled = params[:show_plain_layout] == 'true'
   end
 
+  def set_color_scheme
+    @theme = if %w[dark light].include?(params[:theme])
+               params[:theme]
+             else
+               ''
+             end
+  end
+
   def set_locale(&)
     switch_locale_with_portal(&) if params[:locale].present?
     switch_locale_with_article(&) if params[:article_slug].present?
diff --git a/app/helpers/portal_helper.rb b/app/helpers/portal_helper.rb
new file mode 100644
index 000000000..3551b5ac6
--- /dev/null
+++ b/app/helpers/portal_helper.rb
@@ -0,0 +1,11 @@
+module PortalHelper
+  def generate_portal_bg_color(portal_color, theme)
+    base_color = theme == 'dark' ? 'black' : 'white'
+    "color-mix(in srgb, #{portal_color} 10%, #{base_color})"
+  end
+
+  def generate_portal_bg(portal_color, theme)
+    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
+    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
+  end
+end
diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue
index a1b36fd66..53099a08e 100644
--- a/app/javascript/portal/components/PublicSearchInput.vue
+++ b/app/javascript/portal/components/PublicSearchInput.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white px-4 py-2 text-slate-600"
+    class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white dark:bg-slate-900 px-4 py-2 text-slate-600 dark:text-slate-200"
     :class="{
-      'shadow border-woot-100': isFocused,
-      'border-slate-50 shadow-sm': !isFocused,
+      'shadow border-woot-100 dark:border-woot-700': isFocused,
+      'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
     }"
   >
     <fluent-icon icon="search" />
     <input
       :value="value"
       type="text"
-      class="w-full focus:outline-none text-base h-full bg-white px-2 py-2 text-slate-700 placeholder-slate-500"
+      class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
       :placeholder="searchPlaceholder"
       role="search"
       @input="onChange"
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index f39107e9e..701c75205 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -1,16 +1,22 @@
 <template>
   <div
-    class="shadow-md bg-white mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700"
+    class="shadow-md bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
   >
-    <div v-if="isLoading" class="font-medium text-sm text-slate-400">
+    <div
+      v-if="isLoading"
+      class="font-medium text-sm text-slate-400 dark:text-slate-700"
+    >
       {{ loadingPlaceholder }}
     </div>
-    <h3 v-if="shouldShowResults" class="font-medium text-sm text-slate-400">
+    <h3
+      v-if="shouldShowResults"
+      class="font-medium text-sm text-slate-400 dark:text-slate-700"
+    >
       {{ resultsTitle }}
     </h3>
     <ul
       v-if="shouldShowResults"
-      class="bg-white mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700"
+      class="bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
       role="listbox"
     >
       <li
@@ -18,7 +24,7 @@
         :id="article.id"
         :key="article.id"
         class="group flex cursor-default select-none items-center rounded-md p-2 mb-1"
-        :class="{ 'bg-slate-25': index === selectedIndex }"
+        :class="{ 'bg-slate-25 dark:bg-slate-800': index === selectedIndex }"
         role="option"
         tabindex="-1"
         @mouseover="onHover(index)"
@@ -32,7 +38,10 @@
       </li>
     </ul>
 
-    <div v-if="showEmptyResults" class="font-medium text-sm text-slate-400">
+    <div
+      v-if="showEmptyResults"
+      class="font-medium text-sm text-slate-400 dark:text-slate-700"
+    >
       {{ emptyPlaceholder }}
     </div>
   </div>
diff --git a/app/javascript/portal/components/TableOfContents.vue b/app/javascript/portal/components/TableOfContents.vue
index 5e00f50aa..bb5430a38 100644
--- a/app/javascript/portal/components/TableOfContents.vue
+++ b/app/javascript/portal/components/TableOfContents.vue
@@ -4,7 +4,7 @@
       <nav class="max-w-2xl">
         <h2
           id="on-this-page-title"
-          class="text-slate-800 font-semibold tracking-wide border-b mb-3 leading-7"
+          class="text-slate-800 dark:text-slate-50 font-semibold tracking-wide border-b mb-3 leading-7"
         >
           {{ tocHeader }}
         </h2>
@@ -14,7 +14,7 @@
               <a
                 :href="`#${element.slug}`"
                 data-turbolinks="false"
-                class="text-base text-slate-800 cursor-pointer"
+                class="text-base text-slate-800 dark:text-slate-50 cursor-pointer"
               >
                 {{ element.title }}
               </a>
diff --git a/app/views/layouts/portal.html.erb b/app/views/layouts/portal.html.erb
index 763222d81..d446e2e6f 100644
--- a/app/views/layouts/portal.html.erb
+++ b/app/views/layouts/portal.html.erb
@@ -28,8 +28,8 @@ By default, it renders:
     <% end %>
   </head>
   <body>
-    <div class="antialiased">
-      <main class="main-content min-h-screen flex flex-col" role="main">
+    <div class="antialiased <%= @theme %>">
+      <main class="main-content min-h-screen flex flex-col bg-white dark:bg-slate-900" role="main">
         <% if !@is_plain_layout_enabled %>
           <%= render "public/api/v1/portals/header", portal: @portal %>
         <% end %>
@@ -40,6 +40,11 @@ By default, it renders:
       </main>
     </div>
   </body>
+  <style>
+  :root {
+    color-scheme: '<%= @theme %>';
+  }
+  </style>
   <script>
     window.portalConfig = {
       portalSlug: '<%= @portal.slug %>',
diff --git a/app/views/public/api/v1/portals/_category-block.html.erb b/app/views/public/api/v1/portals/_category-block.html.erb
index c5c8e8e53..f64ddc467 100644
--- a/app/views/public/api/v1/portals/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/_category-block.html.erb
@@ -1,7 +1,7 @@
-<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
+<section class="lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-800 font-medium leading-relaxed hover:underline">
-      <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
+    <h3 class="text-xl text-slate-800 dark:text-slate-50 font-medium leading-relaxed hover:underline">
+      <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>">
         <%= category.name %>
       </a>
     </h3>
@@ -11,20 +11,20 @@
   </div>
   <div class="py-4 w-full mt-2 flex-grow">
     <% if category.articles.published.size == 0 %>
-    <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
+    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl mb-4">
       <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
     </div>
     <% else %>
       <% category.articles.published.order(position: :asc).take(5).each do |article| %>
       <a
-        class="text-slate-800 hover:underline leading-8"
-        href="/hc/<%= portal.slug %>/articles/<%= article.slug %>"
+        class="text-slate-800 dark:text-slate-50 hover:underline leading-8"
+        href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
       >
-        <div class="flex justify-between content-center my-1 -mx-1 p-1 rounded-lg hover:bg-slate-25">
+        <div class="flex justify-between content-center my-1 -mx-1 p-1 rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800">
           <%= article.title %>
           <span class="flex items-center">
             <svg
-              class="w-4 h-4 fill-current text-slate-700"
+              class="w-4 h-4 fill-current text-slate-700 dark:text-slate-200"
               width="24"
               height="24"
               fill="none"
@@ -42,7 +42,7 @@
   </div>
   <div>
     <a
-      href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>"
+      href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
       class="flex flex-row items-center text-base font-medium text-woot-500 hover:underline mt-4"
       style="color: <%= portal.color %>"
     >
diff --git a/app/views/public/api/v1/portals/_footer.html.erb b/app/views/public/api/v1/portals/_footer.html.erb
index 6b266975c..63dccfb09 100644
--- a/app/views/public/api/v1/portals/_footer.html.erb
+++ b/app/views/public/api/v1/portals/_footer.html.erb
@@ -1,7 +1,7 @@
 
 <footer class="pt-16 pb-8 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
-    <p class="text-slate-700 py-2 text-center">
+    <p class="text-slate-700 dark:text-slate-100 py-2 text-center">
       <%= I18n.t('public_portal.footer.made_with') %> <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙
     </p>
   </div>
diff --git a/app/views/public/api/v1/portals/_header.html.erb b/app/views/public/api/v1/portals/_header.html.erb
index 80880c2b9..0c32684fc 100644
--- a/app/views/public/api/v1/portals/_header.html.erb
+++ b/app/views/public/api/v1/portals/_header.html.erb
@@ -1,19 +1,19 @@
 
-<header class="bg-white w-full shadow-sm sticky top-0 z-50">
-  <nav class=" flex bg-white mx-auto max-w-6xl px-8" aria-label="Top">
+<header class="bg-white dark:bg-slate-900 w-full shadow-sm sticky top-0 z-50">
+  <nav class=" flex mx-auto max-w-6xl px-8" aria-label="Top">
     <div class="w-full py-5 flex items-center">
-      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="h-10 text-lg flex items-center text-slate-900 font-semibold">
+      <a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/<%= @theme.present? ? '?theme='+@theme : ''  %>" class="h-10 text-lg flex items-center text-slate-900 dark:text-white font-semibold">
         <% if @portal.logo.present? %>
           <img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
         <% end %>
         <%= @portal.name %>
       </a>
       <% if @portal.homepage_link %>
-      <div class="ml-8 border-l-1 border-slate-50 hidden md:block">
+      <div class="ml-8 border-l-1 border-slate-50 dark:border-slate-800 hidden md:block">
         <div class="flex-grow flex-shrink-0">
-          <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 hover:text-slate-800 hover:underline"> <%= I18n.t('public_portal.header.go_to_homepage') %>
+          <a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-300  hover:underline"> <%= I18n.t('public_portal.header.go_to_homepage') %>
             <span class="ml-2">
-              <svg class="w-4 h-4 fill-current text-slate-600" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
+              <svg class="w-4 h-4 fill-current text-slate-600 dark:text-slate-200" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
             </span>
           </a>
         </div>
@@ -25,13 +25,13 @@
       <div class="inline-flex relative w-24">
         <select
           data-portal-slug="<%= @portal.slug %>"
-          class="appearance-none w-full bg-white px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher hover:bg-slate-75 cursor-pointer"
+          class="appearance-none w-full bg-white dark:bg-slate-900 dark:text-slate-100 px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher hover:bg-slate-75 dark:hover:bg-slate-800 cursor-pointer"
         >
           <% @portal.config["allowed_locales"].each do |locale| %>
             <option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= locale %></option>
           <% end %>
         </select>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-700 dark:text-slate-200">
           <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
         </div>
       </div>
diff --git a/app/views/public/api/v1/portals/_hero.html.erb b/app/views/public/api/v1/portals/_hero.html.erb
index 599f88ccd..b9abdfbd7 100644
--- a/app/views/public/api/v1/portals/_hero.html.erb
+++ b/app/views/public/api/v1/portals/_hero.html.erb
@@ -1,10 +1,10 @@
 <% if !@is_plain_layout_enabled %>
-<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 dark:bg-woot-900 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
   <div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
-    <h1 class="text-2xl md:text-4xl text-slate-900 font-semibold leading-normal">
+    <h1 class="text-2xl md:text-4xl text-slate-900 dark:text-white font-semibold leading-normal">
       <%= portal.header_text %>
     </h1>
-    <p class="text-slate-600 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
+    <p class="text-slate-600 dark:text-slate-200 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
     <div id="search-wrap"></div>
   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/_uncategorized-block.html.erb b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
index 47842a9ff..f96584427 100644
--- a/app/views/public/api/v1/portals/_uncategorized-block.html.erb
+++ b/app/views/public/api/v1/portals/_uncategorized-block.html.erb
@@ -1,6 +1,6 @@
-<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
+<section class="lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline">
+    <h3 class="text-xl text-slate-900 dark:text-white font-semibold leading-relaxed hover:underline">
       <%= category %>
     </h3>
     <span class="text-slate-500">
@@ -10,14 +10,14 @@
   <div class="py-4 w-full mt-2 flex-grow">
     <% portal.articles.published.where(category_id: nil).order(position: :asc).take(5).each do |article| %>
     <a
-      class="text-slate-800 hover:underline leading-8"
-      href="/hc/<%= portal.slug %>/articles/<%= article.slug %>"
+      class="text-slate-800 dark:text-slate-100 hover:underline leading-8"
+      href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
     >
-      <div class="flex justify-between content-center my-1 -mx-1 p-1 rounded-lg hover:bg-slate-25">
+      <div class="flex justify-between content-center my-1 -mx-1 p-1 rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800">
         <%= article.title %>
         <span class="flex items-center">
           <svg
-            class="w-4 h-4 fill-current text-slate-700"
+            class="w-4 h-4 fill-current text-slate-700 dark:text-slate-200"
             width="24"
             height="24"
             fill="none"
diff --git a/app/views/public/api/v1/portals/articles/_article_header.html.erb b/app/views/public/api/v1/portals/articles/_article_header.html.erb
index 80dc2036e..030ba27b9 100644
--- a/app/views/public/api/v1/portals/articles/_article_header.html.erb
+++ b/app/views/public/api/v1/portals/articles/_article_header.html.erb
@@ -1,4 +1,4 @@
-<h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
+<h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900 dark:text-white">
   <%= article.title %>
 </h1>
 <div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
@@ -9,8 +9,8 @@
       </div>
     <% end %>
     <div>
-      <h5 class="text-base font-medium text-slate-900 mb-2"><%= article.author.available_name %></h5>
-      <p class="text-sm font-normal text-slate-700">
+      <h5 class="text-base font-medium text-slate-900 dark:text-white mb-2"><%= article.author.available_name %></h5>
+      <p class="text-sm font-normal text-slate-700 dark:text-slate-100">
       <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
     </div>
   </div>
diff --git a/app/views/public/api/v1/portals/articles/index.html.erb b/app/views/public/api/v1/portals/articles/index.html.erb
index 8709b3b00..ca91711f2 100644
--- a/app/views/public/api/v1/portals/articles/index.html.erb
+++ b/app/views/public/api/v1/portals/articles/index.html.erb
@@ -1,10 +1,10 @@
-<div class="bg-slate-50">
+<div class="bg-slate-50 dark:bg-slate-800">
 	<div class="max-w-4xl px-6 py-16 mx-auto space-y-12 w-full">
 		<div class="space-y-4">
 		<div>
 			<a
 				class="text-slate-800 hover:underline leading-8"
-        href="/hc/<%= @portal.slug %>/<%= @category.present? ? @category.slug : '' %>"
+        href="/hc/<%= @portal.slug %>/<%= @category.present? ? @category.slug : '' %><%= @theme.present? ? '?theme='+@theme : ''  %>"
 			>
 				<%= @portal.name %> <%= I18n.t('public_portal.common.home') %>
 			</a>
@@ -12,14 +12,14 @@
 		<span>/</span>
 		</div>
 			<% @articles.each do |article| %>
-				<h1 class="text-4xl font-semibold md:tracking-normal leading-snug md:text-5xl text-slate-900">
+				<h1 class="text-4xl font-semibold md:tracking-normal leading-snug md:text-5xl text-slate-900 dark:text-white">
 				<%= article.title %></h1>
 				<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
 					<div class="flex items-center space-x-2">
 						<img src="<%= article.author.avatar_url %>" alt="" class="w-12 h-812 border rounded-full">
 						<div>
-							<h5 class="text-base font-medium text-slate-900 mb-2"><%= article.author.name %></h5>
-							<p class="text-sm font-normal text-slate-700">
+							<h5 class="text-base font-medium text-slate-900 dark:text-white mb-2"><%= article.author.name %></h5>
+							<p class="text-sm font-normal text-slate-700 dark:text-slate-100">
 								<%= article.author.updated_at.strftime("%B %d %Y") %></p>
 						</div>
 					</div>
@@ -30,7 +30,7 @@
 </div>
 <div class="max-w-4xl flex-grow w-full px-8 py-16 mx-auto space-y-12">
 	<article class="space-y-8">
-		<div class="text-slate-800 font-sans leading-8 text-lg max-w-3xl blog-content">
+		<div class="text-slate-800 dark:text-slate-50 font-sans leading-8 text-lg max-w-3xl blog-content">
 		</div>
 	</article>
 </div>
diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb
index 9423c42e5..50b619b2d 100644
--- a/app/views/public/api/v1/portals/articles/show.html.erb
+++ b/app/views/public/api/v1/portals/articles/show.html.erb
@@ -12,25 +12,25 @@
 <% end %>
 
 <% if !@is_plain_layout_enabled %>
-<div class="bg-woot-50 py-8 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+<div class="bg-woot-50 dark:bg-woot-900 py-8 shadow-inner" style="<%= generate_portal_bg(@portal.color, @theme) %>">
   <div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
     <div>
       <a
-        class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
-        href="/hc/<%= @portal.slug %>/<%= @article.category&.locale %>"
+        class="text-slate-700 dark:text-slate-100 hover:underline leading-8 text-sm font-semibold"
+        href="/hc/<%= @portal.slug %>/<%= @article.category&.locale %><%= @theme.present? ? '?theme='+@theme : ''  %>"
       >
         Home
       </a>
-      <span class="text-xs text-slate-600 px-1">/</span>
+      <span class="text-xs text-slate-600 dark:text-slate-200  px-1">/</span>
       <% if @article.category %>
         <a
-          class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
-          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
+          class="text-slate-700 dark:text-slate-100 hover:underline leading-8 text-sm font-semibold"
+          href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
         >
           <%= @article.category&.name %>
         </a>
       <% else %>
-        <span class="text-slate-700 leading-8 text-sm font-semibold" > Uncategorized </span>
+        <span class="text-slate-700 dark:text-slate-100 leading-8 text-sm font-semibold" > Uncategorized </span>
       <% end %>
     </div>
     <%= render "public/api/v1/portals/articles/article_header", article: @article %>
@@ -43,7 +43,7 @@
 <% end %>
 
 <div class="flex max-w-6xl w-full px-8 mx-auto">
-  <article id="cw-article-content" class="flex-grow flex-2 mx-auto text-slate-800 text-lg max-w-3xl prose break-words w-full <%= @is_plain_layout_enabled ? 'py-4' : 'py-12' %>">
+  <article id="cw-article-content" class="flex-grow flex-2 mx-auto text-slate-800 dark:text-slate-50 text-lg max-w-3xl prose dark:prose-invert break-words w-full <%= @is_plain_layout_enabled ? 'py-4' : 'py-12' %>">
     <%= @parsed_content %>
   </article>
   <div class="flex-1" id="cw-hc-toc"></div>
diff --git a/app/views/public/api/v1/portals/categories/_category-block.html.erb b/app/views/public/api/v1/portals/categories/_category-block.html.erb
index 171b8ce97..eddb18ab1 100644
--- a/app/views/public/api/v1/portals/categories/_category-block.html.erb
+++ b/app/views/public/api/v1/portals/categories/_category-block.html.erb
@@ -1,8 +1,8 @@
 
-<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
+<section class="lg:container w-full py-6 px-4 flex flex-col h-full">
   <div class="flex justify-between items-center w-full">
-    <h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline"">
-     <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
+    <h3 class="text-xl text-slate-900 dark:text-white font-semibold leading-relaxed hover:underline">
+     <a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>">
       <%= category.name %>
     </a>
     </h3>
@@ -12,21 +12,21 @@
   </div>
   <div class="py-4 w-full mt-2 flex-grow">
     <% if category.articles.published.size == 0 %>
-      <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl mb-4">
+      <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl mb-4">
         <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
       </div>
     <% else %>
       <% category.articles.published.order(position: :asc).take(5).each do |article| %>
         <div class="flex justify-between content-center h-8 my-1">
           <a
-            class="text-slate-800 hover:underline leading-8"
-            href="/hc/<%= portal.slug %>/articles/<%= article.slug %>"
+            class="text-slate-800 dark:text-slate-50 hover:underline leading-8"
+            href="/hc/<%= portal.slug %>/articles/<%= article.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
           >
             <%= article.title %>
           </a>
           <span class="flex items-center">
             <svg
-              class="w-4 h-4 fill-current text-slate-700"
+              class="w-4 h-4 fill-current text-slate-700 dark:text-slate-200"
               width="24"
               height="24"
               fill="none"
@@ -45,8 +45,8 @@
   </div>
   <div>
     <a
-      href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>"
-      class="flex flex-row items-center text-base font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4"
+      href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
+      class="flex flex-row items-center text-base font-medium text-woot-600 dark:text-woot-500 hover:text-slate-900 dark:hover:text-white hover:underline mt-4"
     >
       <%= I18n.t('public_portal.common.view_all_articles') %>
       <span class="ml-2">
diff --git a/app/views/public/api/v1/portals/categories/_category-hero.html.erb b/app/views/public/api/v1/portals/categories/_category-hero.html.erb
index 9ca272aa8..3cc474742 100644
--- a/app/views/public/api/v1/portals/categories/_category-hero.html.erb
+++ b/app/views/public/api/v1/portals/categories/_category-hero.html.erb
@@ -1,13 +1,13 @@
 <div class="px-8 max-w-6xl w-full mx-auto">
   <a
-    class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
-    href="/hc/<%= portal.slug %>/<%= category.locale %>"
+    class="text-slate-700 dark:text-slate-100 text-sm hover:underline leading-8 font-semibold"
+    href="/hc/<%= portal.slug %>/<%= category.locale %><%= @theme.present? ? '?theme='+@theme : ''  %>"
   >
     <%= I18n.t('public_portal.common.home') %>
   </a>
-  <span class="text-xs text-slate-600 px-1">/</span>
+  <span class="text-xs text-slate-600 dark:text-slate-200 px-1">/</span>
   <div class="flex justify-start items-center w-full">
-    <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
+    <h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900 dark:text-white">
       <%= category.name %>
     </h1>
     <div class="text-slate-500 px-8 mt-2">
diff --git a/app/views/public/api/v1/portals/categories/_hero.html.erb b/app/views/public/api/v1/portals/categories/_hero.html.erb
index 3529c08ac..0c179338d 100644
--- a/app/views/public/api/v1/portals/categories/_hero.html.erb
+++ b/app/views/public/api/v1/portals/categories/_hero.html.erb
@@ -1,7 +1,7 @@
 
-<section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
+<section class="bg-slate-50 dark:bg-slate-800 py-16 flex flex-col items-center justify-center">
   <div class="mx-auto max-w-2xl">
-    <h1 class="text-4xl text-slate-900 font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
-    <p class="text-slate-700 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
+    <h1 class="text-4xl text-slate-900 dark:text-white font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
+    <p class="text-slate-700 dark:text-slate-100 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
   </div>
 </section>
diff --git a/app/views/public/api/v1/portals/categories/show.html.erb b/app/views/public/api/v1/portals/categories/show.html.erb
index 651db645b..b127cb96e 100644
--- a/app/views/public/api/v1/portals/categories/show.html.erb
+++ b/app/views/public/api/v1/portals/categories/show.html.erb
@@ -6,23 +6,23 @@
 <% end %>
 
 <% if !@is_plain_layout_enabled %>
-<div class="bg-woot-50 pt-16 pb-20" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
+<div class="bg-woot-50 dark:bg-woot-900 pt-16 pb-20" style="<%= generate_portal_bg(@portal.color, @theme) %>">
   <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
 </div>
 <% else %>
   <%= render 'public/api/v1/portals/categories/category-hero', category: @category, portal: @portal %>
 <% end %>
-<section class="bg-white max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
+<section class="max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
   <div class="py-4 w-full mt-2 flex-grow">
     <% if @category.articles.published.size == 0 %>
-    <div class="h-full flex items-center justify-center bg-slate-50 rounded-xl py-6">
+    <div class="h-full flex items-center justify-center bg-slate-50 dark:bg-slate-800 rounded-xl py-6">
       <p class="text-sm text-slate-500"><%= I18n.t('public_portal.common.no_articles') %></p>
     </div>
     <% else %>
     <% @category.articles.published.order(:position).each do |article| %>
       <a
-        class="text-slate-800 flex justify-between content-center mb-4 py-2"
-        href="/hc/<%= @portal.slug %>/articles/<%= article.slug %>"
+        class="text-slate-800 dark:text-slate-50 flex justify-between content-center mb-4 py-2"
+        href="/hc/<%= @portal.slug %>/articles/<%= article.slug %><%= @theme.present? ? '?theme='+@theme : ''  %>"
       >
         <div>
           <p class="mb-2 hover:underline font-semibold"><%= article.title %></p>
@@ -33,7 +33,7 @@
 
         <span>
           <svg
-            class="w-4 h-4 fill-current text-slate-700"
+            class="w-4 h-4 fill-current text-slate-700 dark:text-slate-200"
             width="24"
             height="24"
             fill="none"
diff --git a/public/assets/images/hc/grid_dark.svg b/public/assets/images/hc/grid_dark.svg
new file mode 100644
index 000000000..86eedb613
--- /dev/null
+++ b/public/assets/images/hc/grid_dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#b0c7d4"
+  stroke-opacity="0.04">
+  <path d="M0 .5H31.5V32" />
+</svg>
diff --git a/spec/helpers/portal_helper_spec.rb b/spec/helpers/portal_helper_spec.rb
new file mode 100644
index 000000000..3f689b238
--- /dev/null
+++ b/spec/helpers/portal_helper_spec.rb
@@ -0,0 +1,60 @@
+require 'rails_helper'
+
+describe PortalHelper do
+  describe '#generate_portal_bg_color' do
+    context 'when theme is dark' do
+      it 'returns the correct color mix with black' do
+        expect(helper.generate_portal_bg_color('#ff0000', 'dark')).to eq(
+          'color-mix(in srgb, #ff0000 10%, black)'
+        )
+      end
+    end
+
+    context 'when theme is not dark' do
+      it 'returns the correct color mix with white' do
+        expect(helper.generate_portal_bg_color('#ff0000', 'light')).to eq(
+          'color-mix(in srgb, #ff0000 10%, white)'
+        )
+      end
+    end
+
+    context 'when provided with various colors' do
+      it 'adjusts the color mix appropriately' do
+        expect(helper.generate_portal_bg_color('#00ff00', 'dark')).to eq(
+          'color-mix(in srgb, #00ff00 10%, black)'
+        )
+        expect(helper.generate_portal_bg_color('#0000ff', 'light')).to eq(
+          'color-mix(in srgb, #0000ff 10%, white)'
+        )
+      end
+    end
+  end
+
+  describe '#generate_portal_bg' do
+    context 'when theme is dark' do
+      it 'returns the correct background with dark grid image and color mix with black' do
+        expected_bg = 'background: url(/assets/images/hc/grid_dark.svg) color-mix(in srgb, #ff0000 10%, black)'
+        expect(helper.generate_portal_bg('#ff0000', 'dark')).to eq(expected_bg)
+      end
+    end
+
+    context 'when theme is not dark' do
+      it 'returns the correct background with light grid image and color mix with white' do
+        expected_bg = 'background: url(/assets/images/hc/grid.svg) color-mix(in srgb, #ff0000 10%, white)'
+        expect(helper.generate_portal_bg('#ff0000', 'light')).to eq(expected_bg)
+      end
+    end
+
+    context 'when provided with various colors' do
+      it 'adjusts the background appropriately for dark theme' do
+        expected_bg = 'background: url(/assets/images/hc/grid_dark.svg) color-mix(in srgb, #00ff00 10%, black)'
+        expect(helper.generate_portal_bg('#00ff00', 'dark')).to eq(expected_bg)
+      end
+
+      it 'adjusts the background appropriately for light theme' do
+        expected_bg = 'background: url(/assets/images/hc/grid.svg) color-mix(in srgb, #0000ff 10%, white)'
+        expect(helper.generate_portal_bg('#0000ff', 'light')).to eq(expected_bg)
+      end
+    end
+  end
+end