From c77174d847649ad4ddf4b054e6d886a18141a7f5 Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:48 +0000 Subject: [PATCH 1/6] Add components/ThemeToggle.jsx --- components/ThemeToggle.jsx | 46 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 components/ThemeToggle.jsx diff --git a/components/ThemeToggle.jsx b/components/ThemeToggle.jsx new file mode 100644 index 00000000..980fc69a --- /dev/null +++ b/components/ThemeToggle.jsx @@ -0,0 +1,46 @@ +import { useState, useEffect } from 'react'; + +export default function ThemeToggle() { + const [isDark, setIsDark] = useState(true); + + useEffect(() => { + // Check for saved theme preference or default to dark mode + const savedTheme = localStorage.getItem('theme'); + const prefersDark = savedTheme ? savedTheme === 'dark' : true; + setIsDark(prefersDark); + + if (prefersDark) { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }, []); + + const toggleTheme = () => { + const newIsDark = !isDark; + setIsDark(newIsDark); + + if (newIsDark) { + document.documentElement.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } else { + document.documentElement.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } + }; + + return ( + + ); +} \ No newline at end of file From 47a8ae5bf77f2749c8fd3a94e456feee0811ff2d Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:49 +0000 Subject: [PATCH 2/6] Update pages/dashboard/settings.jsx --- pages/dashboard/settings.jsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 pages/dashboard/settings.jsx diff --git a/pages/dashboard/settings.jsx b/pages/dashboard/settings.jsx new file mode 100644 index 00000000..7f2dd457 --- /dev/null +++ b/pages/dashboard/settings.jsx @@ -0,0 +1,28 @@ +import ThemeToggle from '../../components/ThemeToggle'; +// ... existing imports + +export default function Settings() { + // ... existing code + + return ( +
+
+

Settings

+ + {/* Theme Settings Section */} +
+

Appearance

+
+
+

Theme

+

Switch between light and dark mode

+
+ +
+
+ + {/* ... rest of existing settings content */} +
+
+ ); +} \ No newline at end of file From 7b4799f5dc29a3a1fc60b29f7c7229b2e2dc8958 Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:50 +0000 Subject: [PATCH 3/6] Update tailwind.config.js --- tailwind.config.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 tailwind.config.js diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..2a17d26b --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,24 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', + ], + darkMode: 'class', + theme: { + extend: { + colors: { + // Custom colors for light mode if needed + light: { + primary: '#3B82F6', + secondary: '#10B981', + background: '#F9FAFB', + surface: '#FFFFFF', + text: '#111827', + } + }, + }, + }, + plugins: [], +} \ No newline at end of file From aa25132222ba50b9cb6f07bcf23fc9a34eb9c30f Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:51 +0000 Subject: [PATCH 4/6] Update styles/globals.css --- styles/globals.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 styles/globals.css diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 00000000..08956d52 --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,30 @@ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; + +/* Base styles for smooth theme transitions */ +* { + @apply transition-colors duration-200; +} + +/* Scrollbar styling for both themes */ +::-webkit-scrollbar { + @apply w-2; +} + +::-webkit-scrollbar-track { + @apply bg-gray-100 dark:bg-gray-800; +} + +::-webkit-scrollbar-thumb { + @apply bg-gray-400 dark:bg-gray-600 rounded-full; +} + +::-webkit-scrollbar-thumb:hover { + @apply bg-gray-500 dark:bg-gray-500; +} + +/* Custom focus styles */ +*:focus { + @apply outline-none ring-2 ring-indigo-500 dark:ring-indigo-400 ring-offset-2 dark:ring-offset-gray-900; +} \ No newline at end of file From c777d884f596b02fc362d5a00d3bd2434428376a Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:52 +0000 Subject: [PATCH 5/6] Update pages/_app.jsx --- pages/_app.jsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 pages/_app.jsx diff --git a/pages/_app.jsx b/pages/_app.jsx new file mode 100644 index 00000000..64026263 --- /dev/null +++ b/pages/_app.jsx @@ -0,0 +1,18 @@ +import { useEffect } from 'react'; +import '../styles/globals.css'; + +function MyApp({ Component, pageProps }) { + useEffect(() => { + // Initialize theme on app load + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'light') { + document.documentElement.classList.remove('dark'); + } else { + document.documentElement.classList.add('dark'); + } + }, []); + + return ; +} + +export default MyApp; \ No newline at end of file From a8d7f98f07b755c2682e5ca54eeff79a03b0f300 Mon Sep 17 00:00:00 2001 From: alastairong1 Date: Fri, 30 Jan 2026 14:15:53 +0000 Subject: [PATCH 6/6] Update components/Layout.jsx --- components/Layout.jsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 components/Layout.jsx diff --git a/components/Layout.jsx b/components/Layout.jsx new file mode 100644 index 00000000..438e650f --- /dev/null +++ b/components/Layout.jsx @@ -0,0 +1,28 @@ +// Example of updating a common layout component +export default function Layout({ children }) { + return ( +
+ +
{children}
+
+ ); +} \ No newline at end of file