useTheme separated from useSearch

lucasm · Aug 16, 2024 · d7afbce · d7afbce
1 parent 0b12b09
commit d7afbce
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 69 deletions.
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
@@ -16,6 +16,14 @@
   --color-red: #ff9494;
   --color-purple: #d6b6ff;
   --color-blue: #5cbeff;
+  --background-linear-gradient: linear-gradient(
+    90deg,
+    #d0abff 0%,
+    #82cdff 20%,
+    #6ef4d0 30%,
+    #fff78d 55%,
+    #ff7c7c 85%
+  );
   --color-white-translucent: rgba(255, 255, 255, 0.2);
   --color-white-translucent-2: rgba(255, 255, 255, 0.25);
   --color-black-translucent: rgba(0, 0, 0, 0.05);
@@ -44,6 +52,17 @@
   --transition-hover: hover 0.2s, background 0.2s, opacity 0.2s, box-shadow 0.2s;
   --transition: all 200ms;
 }
+
+html[data-theme='dark'] {
+  --background-linear-gradient: var(--color-dark);
+  --color-theme-translucent: var(--color-dark);
+  --color-bg-white: var(--color-dark-2);
+  --color-bg-grey: var(--color-dark);
+  --color-text-black: #fff;
+  --color-black-translucent: rgba(255, 255, 255, 0.2);
+  --color-black-translucent-50: rgba(255, 255, 255, 0.5);
+}
+
 *,
 *:before,
 *:after {
@@ -53,25 +72,15 @@
 }
 html {
   scroll-behavior: smooth;
-  font-family: inherit;
   outline-color: var(--color-black);
-
+  background: var(--background-linear-gradient);
   transition: var(--transition-hover);
-  background: var(--color-bg-grey);
-  background: linear-gradient(
-    90deg,
-    #d0abff 0%,
-    #82cdff 20%,
-    #6ef4d0 30%,
-    #fff78d 55%,
-    #ff7c7c 85%
-  );
-
   background-size: 110% 200%;
   animation: gradientAnimation 10s ease infinite;
 }
 body {
   background: var(--color-theme-translucent);
+  transition: var(--transition-hover);
 }
 
 @keyframes gradientAnimation {

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next'
 import localFont from 'next/font/local'
 import { NextIntlClientProvider } from 'next-intl'
 import { getMessages } from 'next-intl/server'
+import { ThemeProvider } from 'next-themes'
 import Telemetry from '@/components/Telemetry'
 
 const fontFamily = localFont({
@@ -53,7 +54,6 @@ export const metadata: Metadata = {
 
   metadataBase: new URL('https://findto.app'),
   alternates: {
-    canonical: '/',
     languages: {
       en: '/en',
       'pt-BR': '/pt-BR',
@@ -81,10 +81,18 @@ export default async function Layout({
   const messages = await getMessages()
 
   return (
-    <html lang={locale} className={fontFamily.className}>
+    <html
+      lang={locale}
+      className={fontFamily.className}
+      suppressHydrationWarning>
       <body>
         <NextIntlClientProvider messages={messages}>
-          {children}
+          <ThemeProvider
+            attribute="data-theme"
+            defaultTheme="light"
+            enableSystem={true}>
+            {children}
+          </ThemeProvider>
         </NextIntlClientProvider>
       </body>
 

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -4,6 +4,7 @@ import Style from './Header.module.css'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
+import { useTranslations } from 'next-intl'
 import { useSearch } from '@/contexts/SearchContext'
 import Modal from '@/components/Modal'
 import SvgLogo from '@/components/SvgLogo'
@@ -35,18 +36,17 @@ import {
 } from '@/components/SvgIcons'
 import { normalizeId } from '@/utils/formats'
 import { ISearchCategory } from '@/interfaces/search'
-import { useTranslations } from 'next-intl'
 import LangSwitcher from '../LangSwitch'
+import { useTheme } from 'next-themes'
 
 export default function AppHeader() {
   const t = useTranslations('t')
+  const { theme, setTheme } = useTheme()
   const router = useRouter()
   const searchParams = useSearchParams()
   const view = searchParams?.get('view')
   const {
     data,
-    theme,
-    setTheme,
     category,
     setCategory,
     refSearchTabs,

diff --git a/contexts/SearchContext.tsx b/contexts/SearchContext.tsx
@@ -13,7 +13,6 @@ export function SearchContextProvider({ children }: { children: any }) {
   // load search sources file by locale
   const localeSearchSources = require('../locales/' + locale + '.json')
   const [data, setData] = useState<ISearchCategory[] | null>(null)
-  const [theme, setTheme] = useState<string>('light')
   const [category, setCategory] = useState<string>('Web')
   const [search, setSearch] = useState<string>('google')
   const [searchUrl, setSearchUrl] = useState<string>('')
@@ -94,51 +93,11 @@ export function SearchContextProvider({ children }: { children: any }) {
     }
   }, [sizeWindow])
 
-  // theme color
-  useEffect(() => {
-    if (theme) {
-      const root = document.documentElement
-
-      root.style.setProperty(
-        '--color-bg-white',
-        theme === 'dark' ? 'var(--color-dark-2)' : 'var(--color-white)'
-      )
-      root.style.setProperty(
-        '--color-bg-grey',
-        theme === 'dark' ? 'var(--color-dark)' : 'var(--color-grey)'
-      )
-      root.style.setProperty(
-        '--color-text-black',
-        theme === 'dark' ? 'var(--color-white)' : 'var(--color-black)'
-      )
-      root.style.setProperty(
-        '--color-theme-translucent',
-        theme === 'dark' ? 'var(--color-dark)' : 'rgb(230 230 230 / 33%)'
-      )
-      root.style.setProperty(
-        '--color-black-translucent',
-        theme === 'dark' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.05)'
-      )
-      root.style.setProperty(
-        '--color-black-translucent-50',
-        theme === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'
-      )
-    }
-  }, [theme])
-
   // sync with LocalStorage
   useEffect(() => {
-    const prefersDarkMode = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    ).matches
-    const storedTheme = window.localStorage.getItem('theme')
     const storedCategory = window.localStorage.getItem('category')
     const storedSearch = window.localStorage.getItem('search')
 
-    storedTheme
-      ? setTheme(storedTheme)
-      : setTheme(prefersDarkMode ? 'dark' : 'light')
-
     storedCategory
       ? setCategory(storedCategory)
       : window.localStorage.setItem('category', category)
@@ -157,8 +116,6 @@ export function SearchContextProvider({ children }: { children: any }) {
         inputValue,
         setInputValue,
         data,
-        theme,
-        setTheme,
         search,
         setSearch,
         searchUrl,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "next": "^14.2.5",
     "next-intl": "^3.17.2",
     "next-pwa": "^5.6.0",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-speech-recognition": "^3.10.0",
@@ -29,6 +30,6 @@
     "eslint": "8.23.0",
     "eslint-config-next": "^14.2.5",
     "prettier": "2.7.1",
-    "typescript": "^4.6.4"
+    "typescript": "^5.5.4"
   }
 }