From cd73c3a7cb062e59bfee60f421be8a3a508bf286 Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Mon, 27 Mar 2023 15:01:35 +0800 Subject: [PATCH 1/4] fix: taskbar color follow(#54) --- app/components/home.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/components/home.tsx b/app/components/home.tsx index 1c665f87..fd38ee8c 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -358,12 +358,20 @@ function useSwitchTheme() { const config = useChatStore((state) => state.config); useEffect(() => { + const metaDescription = document.querySelector('meta[name="theme-color"]'); + document.body.classList.remove("light"); document.body.classList.remove("dark"); if (config.theme === "dark") { document.body.classList.add("dark"); + if (metaDescription){ + metaDescription.setAttribute('content', "#151515"); + } } else if (config.theme === "light") { document.body.classList.add("light"); + if (metaDescription){ + metaDescription.setAttribute('content', "#fafafa"); + } } }, [config.theme]); } From 6446692db04b612ab243d19c88c09c3cbee52c29 Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Mon, 27 Mar 2023 15:02:12 +0800 Subject: [PATCH 2/4] feat: support safari appleWebApp --- app/layout.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 095d3a18..eea0c9a6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -13,6 +13,11 @@ const COMMIT_ID = process export const metadata = { title: "ChatGPT Next Web", description: "Your personal ChatGPT Chat Bot.", + appleWebApp: { + title: "ChatGPT Next Web", + statusBarStyle: "black-translucent", + }, + themeColor: "#fafafa" }; function Meta() { From 785372ad73b6691717fb699125bd62fbdc5f078b Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Mon, 27 Mar 2023 15:47:46 +0800 Subject: [PATCH 3/4] fix: fix the different colors on mobile --- app/components/home.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index fd38ee8c..bcb71984 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -356,6 +356,7 @@ export function Chat(props: { showSideBar?: () => void }) { function useSwitchTheme() { const config = useChatStore((state) => state.config); + const screenWidth = window.innerWidth; useEffect(() => { const metaDescription = document.querySelector('meta[name="theme-color"]'); @@ -364,16 +365,24 @@ function useSwitchTheme() { document.body.classList.remove("dark"); if (config.theme === "dark") { document.body.classList.add("dark"); - if (metaDescription){ - metaDescription.setAttribute('content', "#151515"); + if (metaDescription) { + if (screenWidth < 600) { + metaDescription.setAttribute('content', "#1a262a"); + } else { + metaDescription.setAttribute('content', "#151515"); + } } } else if (config.theme === "light") { document.body.classList.add("light"); - if (metaDescription){ - metaDescription.setAttribute('content', "#fafafa"); + if (metaDescription) { + if (screenWidth < 600) { + metaDescription.setAttribute('content', "#e7f8ff"); + } else { + metaDescription.setAttribute('content', "#fafafa"); + } } } - }, [config.theme]); + }, [config.theme,screenWidth]); } function exportMessages(messages: Message[], topic: string) { From dd80c4563ddc4b40232fb823405ddd1f31c8f4de Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Mon, 27 Mar 2023 17:04:11 +0800 Subject: [PATCH 4/4] feat: adding iOS Webapp support - fix media query about background-color - Use colors from CSS files instead of fixed values --- app/components/home.tsx | 24 ++++++------------------ app/styles/globals.scss | 9 ++++++++- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/app/components/home.tsx b/app/components/home.tsx index bcb71984..a2ef17b7 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -356,33 +356,21 @@ export function Chat(props: { showSideBar?: () => void }) { function useSwitchTheme() { const config = useChatStore((state) => state.config); - const screenWidth = window.innerWidth; useEffect(() => { - const metaDescription = document.querySelector('meta[name="theme-color"]'); - document.body.classList.remove("light"); document.body.classList.remove("dark"); + if (config.theme === "dark") { document.body.classList.add("dark"); - if (metaDescription) { - if (screenWidth < 600) { - metaDescription.setAttribute('content', "#1a262a"); - } else { - metaDescription.setAttribute('content', "#151515"); - } - } } else if (config.theme === "light") { document.body.classList.add("light"); - if (metaDescription) { - if (screenWidth < 600) { - metaDescription.setAttribute('content', "#e7f8ff"); - } else { - metaDescription.setAttribute('content', "#fafafa"); - } - } } - }, [config.theme,screenWidth]); + + const themeColor = getComputedStyle(document.body).getPropertyValue("--theme-color").trim(); + const metaDescription = document.querySelector('meta[name="theme-color"]'); + metaDescription?.setAttribute('content', themeColor); + }, [config.theme]); } function exportMessages(messages: Message[], topic: string) { diff --git a/app/styles/globals.scss b/app/styles/globals.scss index e7d35226..96b6a501 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -7,6 +7,7 @@ --second: rgb(231, 248, 255); --hover-color: #f3f3f3; --bar-color: rgba(0, 0, 0, 0.1); + --theme-color: var(--gray); /* shadow */ --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1); @@ -28,6 +29,8 @@ --bar-color: rgba(255, 255, 255, 0.1); --border-in-light: 1px solid rgba(255, 255, 255, 0.192); + + --theme-color: var(--gray); } .light { @@ -84,7 +87,11 @@ body { align-items: center; user-select: none; font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons", - "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + + @media only screen and (max-width: 600px) { + background-color: var(--second); + } } ::-webkit-scrollbar {