xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-11-04 08:13:43 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: old page dark mode compatible

Browse Source
This commit is contained in:
Dean-YZG
2024-05-06 22:23:21 +08:00
parent 68f0fa917f
commit fa2f8c66d1
8 changed files with 98 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,6 +61,7 @@ export default function MenuLayout<
<div
className={`
w-[100%] relative bg-center
max-md:h-[100%]
md:flex md:my-2.5
`}
>

9
app/components/mask.tsx
View File

@@ -398,7 +398,7 @@ export function ContextPrompts(props: {
);
}
export function MaskPage() {
export function MaskPage(props: { className?: string }) {
const navigate = useNavigate();
const maskStore = useMaskStore();
@@ -470,9 +470,10 @@ export function MaskPage() {
return (
<>
<div
className={`${styles["mask-page"]} !bg-gray-50 ${
isMobileScreen ? "pb-chat-panel-mobile" : ""
}`}
className={`
${styles["mask-page"]}
${props.className}
`}
>
<div className="window-header">
<div className="window-header-title">

9
app/components/new-chat.tsx
View File

@@ -72,7 +72,7 @@ function useMaskGroup(masks: Mask[]) {
return groups;
}
export function NewChat() {
export function NewChat(props: { className?: string }) {
const chatStore = useChatStore();
const maskStore = useMaskStore();
@@ -115,9 +115,10 @@ export function NewChat() {
return (
<div
className={`${styles["new-chat"]} !bg-gray-50 px-1 ${
isMobileScreen ? "pb-chat-panel-mobile" : ""
}`}
className={`
${styles["new-chat"]}
${props.className}
`}
>
<div className={styles["mask-header"]}>
<IconButton

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

@@ -124,13 +124,17 @@ const ModelSelect = () => {
return (
<Popover
content={content({ close: () => {} })}
content={
<div className="max-h-chat-actions-select-model-popover overflow-y-auto">
{content({ close: () => {} })}
</div>
}
trigger="click"
noArrow
placement={
position?.poi.relativePosition[1] !== Orientation.bottom ? "lb" : "lt"
}
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]"
popoverClassName="border border-select-popover rounded-lg shadow-select-popover-shadow w-actions-popover bg-model-select-popover-panel w-[280px]"
onShow={(e) => {
if (e) {
autoScrollToSelectedModal();

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

@@ -67,15 +67,14 @@ export default function PromptHints(props: {
return (
<div
className={`
${styles["prompt-hints"]}
transition-all duration-300 shadow-prompt-hint-container rounded-none w-[100%] flex flex-col-reverse overflow-auto
${
notShowPrompt
? "max-h-[0vh] border-none"
: "border-b pt-2.5 max-h-[50vh]"
}
${props.className}
`}
transition-all duration-300 shadow-prompt-hint-container rounded-none flex flex-col-reverse overflow-x-hidden
${
notShowPrompt
? "max-h-[0vh] border-none"
: "border-b pt-2.5 max-h-[50vh]"
}
${props.className}
`}
>
{internalPrompts.map((prompt, i) => (
<div

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

@@ -525,38 +525,33 @@
text-overflow: ellipsis;
}
.prompt-hints {
.prompt-hint {
color:var(--btn-default-text);
padding: 6px 10px;
// animation: slide-in ease 0.3s;
// cursor: pointer;
// transition: all ease 0.3s;
border: transparent 1px solid;
margin: 4px;
border-radius: 8px;
.prompt-hint {
color:var(--btn-default-text);
padding: 6px 10px;
border: transparent 1px solid;
margin: 4px;
border-radius: 8px;
&:not(:last-child) {
margin-top: 0;
}
&:not(:last-child) {
margin-top: 0;
}
.hint-title {
font-size: 12px;
font-weight: bolder;
.hint-title {
font-size: 12px;
font-weight: bolder;
@include single-line();
}
@include single-line();
}
.hint-content {
font-size: 12px;
.hint-content {
font-size: 12px;
@include single-line();
}
@include single-line();
}
&-selected,
&:hover {
border-color: var(--primary);
}
&-selected,
&:hover {
border-color: var(--primary);
}
}

26
app/containers/index.tsx
View File

@@ -111,8 +111,30 @@ export default function Home() {
<ErrorBoundary>
<Routes>
<Route path={Path.Home} element={<Chat />} />
<Route path={Path.NewChat} element={<NewChat />} />
<Route path={Path.Masks} element={<MaskPage />} />
<Route
path={Path.NewChat}
element={
<NewChat
className={`
md:w-[100%] px-1
${config.theme === "dark" ? "" : "bg-gray-50"}
${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
`}
/>
}
/>
<Route
path={Path.Masks}
element={
<MaskPage
className={`
md:w-[100%]
${config.theme === "dark" ? "" : "bg-gray-50"}
${config.isMobileScreen ? "pb-chat-panel-mobile" : ""}
`}
/>
}
/>
<Route path={Path.Chat} element={<Chat />} />
<Route path={Path.Settings} element={<Settings />} />
</Routes>

28
app/hooks/useSwitchTheme.ts
View File

@@ -1,5 +1,6 @@
import { useLayoutEffect } from "react";
import { Theme, useAppConfig } from "@/app/store/config";
import { getCSSVar } from "../utils";
const DARK_CLASS = "dark-new";
const LIGHT_CLASS = "light-new";
@@ -17,4 +18,31 @@ export function useSwitchTheme() {
document.body.classList.add(LIGHT_CLASS);
}
}, [config.theme]);
useLayoutEffect(() => {
document.body.classList.remove("light");
document.body.classList.remove("dark");
if (config.theme === "dark") {
document.body.classList.add("dark");
} else if (config.theme === "light") {
document.body.classList.add("light");
}
const metaDescriptionDark = document.querySelector(
'meta[name="theme-color"][media*="dark"]',
);
const metaDescriptionLight = document.querySelector(
'meta[name="theme-color"][media*="light"]',
);
if (config.theme === "auto") {
metaDescriptionDark?.setAttribute("content", "#151515");
metaDescriptionLight?.setAttribute("content", "#fafafa");
} else {
const themeColor = getCSSVar("--theme-color");
metaDescriptionDark?.setAttribute("content", themeColor);
metaDescriptionLight?.setAttribute("content", themeColor);
}
}, [config.theme]);
}