👍 feat(theme): enable system theme for dark and light mode

weecraft · Jan 5, 2025 · 83f0f6d · 83f0f6d
1 parent 57fdce7
commit 83f0f6d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
 import { config, sharedMetadata } from '@shared/libs'
 import { fonts } from '@shared/libs'
 import '@shared/styles/globals.css'
-import { PosthogProvider } from '@shared/providers'
+import { PosthogProvider, ThemeProvider } from '@shared/providers'
 import { CenteredLayout, Footer, Header, Toaster } from '@shared/components'
 
 export const metadata: Metadata = {
@@ -53,14 +53,21 @@ export default function RootLayout({
     >
       <PosthogProvider>
         <body suppressHydrationWarning>
-          <CenteredLayout>
-            <Header />
-            <main className="min-h-screen pt-20 pb-36 tablet:pt-0 tablet:pb-56">
-              {children}
-            </main>
-            <Footer />
-          </CenteredLayout>
-          <Toaster />
+          <ThemeProvider
+            attribute={'class'}
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <CenteredLayout>
+              <Header />
+              <main className="min-h-screen pt-20 pb-36 tablet:pt-0 tablet:pb-56">
+                {children}
+              </main>
+              <Footer />
+            </CenteredLayout>
+            <Toaster />
+          </ThemeProvider>
         </body>
       </PosthogProvider>
     </html>

diff --git a/src/features/home/project-item.tsx b/src/features/home/project-item.tsx
@@ -20,7 +20,7 @@ export function ProjectItem({ project }: ProjectItemProps): React.ReactElement {
   const { href, label, title } = project
 
   return (
-    <li className="flex items-center group text-blue-600 transition-all duration-300 hover:-translate-y-1">
+    <li className="flex items-center group text-blue-600 dark:text-blue-400 transition-all duration-300 hover:-translate-y-1">
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>

diff --git a/src/shared/components/common/content.tsx b/src/shared/components/common/content.tsx
@@ -20,7 +20,7 @@ export function ArticleContent({
   children,
 }: ArticleContentProps): React.ReactElement {
   return (
-    <article className="prose prose-sm tablet:prose-base tablet:prose-p:text-base prose-headings:!leading-tight prose-h1:text-xl prose-h2:text-lg prose-h3:text-base tablet:prose-li:text-base max-w-none prose-headings:font-medium prose-strong:font-medium prose-neutral prose-code:font-mono prose-img:overflow-hidden prose-img:border prose-img:border-border prose-img:bg-ambient prose-img:rounded-xl prose-pre:bg-surface prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:font-medium overflow-hidden prose-p:text-foreground prose-li:text-foreground prose-a:!text-blue-600 dark:prose-a:!text-blue-400 prose-p:leading-7">
+    <article className="prose prose-sm tablet:prose-base tablet:prose-p:text-base prose-headings:!leading-tight prose-h1:text-xl prose-h2:text-lg prose-h3:text-base tablet:prose-li:text-base max-w-none prose-headings:font-medium prose-strong:font-medium prose-neutral prose-code:font-mono prose-img:overflow-hidden prose-img:border prose-img:border-border prose-img:bg-ambient prose-img:rounded-xl prose-pre:bg-surface prose-pre:text-foreground prose-pre:border prose-pre:border-border prose-pre:font-medium overflow-hidden prose-p:text-foreground prose-li:text-foreground prose-a:!text-blue-600 dark:prose-a:!text-blue-400 prose-p:leading-7 prose-a:!no-underline">
       {children}
     </article>
   )