+
-
+
mely-portfolio
)}
@@ -185,12 +211,12 @@ const Sidebar = ({ onCollapseChange }: SidebarProps) => {
onClick={() => scrollToSection(item.href)}
className={`w-full flex items-center gap-2 px-2 py-1.5 text-left transition-all duration-200 group ${
isActive
- ? 'bg-blue-600/20 text-blue-400 border-r-2 border-blue-400'
- : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
+ ? 'bg-blue-100 dark:bg-blue-600/20 text-blue-600 dark:text-blue-400 border-r-2 border-blue-500 dark:border-blue-400'
+ : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800/50'
} ${isCollapsed ? 'justify-center' : ''}`}
>
{item.type === 'folder' ? (
-
+
) : (
)}
@@ -210,13 +236,24 @@ const Sidebar = ({ onCollapseChange }: SidebarProps) => {
{isCollapsed && (
)}
+ {/* Desktop Theme Toggle Button - Only when collapsed */}
+ {isCollapsed && (
+
+ )}
+
{/* Collapse Button */}
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..32e5762
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -0,0 +1,61 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+
+type Theme = 'light' | 'dark'
+
+interface ThemeContextType {
+ theme: Theme
+ toggleTheme: () => void
+}
+
+const ThemeContext = createContext
(undefined)
+
+export const useTheme = () => {
+ const context = useContext(ThemeContext)
+ if (context === undefined) {
+ throw new Error('useTheme must be used within a ThemeProvider')
+ }
+ return context
+}
+
+interface ThemeProviderProps {
+ children: ReactNode
+}
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+ const [theme, setTheme] = useState(() => {
+ // Check localStorage first, then system preference
+ const savedTheme = localStorage.getItem('theme') as Theme
+ if (savedTheme) {
+ return savedTheme
+ }
+
+ // Check system preference
+ if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+ return 'light'
+ }
+
+ return 'dark'
+ })
+
+ useEffect(() => {
+ // Update localStorage when theme changes
+ localStorage.setItem('theme', theme)
+
+ // Update document class for Tailwind dark mode
+ if (theme === 'dark') {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ }, [theme])
+
+ const toggleTheme = () => {
+ setTheme((prevTheme: Theme) => prevTheme === 'light' ? 'dark' : 'light')
+ }
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index b6431ab..3be3eac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
+ darkMode: 'class',
theme: {
extend: {
colors: {