7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-05 15:06:53 +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

9
app/hooks/useRows.ts
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import { autoGrowTextArea } from "../utils";
import { useAppConfig } from "../store";
@@ -10,13 +10,14 @@ export default function useRows({
}) {
const [inputRows, setInputRows] = useState(2);
const config = useAppConfig();
const { isMobileScreen } = config;
const measure = useDebouncedCallback(
() => {
const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
const inputRows = Math.min(
20,
Math.max(2 + (config.isMobileScreen ? -1 : 1), rows),
Math.max(2 + (isMobileScreen ? -1 : 1), rows),
);
setInputRows(inputRows);
},
@@ -27,6 +28,10 @@ export default function useRows({
},
);
useEffect(() => {
measure();
}, [isMobileScreen]);
return {
inputRows,
measure,

24
app/hooks/useSwitchTheme.ts
View File

@@ -1,34 +1,14 @@
import { useEffect } from "react";
import { useAppConfig } from "@/app/store/config";
import { getCSSVar } from "@/app/utils";
import { Theme, useAppConfig } from "@/app/store/config";
export function useSwitchTheme() {
const config = useAppConfig();
useEffect(() => {
document.body.classList.remove("light");
document.body.classList.remove("dark");
if (config.theme === "dark") {
if (config.theme === 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]);
}