7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

complete colors in dark mode

This commit is contained in:
butterfly 2024-05-01 22:35:23 +08:00
parent 8a14cb19a9
commit 68f0fa917f
20 changed files with 174 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/Btn/index.tsx
View File

@ -55,6 +55,7 @@ export default function Btn(props: BtnProps) {
py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn transition-all duration-300 select-none
${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
${btnClassName} ${btnClassName}
follow-parent-svg
`} `}
onClick={onClick} onClick={onClick}
title={title} title={title}

2
app/components/Card/index.tsx
View File

@ -14,7 +14,7 @@ export default function Card(props: CardProps) {
{title && ( {title && (
<div <div
className={` className={`
capitalize !font-semibold text-sm-mobile font-weight-setting-card-title capitalize !font-semibold text-sm-mobile font-weight-setting-card-title text-text-card-title
mb-3 mb-3
ml-3 ml-3

2
app/components/List/index.tsx
View File

@ -81,7 +81,7 @@ export function ListItem(props: ListItemProps) {
onClick={onClick} onClick={onClick}
> >
<div className={`flex-1 flex flex-col justify-start gap-1`}> <div className={`flex-1 flex flex-col justify-start gap-1`}>
<div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1"> <div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1 text-text-list-title">
{title} {title}
</div> </div>
{subTitle && ( {subTitle && (

8
app/components/Modal/index.tsx
View File

@ -147,7 +147,7 @@ const Modal = (props: ModalProps) => {
</div> </div>
<div <div
className={`flex flex-col flex-0 className={`flex flex-col flex-0
bg-moda-panel text-modal-mask bg-moda-panel text-modal-panel
${modelClassName} ${modelClassName}
${panelClassName} ${panelClassName}
`} `}
@ -156,7 +156,7 @@ const Modal = (props: ModalProps) => {
<AlertDialog.Title <AlertDialog.Title
className={` className={`
flex items-center justify-between gap-3 font-common flex items-center justify-between gap-3 font-common
md:text-chat-header-title md:font-bold md:leading-5 md:text-chat-header-title md:font-bold md:leading-5
${ ${
headerBordered headerBordered
? " border-b border-modal-header-bottom" ? " border-b border-modal-header-bottom"
@ -165,7 +165,7 @@ const Modal = (props: ModalProps) => {
${titleClassName} ${titleClassName}
`} `}
> >
<div className="flex gap-3 justify-start flex-1 items-center"> <div className="flex gap-3 justify-start flex-1 items-center text-text-modal-title text-chat-header-title">
{title} {title}
</div> </div>
{closeble && ( {closeble && (
@ -180,7 +180,7 @@ const Modal = (props: ModalProps) => {
)} )}
</AlertDialog.Title> </AlertDialog.Title>
)} )}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden text-text-modal-content text-sm-title">
{typeof content === "function" {typeof content === "function"
? content({ ? content({
close: () => { close: () => {

14
app/components/Select/index.tsx
View File

@ -58,14 +58,16 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
{options?.map((o) => ( {options?.map((o) => (
<div <div
key={o.value} key={o.value}
className={`flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer`} className={`
flex items-center px-3 py-2 gap-3 rounded-action-btn hover:bg-select-option-hovered cursor-pointer
`}
onClick={() => { onClick={() => {
onSelect?.(o.value); onSelect?.(o.value);
}} }}
> >
<div className="flex gap-2 flex-1"> <div className="flex gap-2 flex-1 follow-parent-svg text-text-select-option">
{!!o.icon && <div className="">{o.icon}</div>} {!!o.icon && <div className="flex items-center">{o.icon}</div>}
<div className={`flex-1`}>{o.label}</div> <div className={`flex-1 text-text-select-option`}>{o.label}</div>
</div> </div>
<div <div
className={ className={
@ -97,7 +99,9 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`} className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
ref={contentRef} ref={contentRef}
> >
<div className={`flex items-center gap-2 flex-1`}> <div
className={`flex items-center gap-2 flex-1 follow-parent-svg text-text-select`}
>
{!!selectedOption?.icon && ( {!!selectedOption?.icon && (
<div className={``}>{selectedOption?.icon}</div> <div className={``}>{selectedOption?.icon}</div>
)} )}

6
app/components/SlideRange/index.tsx
View File

@ -62,9 +62,7 @@ export default function SlideRange(props: SlideRangeProps) {
className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`} className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
> >
{!!description && ( {!!description && (
<div className="text-text-slider-block text-common text-sm "> <div className=" text-common text-sm ">{description}</div>
{description}
</div>
)} )}
<div <div
className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer" className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide cursor-pointer"
@ -74,7 +72,7 @@ export default function SlideRange(props: SlideRangeProps) {
&nbsp; &nbsp;
</div> </div>
<div <div
className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover" className="cursor-pointer absolute z-1 w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block hover:bg-slider-block-hover text-text-slider-block"
// onPointerDown={onPointerDown} // onPointerDown={onPointerDown}
> >
{value} {value}

17
app/components/ui-lib.tsx
View File

@ -101,6 +101,7 @@ interface ModalProps {
defaultMax?: boolean; defaultMax?: boolean;
footer?: React.ReactNode; footer?: React.ReactNode;
onClose?: () => void; onClose?: () => void;
className?: string;
} }
export function Modal(props: ModalProps) { export function Modal(props: ModalProps) {
useEffect(() => { useEffect(() => {
@ -122,14 +123,14 @@ export function Modal(props: ModalProps) {
return ( return (
<div <div
className={ className={`${styles["modal-container"]} ${
styles["modal-container"] + ` ${isMax && styles["modal-container-max"]}` isMax && styles["modal-container-max"]
} } ${props.className ?? ""}`}
> >
<div className={styles["modal-header"]}> <div className={`${styles["modal-header"]} new-header follow-parent-svg`}>
<div className={styles["modal-title"]}>{props.title}</div> <div className={`${styles["modal-title"]}`}>{props.title}</div>
<div className={styles["modal-header-actions"]}> <div className={`${styles["modal-header-actions"]}`}>
<div <div
className={styles["modal-header-action"]} className={styles["modal-header-action"]}
onClick={() => setMax(!isMax)} onClick={() => setMax(!isMax)}
@ -147,11 +148,11 @@ export function Modal(props: ModalProps) {
<div className={styles["modal-content"]}>{props.children}</div> <div className={styles["modal-content"]}>{props.children}</div>
<div className={styles["modal-footer"]}> <div className={`${styles["modal-footer"]} new-footer`}>
{props.footer} {props.footer}
<div className={styles["modal-actions"]}> <div className={styles["modal-actions"]}>
{props.actions?.map((action, i) => ( {props.actions?.map((action, i) => (
<div key={i} className={styles["modal-action"]}> <div key={i} className={`${styles["modal-action"]} new-btn`}>
{action} {action}
</div> </div>
))} ))}

16
app/containers/Chat/components/ChatActions.tsx
View File

@ -187,7 +187,7 @@ export function ChatActions(props: {
return ( return (
<div <div
key={act.text} key={act.text}
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`} className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer follow-parent-svg default-icon-color`}
onClick={act.onClick} onClick={act.onClick}
> >
{act.icon} {act.icon}
@ -206,7 +206,7 @@ export function ChatActions(props: {
placement="rt" placement="rt"
noArrow noArrow
popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile " popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
className=" cursor-pointer" className=" cursor-pointer follow-parent-svg default-icon-color"
> >
<AddCircleIcon /> <AddCircleIcon />
</Popover> </Popover>
@ -236,7 +236,11 @@ export function ChatActions(props: {
className={`${act.className ?? ""}`} className={`${act.className ?? ""}`}
> >
<div <div
className={` cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out hover:bg-chat-actions-btn-hovered hover:rounded-action-btn`} className={`
cursor-pointer h-[32px] w-[32px] flex items-center justify-center transition duration-300 ease-in-out
hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
follow-parent-svg default-icon-color
`}
onClick={act.onClick} onClick={act.onClick}
> >
{act.icon} {act.icon}
@ -256,7 +260,11 @@ export function ChatActions(props: {
placement={ind === arr.length - 1 ? "rt" : "t"} placement={ind === arr.length - 1 ? "rt" : "t"}
> >
<div <div
className=" cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn" className={`
cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center
hover:bg-chat-actions-btn-hovered hover:rounded-action-btn
follow-parent-svg default-icon-color
`}
onClick={act.onClick} onClick={act.onClick}
> >
{act.icon} {act.icon}

9
app/containers/Chat/components/ChatHeader.tsx
View File

@ -22,8 +22,6 @@ export default function ChatHeader(props: ChatHeaderProps) {
const chatStore = useChatStore(); const chatStore = useChatStore();
const session = chatStore.currentSession(); const session = chatStore.currentSession();
const currentModel = chatStore.currentSession().mask.modelConfig.model;
return ( return (
<div <div
className={` className={`
@ -40,7 +38,10 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div> </div>
{isMobileScreen ? ( {isMobileScreen ? (
<div className=" cursor-pointer" onClick={() => navigate(Path.Home)}> <div
className=" cursor-pointer follow-parent-svg default-icon-color"
onClick={() => navigate(Path.Home)}
>
<GobackIcon /> <GobackIcon />
</div> </div>
) : ( ) : (
@ -78,7 +79,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
</div> </div>
<div <div
className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn" className=" cursor-pointer hover:bg-hovered-btn p-1.5 rounded-action-btn follow-parent-svg default-icon-color"
onClick={() => { onClick={() => {
setShowExport(true); setShowExport(true);
}} }}

2
app/containers/Chat/components/ChatInputPanel.tsx
View File

@ -277,7 +277,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
id="chat-input" id="chat-input"
ref={inputRef} ref={inputRef}
className={` className={`
leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none leading-[19px] flex-1 focus:outline-none focus:shadow-none focus:border-none resize-none bg-inherit text-text-input
max-md:h-chat-input-mobile max-md:h-chat-input-mobile
md:min-h-chat-input md:min-h-chat-input
`} `}

1
app/containers/Chat/components/EditMessageModal.tsx
View File

@ -42,6 +42,7 @@ export function EditMessageModal(props: { onClose: () => void }) {
}} }}
/>, />,
]} ]}
// className="!bg-modal-mask"
> >
<List> <List>
<ListItem <ListItem

11
app/containers/Chat/components/ModelSelect.tsx
View File

@ -80,7 +80,7 @@ const ModelSelect = () => {
}} }}
ref={currentModel === o.name ? selectedItemRef : undefined} ref={currentModel === o.name ? selectedItemRef : undefined}
> >
<div className={`flex-1`}>{o.name}</div> <div className={`flex-1 text-text-select`}>{o.name}</div>
<div <div
className={currentModel === o.name ? "opacity-100" : "opacity-0"} className={currentModel === o.name ? "opacity-100" : "opacity-0"}
> >
@ -111,7 +111,10 @@ const ModelSelect = () => {
noFooter noFooter
modelClassName="h-model-bottom-drawer" modelClassName="h-model-bottom-drawer"
> >
<div className="flex items-center gap-1 cursor-pointer" ref={rootRef}> <div
className="flex items-center gap-1 cursor-pointer text-text-modal-select"
ref={rootRef}
>
{currentModel} {currentModel}
<BottomArrowMobile /> <BottomArrowMobile />
</div> </div>
@ -127,7 +130,7 @@ const ModelSelect = () => {
placement={ placement={
position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt" position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
} }
popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-select-popover-panel max-h-chat-actions-select-model-popover w-[280px]" popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-model-select-popover-panel max-h-chat-actions-select-model-popover w-[280px]"
onShow={(e) => { onShow={(e) => {
if (e) { if (e) {
autoScrollToSelectedModal(); autoScrollToSelectedModal();
@ -140,7 +143,7 @@ const ModelSelect = () => {
className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover" className="flex items-center justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model hover:bg-chat-actions-select-model-hover"
ref={rootRef} ref={rootRef}
> >
<div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title"> <div className="line-clamp-1 max-w-chat-actions-select-model text-sm-title text-text-modal-select">
{currentModel} {currentModel}
</div> </div>
<BottomArrow /> <BottomArrow />

1
app/containers/Chat/components/SessionConfigModal.tsx
View File

@ -49,6 +49,7 @@ export default function SessionConfigModel(props: { onClose: () => void }) {
}} }}
/>, />,
]} ]}
// className="!bg-modal-mask"
> >
<MaskConfig <MaskConfig
mask={session.mask} mask={session.mask}

17
app/containers/Chat/components/SessionItem.tsx
View File

@ -99,13 +99,18 @@ export default function SessionItem(props: {
<Popover <Popover
content={ content={
<div <div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`} className={`
flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
follow-parent-svg
fill-none
text-text-chat-menu-item-delete
`}
onClickCapture={(e) => { onClickCapture={(e) => {
props.onDelete?.(); props.onDelete?.();
}} }}
> >
<DeleteChatIcon /> <DeleteChatIcon />
<div className="flex-1 font-common text-actions-popover-menu-item text-text-chat-menu-item-delete"> <div className="flex-1 font-common text-actions-popover-menu-item ">
{Locale.Chat.Actions.Delete} {Locale.Chat.Actions.Delete}
</div> </div>
</div> </div>
@ -124,6 +129,7 @@ export default function SessionItem(props: {
md:group-hover/chat-menu-list:opacity-100 md:group-hover/chat-menu-list:opacity-100
md:hover:bg-select-hover md:hover:bg-select-hover
follow-parent-svg follow-parent-svg
fill-none
text-text-chat-menu-item-time text-text-chat-menu-item-time
`} `}
> >
@ -134,7 +140,12 @@ export default function SessionItem(props: {
<HoverPopover <HoverPopover
content={ content={
<div <div
className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`} className={`
flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer
follow-parent-svg
fill-none
text-text-chat-menu-item-delete
`}
onClickCapture={(e) => { onClickCapture={(e) => {
props.onDelete?.(); props.onDelete?.();
e.preventDefault(); e.preventDefault();

2
app/containers/Chat/index.module.scss
View File

@ -527,7 +527,7 @@
.prompt-hints { .prompt-hints {
.prompt-hint { .prompt-hint {
color: var(--black); color:var(--btn-default-text);
padding: 6px 10px; padding: 6px 10px;
// animation: slide-in ease 0.3s; // animation: slide-in ease 0.3s;
// cursor: pointer; // cursor: pointer;

1
app/containers/Settings/components/SyncConfigModal.tsx
View File

@ -77,6 +77,7 @@ export default function SyncConfigModal(props: { onClose?: () => void }) {
text={Locale.UI.Confirm} text={Locale.UI.Confirm}
/>, />,
]} ]}
className="!bg-modal-mask active-new"
> >
<List <List
widgetStyle={{ widgetStyle={{

2
app/containers/Settings/components/UserPromptModal.tsx
View File

@ -32,6 +32,7 @@ function EditPromptModal(props: { id: string; onClose: () => void }) {
bordered bordered
/>, />,
]} ]}
// className="!bg-modal-mask"
> >
<div className={styles["edit-prompt-modal"]}> <div className={styles["edit-prompt-modal"]}>
<Input <Input
@ -103,6 +104,7 @@ export default function UserPromptModal(props: { onClose?: () => void }) {
text={Locale.Settings.Prompt.Modal.Add} text={Locale.Settings.Prompt.Modal.Add}
/>, />,
]} ]}
// className="!bg-modal-mask"
> >
<div className={styles["user-prompt-modal"]}> <div className={styles["user-prompt-modal"]}>
<Input <Input

2
app/icons/logIcon.svg
View File

@ -1,6 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="url(#paint0_linear_460_33855)"/> <rect width="32" height="32" rx="8" fill="url(#paint0_linear_460_33855)"/>
<rect width="32" height="32" rx="8" stroke="white"/> <rect width="32" height="32" rx="8" stroke="url(#paint0_linear_460_33855)"/>
<g filter="url(#filter0_d_460_33855)"> <g filter="url(#filter0_d_460_33855)">
<path d="M9.51146 11.3436C9.86914 9.99625 11.2528 9.19527 12.5993 9.55608C13.9414 9.9157 14.7392 11.2938 14.3827 12.6368L11.9487 21.8055C11.591 23.1529 10.2073 23.9538 8.86082 23.593C7.51868 23.2334 6.72089 21.8553 7.07741 20.5123L9.51146 11.3436Z" fill="url(#paint1_linear_460_33855)"/> <path d="M9.51146 11.3436C9.86914 9.99625 11.2528 9.19527 12.5993 9.55608C13.9414 9.9157 14.7392 11.2938 14.3827 12.6368L11.9487 21.8055C11.591 23.1529 10.2073 23.9538 8.86082 23.593C7.51868 23.2334 6.72089 21.8553 7.07741 20.5123L9.51146 11.3436Z" fill="url(#paint1_linear_460_33855)"/>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

144
app/styles/base-new.scss
View File

@ -23,11 +23,32 @@ body {
} }
.follow-parent-svg { .follow-parent-svg {
svg { svg {
*:not(rect) { fill: inherit;
fill: currentColor; *:not(rect) {
} fill: currentColor;
} }
rect {
fill: inherit;
}
}
}
.default-icon-color {
color: var(--default-icon-color);
}
.active-new {
.new-header, .new-footer {
border-color: var(--modal-header-bottom-border) !important;
color: var(--modal-title-text) !important;
}
.new-btn {
button {
background: var(--default-btn-bg);
color: var(--btn-default-text);
}
}
} }
--siderbar-mobile-height: 3.125rem; --siderbar-mobile-height: 3.125rem;
@ -93,6 +114,7 @@ body {
--slider-block-hover-bg: #F7F7F8; --slider-block-hover-bg: #F7F7F8;
--chat-menu-session-unselected-mobile-bg:#FFF; --chat-menu-session-unselected-mobile-bg:#FFF;
--chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05); --chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05);
--model-select-popover-panel-bg: #fff;
--select-popover-border: rgba(0, 0, 0, 0.1); --select-popover-border: rgba(0, 0, 0, 0.1);
--slider-block-border: #c9c9d1; --slider-block-border: #c9c9d1;
@ -118,7 +140,9 @@ body {
--btn-primary-text: #fff; --btn-primary-text: #fff;
--btn-danger-text: #ff5454; --btn-danger-text: #ff5454;
--btn-default-text: #606078; --btn-default-text: #606078;
--card-title-text: #18182A;
--input-text: #18182a; --input-text: #18182a;
--select-text: #18182a;
--list-subtitle-text: #a5a5b3; --list-subtitle-text: #a5a5b3;
--slider-block-text: #606078; --slider-block-text: #606078;
--chat-actions-btn-popover-text: #fff; --chat-actions-btn-popover-text: #fff;
@ -136,10 +160,15 @@ body {
--settings-menu-title-text: #18182a; --settings-menu-title-text: #18182a;
--settings-menu-item-title-text: #18182a; --settings-menu-item-title-text: #18182a;
--settings-panel-header-title-text: #18182a; --settings-panel-header-title-text: #18182a;
--modal-mask-text: #18182a; --modal-panel-text: #18182a;
--delete-chat-ok-btn-text: #fff; --delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a; --delete-chat-cancel-btn-text: #18182a;
--chat-menu-item-delete-text: #FF5454; --chat-menu-item-delete-text: #FF5454;
--list-title-text: #18182A;
--select-option-text: #18182A;
--modal-select-text: #18182A;
--modal-title-text: #18182A;
--modal-content-text: #18182A;
--btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14);
--chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
@ -150,6 +179,8 @@ body {
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), --delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08),
0px 8px 20px 0px rgba(0, 0, 0, 0.08); 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2); --sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
--default-icon-color: #606078;
} }
.dark-new { .dark-new {
@ -208,63 +239,72 @@ body {
--select-hover-bg: #303030; --select-hover-bg: #303030;
--input-input-ele-hover-bg: rgba(0, 0, 0, 0); --input-input-ele-hover-bg: rgba(0, 0, 0, 0);
--chat-menu-session-unselected-mobile-bg:#111; --chat-menu-session-unselected-mobile-bg:#111;
--chat-menu-session-selected-mobile-bg: rgba(0, 0, 0, 0.05);//////////// --chat-menu-session-selected-mobile-bg: #1D1D1D;
--global-mobile-bg: #303030; --global-mobile-bg: #303030;
--model-select-popover-panel-bg: #111;
--select-popover-border: rgba(0, 0, 0, 0.1); --select-popover-border: rgba(255, 255, 255, 0.05);
--slider-block-border: #c9c9d1; --slider-block-border: #6C6C6C;
--thumbnail-border: rgba(0, 0, 0, 0.1); --thumbnail-border: rgba(255, 255, 255, 0.05);
--chat-actions-popover-mobile-border: #f0f0f3; --chat-actions-popover-mobile-border: #303030;
--chat-header-bottom-border: #e2e2e6; --chat-header-bottom-border: #303030;
--chat-input-top-border: #e2e2e6; --chat-input-top-border: #303030;
--chat-input-hood-border: #fff; --chat-input-hood-border: rgba(0,0,0,0);
--chat-input-hood-focus-border: #606078; --chat-input-hood-focus-border: #E3E3E3;
--chat-menu-session-selected-border: #c9cefc; --chat-menu-session-selected-border: #1C2E70;
--settings-menu-item-selected-border: #c9cefc; --settings-menu-item-selected-border: #1C2E70;
--settings-header-border: #e2e2e6; --settings-header-border: #404040;
--delete-chat-popover-border: rgba(0, 0, 0, 0.1); --delete-chat-popover-border: rgba(255, 255, 255, 0.1);
--delete-chat-cancel-btn-border: #e2e2e6; --delete-chat-cancel-btn-border: #303030;
--chat-menu-session-unselected-border: #f0f0f3; --chat-menu-session-unselected-border: #303030;
--chat-menu-session-hovered-border: #e2e2e6; --chat-menu-session-hovered-border: #1D1D1D;
--modal-header-bottom-border: #f0f0f3; --modal-header-bottom-border: #303030;
--chat-menu-session-unselected-mobile-border: #FFF; --chat-menu-session-unselected-mobile-border: rgba(0, 0, 0, 0);
--chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0.05); --chat-menu-session-selected-mobile-border: rgba(0, 0, 0, 0);
--sidebar-tab-mobile-active-text: #2e42f3; --sidebar-tab-mobile-active-text: #384CFC;
--sidebar-tab-mobile-inactive-text: #a5a5b3; --sidebar-tab-mobile-inactive-text: #a5a5b3;
--btn-primary-text: #fff; --btn-primary-text: #fff;
--btn-danger-text: #ff5454; --btn-danger-text: #ff5454;
--btn-default-text: #606078; --btn-default-text: #E3E3E3;
--input-text: #18182a; --card-title-text: #FAFAFA;
--input-text: #FAFAFA;
--select-text: #FAFAFA;
--list-subtitle-text: #a5a5b3; --list-subtitle-text: #a5a5b3;
--slider-block-text: #606078; --slider-block-text: #E3E3E3;
--chat-actions-btn-popover-text: #fff; --chat-actions-btn-popover-text: #111;
--chat-header-title-text: #18182a; --chat-header-title-text: #FAFAFA;
--chat-header-subtitle-text: #88889a; --chat-header-subtitle-text: #B0B0B0;
--chat-input-placeholder-text: #88889a; --chat-input-placeholder-text: #B0B0B0;
--chat-message-date-text: #88889a; --chat-message-date-text: #B0B0B0;
--chat-message-markdown-user-text: #fff; --chat-message-markdown-user-text: #FAFAFA;
--chat-message-markdown-bot-text: #18182a; --chat-message-markdown-bot-text: #FAFAFA;
--chat-panel-message-clear-text: #a5a5b3; --chat-panel-message-clear-text: #a5a5b3; //////////////
--chat-panel-message-clear-revert-text: #3c44ff; --chat-panel-message-clear-revert-text: #3c44ff; ///////////////
--chat-menu-item-title-text: #18182a; --chat-menu-item-title-text: #fff;
--chat-menu-item-time-text: rgba(0, 0, 0, 0.3); --chat-menu-item-time-text: rgba(255, 255, 255, 0.30);
--chat-menu-item-description-text: #88889a; --chat-menu-item-description-text: #B0B0B0;
--settings-menu-title-text: #18182a; --settings-menu-title-text: #FAFAFA;
--settings-menu-item-title-text: #18182a; --settings-menu-item-title-text: #FAFAFA;
--settings-panel-header-title-text: #18182a; --settings-panel-header-title-text: #FAFAFA;
--modal-mask-text: #18182a; --modal-panel-text: #FAFAFA;
--delete-chat-ok-btn-text: #fff; --delete-chat-ok-btn-text: #fff;
--delete-chat-cancel-btn-text: #18182a; --delete-chat-cancel-btn-text: #FAFAFA;
--chat-menu-item-delete-text: #FF5454; --chat-menu-item-delete-text: #F55151;
--list-title-text: #FAFAFA;
--select-option-text: #FAFAFA;
--modal-select-text: #E3E3E3;
--modal-title-text: #FAFAFA;
--modal-content-text: #FAFAFA;
--btn-shadow: 0px 4px 10px 0px rgba(60, 68, 255, 0.14); --btn-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); --chat-actions-popover-mobile-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12);
--chat-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13); --chat-input-hood-focus-shadow: 0px 4px 20px 0px rgba(60, 68, 255, 0.13);
--select-popover-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.12); --select-popover-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.10);
--message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1); --message-actions-bar-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0);
--prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1); --prompt-hint-container-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
--delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), --delete-chat-popover-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.08), 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
0px 8px 20px 0px rgba(0, 0, 0, 0.08); --sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.20);
--sidebar-btn-shadow: 4px 8px 16px 0px rgba(60, 68, 255, 0.2);
--default-icon-color: #E3E3E3;
} }

10
tailwind.config.js
View File

@ -140,6 +140,7 @@ module.exports = {
'chat-actions-select-model-hover': 'var(--chat-actions-select-model-hover-bg)', 'chat-actions-select-model-hover': 'var(--chat-actions-select-model-hover-bg)',
'select-hover': 'var(--select-hover-bg)', 'select-hover': 'var(--select-hover-bg)',
'input-input-ele-hover': 'var(--input-input-ele-hover-bg)', 'input-input-ele-hover': 'var(--input-input-ele-hover-bg)',
'model-select-popover-panel': 'var(--model-select-popover-panel-bg)',
}, },
backgroundImage: { backgroundImage: {
// 'chat-panel-message-user': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)', // 'chat-panel-message-user': 'linear-gradient(259deg, #9786FF 8.42%, #4A5CFF 90.13%)',
@ -191,7 +192,12 @@ module.exports = {
'text-btn-primary': 'var(--btn-primary-text)', 'text-btn-primary': 'var(--btn-primary-text)',
'text-btn-danger': 'var(--btn-danger-text)', 'text-btn-danger': 'var(--btn-danger-text)',
'text-btn-default': 'var(--btn-default-text)', 'text-btn-default': 'var(--btn-default-text)',
'text-card-title': 'var(--card-title-text)',
'text-input': 'var(--input-text)', 'text-input': 'var(--input-text)',
'text-select': 'var(--select-text)',
'text-select-option': 'var(--select-option-text)',
'text-modal-select': 'var(--modal-select-text)',
'text-list-title': 'var(--list-title-text)',
'text-list-subtitle': 'var(--list-subtitle-text)', 'text-list-subtitle': 'var(--list-subtitle-text)',
'text-slider-block': 'var(--slider-block-text)', 'text-slider-block': 'var(--slider-block-text)',
'text-chat-actions-btn-popover': 'var(--chat-actions-btn-popover-text)', 'text-chat-actions-btn-popover': 'var(--chat-actions-btn-popover-text)',
@ -210,10 +216,12 @@ module.exports = {
'text-settings-menu-title': 'var(--settings-menu-title-text)', 'text-settings-menu-title': 'var(--settings-menu-title-text)',
'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)', 'text-settings-menu-item-title': 'var(--settings-menu-item-title-text)',
'text-settings-panel-header-title': 'var(--settings-panel-header-title-text)', 'text-settings-panel-header-title': 'var(--settings-panel-header-title-text)',
'text-modal-mask': 'var(--modal-mask-text)', 'text-modal-panel': 'var(--modal-panel-text)',
'text-delete-chat-ok-btn': 'var(--delete-chat-ok-btn-text)', 'text-delete-chat-ok-btn': 'var(--delete-chat-ok-btn-text)',
'text-delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-text)', 'text-delete-chat-cancel-btn': 'var(--delete-chat-cancel-btn-text)',
'text-primary-btn-disabled-dark': 'var(--primary-btn-disabled-dark-text)', 'text-primary-btn-disabled-dark': 'var(--primary-btn-disabled-dark-text)',
'text-modal-title': 'var(--modal-title-text)',
'text-modal-content': 'var(--modal-content-text)',
}, },
keyframes: { keyframes: {
mask: { mask: {