yuancong-liu · yuancong-liu · May 8, 2024 · May 8, 2024 · May 8, 2024 · May 8, 2024
diff --git a/src/app/about-me/layout.tsx b/src/app/about-me/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import { NavBar } from '~/components/common/navBar';
+import { ThemeRadio } from '~/components/common/themeRadio';
 
 import styles from './layout.module.scss';
 
@@ -11,6 +12,7 @@ type Props = {
 const AboutMeLayout = ({ children }: Props) => (
   <div className={styles['page-wrapper']}>
     <NavBar />
+    <ThemeRadio />
     {children}
   </div>
 );

diff --git a/src/app/and/layout.tsx b/src/app/and/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import { NavBar } from '~/components/common/navBar';
+import { ThemeRadio } from '~/components/common/themeRadio';
 
 import styles from './layout.module.scss';
 
@@ -11,6 +12,7 @@ type Props = {
 const AboutMeLayout = ({ children }: Props) => (
   <div className={styles['page-wrapper']}>
     <NavBar />
+    <ThemeRadio />
     {children}
   </div>
 );

diff --git a/src/app/blog/[slug]/index.module.scss b/src/app/blog/[slug]/index.module.scss
@@ -9,7 +9,7 @@
 
     &::before {
       margin-right: 3px;
-      color: utils.$color-strawberry-foam;
+      color: var(--color-tmp-name-4);
       content: '#';
     }
 
@@ -60,14 +60,14 @@
     flex-shrink: 0;
     width: fit-content;
     padding-left: 30px;
-    border-left: 1px solid utils.$color-siesta-sands;
+    border-left: 1px solid var(--color-tmp-name-5);
 
     @include sp {
       padding-top: 4px;
       padding-right: 10px;
       padding-left: 0;
       border: 0;
-      border-top: 1px solid utils.$color-siesta-sands;
+      border-top: 1px solid var(--color-tmp-name-5);
     }
   }
 }

diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { Footer } from '~/components/common/footer';
 import { NavBar } from '~/components/common/navBar';
+import { ThemeRadio } from '~/components/common/themeRadio';
 
 import styles from './layout.module.scss';
 
