update - implementation of dark mode

dc7devs · dc7devs · commit 10e29c7cf7dc · 2022-12-09T23:59:18.000-03:00
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
     "next": "13.0.6",
+    "next-themes": "^0.2.1",
     "phosphor-react": "^1.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/src/components/background.tsx b/src/components/background.tsx
@@ -6,7 +6,7 @@ type PropsChildren = {
 
 export default function Bg({children}: PropsChildren) {
     return(
-        <div className="h-screen bg-gray/[.7] bg-paper-pattern bg-paper-pattern-size bg-paper-pattern-position">
+        <div className="h-screen bg-gray/[.7] dark:bg-black bg-paper-pattern bg-paper-pattern-size bg-paper-pattern-position dark:bg-paper-pattern-dark">
             {children}
         </div>
     )
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -22,7 +22,7 @@ export default function Layout({ children }: PropsChildren) {
     return (
         <div className="h-screen w-full font-pontserrat">
             <Head>
-                <title>{router.pathname.slice(1).toLowerCase()} - Diego Silva</title>
+                <title>{router.pathname != "/" ? `${router.pathname.slice(1).toLowerCase()} - ` : ""}Diego Silva</title>
                 <meta name="description" content="Generated by create next app" />
                 <link rel="icon" href="/favicon.png" />
             </Head>
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
@@ -1,10 +1,17 @@
 import { Link } from "phosphor-react";
+import { useTheme } from "next-themes";
 
 export default function Modal() {
+    const {theme, setTheme} = useTheme()
+
     return (
         <div className="fixed top-0 left-0 w-screen h-screen bg-white/10 backdrop-blur-sm z-40 transition-opacity ease-in-out">
             <div>
-                <h1>Ola mundo</h1>
+                <button
+                    onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                >
+                    Mudar Tema
+                </button>
             </div>
         </div>
     )
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,11 +2,12 @@ import '../../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 import Bg from '../components/background'
+import { ThemeProvider } from 'next-themes'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <Bg>
-      <Component {...pageProps} />
-    </Bg>
+    <ThemeProvider attribute="class">
+        <Component {...pageProps} />
+    </ThemeProvider>
   )
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,10 +1,8 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
     return () {
-        <Html lang="pt-BR">
-            <Head>
-            </Head>
+        <Html className="" lang="pt-BR">
             <body>
                 <Main />
                 <NextScript />
diff --git a/styles/globals.css b/styles/globals.css
@@ -12,5 +12,14 @@
     ::-webkit-scrollbar {
         width: 0;
     }
+
+    body {
+        @apply bg-gray/[.7]
+        dark:bg-black 
+        bg-paper-pattern 
+        bg-paper-pattern-size 
+        bg-paper-pattern-position 
+        dark:bg-paper-pattern-dark
+    }
 }
   
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
+  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx}",
     "./src/components/**/*.{js,ts,jsx,tsx}",
@@ -16,7 +18,8 @@ module.exports = {
         gray: '#AEAEAE'
       },
       backgroundImage: {
-        'paper-pattern': "radial-gradient(50% 50% at 50% 50%, rgba(174, 174, 174, 0) 0%, rgba(174, 174, 174, 0.94) 100%), linear-gradient(rgba(23, 23, 23, 0.1) 1.6px, transparent 1.6px), linear-gradient(90deg, rgba(23, 23, 23, 0.1) 1.6px, transparent 1.6px), linear-gradient(rgba(23, 23, 23, 0.1) 0.8px, transparent 0.8px), linear-gradient(90deg, rgba(23, 23, 23, 0.1) 0.8px, rgba(173, 173, 173, 0) 0.8px)",
+        'paper-pattern': "radial-gradient(50% 50% at 50% 50%, rgba(174, 174, 174, 0) 0%, rgba(174, 174, 174, 0.94) 100%), linear-gradient(rgba(22, 22, 22, 0.1) 1.6px, transparent 1.6px), linear-gradient(90deg, rgba(22, 22, 22, 0.1) 1.6px, transparent 1.6px), linear-gradient(rgba(22, 22, 22, 0.1) 0.8px, transparent 0.8px), linear-gradient(90deg, rgba(22, 22, 22, 0.1) 0.8px, rgba(173, 173, 173, 0) 0.8px)",
+        'paper-pattern-dark': "radial-gradient(50% 50% at 50% 50%, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.94) 100%), linear-gradient(rgba(174, 174, 174, 0.1) 1.6px, transparent 1.6px), linear-gradient(90deg, rgba(174, 174, 174, 0.1) 1.6px, transparent 1.6px), linear-gradient(rgba(174, 174, 174, 0.1) 0.8px, transparent 0.8px), linear-gradient(90deg, rgba(174, 174, 174, 0.1) 0.8px, rgba(22, 22, 22, 0) 0.8px)",
         'hero-img': "url('/images/hero_1.png')"
       },
       fontFamily: {
@@ -30,7 +33,7 @@ module.exports = {
 
     backgroundPosition: {
       'paper-pattern-position': 'center, -1.6px -1.6px, -1.6px -1.6px, -0.8px -0.8px, -0.8px -0.8px'
-    }
+    },
   },
   plugins: [],
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ type PropsChildren = {`
`6`	`6`
`7`	`7`	`export default function Bg({children}: PropsChildren) {`
`8`	`8`	`return(`
`9`		`- <div className="h-screen bg-gray/[.7] bg-paper-pattern bg-paper-pattern-size bg-paper-pattern-position">`
	`9`	`+ <div className="h-screen bg-gray/[.7] dark:bg-black bg-paper-pattern bg-paper-pattern-size bg-paper-pattern-position dark:bg-paper-pattern-dark">`
`10`	`10`	`{children}`
`11`	`11`	`</div>`
`12`	`12`	`)`
Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,12 @@ import '../../styles/globals.css'`
`2`	`2`	`import type { AppProps } from 'next/app'`
`3`	`3`
`4`	`4`	`import Bg from '../components/background'`
	`5`	`+import { ThemeProvider } from 'next-themes'`
`5`	`6`
`6`	`7`	`export default function App({ Component, pageProps }: AppProps) {`
`7`	`8`	`return (`
`8`		`- <Bg>`
`9`		`- <Component {...pageProps} />`
`10`		`- </Bg>`
	`9`	`+ <ThemeProvider attribute="class">`
	`10`	`+ <Component {...pageProps} />`
	`11`	`+ </ThemeProvider>`
`11`	`12`	`)`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,14 @@`
`12`	`12`	`::-webkit-scrollbar {`
`13`	`13`	`width: 0;`
`14`	`14`	`}`
	`15`	`+`
	`16`	`+ body {`
	`17`	`+ @apply bg-gray/[.7]`
	`18`	`+ dark:bg-black`
	`19`	`+ bg-paper-pattern`
	`20`	`+ bg-paper-pattern-size`
	`21`	`+ bg-paper-pattern-position`
	`22`	`+ dark:bg-paper-pattern-dark`
	`23`	`+ }`
`15`	`24`	`}`
`16`	`25`