highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-09-27 04:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Dark Mode (#3936)

Browse Source 
* k

* intermediate unification

* many changes

* update dark mode configs

* updates

* decent state

* functional

* mostly clean

* updaet model selector

* finalize

* calendar update

* additional styling

* nit

* k

* update colors

* push change

* k

* update

* k

* update

* address additions

* quick nit
This commit is contained in:
pablonyx
2025-02-09 15:09:40 -08:00
committed by GitHub
parent 217569104b
commit 519fbd897e
205 changed files with 2596 additions and 1536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
web/tailwind-themes/tailwind.config.js
View File

@@ -44,7 +44,7 @@ module.exports = {
},
gradientColorStops: {
"neutral-10": "#e5e5e5 5%",
"neutral-10": "var(--neutral-10) 5%",
},
screens: {
"2xl": "1420px",
@@ -79,7 +79,7 @@ module.exports = {
},
colors: {
// code styling
"code-bg": "var(--black)",
"code-bg": "#000",
"code-text": "var(--code-text)",
"token-comment": "var(--token-comment)",
"token-punctuation": "var(--token-punctuation)",
@@ -91,167 +91,166 @@ module.exports = {
"token-attr-name": "var(--token-attr-name)",
"non-selectable": "var(--non-selectable)",
"gray-background": "#F4F2ED",
"gray-background": "var(--gray-background)",
"new-background": "var(--new-background)",
"new-background-light": "var(--new-background-light)",
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
"input-text": "var(--input-text)",
// background
background: "#FEFCFA",
"background-dark": "#F1EEE8",
"background-100": "var(--background-100)",
"background-125": "var(--background-125)",
"background-150": "var(--background-150)",
"background-200": "var(--background-200)",
"background-300": "var(--background-300)",
"background-400": "var(--background-400)",
"background-500": "var(--background-500)",
"background-600": "var(--background-600)",
"background-700": "var(--background-700)",
"background-800": "var(--background-800)",
"background-900": "var(--background-900)",
background: "var(--background-input-background)",
"input-border": "var(--input-border)",
"input-background": "var(--input-background)",
"input-option": "var(--input-option)",
"input-option-hover": "var(--input-option-hover)",
"accent-background": "var(--accent-background)",
"accent-background-hovered": "var(--accent-background-hovered)",
"background-dark": "var(--off-white)",
"background-100": "var(--neutral-100-border-light)",
"background-125": "var(--neutral-125)",
"background-150": "var(--neutral-150)",
"background-200": "var(--neutral-200-border)",
"background-300": "var(--neutral-300-border-medium)",
"background-400": "var(--neutral-400-border-strong)",
"background-500": "var(--neutral-500)",
"background-600": "var(--neutral-600-border-dark)",
"background-700": "var(--neutral-700)",
"background-800": "var(--neutral-800)",
"background-900": "var(--neutral-900)",
"gray-background": "var(--neutral-100-border-light)",
"gray-background-dark": "var(--neutral-200-border)",
"gray-background-100": "var(--neutral-100-border-light)",
"gray-background-125": "var(--neutral-125)",
"gray-background-150": "var(--neutral-150)",
"gray-background-200": "var(--neutral-200-border)",
"gray-background-300": "var(--neutral-300-border-medium)",
"gray-background-400": "var(--neutral-400-border-strong)",
"gray-background-500": "var(--neutral-500)",
"gray-background-600": "var(--neutral-600-border-dark)",
"gray-background-700": "var(--neutral-700)",
"gray-background-800": "var(--neutral-800)",
"gray-background-900": "var(--neutral-900)",
"text-history-sidebar-button": "var(--text-800)",
"background-inverted": "var(--background-inverted)",
"background-emphasis": "var(--background-emphasis)",
"background-strong": "var(--background-strong)",
"background-search": "var(--white)",
"background-search": "var(--white-card-popover)",
"background-history-sidebar-button-hover": "var(--background-200)",
"text-history-sidebar-button": "var(--text-800)",
"divider-history-sidebar-bar": "var(--border)",
"background-history-sidebar-button-hover": "var(--neutral-200-border)",
"divider-history-sidebar-bar": "var(--neutral-200-border)",
"text-mobile-sidebar": "var(--text-800)",
"background-search-filter": "var(--background-100)",
"background-search-filter-dropdown": "var(--background-100)",
"background-search-filter": "var(--neutral-100-border-light)",
"background-search-filter-dropdown": "var(--neutral-100-border-light)",
"tw-prose-bold": "var(--text-800)",
"user-bubble": "var(--user-bubble)",
"user-bubble": "var(--off-white)",
// colors for sidebar in chat, search, and manage settings
"background-chatbar": "#F5F3EE",
"background-chatbar": "var(--background-chatbar-sidebar)",
"text-sidebar": "var(--text-500)",
"toggled-background": "var(--background-400)",
"untoggled-background": "var(--background-200)",
"background-starter-message": "var(--background)",
"background-starter-message-hover": "var(--background-100)",
"toggled-background": "var(--neutral-400-border-strong)",
"untoggled-background": "var(--neutral-200-border)",
"background-starter-message": "var(--background-input-background)",
"background-starter-message-hover": "var(--neutral-100-border-light)",
"text-sidebar-toggled-header": "var(--text-800)",
"text-sidebar-header": "var(--text-800)",
"background-back-button": "var(--background-200)",
"text-back-button": "var(--text-800)",
"background-back-button": "var(--neutral-200-border)",
"text-back-button": "var(--neutral-800)",
// Settings
"text-sidebar-subtle": "var(--text-500)",
"icon-settings-sidebar": "var(--text-600)",
"text-settings-sidebar": "var(--text-600)",
"text-settings-sidebar-strong": "var(--text-900)",
"background-settings-hover": "var(--background-200)",
"text-sidebar-subtle": "var(--neutral-500)",
"icon-settings-sidebar": "var(--neutral-600-border-dark)",
"text-settings-sidebar": "var(--neutral-600-border-dark)",
"text-settings-sidebar-strong": "var(--neutral-900)",
"background-settings-hover": "var(--neutral-200-border)",
"text-application-toggled": "var(--text-800)",
"text-application-untoggled": "var(--text-500)",
"text-application-untoggled-hover": "var(--text-700)",
"background-chat-hover": "#E6E3DD",
"background-chat-selected": "#E6E3DD",
"background-chat-hover": "var(--background-chat-hover-selected)",
"background-chat-selected": "var(--background-chat-hover-selected)",
black: "var(--black)",
white: "var(--white-card-popover)",
// Background for chat messages (user bubbles)
user: "var(--user-bubble)",
user: "var(--off-white)",
"userdropdown-background": "var(--background-800)",
"text-mobile-sidebar-toggled": "var(--text-800)",
"text-mobile-sidebar-untoggled": "var(--text-500)",
"text-editing-message": "var(--text-800)",
"background-sidebar": "#F5F3EE",
"background-search-filter": "var(--background-100)",
"userdropdown-background": "var(--neutral-800)",
"text-mobile-sidebar-toggled": "var(--neutral-800)",
"text-mobile-sidebar-untoggled": "var(--neutral-500)",
"text-editing-message": "var(--neutral-800)",
"background-sidebar": "var(--background-chatbar-sidebar)",
"background-search-filter": "var(--neutral-100-border-light)",
"background-search-filter-dropdown": "var(--background-hover)",
"background-toggle": "var(--background-100)",
"background-toggle": "var(--neutral-100-border-light)",
// Colors for the search toggle buttons
"background-agentic-toggled": "var(--light-success)",
"background-agentic-untoggled": "var(--undo)",
"text-agentic-toggled": "var(--text-800)",
"text-agentic-untoggled": "var(--white)",
"text-chatbar-subtle": "#9c9c96",
"text-chatbar": "var(--text-800)",
"text-agentic-toggled": "var(--neutral-800)",
"text-agentic-untoggled": "var(--white-card-popover)",
"text-chatbar-subtle": "var(--text-chatbar-subtle)",
"text-chatbar": "var(--neutral-800)",
// Color for the star indicator on high quality search results.
"star-indicator": "var(--background-100)",
"star-indicator": "var(--neutral-100-border-light)",
// Backgrounds for submit buttons on search and chat
"submit-background": "var(--background-800)",
"disabled-submit-background": "var(--background-400)",
"submit-background": "var(--neutral-800)",
"disabled-submit-background": "var(--neutral-400-border-strong)",
input: "var(--white)",
input: "var(--white-card-popover)",
text: "#000000",
"text-darker": "#282828",
"text-dark": "#4A4A4A",
"text-muted": "#6C6C6B",
"text-gray": "#6c6c6c",
text: "var(--neutral-900)",
"text-darker": "var(--text-darker)",
"text-dark": "var(--text-dark)",
"sidebar-border": "var(--neutral-200-border)",
"text-gray": "var(--text-gray)",
// background: "#F1EEE8",
"text-light": "var(--text-light)",
"text-light": "#9c9c96",
"text-50": "var(--text-50)",
"text-100": "var(--text-100)",
"text-200": "var(--text-200)",
"text-300": "var(--text-300)",
"text-400": "var(--text-400)",
"text-500": "var(--text-500)",
"text-600": "var(--text-600)",
"text-700": "var(--text-700)",
"text-800": "var(--text-800)",
"text-900": "var(--text-900)",
"text-950": "var(--text-950)",
// Light mode
// Light mode
"calendar-bg-selected": "var(--background-800)",
"calendar-bg-outside-selected": "var(--background-200)",
"calendar-text-muted": "var(--text-400)",
"calendar-text-selected": "var(--white)",
"calendar-range-middle": "var(--neutral-800)",
"calendar-range-end": "var(--white)",
"calendar-text-in-range": "var(--text-200)",
"calendar-text-end": "var(--text-900)",
// Dark mode
"calendar-bg-outside-selected-dark": "var(--background-700)",
"calendar-text-muted-dark": "var(--text-500)",
"calendar-text-selected-dark": "var(--white)",
"calendar-range-middle-dark": "var(--background-800)",
"calendar-text-in-range-dark": "var(--text-200)",
// Hover effects
"calendar-hover-bg": "var(--background-200)",
"calendar-hover-bg-dark": "var(--background-700)",
"calendar-hover-text": "var(--text-800)",
"calendar-hover-text-dark": "var(--text-200)",
// Today's date
"calendar-today-bg": "var(--background-100)",
"calendar-today-bg-dark": "var(--background-800)",
"calendar-today-text": "var(--text-800)",
"calendar-today-text-dark": "var(--text-200)",
"calendar-background-selected": "var(--white)",
"calendar-ring-selected": "var(--background-900)",
"text-50": "var(--neutral-50)",
"text-100": "var(--neutral-100-border-light)",
"text-200": "var(--neutral-200-border)",
"text-300": "var(--neutral-300-border-medium)",
"text-400": "var(--neutral-400-border-strong)",
"text-500": "var(--neutral-500)",
"text-600": "var(--neutral-600-border-dark)",
"text-700": "var(--neutral-700)",
"text-800": "var(--neutral-800)",
"text-900": "var(--neutral-900)",
"text-950": "var(--neutral-950)",
"text-muted": "var(--p)",
"user-text": "var(--text-800)",
description: "var(--text-400)",
subtle: "var(--text-500)",
subtle: "var(--neutral-600-border-dark)",
default: "var(--text-600)",
emphasis: "var(--text-700)",
strong: "var(--text-900)",
// borders
border: "var(--border)",
"border-light": "var(--border-light)",
"border-medium": "var(--border-medium)",
"border-strong": "var(--border-strong)",
"border-dark": "var(--border-dark)",
"non-selectable-border": "#f5c2c7",
border: "var(--neutral-200-border)",
"border-light": "var(--neutral-100-border-light)",
"border-medium": "var(--neutral-300-border-medium)",
"border-strong": "var(--neutral-400-border-strong)",
"border-dark": "var(--neutral-600-border-dark)",
"non-selectable-border": "var(--non-selectable-border)",
inverted: "var(--white)",
inverted: "var(--white-card-popover)",
link: "var(--link)",
"link-hover": "var(--link-hover)",
@@ -260,20 +259,16 @@ module.exports = {
success: "var(--success)",
alert: "var(--alert)",
accent: "var(--accent)",
// - agent: "#6C6AD6",
"agent-sidebar": "#BE5D0E",
agent: "#E47011",
// agent: "#FE8B09",
// agent: "#6C6AD6",
// agent: "#FE8B09",
"agent-sidebar": "var(--agent-sidebar)",
agent: "var(--agent)",
"lighter-agent": "var(--lighter-agent)",
// hover
"hover-light": "#F1EEE8",
"hover-lightish": "var(--background-125)",
"hover-light": "var(--hover-light)",
"hover-lightish": "var(--neutral-125)",
hover: "#E6E3DD",
"hover-emphasis": "var(--background-300)",
hover: "var(--hover)",
"hover-emphasis": "var(--neutral-300-border-medium)",
"accent-hover": "var(--accent-hover)",
// keyword highlighting
@@ -302,21 +297,21 @@ module.exports = {
faint: "var(--tremor-brand-faint)",
muted: "var(--tremor-brand-muted)",
subtle: "var(--tremor-brand-subtle)",
DEFAULT: "#3b82f6", // blue-500
DEFAULT: "var(--tremor-brand-default)",
emphasis: "var(--tremor-brand-emphasis)",
inverted: "var(--tremor-brand-inverted)",
},
background: {
muted: "var(--tremor-background-muted)",
subtle: "var(--tremor-background-subtle)",
DEFAULT: "#ffffff", // white
DEFAULT: "var(--tremor-background-default)",
emphasis: "var(--tremor-background-emphasis)",
},
border: {
DEFAULT: "#e5e7eb", // gray-200
DEFAULT: "var(--tremor-border-default)",
},
ring: {
DEFAULT: "#e5e7eb", // gray-200
DEFAULT: "var(--tremor-ring-default)",
},
content: {
subtle: "var(--tremor-content-subtle)",
@@ -332,7 +327,7 @@ module.exports = {
faint: "var(--dark-tremor-brand-faint)",
muted: "var(--dark-tremor-brand-muted)",
subtle: "var(--dark-tremor-brand-subtle)",
DEFAULT: "#3b82f6", // blue-500
DEFAULT: "var(--dark-tremor-brand-default)",
emphasis: "var(--dark-tremor-brand-emphasis)",
inverted: "var(--dark-tremor-brand-inverted)",
},
@@ -343,10 +338,10 @@ module.exports = {
emphasis: "var(--dark-tremor-background-emphasis)",
},
border: {
DEFAULT: "#1f2937", // gray-800
DEFAULT: "var(--dark-tremor-border-default)",
},
ring: {
DEFAULT: "#1f2937", // gray-800
DEFAULT: "var(--dark-tremor-ring-default)",
},
content: {
subtle: "var(--dark-tremor-content-subtle)",
@@ -356,6 +351,7 @@ module.exports = {
inverted: "var(--dark-tremor-content-inverted)",
},
},
foreground: "var(--foreground)",
},
boxShadow: {
// light
@@ -393,36 +389,36 @@ module.exports = {
},
calendar: {
// Light mode
"bg-selected": "#4B5563",
"bg-outside-selected": "rgba(75, 85, 99, 0.2)",
"text-muted": "#6B7280",
"text-selected": "#FFFFFF",
"range-start": "#000000",
"range-middle": "#F3F4F6",
"range-end": "#000000",
"text-in-range": "#1F2937",
"bg-selected": "var(--calendar-bg-selected)",
"bg-outside-selected": "var(--calendar-bg-outside-selected)",
"text-muted": "var(--calendar-text-muted)",
"text-selected": "var(--calendar-text-selected)",
"range-start": "var(--calendar-range-start)",
"range-middle": "var(--calendar-range-middle)",
"range-end": "var(--calendar-range-end)",
"text-in-range": "var(--calendar-text-in-range)",
// Dark mode
"bg-selected-dark": "#6B7280",
"bg-outside-selected-dark": "rgba(107, 114, 128, 0.2)",
"text-muted-dark": "#9CA3AF",
"text-selected-dark": "#F3F4F6",
"range-start-dark": "#374151",
"range-middle-dark": "#4B5563",
"range-end-dark": "#374151",
"text-in-range-dark": "#E5E7EB",
"bg-selected-dark": "var(--calendar-bg-selected-dark)",
"bg-outside-selected-dark": "var(--calendar-bg-outside-selected-dark)",
"text-muted-dark": "var(--calendar-text-muted-dark)",
"text-selected-dark": "var(--calendar-text-selected-dark)",
"range-start-dark": "var(--calendar-range-start-dark)",
"range-middle-dark": "var(--calendar-range-middle-dark)",
"range-end-dark": "var(--calendar-range-end-dark)",
"text-in-range-dark": "var(--calendar-text-in-range-dark)",
// Hover effects
"hover-bg": "#9CA3AF",
"hover-bg-dark": "#6B7280",
"hover-text": "#374151",
"hover-text-dark": "#E5E7EB",
"hover-bg": "var(--calendar-hover-bg)",
"hover-bg-dark": "var(--calendar-hover-bg-dark)",
"hover-text": "var(--calendar-hover-text)",
"hover-text-dark": "var(--calendar-hover-text-dark)",
// Today's date
"today-bg": "#D1D5DB",
"today-bg-dark": "#4B5563",
"today-text": "#374151",
"today-text-dark": "#D1D5DB",
"today-bg": "var(--calendar-today-bg)",
"today-bg-dark": "var(--calendar-today-bg-dark)",
"today-text": "var(--calendar-today-text)",
"today-text-dark": "var(--calendar-today-text-dark)",
},
},
},