dark theme support

danswer-ai · May 18, 2024 · e061352 · e061352
1 parent 0ee1bb2
commit e061352
Show file tree

Hide file tree

Showing 111 changed files with 456 additions and 396 deletions.
diff --git a/web/src/app/ThemeContext.js b/web/src/app/ThemeContext.js
@@ -0,0 +1,31 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext({ theme: 'dark', toggleTheme: () => {} });
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }) => {
+ const [theme, setTheme] = useState('light');
+
+ useEffect(() => {
+ const storedTheme = localStorage.getItem('darkMode');
+ const isDarkMode = storedTheme === 'true';
+ setTheme(isDarkMode ? 'dark' : 'light');
+ document.documentElement.classList.toggle('dark', isDarkMode);
+ }, []);
+
+ const toggleTheme = () => {
+ const isDarkMode = theme === 'dark';
+ const newTheme = isDarkMode ? 'light' : 'dark';
+ setTheme(newTheme);
+ localStorage.setItem('darkMode', !isDarkMode ? 'true' : 'false');
+ document.documentElement.classList.toggle('dark', !isDarkMode);
+ };
+
+ return (
+ <ThemeContext.Provider value={{ theme, toggleTheme }}>
+ {children}
+ </ThemeContext.Provider>
+ );
+};
diff --git a/web/src/app/admin/add-connector/page.tsx b/web/src/app/admin/add-connector/page.tsx
@@ -17,9 +17,9 @@ function SourceTile({ sourceMetadata }: { sourceMetadata: SourceMetadata }) {
  rounded-lg 
  w-40 
  cursor-pointer
- bg-hover-light
+ bg-hover-light dark:bg-neutral-600 
  shadow-md
- hover:bg-hover
+ hover:bg-hover dark:hover:bg-neutral-800
  `}
  href={sourceMetadata.adminUrl}
  >

diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -51,12 +51,12 @@ function checkLLMSupportsImageGeneration(provider: string, model: string) {
 
 function Label({ children }: { children: string | JSX.Element }) {
  return (
- <div className="block font-medium text-base text-emphasis">{children}</div>
+ <div className="block font-medium text-base text-emphasis dark:text-gray-400">{children}</div>
  );
 }
 
 function SubLabel({ children }: { children: string | JSX.Element }) {
- return <div className="text-sm text-subtle mb-2">{children}</div>;
+ return <div className="text-sm text-subtle dark:text-neutral-400 mb-2">{children}</div>;
 }
 
 export function AssistantEditor({
@@ -586,7 +586,7 @@ export function AssistantEditor({
  <a
  href="https://platform.openai.com/docs/models"
  target="_blank"
- className="text-blue-500"
+ className="text-blue-500 dark:text-blue-300"
  >
  OpenAI docs
  </a>

diff --git a/web/src/app/admin/assistants/PersonaTable.tsx b/web/src/app/admin/assistants/PersonaTable.tsx
@@ -133,7 +133,7 @@ export function PersonasTable({ personas }: { personas: Persona[] }) {
  });
  }
  }}
- className="px-1 py-0.5 hover:bg-hover-light rounded flex cursor-pointer select-none w-fit"
+ className="px-1 py-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-600 rounded flex cursor-pointer select-none w-fit"
  >
  <div className="my-auto w-12">
  {!persona.is_visible ? (
@@ -150,7 +150,7 @@ export function PersonasTable({ personas }: { personas: Persona[] }) {
  <div className="mx-auto my-auto">
  {!persona.default_persona ? (
  <div
- className="hover:bg-hover rounded p-1 cursor-pointer"
+ className="hover:bg-hover dark:hover:bg-neutral-800 rounded p-1 cursor-pointer"
  onClick={async () => {
  const response = await deletePersona(persona.id);
  if (response.ok) {

diff --git a/web/src/app/admin/assistants/page.tsx b/web/src/app/admin/assistants/page.tsx
@@ -46,7 +46,7 @@ export default async function Page() {
  <Title>Create an Assistant</Title>
  <Link
  href="/admin/assistants/new"
- className="flex py-2 px-4 mt-2 border border-border h-fit cursor-pointer hover:bg-hover text-sm w-40"
+ className="flex py-2 px-4 mt-2 border border-border dark:border-neutral-900 h-fit cursor-pointer hover:bg-hover text-sm w-40"
  >
  <div className="mx-auto flex">
  <FiPlusSquare className="my-auto mr-2" />

diff --git a/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx b/web/src/app/admin/bot/SlackBotConfigCreationForm.tsx
@@ -54,7 +54,7 @@ export const SlackBotCreationForm = ({
 
  return (
  <div>
- <Card>
+ <Card className="dark:bg-neutral-700">
  {popup}
  <Formik
  initialValues={{
@@ -336,13 +336,13 @@ export const SlackBotCreationForm = ({
  py-1
  rounded-lg 
  border
- border-border 
+ border-border dark:border-neutral-900 
  w-fit 
  flex 
  cursor-pointer ` +
  (isSelected
- ? " bg-hover"
- : " bg-background hover:bg-hover-light")
+ ? " bg-hover dark:bg-hover-dark"
+ : " bg-background dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-600")
  }
  onClick={() => {
  if (isSelected) {

diff --git a/web/src/app/admin/bot/SlackBotTokensForm.tsx b/web/src/app/admin/bot/SlackBotTokensForm.tsx
@@ -25,7 +25,7 @@ export const SlackBotTokensForm = ({
  existingTokens,
 }: SlackBotTokensFormProps) => {
  return (
- <Card>
+ <Card className="dark:bg-neutral-700">
  <Formik
  initialValues={existingTokens || { app_token: "", bot_token: "" }}
  validationSchema={Yup.object().shape({

diff --git a/web/src/app/admin/bot/page.tsx b/web/src/app/admin/bot/page.tsx
@@ -96,7 +96,7 @@ const SlackBotConfigsTable = ({
  !isPersonaASlackBotPersona(slackBotConfig.persona) ? (
  <Link
  href={`/admin/assistants/${slackBotConfig.persona.id}`}
- className="text-blue-500 flex"
+ className="text-blue-500 dark:text-blue-300 flex"
  >
  <FiArrowUpRight className="my-auto mr-1" />
  {slackBotConfig.persona.name}
@@ -211,7 +211,7 @@ const Main = () => {
  <Text className="mb-6">
  Follow the{" "}
  <a
- className="text-blue-500"
+ className="text-blue-500 dark:text-blue-300"
  href="https://docs.danswer.dev/slack_bot_setup"
  target="_blank"
  >

diff --git a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx b/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
@@ -55,7 +55,7 @@ export function ConfigDisplay({
  return (
  <>
  <Title className="mb-2">Configuration</Title>
- <Card>
+ <Card className="dark:bg-neutral-700">
  <List>
  {configEntries.map(([key, value]) => (
  <ListItem key={key}>

diff --git a/web/src/app/admin/connector/[ccPairId]/page.tsx b/web/src/app/admin/connector/[ccPairId]/page.tsx
@@ -65,7 +65,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
  <>
  <BackButton />
  <div className="pb-1 flex mt-1">
- <h1 className="text-3xl text-emphasis font-bold">{ccPair.name}</h1>
+ <h1 className="text-3xl text-emphasis dark:text-gray-400 font-bold">{ccPair.name}</h1>
 
  <div className="ml-auto">
  <ModifyStatusButtonCluster ccPair={ccPair} />
@@ -80,7 +80,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
 
  <div className="text-sm mt-1">
  Total Documents Indexed:{" "}
- <b className="text-emphasis">{totalDocsIndexed}</b>
+ <b className="text-emphasis dark:text-gray-400">{totalDocsIndexed}</b>
  </div>
 
  <Divider />

diff --git a/web/src/app/admin/connectors/bookstack/page.tsx b/web/src/app/admin/connectors/bookstack/page.tsx
@@ -83,7 +83,7 @@ const Main = () => {
  {bookstackCredential.credential_json?.bookstack_api_token_id}
  </Text>
  <button
- className="ml-1 hover:bg-hover rounded p-1"
+ className="ml-1 hover:bg-hover dark:hover:bg-neutral-800 rounded p-1"
  onClick={async () => {
  if (bookstackConnectorIndexingStatuses.length > 0) {
  setPopup({
@@ -111,7 +111,7 @@ const Main = () => {
  to be assigned a BookStack role which has the &apos;Access system
  API&apos; system permission assigned.
  </Text>
- <Card className="mt-2 mb-4">
+ <Card className="dark:bg-neutral-700 mt-2 mb-4">
  <CredentialForm<BookstackCredentialJson>
  formBody={
  <>
@@ -194,7 +194,7 @@ const Main = () => {
  {bookstackCredential &&
  bookstackConnectorIndexingStatuses.length === 0 && (
  <>
- <Card className="mt-4">
+ <Card className="dark:bg-neutral-700 mt-4">
  <h2 className="font-bold mb-3">Create Connection</h2>
  <Text className="mb-4">
  Press connect below to start the connection to your BookStack

diff --git a/web/src/app/admin/connectors/confluence/page.tsx b/web/src/app/admin/connectors/confluence/page.tsx
@@ -123,7 +123,7 @@ const Main = () => {
  {confluenceCredential.credential_json?.confluence_access_token}
  </p>
  <button
- className="ml-1 hover:bg-hover rounded p-1"
+ className="ml-1 hover:bg-hover rounded p-1 dark:hover:bg-neutral-800"
  onClick={async () => {
  if (confluenceConnectorIndexingStatuses.length > 0) {
  setPopup({
@@ -146,15 +146,15 @@ const Main = () => {
  <Text>
  To use the Confluence connector, first follow the guide{" "}
  <a
- className="text-link"
+ className=" text-link dark:text-blue-300"
  href="https://docs.danswer.dev/connectors/confluence#setting-up"
  target="_blank"
  >
  here
  </a>{" "}
  to generate an Access Token.
  </Text>
- <Card className="mt-4">
+ <Card className="dark:bg-neutral-700 mt-4">
  <CredentialForm<ConfluenceCredentialJson>
  formBody={
  <>
@@ -241,7 +241,7 @@ const Main = () => {
  key: "url",
  getValue: (ccPairStatus) => (
  <a
- className="text-blue-500"
+ className=" text-link dark:text-blue-300"
  href={
  ccPairStatus.connector.connector_specific_config
  .wiki_page_url
@@ -264,7 +264,7 @@ const Main = () => {
  </>
  )}
 
- <Card className="mt-4">
+ <Card className="dark:bg-neutral-700 mt-4">
  <h2 className="font-bold mb-3">Add a New Space</h2>
  <ConnectorForm<ConfluenceConfig>
  nameBuilder={(values) =>

diff --git a/web/src/app/admin/connectors/document360/page.tsx b/web/src/app/admin/connectors/document360/page.tsx
@@ -84,7 +84,7 @@ const MainSection = () => {
  {document360Credential.credential_json.document360_api_token}
  </Text>
  <button
- className="ml-1 hover:bg-hover rounded p-1"
+ className="ml-1 hover:bg-hover rounded p-1 dark:hover:bg-neutral-800"
  onClick={async () => {
  await adminDeleteCredential(document360Credential.id);
  refreshCredentials();
@@ -101,15 +101,15 @@ const MainSection = () => {
  token and portal ID corresponding to your Document360 setup. See
  setup guide{" "}
  <a
- className="text-link"
+ className="text-link dark:text-blue-300"
  href="https://docs.danswer.dev/connectors/document360"
  target="_blank"
  >
  here
  </a>{" "}
  for more detail.
  </Text>
- <Card className="mt-2">
+ <Card className="dark:bg-neutral-700 mt-2">
  <CredentialForm<Document360CredentialJson>
  formBody={
  <>
@@ -195,7 +195,7 @@ const MainSection = () => {
  )}
 
  {document360Credential ? (
- <Card className="mt-4">
+ <Card className="dark:bg-neutral-700 mt-4">
  <h2 className="font-bold mb-3">Connect to a New Workspace</h2>
  <ConnectorForm<Document360Config>
  nameBuilder={(values) =>

diff --git a/web/src/app/admin/connectors/file/page.tsx b/web/src/app/admin/connectors/file/page.tsx
@@ -72,14 +72,14 @@ const Main = () => {
  search result. More details on this can be found in the{" "}
  <a
  href="https://docs.danswer.dev/connectors/file"
- className="text-link"
+ className="text-link dark:text-blue-300"
  >
  documentation.
  </a>
  </Text>
  <div className="flex mt-4">
  <div className="mx-auto w-full">
- <Card>
+ <Card className="dark:bg-neutral-700">
  <Formik
  initialValues={{
  name: "",
@@ -198,7 +198,7 @@ const Main = () => {
  >
  {({ values, isSubmitting }) => (
  <Form>
- <h2 className="font-bold text-emphasis text-xl mb-2">
+ <h2 className="font-bold text-emphasis dark:text-gray-400 text-xl mb-2">
  Upload Files
  </h2>
  <TextFormField
@@ -208,7 +208,7 @@ const Main = () => {
  autoCompleteDisabled={true}
  />
 
- <p className="mb-1 font-medium text-emphasis">Files:</p>
+ <p className="mb-1 font-medium text-emphasis dark:text-gray-400">Files:</p>
  <FileUpload
  selectedFiles={selectedFiles}
  setSelectedFiles={setSelectedFiles}

diff --git a/web/src/app/admin/connectors/github/page.tsx b/web/src/app/admin/connectors/github/page.tsx
@@ -80,7 +80,7 @@ const Main = () => {
  {githubCredential.credential_json.github_access_token}
  </p>{" "}
  <button
- className="ml-1 hover:bg-hover rounded p-1"
+ className="ml-1 hover:bg-hover rounded p-1 dark:hover:bg-neutral-800"
  onClick={async () => {
  await adminDeleteCredential(githubCredential.id);
  refreshCredentials();
@@ -95,15 +95,15 @@ const Main = () => {
  <Text>
  If you don&apos;t have an access token, read the guide{" "}
  <a
- className="text-blue-500"
+ className="text-blue-500 dark:text-blue-300"
  href="https://docs.danswer.dev/connectors/github"
  target="_blank"
  >
  here
  </a>{" "}
  on how to get one from Github.
  </Text>
- <Card className="mt-4">
+ <Card className="mt-4 dark:bg-neutral-700">
  <CredentialForm<GithubCredentialJson>
  formBody={
  <>
@@ -176,7 +176,7 @@ const Main = () => {
  )}
 
  {githubCredential ? (
- <Card className="mt-4">
+ <Card className="mt-4 dark:bg-neutral-700">
  <h2 className="font-bold mb-3">Connect to a New Repository</h2>
  <ConnectorForm<GithubConfig>
  nameBuilder={(values) =>

diff --git a/web/src/app/admin/connectors/gitlab/page.tsx b/web/src/app/admin/connectors/gitlab/page.tsx
@@ -80,7 +80,7 @@ const Main = () => {
  {gitlabCredential.credential_json.gitlab_access_token}
  </p>{" "}
  <button
- className="ml-1 hover:bg-hover rounded p-1"
+ className="ml-1 hover:bg-hover rounded p-1 dark:hover:bg-neutral-800"
  onClick={async () => {
  await adminDeleteCredential(gitlabCredential.id);
  refreshCredentials();
@@ -95,15 +95,15 @@ const Main = () => {
  <Text>
  If you don&apos;t have an access token, read the guide{" "}
  <a
- className="text-blue-500"
+ className="text-blue-500 dark:text-blue-300"
  href="https://docs.danswer.dev/connectors/gitlab"
  target="_blank"
  >
  here
  </a>{" "}
  on how to get one from Gitlab.
  </Text>
- <Card className="mt-4">
+ <Card className="mt-4 dark:bg-neutral-700">
  <CredentialForm<GitlabCredentialJson>
  formBody={
  <>
@@ -188,7 +188,7 @@ const Main = () => {
  )}
 
  {gitlabCredential ? (
- <Card className="mt-4">
+ <Card className="mt-4 dark:bg-neutral-700">
  <h2 className="font-bold mb-3">Connect to a New Project</h2>
  <ConnectorForm<GitlabConfig>
  nameBuilder={(values) =>