Merge branch 'main' into dependabot/npm_and_yarn/postcss-8.4.31

src/app/page.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import Message from '@/components/message'
+import Message from '@/components/Message'
 import ThemeToggle from '@/components/ThemeToggle'
 
 const now = Date.now()
@@ -27,13 +27,13 @@ export default function Home() {
   }
 
   return (
-    <main className="flex flex-col gap-3 p-3">
+    <div className="flex flex-col gap-3 p-3">
       {MOCK_MESSAGES.map(({ sentAt, content }, i) => (
         <Message key={i} sentAt={sentAt}>
           {content}
         </Message>
       ))}
       <ThemeToggle />
-    </main>
+    </div>
   )
 }

src/components/message.jsx

@@ -1,4 +1,4 @@
-import { timeFormatter } from '@/utils/getFormattedDate'
+import { timeFormatter } from '@/utils'
 import Image from 'next/image'
 import Link from 'next/link'
 

src/store/theme-context.jsx

@@ -8,23 +8,29 @@ export const ThemeContext = createContext({
 })
 
 export default function ThemeProvider({ children }) {
-  const [currentTheme, setCurrentTheme] = useState('light')
+  const [currentTheme, setCurrentTheme] = useState('dark')
 
   const checkTheme = useCallback(() => {
-    const isDarkPreferred = window.matchMedia(
-      '(prefers-color-scheme: dark)'
+    const isLightPreferred = window.matchMedia(
+      '(prefers-color-scheme: light)'
     ).matches
-    const isDarkStored = localStorage.theme === 'dark'
-
-    if (isDarkStored || (!localStorage.theme && isDarkPreferred)) {
-      localStorage.setItem('theme', 'dark')
-      document.documentElement.classList.add('dark')
-      setCurrentTheme('dark')
+    const isThemeStored = localStorage.theme
+    const isLightStored = localStorage.theme === 'light'
+
+    if (isLightStored || (!isThemeStored && isLightPreferred)) {
+      if (!isThemeStored) {
+        localStorage.setItem('theme', 'light')
+      }
+      document.documentElement.classList.remove('dark')
+      setCurrentTheme('light')
       return
     }
 
-    document.documentElement.classList.remove('dark')
-    setCurrentTheme('light')
+    if (!isThemeStored) {
+      localStorage.setItem('theme', 'dark')
+    }
+    document.documentElement.classList.add('dark')
+    setCurrentTheme('dark')
   }, [])
 
   const toggleThemeHandler = useCallback(() => {

src/utils/index.js

@@ -0,0 +1 @@
+export * from './time'