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

attempt light mode

Browse Source
This commit is contained in:
shatfield4 2024-10-16 16:42:10 -07:00
parent acc1baabe8
commit 705b283a9b
22 changed files with 93 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
View File

@ -29,7 +29,7 @@ export default function EmbedderItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div>
<div className="mt-1 text-xs text-theme-text-description">{description}</div>
</div>
</div>
</div>

2
frontend/src/components/LLMSelection/LLMItem/index.jsx
View File

@ -29,7 +29,7 @@ export default function LLMItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div>
<div className="mt-1 text-xs text-theme-text-description">{description}</div>
</div>
</div>
</div>

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

@ -30,7 +30,7 @@ export default function SettingsButton() {
<ToolTipWrapper id="open-settings">
<Link
to={paths.settings.appearance()}
className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
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"
data-tooltip-id="open-settings"
data-tooltip-content="Open settings"

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

@ -56,7 +56,7 @@ export default function SettingsSidebar() {
<img
src={logo}
alt="Logo"
className="block mx-auto h-6 w-auto"
className="block mx-auto h-6 w-auto invertible-image"
style={{ maxHeight: "40px", objectFit: "contain" }}
/>
</div>
@ -140,7 +140,7 @@ export default function SettingsSidebar() {
<img
src={logo}
alt="Logo"
className="rounded max-h-[24px]"
className="rounded max-h-[24px] invertible-image"
style={{ objectFit: "contain" }}
/>
</Link>

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

@ -33,7 +33,7 @@ export default function Sidebar() {
<img
src={logo}
alt="Logo"
className="rounded max-h-[24px] object-contain"
className="rounded max-h-[24px] object-contain invertible-image"
/>
</Link>
<div
@ -115,7 +115,7 @@ export function SidebarMobileHeader() {
<img
src={logo}
alt="Logo"
className="block mx-auto h-6 w-auto"
className="block mx-auto h-6 w-auto invertible-image"
style={{ maxHeight: "40px", objectFit: "contain" }}
/>
</div>

2
frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
View File

@ -29,7 +29,7 @@ export default function VectorDBItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div>
<div className="mt-1 text-xs text-theme-text-description">{description}</div>
</div>
</div>
</div>

81
frontend/src/index.css
View File

@ -12,6 +12,7 @@
--theme-bg-chat-input: #27282a;
--theme-text-primary: #ffffff;
--theme-text-secondary: rgba(255, 255, 255, 0.6);
--theme-text-description: 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;
@ -29,24 +30,80 @@
--theme-settings-input-active: rgb(255 255 255 / 0.2);
--theme-settings-input-text: #ffffff;
--theme-modal-border: #3f3f42;
--theme-text-description: rgba(255, 255, 255, 0.6);
--theme-image-invert: 0;
}
[data-theme="light"] {
--theme-bg-primary: #ffffff;
--theme-bg-secondary: #f4f4f4;
--theme-bg-sidebar: #f4f4f4;
--theme-bg-secondary: #f5f7fa;
--theme-bg-sidebar: #f0f4f8;
--theme-bg-container: #ffffff;
--theme-bg-chat: #f5f7fa;
--theme-bg-chat-input: #e8eef5;
--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-subitem-default: rgba(0, 0, 0, 0.1);
--theme-sidebar-subitem-selected: rgba(0, 0, 0, 0.05);
--theme-sidebar-subitem-hover: rgba(0, 0, 0, 0.05);
--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);
--theme-text-secondary: #666666;
--theme-text-description: #666666;
--theme-sidebar-item-default: #e0e7ef;
--theme-sidebar-item-selected: #c7d5e3;
--theme-sidebar-item-hover: #d1dce8;
--theme-sidebar-subitem-default: #e8eef5;
--theme-sidebar-subitem-selected: #d1dce8;
--theme-sidebar-subitem-hover: #d9e2ec;
--theme-sidebar-footer-icon: #a0aec0;
--theme-sidebar-footer-icon-hover: #718096;
--theme-sidebar-border: #e2e8f0;
--theme-chat-input-border: #cbd5e0;
--theme-action-menu-bg: #ffffff;
--theme-action-menu-item-hover: #edf2f7;
--theme-settings-input-bg: #edf2f7;
--theme-settings-input-placeholder: #a0aec0;
--theme-settings-input-active: #e2e8f0;
--theme-settings-input-text: #4a5568;
--theme-modal-border: #e2e8f0;
--theme-image-invert: 1;
}
.invertible-image {
filter: invert(var(--theme-image-invert));
}
/* Default text color */
body {
color: var(--theme-text-primary);
}
/* Override Tailwind's text-white class */
.text-white {
color: var(--theme-text-primary) !important;
}
/* Create theme-aware text color utilities */
.text-theme-primary {
color: var(--theme-text-primary);
}
.placeholder\:text-white::placeholder {
color: var(--theme-text-secondary) !important;
}
.text-theme-secondary {
color: var(--theme-text-secondary);
}
/* Additional utility classes for other common text colors */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--theme-text-secondary);
}
* {
color: inherit;
}
html,

2
frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
View File

@ -33,7 +33,7 @@ export default function DBConnection({ connection, onRemove, setHasChanges }) {
<div className="flex w-full items-center justify-between">
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{database_id}</div>
<div className="mt-1 text-xs text-description">{engine}</div>
<div className="mt-1 text-xs text-theme-text-description">{engine}</div>
</div>
<button
type="button"

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

@ -19,7 +19,7 @@ export default function SearchProviderItem({ provider, checked, onClick }) {
<img src={logo} alt={`${name} logo`} className="w-10 h-10 rounded-md" />
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
<div className="mt-1 text-xs text-description">{description}</div>
<div className="mt-1 text-xs text-theme-text-description">{description}</div>
</div>
</div>
</div>

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

@ -241,7 +241,7 @@ export default function AgentWebSearchSelection({
<div className="text-sm font-semibold text-white">
{selectedSearchProviderObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedSearchProviderObject.description}
</div>
</div>

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

@ -22,7 +22,7 @@ export default function LanguagePreference() {
<div className="flex items-center gap-x-4">
<select
name="userLang"
className="bg-theme-settings-input-bg w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
className="bg-theme-settings-input-bg w-fit mt-2 px-4 focus:outline-primary-button active:outline-primary-button outline-none text-white text-sm rounded-lg block py-2"
defaultValue={currentLanguage || "en"}
onChange={(e) => changeLanguage(e.target.value)}
>

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

@ -13,7 +13,7 @@ export default function ThemePreference() {
<select
value={theme}
onChange={(e) => setTheme(e.target.value)}
className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-fit p-2.5"
>
{Object.entries(availableThemes).map(([key, value]) => (
<option key={key} value={key}>

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

@ -9,7 +9,7 @@ import CustomAppName from "./CustomAppName";
import LanguagePreference from "./LanguagePreference";
import CustomSiteSettings from "./CustomSiteSettings";
import ShowScrollbar from "./ShowScrollbar";
// import ThemePreference from "./ThemePreference";
import ThemePreference from "./ThemePreference";
export default function Appearance() {
const { t } = useTranslation();
@ -32,8 +32,7 @@ export default function Appearance() {
{t("appearance.description")}
</p>
</div>
{/* TODO: Enable when we have other themes */}
{/* <ThemePreference /> */}
<ThemePreference />
<LanguagePreference />
<ShowScrollbar />
<CustomLogo />

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

@ -167,7 +167,7 @@ export default function SpeechToTextProvider({ settings }) {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedProviderObject.description}
</div>
</div>

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

@ -202,7 +202,7 @@ export default function TextToSpeechProvider({ settings }) {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedProviderObject.description}
</div>
</div>

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

@ -324,7 +324,7 @@ export default function GeneralEmbeddingPreference() {
<div className="text-sm font-semibold text-white">
{selectedEmbedderObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedEmbedderObject.description}
</div>
</div>

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

@ -448,7 +448,7 @@ export default function GeneralLLMPreference() {
<div className="text-sm font-semibold text-white">
{selectedLLMObject?.name || "None selected"}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedLLMObject?.description ||
"You need to select an LLM"}
</div>

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

@ -206,7 +206,7 @@ export default function TranscriptionModelPreference() {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedProviderObject.description}
</div>
</div>

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

@ -282,7 +282,7 @@ export default function GeneralVectorDatabase() {
<div className="text-sm font-semibold text-white">
{selectedVDBObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedVDBObject.description}
</div>
</div>

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

@ -184,7 +184,7 @@ export default function AgentLLMSelection({
<div className="text-sm font-semibold text-white">
{selectedLLMObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedLLMObject.description}
</div>
</div>

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

@ -149,7 +149,7 @@ export default function WorkspaceLLMSelection({
<div className="text-sm font-semibold text-white">
{selectedLLMObject.name}
</div>
<div className="mt-1 text-xs text-description">
<div className="mt-1 text-xs text-theme-text-description">
{selectedLLMObject.description}
</div>
</div>

1
frontend/tailwind.config.js
View File

@ -58,6 +58,7 @@ export default {
text: {
primary: 'var(--theme-text-primary)',
secondary: 'var(--theme-text-secondary)',
description: 'var(--theme-text-description)',
},
sidebar: {
item: {