fix(style): use css for icon color

GZCTF · Oct 26, 2024 · 099fdf2 · 099fdf2
1 parent d6c4d1a
commit 099fdf2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/theme/components/LogoHeader.tsx b/theme/components/LogoHeader.tsx
@@ -1,16 +1,13 @@
 import MainIcon from "@Components/icon/MainIcon";
-import { ThemeContext, usePageData } from "rspress/runtime";
-import { FC, useContext } from "react";
+import { usePageData } from "rspress/runtime";
+import { FC } from "react";
 import { Link } from "rspress/theme";
+import classes from "@Styles/Icon.module.scss";
 
 export const LogoHeader: FC = () => {
-  const { theme } = useContext(ThemeContext);
   const pageData = usePageData();
   const defaultLang = pageData.siteData.lang ?? "";
   const lang = pageData.page.lang;
-  const lightMode = theme === "light";
-  const color = lightMode ? "#414141" : "#fff";
-  const highlightColor = lightMode ? "#02BFA5" : "#0AD7AF";
 
   return (
     <div style={{ display: "flex", alignItems: "center", gap: "2px" }}>
@@ -19,8 +16,11 @@ export const LogoHeader: FC = () => {
         className="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"
       >
         <MainIcon width={40} height={40} />
-        <span style={{ fontWeight: 800, fontSize: "30px", color }}>
-          GZ<span style={{ color: highlightColor }}>::</span>CTF
+        <span
+          style={{ fontWeight: 800, fontSize: "30px" }}
+          className={classes.icon}
+        >
+          GZ<span className={classes.highlight}>::</span>CTF
         </span>
       </Link>
     </div>

diff --git a/theme/components/icon/MainIcon.tsx b/theme/components/icon/MainIcon.tsx
@@ -1,15 +1,12 @@
-import { ThemeContext } from "rspress/runtime";
-import { SVGProps, FC, useContext } from "react";
+import classes from "@Styles/Icon.module.scss";
+import { SVGProps, FC } from "react";
 
 interface MainIconProps extends SVGProps<SVGSVGElement> {
   ignoreTheme?: boolean;
 }
 
 const MainIcon: FC<MainIconProps> = (props: MainIconProps) => {
   const { ignoreTheme, ...svgProps } = props;
-  const { theme } = useContext(ThemeContext);
-
-  const color = theme === "light" ? "#414141" : "#fff";
 
   return (
     <svg width="480" height="480" viewBox="0 0 4800 4800" {...svgProps}>
@@ -22,7 +19,7 @@ const MainIcon: FC<MainIconProps> = (props: MainIconProps) => {
       ) : (
         <path
           fillRule="evenodd"
-          fill={color}
+          className={classes.icon}
           d="M2994.48,4244.61L505.28,2807.47V1992.53l256.572-148.14L1287,2285l258-307,160.39,135.56L1209.27,2400l1786.1,1031.21V2427.79L3517,1806,2420.98,886.5l573.5-331.11,705.76,407.474V3837.14Z"
         />
       )}

diff --git a/theme/styles/Icon.module.scss b/theme/styles/Icon.module.scss
@@ -0,0 +1,19 @@
+:global(html.dark) {
+  --icon-color: #fff;
+  --icon-highlight: #0ad7af;
+}
+
+:global(html) {
+  --icon-color: #414141;
+  --icon-highlight: #02bfa5;
+}
+
+.icon {
+  color: var(--icon-color);
+  fill: var(--icon-color);
+}
+
+.highlight {
+  color: var(--icon-highlight);
+  fill: var(--icon-highlight);
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,7 +14,8 @@
     "allowImportingTsExtensions": true,
     "paths": {
       "i18n": ["./i18n.json"],
-      "@Components/*": ["./theme/components/*"]
+      "@Components/*": ["./theme/components/*"],
+      "@Styles/*": ["./theme/styles/*"],
     }
   },
   "include": ["docs", "theme", "rspress.config.ts", "docs/en/guide/break-changes.mdx", "_old/en/deployment.mdx", "docs/en/guide/thanks.mdx"],