witel/base-front-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'implemented theme management' (#3) from feature/theme_management into develop

Browse Source 
Reviewed-on: witel-flix/frontend#3
This commit is contained in:
behzadaslani
2026-04-15 07:48:12 +00:00
parent 9fb168e888 e587a7f6cc
commit e37f76ca5a
7 changed files with 115 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -17,6 +17,7 @@
"embla-carousel-react": "^8.6.0", "embla-carousel-react": "^8.6.0",
"framer-motion": "^12.38.0", "framer-motion": "^12.38.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^1.8.0",
"next": "16.1.6", "next": "16.1.6",
"next-intl": "^4.9.1", "next-intl": "^4.9.1",
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",

39
src/app/layout.tsx
View File

@@ -1,19 +1,38 @@
import type { Metadata } from "next"; import { ClientAppProvider } from '@/providers/ClientAppProvider'
import "./globals.css"; import '@/styles/globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Offline App", title: 'Theater of dreams',
}; }
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode
}) { }) {
return ( return (
<html lang="en"> <html lang='en' suppressHydrationWarning>
<body>{children}</body> <head>
</html> {/* Prevent theme flicker before hydration */}
); <script
} dangerouslySetInnerHTML={{
__html: `
(function() {
try {
const stored = localStorage.getItem('theme');
const theme = stored || 'dark';
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})();
`,
}}
/>
</head>
<body className='bg-primary'>
<ClientAppProvider>{children}</ClientAppProvider>
</body>
</html>
)
}

3
src/app/page.tsx
View File

@@ -1,6 +1,9 @@
import ThemeToggle from '@/components/UI/ThemeToggle'
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<ThemeToggle />
<h1>Offline Next.js Template 🚀</h1> <h1>Offline Next.js Template 🚀</h1>
<p>This project was generated completely offline.</p> <p>This project was generated completely offline.</p>
</main> </main>

30
src/components/UI/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,30 @@
'use client'
import { motion } from 'framer-motion'
import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
export default function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className='flex cursor-pointer items-center py-2'
>
<motion.div
key={theme}
initial={{ rotate: -90, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
exit={{ rotate: 90, opacity: 0 }}
transition={{ duration: 0.5, ease: 'easeInOut' }}
>
{theme === 'dark' ? (
<Moon className='text-text size-6' />
) : (
<Sun className='text-text size-6' />
)}
</motion.div>
</button>
)
}

44
src/providers/ClientAppProvider.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client'
import { AnimatePresence, motion } from 'framer-motion'
import { ThemeProvider } from 'next-themes'
import { useEffect, useState } from 'react'
export function ClientAppProvider({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false)
// wait for hydration
useEffect(() => {
setMounted(true)
}, [])
return (
<ThemeProvider
attribute='data-theme'
defaultTheme='dark'
enableSystem={false}
>
<AnimatePresence mode='wait'>
{!mounted ? (
<motion.div
key='splash'
className='bg-map-bg flex h-dvh w-dvw items-center justify-center'
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
) : (
<motion.div
key='app'
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3, ease: 'easeOut' }}
className='bg-map-bg'
>
{children}
</motion.div>
)}
</AnimatePresence>
</ThemeProvider>
)
}

4
src/app/globals.css → src/styles/globals.css
View File

@@ -10,6 +10,10 @@
* { * {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {

18
tsconfig.json
View File

@@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2017", "target": "ES2017",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": true,
@@ -23,12 +19,8 @@
} }
], ],
"paths": { "paths": {
"@/*": [ "@/*": ["./src/*"],
"./src/*" "&/*": ["./public/*"]
],
"&/*": [
"./public/*"
]
} }
}, },
"include": [ "include": [
@@ -38,7 +30,5 @@
".next/types/**/*.ts", ".next/types/**/*.ts",
".next/dev/types/**/*.ts" ".next/dev/types/**/*.ts"
], ],
"exclude": [ "exclude": ["node_modules"]
"node_modules"
]
} }