diff --git a/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx b/frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/toggle.jsx
index 2c2b750a5..91024635c 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 aeb7d0890..2f5f55603 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 f02640d72..76fda358c 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 38f2b3d17..42b7ec76d 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 ffe07e82b..c107dbcd5 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 2b26b5d91..0f33bc045 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 f284e9b67..b0fa7f2d5 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 000000000..3badb6875
--- /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 000000000..e7959f937
--- /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 */
+}