perf: adapting style tightBorder

This commit is contained in:
pacmandoh 2023-12-27 23:10:32 +08:00 committed by Hk-Gosuto
parent 5576481bb4
commit 4ea2b66e1a
2 changed files with 12 additions and 15 deletions

View File

@ -9,7 +9,7 @@ import styles from "./home.module.scss";
import BotIcon from "../icons/bot.svg"; import BotIcon from "../icons/bot.svg";
import LoadingIcon from "../icons/three-dots.svg"; import LoadingIcon from "../icons/three-dots.svg";
import { getCSSVar, useMobileScreen } from "../utils"; import { useMobileScreen } from "../utils";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { ModelProvider, Path, SlotID } from "../constant"; import { ModelProvider, Path, SlotID } from "../constant";
@ -127,22 +127,19 @@ function Screen() {
'meta[name="theme-color"][media*="light"]', 'meta[name="theme-color"][media*="light"]',
); );
if (isHome) { if (shouldTightBorder || isMobileScreen) {
if (config.theme === "auto") { if (isHome) {
const themeColor = getCSSVar("--theme-color"); metaDescriptionDark?.setAttribute("content", "#1b262a");
metaDescriptionDark?.setAttribute("content", themeColor); metaDescriptionLight?.setAttribute("content", "#e7f8ff");
metaDescriptionLight?.setAttribute("content", themeColor);
} else { } else {
const themeColor = getCSSVar("--theme-color"); metaDescriptionDark?.setAttribute("content", "#1e1e1e");
metaDescriptionDark?.setAttribute("content", themeColor); metaDescriptionLight?.setAttribute("content", "white");
metaDescriptionLight?.setAttribute("content", themeColor);
} }
} else { } else {
const themeColor = getCSSVar("--white"); metaDescriptionDark?.setAttribute("content", "#151515");
metaDescriptionDark?.setAttribute("content", themeColor); metaDescriptionLight?.setAttribute("content", "#fafafa");
metaDescriptionLight?.setAttribute("content", themeColor);
} }
}, [config.theme, isHome]); }, [config.theme, isHome, shouldTightBorder, isMobileScreen]);
return ( return (
<div <div

View File

@ -12,7 +12,7 @@
--second: rgb(231, 248, 255); --second: rgb(231, 248, 255);
--hover-color: #f3f3f3; --hover-color: #f3f3f3;
--bar-color: rgba(0, 0, 0, 0.1); --bar-color: rgba(0, 0, 0, 0.1);
--theme-color: #e7f8ff; // --theme-color: #e7f8ff;
/* shadow */ /* shadow */
--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1); --shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
@ -34,7 +34,7 @@
--hover-color: #323232; --hover-color: #323232;
--bar-color: rgba(255, 255, 255, 0.1); --bar-color: rgba(255, 255, 255, 0.1);
--border-in-light: 1px solid rgba(255, 255, 255, 0.192); --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
--theme-color: #1b262a; // --theme-color: #1b262a;
div:not(.no-dark) > svg { div:not(.no-dark) > svg {
filter: invert(0.5); filter: invert(0.5);