feat: Toggle theme

NyctibiusVII · May 6, 2023 · 061aaae · 061aaae · vercel · May 6, 2023
1 parent 58d3485
commit 061aaae
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "eslint-config-next": "13.3.1",
     "next": "13.3.1",
     "next-sitemap": "^4.0.9",
+    "next-themes": "^0.2.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/src/components/details/index.tsx b/src/components/details/index.tsx
@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
 
-interface DetailsProps {
-    children: React.ReactNode
-    summary?: string
-}
+import { DetailsProps } from '@/interfaces/types'
 
 export const Details = ({ summary = 'Title', children }: DetailsProps) => {
     const [detailsOpen, setDetailsOpen] = useState(false)
@@ -24,10 +21,10 @@ export const Details = ({ summary = 'Title', children }: DetailsProps) => {
 
     return (
         <details data-details-id={detailsId} open={detailsOpen}>
-            <summary className={`bg-gray-800 ${detailsOpen ? 'rounded-t-lg' : 'rounded-lg'} px-4 py-1 cursor-pointer`}>
+            <summary className={`${detailsOpen ? 'rounded-t-lg' : 'rounded-lg'} px-4 py-1 cursor-pointer`}>
                 {summary}
             </summary>
-            <div className='bg-gray-700 rounded-b-lg px-4 py-1'>
+            <div className='rounded-b-lg px-4 py-1'>
                 {children}
             </div>
         </details>

diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -6,7 +6,7 @@ import { InputProps } from '@/interfaces/types'
 export const Input = ({ withForm=true, ...props }: InputProps) => withForm ? <UnFormInput {...props}/> : <InputComponent {...props}/>
 
 const InputComponent = ({ name, label, labelPosition='before', container=false, className, ...props }: InputProps) => {
-    const Input = <input className={`inputNumberValues border border-dashed rounded-lg pl-1 ${className}`} {...props}/>
+    const Input = <input className={`border border-dashed border-violet-500 rounded-lg pl-1 ${className}`} {...props}/>
     const Label = <label htmlFor={name} className='max-w-[13rem]'>{label}</label>
 
     return <>{ container ?

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-
 import { HiMenu, HiX } from 'react-icons/hi'
+import { MdOutlineLightMode, MdOutlineDarkMode } from 'react-icons/md'
+import { useTheme } from 'next-themes'
 
 import { useSchoolReportConfig } from '@/hooks/useSchoolReportConfig'
 import { useSidebar } from '@/hooks/useSidebar'
@@ -9,8 +9,12 @@ import { Input } from '@/components/input'
 
 export const Sidebar = () => {
     const {isOpen, toggleSidebar} = useSidebar()
+
+    const { systemTheme, theme, setTheme } = useTheme()
+    const currentTheme = theme === 'system' ? systemTheme : theme
+    const toggleTheme = () => currentTheme === 'dark' ? setTheme('light') : setTheme('dark')
+
     const {
-        setSchoolReportColors,
         minimumAttendancePercentageToPass,
         setMinimumAttendancePercentageToPass,
         minimumPassingGrade,
@@ -19,31 +23,6 @@ export const Sidebar = () => {
         setMinimumRecoveryGrade
     } = useSchoolReportConfig()
 
-    const [toggleColor, setToggleColor] = useState(true)
-
-    useEffect(() => {
-        toggleColor
-            ? setSchoolReportColors({
-                card:              `bg-white`,
-                border:            `border-gray-950`,
-                clippingBorder:    `border-red-600`,
-                signatures:        `bg-gray-950`,
-                text:              `text-gray-950`,
-                insufficientGrade: `text-red-600`,
-                enoughGrade:       `text-green-500`
-            })
-            : setSchoolReportColors({
-                card:              `bg-black`,
-                border:            `border-white`,
-                clippingBorder:    `border-red-600`,
-                signatures:        `bg-gray-100`,
-                text:              `text-gray-100`,
-                insufficientGrade: `text-red-600`,
-                enoughGrade:       `text-green-500`
-            })
-    }, [setSchoolReportColors, toggleColor])
-
-
     return (
         <aside className={
             `${isOpen
@@ -117,13 +96,12 @@ export const Sidebar = () => {
                         <p>content</p>
                     </Details>
                     <Details summary='Cores'>
-                        {/* <select className='appearance-none'>
-                            <option>cor1</option>
-                            <option>cor2</option>
-                            <option>cor2</option>
-                        </select> */}
-                        <button className='w-full bg-gray-800 p-2 rounded-md' onClick={() => setToggleColor(!toggleColor)}>test: toggleColor</button>
-                        <div className={`${toggleColor ? 'bg-white' : 'bg-black'} w-full h-4 mt-2 rounded-md`} />
+                        <button onClick={toggleTheme} className='w-full hover:bg-shadow-5 hover:dark:bg-shadow-15 border border-shadow-15 flex items-center justify-center gap-2 py-1 rounded-md'>
+                            { currentTheme === 'dark'
+                                ? <MdOutlineLightMode className='text-xl' />
+                                : <MdOutlineDarkMode className='text-xl' />
+                            } Mudar Tema
+                        </button>
                     </Details>
                 </div>
             }

diff --git a/src/interfaces/types.ts b/src/interfaces/types.ts
@@ -72,7 +72,7 @@ export interface SchoolReport {
     student:               Student
     studentAcademicRecord: StudentAcademicRecord
 }
-/* Components/Form/Input */
+/* Components/Input */
 type InputType = {
     name:           string
     label?:         string
@@ -83,4 +83,10 @@ type InputType = {
 /**
  * Defines the types of native input properties.
  */
-export type InputProps = JSX.IntrinsicElements['input'] & InputType
+export type InputProps = JSX.IntrinsicElements['input'] & InputType
+/* Components/Details */
+type DetailsType = { summary?: string }
+/**
+ * Defines the types of native details properties.
+ */
+export type DetailsProps = JSX.IntrinsicElements['details'] & DetailsType
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import type { AppProps } from 'next/app'
 
+import { ThemeProvider } from 'next-themes'
 import { SidebarProvider } from '@/contexts/SidebarContext'
 import { GenerateImageProvider } from '@/contexts/GenerateImageContext'
 import { SchoolReportConfigProvider } from '@/contexts/SchoolReportConfigContext'
@@ -9,14 +10,16 @@ import '@/styles/globals.css'
 
 export default function App({ Component, pageProps }: AppProps) {
     return (
-        <SidebarProvider>
-            <SchoolReportConfigProvider>
-                <SchoolReportProvider>
-                    <GenerateImageProvider>
-                        <Component {...pageProps} />
-                    </GenerateImageProvider>
-                </SchoolReportProvider>
-            </SchoolReportConfigProvider>
-        </SidebarProvider>
+        <ThemeProvider attribute='class'>
+            <SidebarProvider>
+                <SchoolReportConfigProvider>
+                    <SchoolReportProvider>
+                        <GenerateImageProvider>
+                            <Component {...pageProps} />
+                        </GenerateImageProvider>
+                    </SchoolReportProvider>
+                </SchoolReportConfigProvider>
+            </SidebarProvider>
+        </ThemeProvider>
     )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -3,10 +3,12 @@
 @tailwind utilities;
 
 @layer base {
-    body  { @apply antialiased bg-rose-100 text-gray-950 dark:bg-gray-950 dark:text-gray-100; }
+    body  { @apply antialiased bg-slate-200 text-gray-950 dark:bg-gray-950 dark:text-gray-100; }
     input { @apply truncate; }
-    aside { @apply bg-rose-50 dark:bg-gray-900; }
-    aside input { @apply bg-rose-50 dark:bg-gray-900; }
+    aside { @apply bg-slate-100 dark:bg-gray-900; }
+    aside input { @apply bg-slate-100 dark:bg-gray-900; }
+    summary { @apply bg-slate-300 dark:bg-gray-800; }
+    summary ~ div { @apply bg-slate-200 dark:bg-gray-700; }
 
     input:-webkit-autofill,
     input:-webkit-autofill:hover,
@@ -19,7 +21,7 @@
     ::-webkit-scrollbar:horizontal { @apply h-2; }
     ::-webkit-scrollbar,
     ::-webkit-scrollbar:horizontal { @apply bg-shadow-15 rounded-lg; }
-    ::-webkit-scrollbar-thumb      { @apply bg-rose-400 dark:bg-violet-500 rounded-lg; }
+    ::-webkit-scrollbar-thumb      { @apply bg-violet-500 rounded-lg; }
     ::-webkit-scrollbar-corner     { @apply bg-transparent; }
 }
 @layer components {