sno-quiz/frontend/src/theme/index.ts

import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#FFD700', // Gold stars
      light: '#FFED4E',
      dark: '#D4AF37',
    },
    secondary: {
      main: '#4CAF50', // Success green
      light: '#66BB6A',
      dark: '#388E3C',
    },
    background: {
      default: '#0F0F0F', // Dark background
      paper: '#1A1A1A', // Card background
    },
    text: {
      primary: '#FFFFFF',
      secondary: '#B0B0B0',
      disabled: '#666666',
    },
    success: {
      main: '#4CAF50',
      light: '#81C784',
    },
    error: {
      main: '#F44336',
      light: '#EF5350',
    },
    warning: {
      main: '#FF9800',
      light: '#FFB74D',
    },
    info: {
      main: '#2196F3',
      light: '#42A5F5',
    },
    divider: '#2A2A2A',
    action: {
      hover: 'rgba(255, 215, 0, 0.1)',
      selected: 'rgba(255, 215, 0, 0.2)',
      disabled: 'rgba(255, 255, 255, 0.1)',
      disabledBackground: 'rgba(255, 255, 255, 0.05)',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: 14,
    h1: {
      fontSize: 28,
      fontWeight: 600,
    },
    h2: {
      fontSize: 24,
      fontWeight: 600,
    },
    h3: {
      fontSize: 20,
      fontWeight: 600,
    },
    h4: {
      fontSize: 18,
      fontWeight: 600,
    },
    h5: {
      fontSize: 16,
      fontWeight: 600,
    },
    h6: {
      fontSize: 14,
      fontWeight: 600,
    },
    body1: {
      fontSize: 16,
      lineHeight: 1.5,
    },
    body2: {
      fontSize: 14,
      lineHeight: 1.4,
    },
    subtitle1: {
      fontSize: 14,
      fontWeight: 500,
    },
    subtitle2: {
      fontSize: 12,
      fontWeight: 500,
    },
  },
  shape: {
    borderRadius: 8,
  },
  shadows: [
    'none',
    '0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24)',
    '0px 3px 6px rgba(0,0,0,0.16), 0px 3px 6px rgba(0,0,0,0.23)',
    '0px 10px 20px rgba(0,0,0,0.19), 0px 6px 6px rgba(0,0,0,0.23)',
    '0px 14px 28px rgba(0,0,0,0.25), 0px 10px 10px rgba(0,0,0,0.22)',
    '0px 19px 38px rgba(0,0,0,0.3), 0px 15px 12px rgba(0,0,0,0.22)',
    'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none',
    'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none',
  ],
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          fontWeight: 600,
          borderRadius: 8,
          transition: 'all 0.2s ease',
          boxShadow: 'none',
          '&:hover': {
            boxShadow: '0 4px 12px rgba(255, 215, 0, 0.3)',
          },
          '&:active': {
            transform: 'translateY(1px)',
          },
        },
        contained: {
          '&:hover': {
            transform: 'translateY(-2px)',
          },
        },
        containedPrimary: {
          color: '#000000',
          backgroundColor: '#FFD700',
          '&:hover': {
            backgroundColor: '#FFC700',
          },
        },
        containedSecondary: {
          backgroundColor: '#4CAF50',
          '&:hover': {
            backgroundColor: '#66BB6A',
          },
        },
        outlined: {
          borderWidth: 2,
          '&:hover': {
            borderWidth: 2,
          },
        },
        outlinedPrimary: {
          borderColor: '#FFD700',
          color: '#FFD700',
        },
        sizeLarge: {
          padding: '12px 24px',
          fontSize: 16,
          borderRadius: 12,
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 16,
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
          overflow: 'hidden',
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          '&:hover': {
            transform: 'translateY(-4px)',
            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
            border: '1px solid rgba(255, 215, 0, 0.3)',
          },
        },
      },
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          padding: 16,
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          fontWeight: 600,
          fontSize: 12,
          height: 28,
          borderRadius: 14,
        },
        colorPrimary: {
          backgroundColor: 'rgba(255, 215, 0, 0.15)',
          color: '#FFD700',
          borderColor: '#FFD700',
        },
        colorSecondary: {
          backgroundColor: 'rgba(76, 175, 80, 0.15)',
          color: '#4CAF50',
        },
        colorSuccess: {
          backgroundColor: 'rgba(76, 175, 80, 0.15)',
          color: '#4CAF50',
        },
        colorWarning: {
          backgroundColor: 'rgba(255, 152, 0, 0.15)',
          color: '#FF9800',
        },
        outlinedPrimary: {
          backgroundColor: 'transparent',
          border: '1px solid #FFD700',
          color: '#FFD700',
        },
      },
    },
    MuiContainer: {
      styleOverrides: {
        root: {
          paddingLeft: 16,
          paddingRight: 16,
          '@media (min-width: 600px)': {
            paddingLeft: 24,
            paddingRight: 24,
          },
        },
      },
    },
    MuiTypography: {
      styleOverrides: {
        h1: {
          color: '#FFFFFF',
        },
        h2: {
          color: '#FFFFFF',
        },
        h3: {
          color: '#FFFFFF',
        },
        h4: {
          color: '#FFFFFF',
        },
        h5: {
          color: '#FFFFFF',
        },
        h6: {
          color: '#FFFFFF',
        },
        subtitle1: {
          color: '#B0B0B0',
        },
        subtitle2: {
          color: '#888888',
        },
        body1: {
          color: '#FFFFFF',
        },
        body2: {
          color: '#B0B0B0',
        },
      },
    },
    MuiAlert: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          fontSize: 14,
        },
        standardError: {
          backgroundColor: 'rgba(244, 67, 54, 0.1)',
          color: '#FFFFFF',
          border: '1px solid #F44336',
        },
        standardSuccess: {
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          color: '#FFFFFF',
          border: '1px solid #4CAF50',
        },
        standardWarning: {
          backgroundColor: 'rgba(255, 152, 0, 0.1)',
          color: '#FFFFFF',
          border: '1px solid #FF9800',
        },
        standardInfo: {
          backgroundColor: 'rgba(33, 150, 243, 0.1)',
          color: '#FFFFFF',
          border: '1px solid #2196F3',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        },
      },
    },
    MuiLinearProgress: {
      styleOverrides: {
        root: {
          height: 8,
          borderRadius: 4,
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
        },
        bar: {
          borderRadius: 4,
          backgroundColor: '#FFD700',
        },
      },
    },
    MuiCircularProgress: {
      styleOverrides: {
        root: {
          color: '#FFD700',
        },
      },
    },
    MuiIconButton: {
      styleOverrides: {
        root: {
          transition: 'all 0.2s ease',
          '&:hover': {
            backgroundColor: 'rgba(255, 215, 0, 0.1)',
          },
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundImage: 'linear-gradient(to bottom, rgba(26, 26, 26, 0.98), rgba(15, 15, 15, 0.98))',
          backdropFilter: 'blur(10px)',
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        },
      },
    },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

export default theme;