feat(site/blog): add dark theme

qhanw · Oct 8, 2024 · 722a82b · 722a82b
1 parent 9694630
commit 722a82b
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 28 deletions.
diff --git a/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx b/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx
@@ -14,27 +14,29 @@ import CssGradientBtn from "@/md/posts-mdx/css-gradient/GradientBtn";
 
 import "remark-gh-alerts/styles/github-base.css";
 import "remark-gh-alerts/styles/github-colors-light.css";
+import "remark-gh-alerts/styles/github-colors-dark-class.css";
 
 const options: MDXRemoteProps["options"] = {
   mdxOptions: {
     remarkPlugins: [
       [remarkToc, { maxDepth: 4 }],
       remarkGfm,
-      // @ts-ignore
       remarkGithubAlerts,
     ],
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
-      // @ts-ignore
-      [rehypeShiki, { theme: "vitesse-light" }],
+      [
+        rehypeShiki,
+        { themes: { light: "vitesse-light", dark: "vitesse-dark" } },
+      ],
     ],
   },
 };
 
 export default function MDXContent(props: Pick<MDXRemoteProps, "source">) {
   return (
-    <article className="fade-in-up-content prose prose-gray">
+    <article className="fade-in-up-content prose prose-slate dark:prose-invert">
       <MDXRemote
         source={props.source}
         components={{ Button, CssGradientBtn }}

diff --git a/site/blog/app/(web)/components/Copyright.tsx b/site/blog/app/(web)/components/Copyright.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 
 export default () => (
-  <div className="text-sm opacity-50 ml-1">
+  <div className="text-sm opacity-50 ml-1 dark:text-slate-400">
     ©2022-{new Date().getFullYear()} Qhan W. All Rights Reserved.
     <Link
       className="text-brand ml-2"

diff --git a/site/blog/app/(web)/components/Footer.tsx b/site/blog/app/(web)/components/Footer.tsx
@@ -9,7 +9,7 @@ type FooterProps = { className?: string };
 export default ({ className }: FooterProps) => (
   <footer
     className={clsx(
-      "flex items-center pt-12 pb-12 mt-24 border-t-2 border-gray-100",
+      "flex items-center pt-12 pb-12 mt-24 border-t-2 border-slate-100 dark:border-slate-700",
       className
     )}
   >

diff --git a/site/blog/app/(web)/components/Header.tsx b/site/blog/app/(web)/components/Header.tsx
@@ -1,6 +1,8 @@
 import Link from "next/link";
 import clsx from "clsx";
+
 import ScrollTop from "./ScrollTop";
+import Theme from "./Theme";
 
 const nav = [
   {
@@ -63,13 +65,16 @@ const nav = [
 export default () => (
   <>
     <ScrollTop />
-    <header className="px-4 sm:px-6 sticky top-0 z-40 w-full backdrop-blur transition-colors duration-500 bg-white/95 supports-backdrop-blur:bg-white/60 ">
+    <header
+      className="px-4 sm:px-6 sticky top-0 z-40 w-full backdrop-blur transition-colors duration-500 bg-white/95 supports-backdrop-blur:bg-white/60
+    dark:bg-slate-800"
+    >
       <div className="flex justify-between items-center py-4 md:justify-start md:space-x-10">
         <div className="flex justify-start md:w-0 md:flex-1">
           <Link href="/" className="inline-flex items-center text-brand">
             <span className="sr-only">Workflow</span>
             <span className="i-logos-sakura w-6 h-6 logo-rotate" />
-            <span className="text-lg ml-2 font-medium text-gray-900">
+            <span className="text-lg ml-2 font-medium text-slate-900 dark:text-slate-300">
               Qhan W
             </span>
           </Link>
@@ -96,6 +101,7 @@ export default () => (
             </Link>
           ))}
         </nav>
+        <Theme />
       </div>
     </header>
     <div className="header-line-shadow" />

diff --git a/site/blog/app/(web)/components/Theme.tsx b/site/blog/app/(web)/components/Theme.tsx
@@ -0,0 +1,20 @@
+"use client";
+import clsx from "clsx";
+import { useTheme } from "next-themes";
+
+export default function Theme() {
+  const { theme, setTheme } = useTheme();
+
+  const isDark = theme === "dark";
+
+  return (
+    <a
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="text-slate-800 dark:text-white cursor-pointer"
+    >
+      <i
+        className={clsx({ "i-ri:sun-fill": !isDark, "i-ri:moon-fill": isDark })}
+      />
+    </a>
+  );
+}
diff --git a/site/blog/app/(web)/posts/[slug]/MDXContent.tsx b/site/blog/app/(web)/posts/[slug]/MDXContent.tsx
@@ -14,6 +14,7 @@ import CssGradientBtn from "@/md/posts-mdx/css-gradient/GradientBtn";
 
 import "remark-gh-alerts/styles/github-base.css";
 import "remark-gh-alerts/styles/github-colors-light.css";
+import "remark-gh-alerts/styles/github-colors-dark-class.css";
 
 const options: MDXRemoteProps["options"] = {
   mdxOptions: {
@@ -25,14 +26,17 @@ const options: MDXRemoteProps["options"] = {
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
-      [rehypeShiki, { theme: "vitesse-light" }],
+      [
+        rehypeShiki,
+        { themes: { light: "vitesse-light", dark: "vitesse-dark" } },
+      ],
     ],
   },
 };
 
 export default function MDXContent(props: Pick<MDXRemoteProps, "source">) {
   return (
-    <article className="fade-in-up-content prose prose-gray">
+    <article className="fade-in-up-content prose prose-slate dark:prose-invert">
       <MDXRemote
         source={props.source}
         components={{ Button, CssGradientBtn }}

diff --git a/site/blog/app/(web)/posts/[slug]/styles.scss b/site/blog/app/(web)/posts/[slug]/styles.scss
@@ -40,11 +40,19 @@
   }
 }
 
-.prose pre.shiki.vitesse-light {
-  font-family: DM Mono, Input Mono, Fira Code, monospace;
+.prose pre.shiki {
+  font-family:
+    DM Mono,
+    Input Mono,
+    Fira Code,
+    monospace;
   font-size: 0.92em;
   line-height: 1.4;
   // margin: 0.5em 0;
 
   background-color: #f9f9f9 !important;
 }
+
+.dark .prose pre.shiki {
+  background-color: rgb(15 23 42) !important;
+}
diff --git a/site/blog/app/layout.tsx b/site/blog/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
+import { ThemeProvider } from "next-themes";
 import NextTopLoader from "nextjs-toploader";
 
 import "./styles/globals.scss";
@@ -18,16 +19,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <NextTopLoader
-          color="rgba(156,163,175,0.45)"
-          height={2}
-          showSpinner={false}
-          shadow={false}
-        />
-        {children}
-        <Analytics />
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} dark:bg-slate-800`}>
+        <ThemeProvider attribute="class" enableColorScheme={false}>
+          <NextTopLoader
+            color="rgba(156,163,175,0.45)"
+            height={2}
+            showSpinner={false}
+            shadow={false}
+          />
+          {children}
+          <Analytics />
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/site/blog/app/styles/globals.scss b/site/blog/app/styles/globals.scss
@@ -777,13 +777,28 @@
 
 .header-line-shadow {
   @apply relative z-10;
+
+  &::before {
+    @apply fixed content-[''] w-full;
+    box-shadow: 0 0 4px 1px #ddd;
+  }
+
+  &::after {
+    // @apply absolute content-[''] w-full h-1 bg-gradient-to-b from-white to-white;
+
+    @apply absolute content-[''] w-full h-1 bg-white;
+  }
 }
-.header-line-shadow::before {
-  @apply fixed content-[''] w-full;
-  box-shadow: 0 0 4px 1px #ddd;
-}
-.header-line-shadow::after {
-  @apply absolute content-[''] w-full h-1 bg-gradient-to-b from-white to-white;
+
+.dark {
+  .header-line-shadow {
+    &::before {
+      box-shadow: 0 0 4px 1px rgb(0 0 0 / 35%);
+    }
+    &::after {
+      @apply bg-slate-800;
+    }
+  }
 }
 
 @keyframes fadeInUp {

diff --git a/site/blog/package.json b/site/blog/package.json
@@ -17,6 +17,7 @@
     "gray-matter": "^4.0.3",
     "next": "14.2.13",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.3.0",
     "nextjs-toploader": "^3.6.15",
     "photoswipe": "^5.4.4",
     "plyr": "^3.7.8",

diff --git a/site/blog/pnpm-lock.yaml b/site/blog/pnpm-lock.yaml