From d0546a47df6d48938980ad7b73453c012d7efa06 Mon Sep 17 00:00:00 2001 From: Sean Hatfield Date: Wed, 2 Oct 2024 18:06:31 -0700 Subject: [PATCH] Dark mode setup themes (#2411) * setup generic tailwind theme + ability to add new themes * add theme context * use correct colors from design for sidebar + fix padding --- frontend/src/App.jsx | 254 +++++++++--------- frontend/src/ThemeContext.jsx | 16 ++ frontend/src/components/Footer/index.jsx | 8 +- .../src/components/SettingsButton/index.jsx | 4 +- .../ThreadContainer/ThreadItem/index.jsx | 24 +- .../ThreadContainer/index.jsx | 16 +- .../Sidebar/ActiveWorkspaces/index.jsx | 6 +- frontend/src/components/Sidebar/index.jsx | 10 +- .../ChatContainer/ChatHistory/index.jsx | 2 +- frontend/src/hooks/useTheme.js | 19 ++ frontend/src/index.css | 31 +++ frontend/src/pages/Admin/Agents/index.jsx | 2 +- .../Features/LiveSync/manage/index.jsx | 2 +- .../Admin/ExperimentalFeatures/index.jsx | 2 +- .../src/pages/Admin/Invitations/index.jsx | 2 +- frontend/src/pages/Admin/Logging/index.jsx | 2 +- frontend/src/pages/Admin/System/index.jsx | 2 +- frontend/src/pages/Admin/Users/index.jsx | 2 +- frontend/src/pages/Admin/Workspaces/index.jsx | 2 +- frontend/src/pages/FineTuning/Steps/index.jsx | 2 +- .../pages/GeneralSettings/ApiKeys/index.jsx | 2 +- .../Appearance/LanguagePreference/index.jsx | 2 +- .../Appearance/ThemePreference/index.jsx | 27 ++ .../GeneralSettings/Appearance/index.jsx | 6 +- .../GeneralSettings/AudioPreference/index.jsx | 2 +- .../BrowserExtensionApiKey/index.jsx | 2 +- .../src/pages/GeneralSettings/Chats/index.jsx | 2 +- .../GeneralSettings/EmbedChats/index.jsx | 2 +- .../GeneralSettings/EmbedConfigs/index.jsx | 2 +- .../EmbeddingPreference/index.jsx | 2 +- .../EmbeddingTextSplitterPreference/index.jsx | 2 +- .../GeneralSettings/LLMPreference/index.jsx | 2 +- .../GeneralSettings/PrivacyAndData/index.jsx | 2 +- .../pages/GeneralSettings/Security/index.jsx | 2 +- .../TranscriptionPreference/index.jsx | 2 +- .../GeneralSettings/VectorDatabase/index.jsx | 2 +- frontend/src/pages/Invite/index.jsx | 6 +- frontend/src/pages/Main/index.jsx | 2 +- frontend/src/pages/WorkspaceChat/index.jsx | 2 +- .../SuggestedChatMessages/index.jsx | 2 +- .../src/pages/WorkspaceSettings/index.jsx | 2 +- frontend/tailwind.config.js | 35 ++- 42 files changed, 319 insertions(+), 199 deletions(-) create mode 100644 frontend/src/ThemeContext.jsx create mode 100644 frontend/src/hooks/useTheme.js create mode 100644 frontend/src/pages/GeneralSettings/Appearance/ThemePreference/index.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index c6cac66db..18e9081d6 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -15,6 +15,7 @@ import i18n from "./i18n"; import { PfpProvider } from "./PfpContext"; import { LogoProvider } from "./LogoContext"; import { FullScreenLoader } from "./components/Preloader"; +import { ThemeProvider } from "./ThemeContext"; const Main = lazy(() => import("@/pages/Main")); const InvitePage = lazy(() => import("@/pages/Invite")); @@ -75,132 +76,139 @@ export default function App() { - - } /> - } /> - } - /> - } - /> - } - /> - } /> + + + } /> + } /> + } + /> + } + /> + } + /> + } /> - {/* Admin */} - } - /> - - } - /> - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - {/* Manager */} - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - {/* Onboarding Flow */} - } /> - } /> + {/* Admin */} + } + /> + + } + /> + } + /> + + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + {/* Manager */} + } + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + {/* Onboarding Flow */} + } /> + } + /> - {/* Experimental feature pages */} - {/* Live Document Sync feature */} - } - /> + {/* Experimental feature pages */} + {/* Live Document Sync feature */} + } + /> - } - /> - - + } + /> + + + diff --git a/frontend/src/ThemeContext.jsx b/frontend/src/ThemeContext.jsx new file mode 100644 index 000000000..f9a5c685f --- /dev/null +++ b/frontend/src/ThemeContext.jsx @@ -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 ( + {children} + ); +} + +export function useThemeContext() { + return useContext(ThemeContext); +} diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx index db75f532c..d7ee15ff3 100644 --- a/frontend/src/components/Footer/index.jsx +++ b/frontend/src/components/Footer/index.jsx @@ -54,7 +54,7 @@ export default function Footer() { href={paths.github()} target="_blank" 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" data-tooltip-id="open-github" data-tooltip-content="View source code on Github" @@ -67,7 +67,7 @@ export default function Footer() { href={paths.docs()} target="_blank" 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" data-tooltip-id="open-documentation" data-tooltip-content="Open AnythingLLM help docs" @@ -80,7 +80,7 @@ export default function Footer() { href={paths.discord()} target="_blank" 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" data-tooltip-id="open-discord" data-tooltip-content="Join the AnythingLLM Discord" @@ -106,7 +106,7 @@ export default function Footer() { href={item.url} target="_blank" 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( ICON_COMPONENTS?.[item.icon] ?? ICON_COMPONENTS.Info, diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx index 8b563a6ca..d4ecb259d 100644 --- a/frontend/src/components/SettingsButton/index.jsx +++ b/frontend/src/components/SettingsButton/index.jsx @@ -16,7 +16,7 @@ export default function SettingsButton() { {/* Curved line Element and leader if required */} @@ -41,9 +41,9 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} className={`${ isActive - ? "border-l-2 border-b-2 border-white" - : "border-l border-b border-slate-300" - } h-[50%] absolute top-0 z-10 left-2 rounded-bl-lg`} + ? "border-l-2 border-b-2 border-white z-30" + : "border-l border-b border-[#6F6F71] z-10" + } h-[50%] absolute top-0 left-2 rounded-bl-lg`} > {/* Downstroke border for next item */} {hasNext && ( @@ -51,9 +51,9 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH / 2 }} className={`${ idx <= activeIdx && !isActive - ? "border-l-2 border-white" - : "border-l border-slate-300" - } h-[100%] absolute top-0 z-1 left-2`} + ? "border-l-2 border-white z-20" + : "border-l border-[#6F6F71] z-10" + } h-[100%] absolute top-0 left-2`} > )} @@ -62,10 +62,10 @@ export default function ThreadItem({ style={{ width: THREAD_CALLOUT_DETAIL_WIDTH + 8 }} className="h-full" /> -
+
{thread.deleted ? (
-
+

deleted thread

@@ -88,12 +88,12 @@ export default function ThreadItem({ href={ window.location.pathname === linkTo || ctrlPressed ? "#" : linkTo } - className="w-full" + className="w-full pl-2 py-1" aria-current={isActive ? "page" : ""} >

{truncate(thread.name, 25)} @@ -101,7 +101,7 @@ export default function ThreadItem({ )} {!!thread.slug && !thread.deleted && ( -

+
{/* Added flex and items-center */} {ctrlPressed ? (
@@ -171,25 +171,25 @@ function NewThreadButton({ workspace }) { return ( @@ -210,7 +210,7 @@ function DeleteAllThreadButton({ ctrlPressed, threads, onDelete }) {

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx index b1f02233f..ef6cb3add 100644 --- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx +++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx @@ -60,9 +60,9 @@ export default function ActiveWorkspaces() { className={` transition-all duration-[200ms] flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-white justify-start items-center - bg-workspace-item-default - hover:bg-workspace-item-hover hover:font-bold - ${isActive ? "bg-workspace-item-selected font-bold" : ""} + bg-theme-sidebar-item-default + hover:bg-theme-sidebar-item-hover hover:font-bold + ${isActive ? "bg-theme-sidebar-item-selected font-bold" : ""} `} >

diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx index 4eb3bb4cb..5eeb66414 100644 --- a/frontend/src/components/Sidebar/index.jsx +++ b/frontend/src/components/Sidebar/index.jsx @@ -39,7 +39,7 @@ export default function Sidebar() {
@@ -61,7 +61,7 @@ export default function Sidebar() {
-
+
@@ -104,7 +104,7 @@ export function SidebarMobileHeader() { <>