kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode setup themes (#2411)

Browse Source 
* setup generic tailwind theme + ability to add new themes

* add theme context

* use correct colors from design for sidebar + fix padding
This commit is contained in:
Sean Hatfield 2024-10-02 18:06:31 -07:00 committed by GitHub
parent cbc4e80d31
commit d0546a47df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 319 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
frontend/src/App.jsx
View File

@ -15,6 +15,7 @@ import i18n from "./i18n";
import { PfpProvider } from "./PfpContext"; import { PfpProvider } from "./PfpContext";
import { LogoProvider } from "./LogoContext"; import { LogoProvider } from "./LogoContext";
import { FullScreenLoader } from "./components/Preloader"; import { FullScreenLoader } from "./components/Preloader";
import { ThemeProvider } from "./ThemeContext";
const Main = lazy(() => import("@/pages/Main")); const Main = lazy(() => import("@/pages/Main"));
const InvitePage = lazy(() => import("@/pages/Invite")); const InvitePage = lazy(() => import("@/pages/Invite"));
@ -75,132 +76,139 @@ export default function App() {
<LogoProvider> <LogoProvider>
<PfpProvider> <PfpProvider>
<I18nextProvider i18n={i18n}> <I18nextProvider i18n={i18n}>
<Routes> <ThemeProvider>
<Route path="/" element={<PrivateRoute Component={Main} />} /> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/" element={<PrivateRoute Component={Main} />} />
<Route <Route path="/login" element={<Login />} />
path="/workspace/:slug/settings/:tab" <Route
element={<ManagerRoute Component={WorkspaceSettings} />} path="/workspace/:slug/settings/:tab"
/> element={<ManagerRoute Component={WorkspaceSettings} />}
<Route />
path="/workspace/:slug" <Route
element={<PrivateRoute Component={WorkspaceChat} />} path="/workspace/:slug"
/> element={<PrivateRoute Component={WorkspaceChat} />}
<Route />
path="/workspace/:slug/t/:threadSlug" <Route
element={<PrivateRoute Component={WorkspaceChat} />} path="/workspace/:slug/t/:threadSlug"
/> element={<PrivateRoute Component={WorkspaceChat} />}
<Route path="/accept-invite/:code" element={<InvitePage />} /> />
<Route path="/accept-invite/:code" element={<InvitePage />} />
{/* Admin */} {/* Admin */}
<Route <Route
path="/settings/llm-preference" path="/settings/llm-preference"
element={<AdminRoute Component={GeneralLLMPreference} />} element={<AdminRoute Component={GeneralLLMPreference} />}
/> />
<Route <Route
path="/settings/transcription-preference" path="/settings/transcription-preference"
element={ element={
<AdminRoute Component={GeneralTranscriptionPreference} /> <AdminRoute Component={GeneralTranscriptionPreference} />
} }
/> />
<Route <Route
path="/settings/audio-preference" path="/settings/audio-preference"
element={<AdminRoute Component={GeneralAudioPreference} />} element={<AdminRoute Component={GeneralAudioPreference} />}
/> />
<Route <Route
path="/settings/embedding-preference" path="/settings/embedding-preference"
element={ element={
<AdminRoute Component={GeneralEmbeddingPreference} /> <AdminRoute Component={GeneralEmbeddingPreference} />
} }
/> />
<Route <Route
path="/settings/text-splitter-preference" path="/settings/text-splitter-preference"
element={ element={
<AdminRoute Component={EmbeddingTextSplitterPreference} /> <AdminRoute Component={EmbeddingTextSplitterPreference} />
} }
/> />
<Route <Route
path="/settings/vector-database" path="/settings/vector-database"
element={<AdminRoute Component={GeneralVectorDatabase} />} element={<AdminRoute Component={GeneralVectorDatabase} />}
/> />
<Route <Route
path="/settings/agents" path="/settings/agents"
element={<AdminRoute Component={AdminAgents} />} element={<AdminRoute Component={AdminAgents} />}
/> />
<Route <Route
path="/settings/event-logs" path="/settings/event-logs"
element={<AdminRoute Component={AdminLogs} />} element={<AdminRoute Component={AdminLogs} />}
/> />
<Route <Route
path="/settings/embed-config" path="/settings/embed-config"
element={<AdminRoute Component={EmbedConfigSetup} />} element={<AdminRoute Component={EmbedConfigSetup} />}
/> />
<Route <Route
path="/settings/embed-chats" path="/settings/embed-chats"
element={<AdminRoute Component={EmbedChats} />} element={<AdminRoute Component={EmbedChats} />}
/> />
{/* Manager */} {/* Manager */}
<Route <Route
path="/settings/security" path="/settings/security"
element={<ManagerRoute Component={GeneralSecurity} />} element={<ManagerRoute Component={GeneralSecurity} />}
/> />
<Route <Route
path="/settings/privacy" path="/settings/privacy"
element={<AdminRoute Component={PrivacyAndData} />} element={<AdminRoute Component={PrivacyAndData} />}
/> />
<Route <Route
path="/settings/appearance" path="/settings/appearance"
element={<ManagerRoute Component={GeneralAppearance} />} element={<ManagerRoute Component={GeneralAppearance} />}
/> />
<Route <Route
path="/settings/beta-features" path="/settings/beta-features"
element={<AdminRoute Component={ExperimentalFeatures} />} element={<AdminRoute Component={ExperimentalFeatures} />}
/> />
<Route <Route
path="/settings/api-keys" path="/settings/api-keys"
element={<AdminRoute Component={GeneralApiKeys} />} element={<AdminRoute Component={GeneralApiKeys} />}
/> />
<Route <Route
path="/settings/browser-extension" path="/settings/browser-extension"
element={<ManagerRoute Component={GeneralBrowserExtension} />} element={
/> <ManagerRoute Component={GeneralBrowserExtension} />
<Route }
path="/settings/workspace-chats" />
element={<ManagerRoute Component={GeneralChats} />} <Route
/> path="/settings/workspace-chats"
<Route element={<ManagerRoute Component={GeneralChats} />}
path="/settings/system-preferences" />
element={<ManagerRoute Component={AdminSystem} />} <Route
/> path="/settings/system-preferences"
<Route element={<ManagerRoute Component={AdminSystem} />}
path="/settings/invites" />
element={<ManagerRoute Component={AdminInvites} />} <Route
/> path="/settings/invites"
<Route element={<ManagerRoute Component={AdminInvites} />}
path="/settings/users" />
element={<ManagerRoute Component={AdminUsers} />} <Route
/> path="/settings/users"
<Route element={<ManagerRoute Component={AdminUsers} />}
path="/settings/workspaces" />
element={<ManagerRoute Component={AdminWorkspaces} />} <Route
/> path="/settings/workspaces"
{/* Onboarding Flow */} element={<ManagerRoute Component={AdminWorkspaces} />}
<Route path="/onboarding" element={<OnboardingFlow />} /> />
<Route path="/onboarding/:step" element={<OnboardingFlow />} /> {/* Onboarding Flow */}
<Route path="/onboarding" element={<OnboardingFlow />} />
<Route
path="/onboarding/:step"
element={<OnboardingFlow />}
/>
{/* Experimental feature pages */} {/* Experimental feature pages */}
{/* Live Document Sync feature */} {/* Live Document Sync feature */}
<Route <Route
path="/settings/beta-features/live-document-sync/manage" path="/settings/beta-features/live-document-sync/manage"
element={<AdminRoute Component={LiveDocumentSyncManage} />} element={<AdminRoute Component={LiveDocumentSyncManage} />}
/> />
<Route <Route
path="/fine-tuning" path="/fine-tuning"
element={<AdminRoute Component={FineTuningWalkthrough} />} element={<AdminRoute Component={FineTuningWalkthrough} />}
/> />
</Routes> </Routes>
<ToastContainer /> <ToastContainer />
</ThemeProvider>
</I18nextProvider> </I18nextProvider>
</PfpProvider> </PfpProvider>
</LogoProvider> </LogoProvider>

16
frontend/src/ThemeContext.jsx Normal file
View File

@ -0,0 +1,16 @@
import React, { createContext, useContext } from "react";
import { useTheme } from "./hooks/useTheme";
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const themeValue = useTheme();
return (
<ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
);
}
export function useThemeContext() {
return useContext(ThemeContext);
}

8
frontend/src/components/Footer/index.jsx
View File

@ -54,7 +54,7 @@ export default function Footer() {
href={paths.github()} href={paths.github()}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
aria-label="Find us on Github" aria-label="Find us on Github"
data-tooltip-id="open-github" data-tooltip-id="open-github"
data-tooltip-content="View source code on Github" data-tooltip-content="View source code on Github"
@ -67,7 +67,7 @@ export default function Footer() {
href={paths.docs()} href={paths.docs()}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
aria-label="Docs" aria-label="Docs"
data-tooltip-id="open-documentation" data-tooltip-id="open-documentation"
data-tooltip-content="Open AnythingLLM help docs" data-tooltip-content="Open AnythingLLM help docs"
@ -80,7 +80,7 @@ export default function Footer() {
href={paths.discord()} href={paths.discord()}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
aria-label="Join our Discord server" aria-label="Join our Discord server"
data-tooltip-id="open-discord" data-tooltip-id="open-discord"
data-tooltip-content="Join the AnythingLLM Discord" data-tooltip-content="Join the AnythingLLM Discord"
@ -106,7 +106,7 @@ export default function Footer() {
href={item.url} href={item.url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
> >
{React.createElement( {React.createElement(
ICON_COMPONENTS?.[item.icon] ?? ICON_COMPONENTS.Info, ICON_COMPONENTS?.[item.icon] ?? ICON_COMPONENTS.Info,

4
frontend/src/components/SettingsButton/index.jsx
View File

@ -16,7 +16,7 @@ export default function SettingsButton() {
<ToolTipWrapper id="go-home"> <ToolTipWrapper id="go-home">
<Link <Link
to={paths.home()} to={paths.home()}
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
aria-label="Home" aria-label="Home"
data-tooltip-id="go-home" data-tooltip-id="go-home"
data-tooltip-content="Back to workspaces" data-tooltip-content="Back to workspaces"
@ -32,7 +32,7 @@ export default function SettingsButton() {
to={ to={
!!user?.role ? paths.settings.system() : paths.settings.appearance() !!user?.role ? paths.settings.system() : paths.settings.appearance()
} }
className="transition-all duration-300 p-2 rounded-full text-white bg-footer-icon hover:bg-footer-icon-hover" className="transition-all duration-300 p-2 rounded-full text-white bg-theme-sidebar-footer-icon hover:bg-theme-sidebar-footer-icon-hover"
aria-label="Settings" aria-label="Settings"
data-tooltip-id="open-settings" data-tooltip-id="open-settings"
data-tooltip-content="Open settings" data-tooltip-content="Open settings"

24
frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/ThreadItem/index.jsx
View File

@ -33,7 +33,7 @@ export default function ThreadItem({
return ( return (
<div <div
className="w-full relative flex h-[38px] items-center border-none hover:bg-slate-600/20 rounded-lg" className="w-full relative flex h-[38px] items-center border-none rounded-lg"
role="listitem" role="listitem"
> >
{/* Curved line Element and leader if required */} {/* Curved line Element and leader if required */}
@ -41,9 +41,9 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${ className={`${
isActive isActive
? "border-l-2 border-b-2 border-white" ? "border-l-2 border-b-2 border-white z-30"
: "border-l border-b border-slate-300" : "border-l border-b border-[#6F6F71] z-10"
} h-[50%] absolute top-0 z-10 left-2 rounded-bl-lg`} } h-[50%] absolute top-0 left-2 rounded-bl-lg`}
></div> ></div>
{/* Downstroke border for next item */} {/* Downstroke border for next item */}
{hasNext && ( {hasNext && (
@ -51,9 +51,9 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }}
className={`${ className={`${
idx <= activeIdx && !isActive idx <= activeIdx && !isActive
? "border-l-2 border-white" ? "border-l-2 border-white z-20"
: "border-l border-slate-300" : "border-l border-[#6F6F71] z-10"
} h-[100%] absolute top-0 z-1 left-2`} } h-[100%] absolute top-0 left-2`}
></div> ></div>
)} )}
@ -62,10 +62,10 @@ export default function ThreadItem({
style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }} style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }}
className="h-full" className="h-full"
/> />
<div className="flex w-full items-center justify-between pr-2 group relative"> <div className={`flex w-full items-center justify-between pr-2 group relative ${isActive ? 'bg-white/5' : 'hover:bg-white/5'} rounded-[4px]`}>
{thread.deleted ? ( {thread.deleted ? (
<div className="w-full flex justify-between"> <div className="w-full flex justify-between">
<div className="w-full "> <div className="w-full pl-2 py-1">
<p className={`text-left text-sm text-slate-400/50 italic`}> <p className={`text-left text-sm text-slate-400/50 italic`}>
deleted thread deleted thread
</p> </p>
@ -88,12 +88,12 @@ export default function ThreadItem({
href={ href={
window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo
} }
className="w-full" className="w-full pl-2 py-1"
aria-current={isActive ? "page" : ""} aria-current={isActive ? "page" : ""}
> >
<p <p
className={`text-left text-sm ${ className={`text-left text-sm ${
isActive ? "font-medium text-white" : "text-slate-400" isActive ? "font-medium text-white" : "text-white/40"
}`} }`}
> >
{truncate(thread.name, 25)} {truncate(thread.name, 25)}
@ -101,7 +101,7 @@ export default function ThreadItem({
</a> </a>
)} )}
{!!thread.slug && !thread.deleted && ( {!!thread.slug && !thread.deleted && (
<div ref={optionsContainer}> <div ref={optionsContainer} className="flex items-center"> {/* Added flex and items-center */}
{ctrlPressed ? ( {ctrlPressed ? (
<button <button
type="button" type="button"

16
frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
View File

@ -107,7 +107,7 @@ export default function ThreadContainer({ workspace }) {
if (loading) { if (loading) {
return ( return (
<div className="flex flex-col bg-pulse w-full h-10 items-center justify-center"> <div className="flex flex-col bg-pulse w-full h-10 items-center justify-center">
<p className="text-xs text-slate-600 animate-pulse"> <p className="text-xs text-white animate-pulse">
loading threads.... loading threads....
</p> </p>
</div> </div>
@ -171,25 +171,25 @@ function NewThreadButton({ workspace }) {
return ( return (
<button <button
onClick={onClick} onClick={onClick}
className="w-full relative flex h-[40px] items-center border-none hover:bg-slate-600/20 rounded-lg" className="w-full relative flex h-[40px] items-center border-none hover:bg-white/5 rounded-lg"
> >
<div className="flex w-full gap-x-2 items-center pl-4"> <div className="flex w-full gap-x-2 items-center pl-4">
<div className="bg-zinc-600 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center"> <div className="bg-white/20 p-2 rounded-lg h-[24px] w-[24px] flex items-center justify-center">
{loading ? ( {loading ? (
<CircleNotch <CircleNotch
weight="bold" weight="bold"
size={14} size={14}
className="shrink-0 animate-spin text-slate-100" className="shrink-0 animate-spin text-white"
/> />
) : ( ) : (
<Plus weight="bold" size={14} className="shrink-0 text-slate-100" /> <Plus weight="bold" size={14} className="shrink-0 text-white" />
)} )}
</div> </div>
{loading ? ( {loading ? (
<p className="text-left text-slate-100 text-sm">Starting Thread...</p> <p className="text-left text-white text-sm">Starting Thread...</p>
) : ( ) : (
<p className="text-left text-slate-100 text-sm">New Thread</p> <p className="text-left text-white text-sm">New Thread</p>
)} )}
</div> </div>
</button> </button>
@ -210,7 +210,7 @@ function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) {
<Trash <Trash
weight="bold" weight="bold"
size={14} size={14}
className="shrink-0 text-slate-100 group-hover:text-red-400" className="shrink-0 text-white group-hover:text-red-400"
/> />
</div> </div>
<p className="text-white text-left text-sm group-hover:text-red-400"> <p className="text-white text-left text-sm group-hover:text-red-400">

6
frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View File

@ -60,9 +60,9 @@ export default function ActiveWorkspaces() {
className={` className={`
transition-all duration-[200ms] transition-all duration-[200ms]
flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center
bg-workspace-item-default bg-theme-sidebar-item-default
hover:bg-workspace-item-hover hover:font-bold hover:bg-theme-sidebar-item-hover hover:font-bold
${isActive ? "bg-workspace-item-selected font-bold" : ""} ${isActive ? "bg-theme-sidebar-item-selected font-bold" : ""}
`} `}
> >
<div className="flex flex-row justify-between w-full"> <div className="flex flex-row justify-between w-full">

10
frontend/src/components/Sidebar/index.jsx
View File

@ -39,7 +39,7 @@ export default function Sidebar() {
</Link> </Link>
<div <div
ref={sidebarRef} ref={sidebarRef}
className="relative m-[16px] rounded-[16px] bg-sidebar-bg border-[2px] border-sidebar-border min-w-[250px] p-[10px] h-[calc(100%-76px)]" className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border min-w-[250px] p-[10px] h-[calc(100%-76px)]"
> >
<div className="flex flex-col h-full overflow-x-hidden"> <div className="flex flex-col h-full overflow-x-hidden">
<div className="flex-grow flex flex-col min-w-[235px]"> <div className="flex-grow flex flex-col min-w-[235px]">
@ -61,7 +61,7 @@ export default function Sidebar() {
<ActiveWorkspaces /> <ActiveWorkspaces />
</div> </div>
</div> </div>
<div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar-bg bg-opacity-80 backdrop-filter backdrop-blur-md z-10"> <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
<Footer /> <Footer />
</div> </div>
</div> </div>
@ -104,7 +104,7 @@ export function SidebarMobileHeader() {
<> <>
<div <div
aria-label="Show sidebar" aria-label="Show sidebar"
className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar-bg text-slate-200 shadow-lg h-16" className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-theme-bg-sidebar text-slate-200 shadow-lg h-16"
> >
<button <button
onClick={() => setShowSidebar(true)} onClick={() => setShowSidebar(true)}
@ -138,7 +138,7 @@ export function SidebarMobileHeader() {
/> />
<div <div
ref={sidebarRef} ref={sidebarRef}
className="relative h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar-bg w-[80%] p-[18px] " className="relative h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-theme-bg-sidebar w-[80%] p-[18px] "
> >
<div className="w-full h-full flex flex-col overflow-x-hidden items-between"> <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
{/* Header Information */} {/* Header Information */}
@ -178,7 +178,7 @@ export function SidebarMobileHeader() {
<ActiveWorkspaces /> <ActiveWorkspaces />
</div> </div>
</div> </div>
<div className="z-99 absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-sidebar-bg bg-opacity-80 backdrop-filter backdrop-blur-md"> <div className="z-99 absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
<Footer /> <Footer />
</div> </div>
</div> </div>

2
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
View File

@ -303,7 +303,7 @@ function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<button <button
key={index} key={index}
className="text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient" className="text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-theme-sidebar-item-selected-gradient"
onClick={() => sendSuggestion(suggestion.heading, suggestion.message)} onClick={() => sendSuggestion(suggestion.heading, suggestion.message)}
> >
<p className="font-semibold">{suggestion.heading}</p> <p className="font-semibold">{suggestion.heading}</p>

19
frontend/src/hooks/useTheme.js Normal file
View File

@ -0,0 +1,19 @@
import { useState, useEffect } from "react";
const availableThemes = {
default: "Default",
light: "Light",
};
export function useTheme() {
const [theme, setTheme] = useState(() => {
return localStorage.getItem("theme") || "default";
});
useEffect(() => {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("theme", theme);
}, [theme]);
return { theme, setTheme, availableThemes };
}

31
frontend/src/index.css
View File

@ -2,6 +2,37 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
/* Default theme */
--theme-bg-primary: #0e0f0f;
--theme-bg-secondary: #1a1b1e;
--theme-bg-sidebar: #0e0f0f;
--theme-bg-container: #0e0f0f;
--theme-text-primary: #ffffff;
--theme-text-secondary: rgba(255, 255, 255, 0.6);
--theme-sidebar-item-default: rgba(255, 255, 255, 0.1);
--theme-sidebar-item-selected: rgba(255, 255, 255, 0.3);
--theme-sidebar-item-hover: #3f3f42;
--theme-sidebar-footer-icon: rgba(255, 255, 255, 0.1);
--theme-sidebar-footer-icon-hover: rgba(255, 255, 255, 0.2);
--theme-sidebar-border: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] {
--theme-bg-primary: #ffffff;
--theme-bg-secondary: #f4f4f4;
--theme-bg-sidebar: #f4f4f4;
--theme-bg-container: #ffffff;
--theme-text-primary: #000000;
--theme-text-secondary: #4a5568;
--theme-sidebar-item-default: rgba(0, 0, 0, 0.1);
--theme-sidebar-item-selected: rgba(0, 0, 0, 0.2);
--theme-sidebar-item-hover: #e2e8f0;
--theme-sidebar-footer-icon: rgba(0, 0, 0, 0.3);
--theme-sidebar-footer-icon-hover: rgba(0, 0, 0, 0.5);
--theme-sidebar-border: rgba(0, 0, 0, 0.1);
}
html, html,
body { body {
padding: 0; padding: 0;

2
frontend/src/pages/Admin/Agents/index.jsx
View File

@ -333,7 +333,7 @@ function SkillLayout({ children, hasChanges, handleSubmit, handleCancel }) {
return ( return (
<div <div
id="workspace-agent-settings-container" id="workspace-agent-settings-container"
className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6" className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
> >
<Sidebar /> <Sidebar />
<div <div

2
frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
View File

@ -8,7 +8,7 @@ import DocumentSyncQueueRow from "./DocumentSyncQueueRow";
export default function LiveDocumentSyncManager() { export default function LiveDocumentSyncManager() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/Admin/ExperimentalFeatures/index.jsx
View File

@ -90,7 +90,7 @@ function FeatureLayout({ children }) {
return ( return (
<div <div
id="workspace-feature-settings-container" id="workspace-feature-settings-container"
className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6" className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
> >
<Sidebar /> <Sidebar />
<div <div

2
frontend/src/pages/Admin/Invitations/index.jsx
View File

@ -16,7 +16,7 @@ export default function AdminInvites() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/Admin/Logging/index.jsx
View File

@ -54,7 +54,7 @@ export default function AdminLogs() {
}; };
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/Admin/System/index.jsx
View File

@ -38,7 +38,7 @@ export default function AdminSystem() {
}, []); }, []);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/Admin/Users/index.jsx
View File

@ -16,7 +16,7 @@ export default function AdminUsers() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/Admin/Workspaces/index.jsx
View File

@ -15,7 +15,7 @@ export default function AdminWorkspaces() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/FineTuning/Steps/index.jsx
View File

@ -133,7 +133,7 @@ export function FineTuningCreationLayout({ setStep, children }) {
return ( return (
<div <div
id="fine-tune-create-order-container" id="fine-tune-create-order-container"
className="w-screen h-screen overflow-hidden bg-main-container-bg flex md:mt-0 mt-6" className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6"
> >
<Sidebar /> <Sidebar />
<div <div

2
frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
View File

@ -19,7 +19,7 @@ export default function AdminApiKeys() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/Appearance/LanguagePreference/index.jsx
View File

@ -10,7 +10,7 @@ export default function LanguagePreference() {
return ( return (
<> <>
<div className="flex flex-col gap-y-1"> <div className="flex flex-col gap-y-1 mt-6">
<h2 className="text-base leading-6 font-bold text-white"> <h2 className="text-base leading-6 font-bold text-white">
Display Language Display Language
</h2> </h2>

27
frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx Normal file
View File

@ -0,0 +1,27 @@
import { useTheme } from "@/hooks/useTheme";
export default function ThemePreference() {
const { theme, setTheme, availableThemes } = useTheme();
return (
<div className="flex flex-col gap-y-1 mt-4">
<h2 className="text-base leading-6 font-bold text-white">Theme</h2>
<p className="text-xs leading-[18px] font-base text-white/60">
Select your preferred theme for the application.
</p>
<div className="flex items-center gap-x-4">
<select
value={theme}
onChange={(e) => setTheme(e.target.value)}
className="bg-zinc-900 w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
>
{Object.entries(availableThemes).map(([key, value]) => (
<option key={key} value={key}>
{value}
</option>
))}
</select>
</div>
</div>
);
}

6
frontend/src/pages/GeneralSettings/Appearance/index.jsx
View File

@ -9,11 +9,13 @@ import CustomAppName from "./CustomAppName";
import LanguagePreference from "./LanguagePreference"; import LanguagePreference from "./LanguagePreference";
import CustomSiteSettings from "./CustomSiteSettings"; import CustomSiteSettings from "./CustomSiteSettings";
import ShowScrollbar from "./ShowScrollbar"; import ShowScrollbar from "./ShowScrollbar";
import ThemePreference from "./ThemePreference";
export default function Appearance() { export default function Appearance() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@ -30,6 +32,8 @@ export default function Appearance() {
{t("appearance.description")} {t("appearance.description")}
</p> </p>
</div> </div>
<ThemePreference />
<LanguagePreference /> <LanguagePreference />
<ShowScrollbar /> <ShowScrollbar />
<CustomLogo /> <CustomLogo />

2
frontend/src/pages/GeneralSettings/AudioPreference/index.jsx
View File

@ -20,7 +20,7 @@ export default function AudioPreference() {
}, []); }, []);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

2
frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/index.jsx
View File

@ -39,7 +39,7 @@ export default function BrowserExtensionApiKeys() {
}; };
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/Chats/index.jsx
View File

@ -115,7 +115,7 @@ export default function WorkspaceChats() {
}, [offset]); }, [offset]);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
View File

@ -88,7 +88,7 @@ export default function EmbedChats() {
}, []); }, []);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
View File

@ -16,7 +16,7 @@ export default function EmbedConfigs() {
const { isOpen, openModal, closeModal } = useModal(); const { isOpen, openModal, closeModal } = useModal();
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
View File

@ -211,7 +211,7 @@ export default function GeneralEmbeddingPreference() {
); );
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

2
frontend/src/pages/GeneralSettings/EmbeddingTextSplitterPreference/index.jsx
View File

@ -63,7 +63,7 @@ export default function EmbeddingTextSplitterPreference() {
}, []); }, []);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

2
frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
View File

@ -328,7 +328,7 @@ export default function GeneralLLMPreference() {
(llm) => llm.value === selectedLLM (llm) => llm.value === selectedLLM
); );
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

2
frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
View File

@ -26,7 +26,7 @@ export default function PrivacyAndDataHandling() {
}, []); }, []);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/Security/index.jsx
View File

@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
export default function GeneralSecurity() { export default function GeneralSecurity() {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

2
frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
View File

@ -99,7 +99,7 @@ export default function TranscriptionModelPreference() {
); );
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

2
frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
View File

@ -171,7 +171,7 @@ export default function GeneralVectorDatabase() {
const selectedVDBObject = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB); const selectedVDBObject = VECTOR_DBS.find((vdb) => vdb.value === selectedVDB);
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar /> <Sidebar />
{loading ? ( {loading ? (
<div <div

6
frontend/src/pages/Invite/index.jsx
View File

@ -32,7 +32,7 @@ export default function InvitePage() {
if (result.status === "loading") { if (result.status === "loading") {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<FullScreenLoader /> <FullScreenLoader />
</div> </div>
); );
@ -40,14 +40,14 @@ export default function InvitePage() {
if (result.status === "invalid") { if (result.status === "invalid") {
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex items-center justify-center"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex items-center justify-center">
<p className="text-red-400 text-lg">{result.message}</p> <p className="text-red-400 text-lg">{result.message}</p>
</div> </div>
); );
} }
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex items-center justify-center"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex items-center justify-center">
<ModalWrapper isOpen={true}> <ModalWrapper isOpen={true}>
<NewUserModal /> <NewUserModal />
</ModalWrapper> </ModalWrapper>

2
frontend/src/pages/Main/index.jsx
View File

@ -17,7 +17,7 @@ export default function Main() {
return ( return (
<> <>
<UserMenu> <UserMenu>
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
{!isMobile && <Sidebar />} {!isMobile && <Sidebar />}
<DefaultChatContainer /> <DefaultChatContainer />
</div> </div>

2
frontend/src/pages/WorkspaceChat/index.jsx
View File

@ -45,7 +45,7 @@ function ShowWorkspaceChat() {
return ( return (
<> <>
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
{!isMobile && <Sidebar />} {!isMobile && <Sidebar />}
<WorkspaceChatContainer loading={loading} workspace={workspace} /> <WorkspaceChatContainer loading={loading} workspace={workspace} />
</div> </div>

2
frontend/src/pages/WorkspaceSettings/GeneralAppearance/SuggestedChatMessages/index.jsx
View File

@ -130,7 +130,7 @@ export default function SuggestedChatMessages({ slug }) {
<button <button
key={index} key={index}
onClick={(e) => startEditing(e, index)} onClick={(e) => startEditing(e, index)}
className={`text-left p-2.5 border rounded-xl w-full border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient ${ className={`text-left p-2.5 border rounded-xl w-full border-white/20 bg-sidebar hover:bg-theme-sidebar-item-selected-gradient ${
editingIndex === index ? "border-sky-400" : "" editingIndex === index ? "border-sky-400" : ""
}`} }`}
> >

2
frontend/src/pages/WorkspaceSettings/index.jsx
View File

@ -73,7 +73,7 @@ function ShowWorkspaceChat() {
const TabContent = TABS[tab]; const TabContent = TABS[tab];
return ( return (
<div className="w-screen h-screen overflow-hidden bg-main-container-bg flex"> <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
{!isMobile && <Sidebar />} {!isMobile && <Sidebar />}
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}

35
frontend/tailwind.config.js
View File

@ -44,17 +44,32 @@ export default {
warn: "#854708", warn: "#854708",
success: "#05603A", success: "#05603A",
darker: "#F4F4F4", darker: "#F4F4F4",
// Sidebar colors
"sidebar-bg": "#0E0F0F",
"workspace-item-default": "rgba(255, 255, 255, 0.1)",
"workspace-item-selected": "rgba(255, 255, 255, 0.3)",
"workspace-item-hover": "#3F3F42",
"footer-icon": "rgba(255, 255, 255, 0.1)",
"footer-icon-hover": "rgba(255, 255, 255, 0.2)",
"sidebar-border": "rgba(255, 255, 255, 0.1)",
// Main container colors // Generic theme colors
"main-container-bg": "#0E0F0F", theme: {
bg: {
primary: 'var(--theme-bg-primary)',
secondary: 'var(--theme-bg-secondary)',
sidebar: 'var(--theme-bg-sidebar)',
container: 'var(--theme-bg-container)',
},
text: {
primary: 'var(--theme-text-primary)',
secondary: 'var(--theme-text-secondary)',
},
sidebar: {
item: {
default: 'var(--theme-sidebar-item-default)',
selected: 'var(--theme-sidebar-item-selected)',
hover: 'var(--theme-sidebar-item-hover)',
},
footer: {
icon: 'var(--theme-sidebar-footer-icon)',
'icon-hover': 'var(--theme-sidebar-footer-icon-hover)',
},
border: 'var(--theme-sidebar-border)',
},
},
}, },
backgroundImage: { backgroundImage: {
"preference-gradient": "preference-gradient":