feat: day/night mode toggle with theme context
Add ThemeContext (dark/light, persisted to localStorage, applied as data-theme on <html>). Theme toggle is a sun/moon flip switch at the right end of the dashboard info bar. CSS overrides in index.css target every hardcoded Tailwind arbitrary colour class used across all pages via [data-theme="light"] selectors, so the entire panel switches without touching individual page files. Light palette: page #f0f4f8, cards/sidebar #ffffff, hover #f1f5f9, borders #e2e8f0, text #0f172a. Chart tooltip is made theme-aware via inline-style interpolation since Tailwind CSS overrides cannot reach Recharts inline styles.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext'
|
||||
import { ThemeProvider } from './contexts/ThemeContext'
|
||||
import Layout from './components/Layout'
|
||||
import Login from './pages/Login'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
@@ -233,9 +234,11 @@ function PageLoader() {
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user