@@ -12,6 +13,7 @@ type Props = {
 const BlogLayout = ({ children }: Props) => (
   <div className={styles['page-wrapper']}>
     <NavBar />
+    <ThemeRadio />
     {children}
     <Footer />
   </div>

diff --git a/src/app/blog/tags/[tag]/index.module.scss b/src/app/blog/tags/[tag]/index.module.scss
@@ -17,7 +17,7 @@
   //     font-size: 8rem;
   //     font-weight: 600;
   //     line-height: 1;
-  //     color: utils.$color-strawberry-foam;
+  //     color: var(--color-tmp-name-4);
   //   }
 
   //   &::before {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,32 +1,61 @@
-import { ReactNode } from 'react';
+'use client';
+
+import {
+  ReactNode,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { Analytics } from '@vercel/analytics/react';
-import { Metadata, Viewport } from 'next';
+import { Viewport } from 'next';
 
 import '~/styles/globals.scss';
+import { ColorSchemeContext } from '~/contexts/colorSchemeContext';
 
 type Props = {
   children: ReactNode;
 };
 
-export const metadata: Metadata = {
-  metadataBase: new URL(
-    process.env.NEXT_PUBLIC_SITE_URL || 'https://localhost:3000',
-  ),
-};
-
 export const viewport: Viewport = {
   themeColor: '#132043',
 };
 
-const RootLayout = ({ children }: Props) => (
-  <html lang="en">
-    <body>
-      {children}
-      <div className="common-background" />
-    </body>
-    <Analytics />
-  </html>
-);
+const RootLayout = ({ children }: Props) => {
+  const [scheme, setScheme] = useState<'light' | 'dark'>();
+  const [preferredScheme, setPreferredScheme] = useState<'light' | 'dark'>();
+
+  useLayoutEffect(() => {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setPreferredScheme('dark');
+      setScheme('dark');
+    } else {
+      setPreferredScheme('light');
+      setScheme('light');
+    }
+  }, []);
+
+  const setColorScheme = useCallback((nextScheme: 'light' | 'dark') => {
+    setScheme(nextScheme);
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({ colorScheme: scheme || 'light', setColorScheme, preferredScheme }),
+    [scheme, setColorScheme, preferredScheme],
+  );
+
+  return (
+    <html lang="en">
+      <body>
+        <ColorSchemeContext.Provider value={contextValue}>
+          {children}
+        </ColorSchemeContext.Provider>
+        <div className="common-background" />
+      </body>
+      <Analytics />
+    </html>
+  );
+};
 
 export default RootLayout;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,13 @@
 import { Metadata, NextPage } from 'next';
 
+import { ThemeRadio } from '~/components/common/themeRadio';
+
 import { HomeDynamic } from '../components/pages/home/homeDynamic';
 
 export const metadata: Metadata = {
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_SITE_URL || 'https://localhost:3000',
+  ),
   title: "YC's SPACE",
   description:
     "Welcome to YC's SPACE. This is a personal website of Paul YC LIU, a front-end engineer, who is also a fan of design, films and games.",
@@ -11,6 +16,11 @@ export const metadata: Metadata = {
   },
 };
 
-const HomePage: NextPage = () => <HomeDynamic />;
+const HomePage: NextPage = () => (
+  <>
+    <HomeDynamic />
+    <ThemeRadio />
+  </>
+);
 
 export default HomePage;
diff --git a/src/app/portfolio/index.module.scss b/src/app/portfolio/index.module.scss
@@ -25,8 +25,8 @@
   grid-column: span 4;
   background: linear-gradient(
     30deg,
-    utils.$color-strawberry-foam,
-    utils.$color-siesta-sands
+    var(--color-tmp-name-4),
+    var(--color-tmp-name-5)
   );
   box-shadow: 0 0 20px 0 utils.$color-strawberry-foam-10;
 
@@ -117,8 +117,8 @@
     font-family: utils.$font-serif;
     font-size: 1.6rem;
     font-weight: 800;
-    color: #fff;
-    text-shadow: 0 0 16px utils.$color-abyssal-night;
+    color: var(--color-text);
+    text-shadow: 0 0 16px var(--color-tmp-name-1);
     letter-spacing: 0.2rem;
     transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
@@ -138,10 +138,10 @@
   display: flex;
   flex-direction: column;
   grid-column: span 7;
-  justify-content: end;
-  color: utils.$color-abyssal-night;
+  justify-content: flex-end;
+  color: var(--color-tmp-name-1);
   text-align: right;
-  background-color: utils.$color-siesta-sands;
+  background-color: var(--color-tmp-name-5);
 
   @include sp {
     grid-column: span 6;
@@ -168,7 +168,7 @@
   @extend %glass-effect;
 
   font-size: 2rem;
-  color: utils.$color-abyssal-night;
+  color: var(--color-tmp-name-1);
 
   > .numbering {
     padding-inline-end: 16px;
@@ -182,7 +182,7 @@
 
   &.aas {
     grid-column: span 8;
-    background-color: utils.$color-strawberry-foam;
+    background-color: var(--color-tmp-name-4);
 
     @include sp {
       grid-column: span 4;
@@ -191,7 +191,7 @@
 
   &.shp {
     grid-column: span 4;
-    background-color: utils.$color-siesta-sands;
+    background-color: var(--color-tmp-name-5);
 
     @include sp {
       grid-column: span 2;
@@ -200,7 +200,7 @@
 
   &.ksk {
     grid-column: span 4;
-    background-color: utils.$color-siesta-sands;
+    background-color: var(--color-tmp-name-5);
 
     @include sp {
       grid-column: span 2;
@@ -209,7 +209,7 @@
 
   &.akb {
     grid-column: span 8;
-    background-color: utils.$color-strawberry-foam;
+    background-color: var(--color-tmp-name-4);
 
     @include sp {
       grid-column: span 4;

diff --git a/src/app/portfolio/layout.tsx b/src/app/portfolio/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
 import { NavBar } from '~/components/common/navBar';
+import { ThemeRadio } from '~/components/common/themeRadio';
 
 type Props = {
   children: ReactNode;
@@ -9,6 +10,7 @@ type Props = {
 const AboutMeLayout = ({ children }: Props) => (
   <div>
     <NavBar />
+    <ThemeRadio />
     {children}
   </div>
 );

diff --git a/src/components/common/footer/index.module.scss b/src/components/common/footer/index.module.scss
@@ -19,7 +19,7 @@
     font-family: utils.$font-serif;
     font-size: 1.4rem;
     font-weight: 600;
-    color: utils.$color-siesta-sands;
+    color: var(--color-tmp-name-5);
   }
 
   @include sp {

diff --git a/src/components/common/navBar/index.module.scss b/src/components/common/navBar/index.module.scss
@@ -13,7 +13,7 @@
   font-family: utils.$font-serif;
   font-size: 16px;
   font-weight: 600;
-  color: #fff;
+  color: var(--color-text);
   background: utils.$color-strawberry-foam-10;
   backdrop-filter: blur(10px);
   border: 1px solid #fff2;
@@ -82,8 +82,16 @@
     width: 100%;
     height: 200%;
     content: '';
-    background: radial-gradient(circle at 40%, #fff 0%, transparent 20%),
-      radial-gradient(circle at 60%, #ace 0%, transparent 40%);
+    background: radial-gradient(
+        circle at 40%,
+        var(--color-tmp-name-1) 0%,
+        transparent 30%
+      ),
+      radial-gradient(
+        circle at 60%,
+        var(--color-tmp-name-3) 0%,
+        transparent 30%
+      );
     filter: blur(10px);
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
@@ -105,7 +113,7 @@
   @extend %center-items-grid;
 
   .stroke {
-    stroke: #fff;
+    stroke: var(--color-tmp-name-6);
     stroke-width: 1px;
   }
 }
@@ -121,7 +129,7 @@
   }
 
   .nav-item:hover & {
-    text-shadow: 0 0 10px utils.$color-abyssal-night;
+    text-shadow: 0 0 10px var(--color-tmp-name-1);
   }
 }
 

diff --git a/src/components/common/navBar/index.tsx b/src/components/common/navBar/index.tsx
@@ -17,16 +17,7 @@ export const NavBar = () => {
    */
   const { scrollYProgress } = useScroll();
 
-  const pathLength = useSpring(useTransform(scrollYProgress, [0, 1], [1, 0]));
-  const fill = useTransform(
-    scrollYProgress,
-    [0, 0.3, 1],
-    [
-      'rgba(255, 255, 255, 0)',
-      'rgba(255, 255, 255, 0)',
-      'rgba(255, 255, 255, 1)',
-    ],
-  );
+  const pathLength = useSpring(useTransform(scrollYProgress, [0, 0.95, 1], [1, 0, 1]));
 
   const currentPath = usePathname();
   const isActive = (path: string) => currentPath.startsWith(path);
@@ -103,29 +94,28 @@ export const NavBar = () => {
 
         <li className={styles['c-mark-nav']}>
           <Link href="/" className={styles['icon-link']}>
-            <svg
+            <motion.svg
               width="32"
               height="30"
               viewBox="0 0 32 30"
               fill="none"
+              whileHover={{
+                rotate: 360,
+                scale: 0.8,
+                transition: { duration: 1 },
+              }}
               xmlns="http://www.w3.org/2000/svg"
             >
               <motion.path
                 className={classNames(styles['text-link'], styles.stroke)}
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M9.58568 17.5166L-0.000732422 14.4482L2.27473 7.43875L11.8914 10.5168V0.422546H19.3081V10.4873L28.9582 7.33985L31.2727 14.3367L21.6002 17.4915L27.6016 25.6592L21.6101 30L15.6021 21.8235L9.64406 29.9451L3.64918 25.6089L9.58568 17.5166Z"
-                fill={fill}
-                whileHover={{
-                  rotate: 360,
-                  scale: 0.8,
-                  transition: { duration: 1 },
-                }}
                 style={{
                   pathLength,
                 }}
               />
-            </svg>
+            </motion.svg>
           </Link>
         </li>