7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-04 22:46:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: light theme mode

Browse Source
This commit is contained in:
butterfly
2024-04-25 21:57:50 +08:00
parent bb7422c526
commit 59583e53bd
34 changed files with 335 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,8 +81,8 @@ export default function ActionsBar(props: ActionsBarProps) {
}%] flex flex-col items-center justify-center gap-0.5
${
selected === action.id
? "text-blue-700"
: "text-gray-400"
? "text-text-sidebar-tab-mobile-active"
: "text-text-sidebar-tab-mobile-inactive"
}
`}
onClick={handlerClick(action)}
@@ -99,7 +99,9 @@ export default function ActionsBar(props: ActionsBarProps) {
<div
key={action.id}
className={`p-3 ${
selected === action.id ? "bg-blue-900" : "bg-transparent"
selected === action.id
? "bg-actions-bar-btn-default"
: "bg-transparent"
} rounded-md items-center ${action.className}`}
onClick={handlerClick(action)}
>

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

@@ -31,24 +31,22 @@ export default function Btn(props: {
switch (type) {
case "primary":
btnClassName = `${disabled ? "bg-blue-300" : "bg-blue-600"} text-white`;
btnClassName = `${
disabled ? "bg-primary-btn-disabled" : "bg-primary-btn shadow-btn"
} text-text-btn-primary `;
break;
case "danger":
btnClassName = `${
disabled ? "bg-blue-300" : "bg-blue-600"
} text-text-danger`;
btnClassName = `bg-danger-btn text-text-btn-danger`;
break;
default:
btnClassName = `${
disabled ? "bg-gray-100" : "bg-gray-300"
} text-gray-500`;
btnClassName = `bg-default-btn text-text-btn-default`;
}
return (
<button
className={`
${className ?? ""}
py-2 px-3 flex items-center justify-center gap-1 rounded-action-btn shadow-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"}
${btnClassName}
`}

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

@@ -24,7 +24,7 @@ export default function Card(props: CardProps) {
{title}
</div>
)}
<div className={`px-4 py-1 rounded-lg bg-white ${className}`}>
<div className={`px-4 py-1 rounded-lg bg-card ${className}`}>
{children}
</div>
</>

4
app/components/Input/index.tsx
View File

@@ -55,11 +55,11 @@ export default function Input(props: CommonInputProps & InputProps) {
return (
<div
className={`w-[100%] rounded-chat-input bg-gray-100 flex gap-3 items-center px-3 py-2 ${className}`}
className={`w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className}`}
>
<input
{...rest}
className=" overflow-hidden text-black text-sm-title leading-input outline-none flex-1"
className=" overflow-hidden text-text-input text-sm-title leading-input outline-none flex-1"
type={internalType}
value={value}
onChange={(e) => {

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

@@ -75,9 +75,6 @@ export function ListItem(props: ListItemProps) {
default:
internalNextLine = false;
}
if (childrenMeta.type === "input") {
console.log("===============", internalNextLine, nextline, inputNextLine);
}
const update = useCallback((m: ChildrenMeta) => {
setMeta(m);
@@ -85,7 +82,7 @@ export function ListItem(props: ListItemProps) {
return (
<div
className={`relative after:h-[0.5px] after:bottom-0 after:w-[100%] after:left-0 after:absolute last:after:hidden after:bg-gray-100 ${
className={`relative after:h-[0.5px] after:bottom-0 after:w-[100%] after:left-0 after:absolute last:after:hidden after:bg-list-item-divider ${
internalNextLine ? "" : "flex gap-3"
} justify-between items-center px-0 ${containerClassName} ${className}`}
onClick={onClick}
@@ -96,7 +93,9 @@ export function ListItem(props: ListItemProps) {
<div className=" font-common text-sm-mobile font-weight-[500] line-clamp-1">
{title}
</div>
{subTitle && <div className={` text-sm text-gray-300`}>{subTitle}</div>}
{subTitle && (
<div className={` text-sm text-text-list-subtitle`}>{subTitle}</div>
)}
</div>
<ListContext.Provider value={{ ...context, update }}>
<div

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

@@ -13,7 +13,7 @@ export default function Loading({
}) {
let theme;
if (typeof window !== "undefined") {
theme = getCSSVar("--chat-panel-bg");
theme = getCSSVar("--default-container-bg");
}
const isMobileScreen = useMobileScreen();

4
app/components/MenuLayout/index.tsx
View File

@@ -61,7 +61,7 @@ export default function MenuLayout<
let containerClassName = "flex h-[100%] w-[100%]";
let listClassName =
"relative basis-sidebar h-[calc(100%-1.25rem)] pb-6 max-md:px-4 max-md:pb-4 rounded-md my-2.5 bg-gray-50";
"relative basis-sidebar h-[calc(100%-1.25rem)] pb-6 max-md:px-4 max-md:pb-4 rounded-md my-2.5 bg-menu";
let panelClassName = "flex-1 h-[100%] w-page";
if (isMobileScreen) {
@@ -95,7 +95,7 @@ export default function MenuLayout<
onDragStart(e as any);
}}
>
<div className="opacity-0 group-hover:bg-[rgba($color: #000000, $alpha: 0.01) group-hover:opacity-20">
<div className="opacity-0 group-hover:bg-[rgba($color: #000000, $alpha: 0.01)] group-hover:opacity-20">
<DragIcon />
</div>
</div>

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

@@ -82,7 +82,7 @@ export default function Popover(props: {
let placementClassName;
let arrowClassName = "absolute left-[50%] translate-x-[calc(-50%)]";
// "absolute rotate-45 w-[8.5px] h-[8.5px] left-[50%] translate-x-[calc(-50%)] bg-black rounded-[1px] ";
arrowClassName += " ";
switch (placement) {

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

@@ -6,6 +6,8 @@ import useRelativePosition, {
} from "@/app/hooks/useRelativePosition";
import List from "@/app/components/List";
import Selected from "@/app/icons/selectedIcon.svg";
export type Option<Value> = {
value: Value;
label: string;
@@ -56,15 +58,14 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
{options?.map((o) => (
<div
key={o.value}
className={`flex items-center p-3 gap-2 ${
selectedOption?.value === o.value ? "bg-gray-100 rounded-md" : ""
}`}
className={`flex items-center p-3 gap-2 rounded-md hover:bg-select-option-hovered`}
onClick={() => {
onSelect?.(o.value);
}}
>
{!!o.icon && <div className="">{o.icon}</div>}
<div className={`flex-1`}>{o.label}</div>
{selectedOption?.value === o.value && <Selected />}
</div>
))}
</div>
@@ -78,13 +79,13 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
placement={
position?.poi.relativePosition[1] !== Orientation.bottom ? "rb" : "rt"
}
popoverClassName="border-actions-popover border-gray-200 rounded-md shadow-actions-popover w-actions-popover bg-white"
popoverClassName="border border-select-popover rounded-md shadow-select-popover-shadow w-actions-popover bg-select-popover-panel dark:bg-select-popover-panel-dark"
onShow={(e) => {
getRelativePosition(contentRef.current!, "");
}}
>
<div
className={`flex items-center gap-3 py-2 px-3 bg-gray-100 rounded-action-btn font-time text-sm-title ${selectClassName}`}
className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title ${selectClassName}`}
ref={contentRef}
>
<div className={`flex items-center gap-2 flex-1`}>

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

@@ -55,17 +55,19 @@ export default function SlideRange(props: SlideRangeProps) {
className={`flex flex-col justify-center items-end gap-1 w-[100%] ${className} ${rangeClassName}`}
>
{!!description && (
<div className="text-text-hint text-common text-sm">{description}</div>
<div className="text-text-slider-block text-common text-sm">
{description}
</div>
)}
<div
className="flex my-1.5 relative w-[100%] h-1.5 bg-gray-200 rounded-slide"
className="flex my-1.5 relative w-[100%] h-1.5 bg-slider rounded-slide"
ref={slideRef}
>
<div className="absolute top-0 h-[100%] w-[var(--slide-value-size)] pointer-events-none bg-gray-500 rounded-slide">
<div className="absolute top-0 h-[100%] w-[var(--slide-value-size)] pointer-events-none bg-slider-slided-travel rounded-slide">
&nbsp;
</div>
<div
className=" absolute w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] pointer-events-none h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border-[1px] border-gray-300 bg-white"
className=" absolute w-[30px] top-[50%] translate-y-[-50%] left-[var(--slide-value-size)] translate-x-[-50%] pointer-events-none h-slide-btn leading-slide-btn text-sm-mobile text-center rounded-slide border border-slider-block bg-slider-block"
// onPointerDown={onPointerDown}
>
{value}

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

@@ -15,12 +15,14 @@ export default function Switch(props: SwitchProps) {
<RadixSwitch.Root
checked={value}
onCheckedChange={onChange}
className={` flex w-switch h-switch bg-gray-200 p-0.5 box-content rounded-md ${switchClassName} ${
value ? "bg-switch-checked justify-end" : "bg-gray-200 justify-start"
className={` flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
value
? "bg-switch-checked justify-end"
: "bg-switch-unchecked justify-start"
}`}
>
<RadixSwitch.Thumb
className={` bg-white block w-4 h-4 drop-shadow-sm rounded-md`}
className={` bg-switch-btn block w-4 h-4 drop-shadow-sm rounded-md`}
/>
</RadixSwitch.Root>
);

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

@@ -9,7 +9,7 @@ export default function Thumbnail(props: ThumbnailProps) {
const { image, deleteImage } = props;
return (
<div
className={` h-thumbnail w-thumbnail cursor-default border-1 border-black border-opacity-10 rounded-action-btn flex-0 bg-cover bg-center`}
className={` h-thumbnail w-thumbnail cursor-default border border-thumbnail rounded-action-btn flex-0 bg-cover bg-center`}
style={{ backgroundImage: `url("${image}")` }}
>
<div