Feature dark mode

apps/backend/test/admin-metrics.e2e-spec.ts

@@ -24,7 +24,7 @@ describe('Admin Metrics (e2e)', () => {
   });
 
   beforeEach(async () => {
-    // Clean up database before each test
+    // Clean up database before each test using DELETE to avoid deadlocks with concurrent test runs
     await prisma.surveyResponse.deleteMany({});
     await prisma.user.deleteMany({});
   });

apps/backend/test/admin-recent-responses.e2e-spec.ts

@@ -24,7 +24,7 @@ describe('Admin Recent Responses (e2e)', () => {
   });
 
   beforeEach(async () => {
-    // Clean up database before each test
+    // Clean up database before each test using DELETE to avoid deadlocks with concurrent test runs
     await prisma.surveyResponse.deleteMany({});
     await prisma.user.deleteMany({});
   });

apps/backend/test/jest-e2e.json

@@ -5,5 +5,6 @@
   "testRegex": ".e2e-spec.ts$",
   "transform": {
     "^.+\\.(t|j)s$": "ts-jest"
-  }
+  },
+  "maxWorkers": 1
 }

apps/frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,34 @@
+import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from '@mantine/core';
+import { IconSun, IconMoon } from '@tabler/icons-react';
+
+interface ThemeToggleProps {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function ThemeToggle({ size = 'lg' }: ThemeToggleProps) {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light');
+
+  const toggleTheme = () => {
+    setColorScheme(computedColorScheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <ActionIcon
+      onClick={toggleTheme}
+      variant="default"
+      size={size}
+      aria-label={`Switch to ${computedColorScheme === 'dark' ? 'light' : 'dark'} mode`}
+      title={`Switch to ${computedColorScheme === 'dark' ? 'light' : 'dark'} mode`}
+      style={{
+        transition: 'transform 200ms ease',
+      }}
+    >
+      {computedColorScheme === 'dark' ? (
+        <IconSun size={18} stroke={1.5} />
+      ) : (
+        <IconMoon size={18} stroke={1.5} />
+      )}
+    </ActionIcon>
+  );
+}

apps/frontend/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
@@ -11,7 +11,8 @@ import '@mantine/notifications/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <MantineProvider theme={theme}>
+    <ColorSchemeScript defaultColorScheme="auto" />
+    <MantineProvider theme={theme} defaultColorScheme="auto">
       <Notifications position="top-right" />
       <BrowserRouter>
         <App />

apps/frontend/src/pages/AdminDashboardPage.tsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
-import { Container, Stack, Title, SimpleGrid, Alert, Image } from '@mantine/core';
+import { Container, Stack, Title, SimpleGrid, Alert, Image, Box } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 import { MetricCard } from '../components/MetricCard';
 import { RecentResponsesSection } from '../components/RecentResponsesSection';
+import { ThemeToggle } from '../components/ThemeToggle';
 import { getAdminMetrics, getAdminRecentResponses } from '../api/admin';
 import { AdminMetricsResponse, AdminRecentResponsesResponse } from '../types/admin';
 
@@ -41,18 +42,23 @@ export default function AdminDashboardPage() {
     <Container size="lg" py="xl">
       <Stack gap="xl">
         {/* Header with Logo */}
-        <Stack gap="md" align="center">
-          <Image
-            src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
-            alt="Equal Experts Logo"
-            h={60}
-            w="auto"
-            fit="contain"
-          />
-          <Title order={1} ta="center" c="#22567c">
-            Admin Dashboard
-          </Title>
-        </Stack>
+        <Box pos="relative">
+          <Box pos="absolute" right={0} top={0}>
+            <ThemeToggle />
+          </Box>
+          <Stack gap="md" align="center">
+            <Image
+              src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
+              alt="Equal Experts Logo"
+              h={60}
+              w="auto"
+              fit="contain"
+            />
+            <Title order={1} ta="center" c="#22567c">
+              Admin Dashboard
+            </Title>
+          </Stack>
+        </Box>
 
         {/* Error State */}
         {error && (

apps/frontend/src/pages/SurveyPage.tsx

@@ -10,11 +10,13 @@ import {
   Loader,
   Center,
   Text,
+  Box,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconAlertCircle, IconCheck } from '@tabler/icons-react';
 import { ProgressIndicator } from '../components/ProgressIndicator';
 import { QuestionRenderer } from '../components/QuestionRenderer';
+import { ThemeToggle } from '../components/ThemeToggle';
 import { SurveyFormState } from '../types/survey';
 import { submitSurvey } from '../api/survey';
 import { SURVEY_QUESTIONS, TOTAL_QUESTIONS } from '../config/survey-questions';
@@ -142,20 +144,25 @@ export default function SurveyPage() {
     <Container size="md" py="xl">
       <Stack gap="xl">
         {/* Header */}
-        <Stack align="center" gap="md">
-          <Image
-            src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
-            alt="Equal Experts"
-            h={60}
-            w="auto"
-          />
-          <Title order={1} ta="center" c="equalBlue.4">
-            NAM Conference Survey
-          </Title>
-          <Text size="lg" ta="center" c="dimmed">
-            Your feedback helps us improve future conferences. All questions are optional.
-          </Text>
-        </Stack>
+        <Box pos="relative">
+          <Box pos="absolute" right={0} top={0}>
+            <ThemeToggle />
+          </Box>
+          <Stack align="center" gap="md">
+            <Image
+              src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
+              alt="Equal Experts"
+              h={60}
+              w="auto"
+            />
+            <Title order={1} ta="center" c="equalBlue.4">
+              NAM Conference Survey
+            </Title>
+            <Text size="lg" ta="center" c="dimmed">
+              Your feedback helps us improve future conferences. All questions are optional.
+            </Text>
+          </Stack>
+        </Box>
 
         {/* Progress Indicator */}
         <ProgressIndicator answered={calculateAnswered()} total={TOTAL_QUESTIONS} />

apps/frontend/src/pages/ThankYouPage.tsx

@@ -1,16 +1,21 @@
-import { Container, Stack, Title, Text, Button, Image, Card } from '@mantine/core';
+import { Container, Stack, Title, Text, Button, Image, Card, Box } from '@mantine/core';
+import { ThemeToggle } from '../components/ThemeToggle';
 
 export default function ThankYouPage() {
   return (
     <Container size="sm" py="xl">
       <Card shadow="md" padding="xl" radius="md" withBorder>
-        <Stack align="center" gap="xl">
-          <Image
-            src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
-            alt="Equal Experts"
-            h={60}
-            w="auto"
-          />
+        <Box pos="relative">
+          <Box pos="absolute" right={-8} top={-8}>
+            <ThemeToggle />
+          </Box>
+          <Stack align="center" gap="xl">
+            <Image
+              src="https://www.equalexperts.com/wp-content/uploads/2024/10/2024-Logo.svg"
+              alt="Equal Experts"
+              h={60}
+              w="auto"
+            />
 
           <Title order={1} ta="center" c="equalBlue.4">
             Thank You!
@@ -34,7 +39,8 @@ export default function ThankYouPage() {
           >
             Return to Equal Experts
           </Button>
-        </Stack>
+          </Stack>
+        </Box>
       </Card>
     </Container>
   );

apps/frontend/src/theme/theme.ts

@@ -42,6 +42,18 @@ export const theme: MantineThemeOverride = createTheme({
       '#121415', // 8
       '#090a0a', // 9
     ],
+    dark: [
+      '#e0e0e0', // 0 - text primary (off-white)
+      '#a6a6a6', // 1 - text secondary
+      '#5c5c5c', // 2 - borders/subtle elements
+      '#3a3a3a', // 3 - hover states
+      '#2c2c2c', // 4 - surface (cards/panels)
+      '#242424', // 5 - background secondary
+      '#1e1e1e', // 6 - background primary
+      '#181818', // 7 - background darker
+      '#121212', // 8 - background darkest
+      '#0a0a0a', // 9 - near black
+    ],
   },
 
   // Typography
@@ -124,7 +136,7 @@ export const theme: MantineThemeOverride = createTheme({
       },
       styles: {
         root: {
-          border: '1px solid #e0e0e0',
+          transition: 'border-color 200ms ease, background-color 200ms ease',
         },
       },
     },