From fa7c530ed8cf88fbcfc8b0d68d9f00a95ea1a749 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 19 Nov 2024 16:33:22 -0800
Subject: [PATCH 1/2] UI light QA

---
 .../DataConnectors/Connectors/Gitlab/index.jsx              | 2 +-
 .../ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx   | 2 +-
 .../Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx      | 2 +-
 frontend/src/components/Sidebar/index.jsx                   | 2 +-
 frontend/src/components/lib/CTAButton/index.jsx             | 2 +-
 frontend/src/index.css                                      | 4 ++++
 frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx | 4 ++--
 .../Admin/Agents/Imported/ImportedSkillConfig/index.jsx     | 6 +++---
 .../src/pages/Admin/Agents/SQLConnectorSelection/index.jsx  | 6 +++---
 .../src/pages/Admin/Agents/WebSearchSelection/index.jsx     | 6 +++---
 frontend/src/pages/Admin/Users/index.jsx                    | 2 +-
 .../GeneralSettings/Appearance/ShowScrollbar/index.jsx      | 2 +-
 frontend/tailwind.config.js                                 | 2 +-
 13 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
index a820ac3ca2..29c90503f5 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Gitlab/index.jsx
@@ -130,7 +130,7 @@ export default function GitlabOptions() {
                       value={true}
                       className="peer sr-only"
                     />
-                    <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+                    <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
                     <span className="ml-3 text-sm font-medium text-white">
                       Fetch Issues as Documents
                     </span>
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
index 89d17ec6a7..cbe3b63014 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
@@ -63,7 +63,7 @@ export default function ThreadItem({
         className="h-full"
       />
       <div
-        className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)]" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`}
+        className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? "bg-[var(--theme-sidebar-thread-selected)] border border-solid border-transparent light:border-blue-400" : "hover:bg-theme-sidebar-subitem-hover"} rounded-[4px]`}
       >
         {thread.deleted ? (
           <div className="w-full flex justify-between">
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
index d311ca0ce1..3f7243c9a3 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
@@ -169,7 +169,7 @@ function NewThreadButton({ workspace }) {
   return (
     <button
       onClick={onClick}
-      className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] rounded-lg"
+      className="w-full relative flex h-[40px] items-center border-none hover:bg-[var(--theme-sidebar-thread-selected)] hover:light:bg-theme-sidebar-subitem-hover rounded-lg"
     >
       <div className="flex w-full gap-x-2 items-center pl-4">
         <div className="bg-white/20 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index edfac23bbc..cec1604c0b 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -48,7 +48,7 @@ export default function Sidebar() {
                   {(!user || user?.role !== "default") && (
                     <button
                       onClick={showNewWsModal}
-                      className="light:bg-[#C2E7FE] light:hover:bg-[#C2E7FE]/50 flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                      className="light:bg-[#C2E7FE] light:hover:bg-[#7CD4FD] flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
                     >
                       <Plus size={18} weight="bold" />
                       <p className="text-sidebar text-sm font-semibold">
diff --git a/frontend/src/components/lib/CTAButton/index.jsx b/frontend/src/components/lib/CTAButton/index.jsx
index b439a552a6..9b332cb545 100644
--- a/frontend/src/components/lib/CTAButton/index.jsx
+++ b/frontend/src/components/lib/CTAButton/index.jsx
@@ -8,7 +8,7 @@ export default function CTAButton({
     <button
       disabled={disabled}
       onClick={() => onClick?.()}
-      className={`text-xs px-4 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary hover:text-white h-[34px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] w-fit ${className}`}
+      className={`text-xs px-4 py-1 font-semibold light:text-[#ffffff] rounded-lg bg-primary-button hover:bg-secondary hover:text-white h-[34px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] w-fit ${className}`}
     >
       <div className="flex items-center justify-center gap-2">{children}</div>
     </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 25a2de074f..2cad114f8d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -37,6 +37,8 @@
   --theme-settings-input-active: rgb(255 255 255 / 0.2);
   --theme-settings-input-text: #ffffff;
   --theme-modal-border: #3f3f42;
+
+  --theme-button-primary: #46c8ff;
   --theme-button-primary-hover: #434343;
 
   --theme-file-row-even: #0e0f0f;
@@ -86,6 +88,8 @@
   --theme-settings-input-active: rgb(0 0 0 / 0.2);
   --theme-settings-input-text: #0e0f0f;
   --theme-modal-border: #d3d3d3;
+
+  --theme-button-primary: #0ba5ec;
   --theme-button-primary-hover: #dedede;
 
   --theme-file-row-even: #f5f5f5;
diff --git a/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx b/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
index 074e1927d3..e066941134 100644
--- a/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
+++ b/frontend/src/pages/Admin/Agents/GenericSkillPanel/index.jsx
@@ -38,8 +38,8 @@ export default function GenericSkillPanel({
               checked={enabled}
               onChange={() => toggleSkill(skill)}
             />
-            <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-            <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
+            <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+            <span className="ml-3 text-sm font-medium"></span>
           </label>
         </div>
         <img src={image} alt={title} className="w-full rounded-md" />
diff --git a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
index e966e3509c..bb382ff47e 100644
--- a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
+++ b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
@@ -109,15 +109,15 @@ export default function ImportedSkillConfig({
             <label htmlFor="name" className="text-white text-md font-bold">
               {sentenceCase(config.name)}
             </label>
-            <label className="border-none relative inline-flex cursor-pointer items-center ml-auto">
+            <label className="border-none relative inline-flex items-center ml-auto cursor-pointer">
               <input
                 type="checkbox"
                 className="peer sr-only"
                 checked={config.active}
                 onChange={() => toggleSkill()}
               />
-              <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
+              <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+              <span className="ml-3 text-sm font-medium"></span>
             </label>
           </div>
           <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
index cc8256145b..515c3c897c 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/index.jsx
@@ -37,15 +37,15 @@ export default function AgentSQLConnectorSelection({
             >
               SQL Agent
             </label>
-            <label className="border-none relative inline-flex cursor-pointer items-center ml-auto">
+            <label className="border-none relative inline-flex items-center ml-auto cursor-pointer">
               <input
                 type="checkbox"
                 className="peer sr-only"
                 checked={enabled}
                 onChange={() => toggleSkill(skill)}
               />
-              <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
+              <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+              <span className="ml-3 text-sm font-medium"></span>
             </label>
           </div>
           <img
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index 4f3678781c..710ad7460d 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -166,15 +166,15 @@ export default function AgentWebSearchSelection({
           >
             Live web search and browsing
           </label>
-          <label className="border-none relative inline-flex cursor-pointer items-center ml-auto">
+          <label className="border-none relative inline-flex items-center ml-auto cursor-pointer">
             <input
               type="checkbox"
               className="peer sr-only"
               checked={enabled}
               onChange={() => toggleSkill(skill)}
             />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-theme-bg-secondary after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
-            <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
+            <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
+            <span className="ml-3 text-sm font-medium"></span>
           </label>
         </div>
         <img
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index d72c4e862f..a29006b0df 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -164,7 +164,7 @@ export function MessageLimitInput({ enabled, limit, updateState, role }) {
               }}
               className="peer sr-only"
             />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
           </label>
         </div>
         <p className="text-xs leading-[18px] font-base text-white/60">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx
index eb8c63378e..361c7afa52 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/ShowScrollbar/index.jsx
@@ -47,7 +47,7 @@ export default function ShowScrollbar() {
               disabled={saving}
               className="peer sr-only"
             />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
           </label>
         </div>
       </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 958c504522..8ecdbcdc0a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -28,7 +28,7 @@ export default {
         "historical-msg-system": "rgba(255, 255, 255, 0.05);",
         "historical-msg-user": "#2C2F35",
         outline: "#4E5153",
-        "primary-button": "#46C8FF",
+        "primary-button": "var(--theme-button-primary)",
         secondary: "#2C2F36",
         "dark-input": "#18181B",
         "mobile-onboarding": "#2C2F35",

From 988181afdef71d41053b87b1f30b3d7769619af4 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 19 Nov 2024 17:37:22 -0800
Subject: [PATCH 2/2] update light/dark codeblock styles for visibility patch
 embed modal text invisible patch toggle colors

---
 .../Features/LiveSync/toggle.jsx              |   2 +-
 .../FineTuning/Steps/DataUpload/index.jsx     |   2 +-
 .../EmbedRow/CodeSnippetModal/index.jsx       |   9 +-
 .../EmbedConfigs/NewEmbedModal/index.jsx      |  20 +--
 .../GeneralSettings/PrivacyAndData/index.jsx  |   2 +-
 .../pages/GeneralSettings/Security/index.jsx  |   6 +-
 frontend/src/utils/chat/markdown.js           |  13 +-
 .../src/utils/chat/themes/github-dark.css     | 125 ++++++++++++++++++
 frontend/src/utils/chat/themes/github.css     | 125 ++++++++++++++++++
 9 files changed, 281 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/utils/chat/themes/github-dark.css
 create mode 100644 frontend/src/utils/chat/themes/github.css

diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
index 2c2b750a57..91024635c0 100644
--- a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
+++ b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
@@ -43,7 +43,7 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
               checked={status}
               className="peer sr-only pointer-events-none"
             />
-            <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+            <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
           </label>
         </div>
         <div className="flex flex-col space-y-4">
diff --git a/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx b/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
index aeb7d08905..2f5f556031 100644
--- a/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
+++ b/frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
@@ -81,7 +81,7 @@ export default function DataUpload({ setSettings, setStep }) {
                   checked={dataFilters.feedback}
                   className="peer sr-only pointer-events-none"
                 />
-                <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0 peer-focus:ring-none"></div>
+                <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
               </label>
             </div>
 
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
index f02640d722..76fda358c9 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx
@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { CheckCircle, CopySimple, X } from "@phosphor-icons/react";
 import showToast from "@/utils/toast";
 import hljs from "highlight.js";
-import "highlight.js/styles/github-dark-dimmed.min.css";
+import "@/utils/chat/themes/github-dark.css";
+import "@/utils/chat/themes/github.css";
 
 export default function CodeSnippetModal({ embed, closeModal }) {
   return (
@@ -66,6 +67,8 @@ const ScriptTag = ({ embed }) => {
     ? "http://localhost:3001"
     : window.location.origin;
   const snippet = createScriptTagSnippet(embed, scriptHost, serverHost);
+  const theme =
+    window.localStorage.getItem("theme") === "light" ? "github" : "github-dark";
 
   const handleClick = () => {
     window.navigator.clipboard.writeText(snippet);
@@ -82,7 +85,7 @@ const ScriptTag = ({ embed }) => {
         <label className="block text-sm font-medium text-white">
           HTML Script Tag Embed Code
         </label>
-        <p className="text-secondary text-xs">
+        <p className="text-theme-text-secondary text-xs">
           Have your workspace chat embed function like a help desk chat bottom
           in the corner of your website.
         </p>
@@ -97,7 +100,7 @@ const ScriptTag = ({ embed }) => {
       <button
         disabled={copied}
         onClick={handleClick}
-        className="disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex bg-zinc-900 light:invert text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5"
+        className={`disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex hljs ${theme} light:border light:border-gray-700 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5`}
       >
         <div
           className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
index 38f2b3d174..42b7ec76da 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx
@@ -136,7 +136,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
         >
           Workspace
         </label>
-        <p className="text-secondary text-xs">
+        <p className="text-theme-text-secondary text-xs">
           This is the workspace your chat window will be based on. All defaults
           will be inherited from the workspace unless overridden by this config.
         </p>
@@ -174,7 +174,7 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
         >
           Allowed chat method
         </label>
-        <p className="text-secondary text-xs">
+        <p className="text-theme-text-secondary text-xs">
           Set how your chatbot should operate. Query means it will only respond
           if a document helps answer the query.
           <br />
@@ -187,8 +187,8 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
           className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
             chatMode === "chat"
               ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
-              : "border-theme-sidebar-border"
-          } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
+              : "border-theme-sidebar-border hover:border-theme-sidebar-border hover:bg-theme-bg-secondary"
+          } `}
         >
           <input
             type="radio"
@@ -213,8 +213,8 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
           className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
             chatMode === "query"
               ? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
-              : "border-theme-sidebar-border"
-          } hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
+              : "border-theme-sidebar-border hover:border-theme-sidebar-border hover:bg-theme-bg-secondary"
+          } `}
         >
           <input
             type="radio"
@@ -287,7 +287,7 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
         >
           Restrict requests from domains
         </label>
-        <p className="test-secondary text-xs">
+        <p className="text-theme-text-secondary text-xs">
           This filter will block any requests that come from a domain other than
           the list below.
           <br />
@@ -317,7 +317,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
         <label htmlFor={name} className="block text-sm font-medium text-white">
           {title}
         </label>
-        <p className="test-secondary text-xs">{hint}</p>
+        <p className="text-theme-text-secondary text-xs">{hint}</p>
       </div>
       <input
         type="number"
@@ -340,7 +340,7 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
         <label htmlFor={name} className="block text-sm font-medium text-white">
           {title}
         </label>
-        <p className="test-secondary text-xs">{hint}</p>
+        <p className="text-theme-text-secondary text-xs">{hint}</p>
       </div>
       <label className="relative inline-flex cursor-pointer items-center">
         <input
@@ -350,7 +350,7 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
           checked={status}
           className="peer sr-only pointer-events-none"
         />
-        <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800" />
+        <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
       </label>
     </div>
   );
diff --git a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
index ffe07e82b4..c107dbcd5e 100644
--- a/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
+++ b/frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
@@ -172,7 +172,7 @@ function TelemetryLogs({ settings }) {
                   checked={telemetry}
                   className="peer sr-only pointer-events-none"
                 />
-                <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+                <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
               </label>
             </div>
           </div>
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index 2b26b5d912..0f33bc045b 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -130,8 +130,8 @@ function MultiUserMode() {
                     />
                     <div
                       hidden={multiUserModeEnabled}
-                      className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"
-                    ></div>
+                      className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"
+                    />
                   </label>
                 </div>
                 {useMultiUserMode && (
@@ -303,7 +303,7 @@ function PasswordProtection() {
                       defaultChecked={usePassword}
                       className="peer sr-only pointer-events-none"
                     />
-                    <div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+                    <div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent" />
                   </label>
                 </div>
                 {usePassword && (
diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index f284e9b674..b0fa7f2d52 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -2,7 +2,8 @@ import { encode as HTMLEncode } from "he";
 import markdownIt from "markdown-it";
 import markdownItKatex from "markdown-it-katex";
 import hljs from "highlight.js";
-import "highlight.js/styles/github-dark-dimmed.min.css";
+import "./themes/github-dark.css";
+import "./themes/github.css";
 import { v4 } from "uuid";
 
 const markdown = markdownIt({
@@ -12,9 +13,13 @@ const markdown = markdownIt({
     const uuid = v4();
     if (lang && hljs.getLanguage(lang)) {
       try {
+        const theme =
+          window.localStorage.getItem("theme") === "light"
+            ? "github"
+            : "github-dark";
         return (
-          `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
-            <div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
+          `<div class="whitespace-pre-line w-full hljs ${theme} light:border light:border-gray-700 rounded-lg px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
+            <div class="w-full flex items-center absolute top-0 left-0 text-slate-200 light:bg-sky-800 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
               <div class="flex gap-2">
                 <code class="text-xs">${lang || ""}</code>
               </div>
@@ -31,7 +36,7 @@ const markdown = markdownIt({
     }
 
     return (
-      `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
+      `<div class="whitespace-pre-line w-full rounded-lg bg-black-900 light:bg-gray-200 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
         <div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
           <div class="flex gap-2"><code class="text-xs"></code></div>
           <button data-code-snippet data-code="code-${uuid}" class="flex items-center gap-x-2">
diff --git a/frontend/src/utils/chat/themes/github-dark.css b/frontend/src/utils/chat/themes/github-dark.css
new file mode 100644
index 0000000000..3badb68752
--- /dev/null
+++ b/frontend/src/utils/chat/themes/github-dark.css
@@ -0,0 +1,125 @@
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.github-dark.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+
+.github-dark .hljs-doctag,
+.github-dark .hljs-keyword,
+.github-dark .hljs-meta .hljs-keyword,
+.github-dark .hljs-template-tag,
+.github-dark .hljs-template-variable,
+.github-dark .hljs-type,
+.github-dark .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72;
+}
+
+.github-dark .hljs-title,
+.github-dark .hljs-title.class_,
+.github-dark .hljs-title.class_.inherited__,
+.github-dark .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff;
+}
+
+.github-dark .hljs-attr,
+.github-dark .hljs-attribute,
+.github-dark .hljs-literal,
+.github-dark .hljs-meta,
+.github-dark .hljs-number,
+.github-dark .hljs-operator,
+.github-dark .hljs-variable,
+.github-dark .hljs-selector-attr,
+.github-dark .hljs-selector-class,
+.github-dark .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff;
+}
+
+.github-dark .hljs-regexp,
+.github-dark .hljs-string,
+.github-dark .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff;
+}
+
+.github-dark .hljs-built_in,
+.github-dark .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657;
+}
+
+.github-dark .hljs-comment,
+.github-dark .hljs-code,
+.github-dark .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e;
+}
+
+.github-dark .hljs-name,
+.github-dark .hljs-quote,
+.github-dark .hljs-selector-tag,
+.github-dark .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787;
+}
+
+.github-dark .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9;
+}
+
+.github-dark .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold;
+}
+
+.github-dark .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60;
+}
+
+.github-dark .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic;
+}
+
+.github-dark .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold;
+}
+
+.github-dark .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+.github-dark .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
+.github-dark .hljs-char.escape_,
+.github-dark .hljs-link,
+.github-dark .hljs-params,
+.github-dark .hljs-property,
+.github-dark .hljs-punctuation,
+.github-dark .hljs-tag {
+  /* purposely ignored */
+}
diff --git a/frontend/src/utils/chat/themes/github.css b/frontend/src/utils/chat/themes/github.css
new file mode 100644
index 0000000000..e7959f9376
--- /dev/null
+++ b/frontend/src/utils/chat/themes/github.css
@@ -0,0 +1,125 @@
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+
+.github.hljs {
+  color: #24292e;
+  background: #ffffff;
+}
+
+.github .hljs-doctag,
+.github .hljs-keyword,
+.github .hljs-meta .hljs-keyword,
+.github .hljs-template-tag,
+.github .hljs-template-variable,
+.github .hljs-type,
+.github .hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.github .hljs-title,
+.github .hljs-title.class_,
+.github .hljs-title.class_.inherited__,
+.github .hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.github .hljs-attr,
+.github .hljs-attribute,
+.github .hljs-literal,
+.github .hljs-meta,
+.github .hljs-number,
+.github .hljs-operator,
+.github .hljs-variable,
+.github .hljs-selector-attr,
+.github .hljs-selector-class,
+.github .hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.github .hljs-regexp,
+.github .hljs-string,
+.github .hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.github .hljs-built_in,
+.github .hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.github .hljs-comment,
+.github .hljs-code,
+.github .hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.github .hljs-name,
+.github .hljs-quote,
+.github .hljs-selector-tag,
+.github .hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.github .hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.github .hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.github .hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+
+.github .hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+
+.github .hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+
+.github .hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.github .hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.github .hljs-char.escape_,
+.github .hljs-link,
+.github .hljs-params,
+.github .hljs-property,
+.github .hljs-punctuation,
+.github .hljs-tag {
+  /* purposely ignored */
+}