Theming System

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',  // Use class-based dark mode
  theme: {
    extend: {
      colors: {
        // Dark theme colors (green-tinted)
        dark: {
          bg: {
            primary: '#0B1F14',
            secondary: '#102217',
            tertiary: '#152A1E',
            card: '#1a2e24',
          },
          text: {
            primary: '#f1f5f9',
            secondary: '#cbd5e1',
            tertiary: '#94a3b8',
          },
          accent: '#2bee79',
        },
        
        // Light theme colors
        light: {
          bg: {
            primary: '#ffffff',
            secondary: '#f8fafc',
            tertiary: '#f1f5f9',
            card: '#ffffff',
          },
          text: {
            primary: '#0f172a',
            secondary: '#475569',
            tertiary: '#64748b',
          },
          accent: '#10b981',
        },
      },
    },
  },
  plugins: [],
}

import { createContext, useContext, useState, useEffect } from 'react'

const SettingsContext = createContext()

export function SettingsProvider({ children }) {
  // Initialize from localStorage or default to 'dark'
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('crypto-dash-theme')
    return saved || 'dark'
  })

  // Apply theme on mount
  useEffect(() => {
    const savedTheme = localStorage.getItem('crypto-dash-theme') || 'dark'
    if (savedTheme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [])

  // Sync theme changes to DOM and localStorage
  useEffect(() => {
    localStorage.setItem('crypto-dash-theme', theme)
    
    if (theme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }, [theme])

  const toggleTheme = () => {
    setTheme(prev => prev === 'dark' ? 'light' : 'dark')
  }

  const value = {
    theme,
    setTheme,
    toggleTheme,
    // ... language settings
  }

  return (
    <SettingsContext.Provider value={value}>
      {children}
    </SettingsContext.Provider>
  )
}

export function useSettings() {
  const context = useContext(SettingsContext)
  if (!context) {
    throw new Error('useSettings must be used within SettingsProvider')
  }
  return context
}

export default function DashboardLayout() {
  return (
    <div className="flex h-screen overflow-hidden bg-slate-50 text-slate-900 dark:bg-[#102217] dark:text-slate-100">
      {/* Layout content */}
    </div>
  )
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #28392f;
  border-radius: 10px;
}

.sparkline-svg {
  filter: drop-shadow(0 0 4px rgba(43, 238, 121, 0.3));
}