Theme & UI Building Blocks

Color Palette

The theme uses a government-style palette. Reference these via MUI's sx prop or theme.palette:

Light mode backgrounds:

• background.default: #F8FAFC (page background)
• background.paper: #FFFFFF (card/surface)
• divider: #E2E8F0
• text.primary: #1E293B
• text.secondary: #64748B

Dark mode backgrounds:

• background.default: #0F172A
• background.paper: #1E293B
• divider: #334155

Typography Scale

Font stack: 'Noto Sans Lao', 'Noto Sans', 'Phetsarath OT', 'Saysettha OT', sans-serif

Component Defaults

• MuiButton: borderRadius: 8px, disableElevation: true, no uppercase transform
• MuiTextField: size: 'small', borderRadius: 6px
• MuiCard: borderRadius: 8px, subtle shadow
• MuiChip: borderRadius: 4px
• spacing: 8px baseline (theme.spacing(1) === '8px')

Dark/Light Mode Toggle

import { useTheme } from '@/core/context/ThemeContext'

function MyComponent() {
  const { mode, toggleTheme } = useTheme()

  return (
    <IconButton onClick={toggleTheme}>
      {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
    </IconButton>
  )
}

Mode persists in localStorage under key 'admin-theme-mode'.

Provider Setup

Wrap the app (in main.tsx) in this order:

<QueryClientProvider client={queryClient}>
  <ThemeProvider>          {/* MUI theme + CssBaseline + LocalizationProvider */}
    <AuthProvider>
      <SnackbarProvider>
        <ConfirmDialogProvider>
          <RouterProvider router={router} />
        </ConfirmDialogProvider>
      </SnackbarProvider>
    </AuthProvider>
  </ThemeProvider>
</QueryClientProvider>

ThemeProvider wraps MUI's ThemeProvider, CssBaseline, and MUI's LocalizationProvider (with Day.js adapter) — so date pickers work without additional setup.

SectionCard

A card with an icon avatar, title, and a divider — used in detail pages to group related fields.

import { SectionCard } from '@/shared/components'

<SectionCard
  icon={<InfoIcon />}             // MUI icon
  title="Basic Information"
  iconColor="primary.main"        // optional, defaults to 'primary.main'
>
  {/* InfoRow children or raw children */}
  <InfoRow label="Name" value={item.name} />
</SectionCard>

// With raw children (not wrapped in List):
<SectionCard icon={<AttachFileIcon />} title="Attachments" rawChildren>
  <Button href={item.fileUrl}>Download</Button>
</SectionCard>

Hover effect: border color changes to primary.main, box shadow lifts.

InfoRow

A label + value pair used inside SectionCard. Displays a subtle uppercase label above the value.

import { InfoRow } from '@/shared/components'

<InfoRow label="Serial Number" value={item.serialNumber} />
<InfoRow label="Status" value={null} />        // shows '-' for null/undefined
<InfoRow label="Actions" value={<Button>Edit</Button>} />  // accepts ReactNode

Labels render as caption variant, uppercase, text.secondary. Values render as body1, text.primary.

Page Layout Patterns

Page Header

<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
  <Box>
    <Box component="h1" sx={{ fontSize: { xs: '1.5rem', md: '2rem' }, fontWeight: 600, mb: 0.5 }}>
      {pageTitle}
    </Box>
    <Box component="p" sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
      {description}
    </Box>
  </Box>
  <Button variant="contained" startIcon={<AddIcon />}>Create</Button>
</Box>

Detail Page Hero (full-width colored header)

<Paper
  elevation={0}
  sx={{
    bgcolor: 'primary.main',
    color: 'white',
    py: { xs: 2.5, md: 3.5 },
    px: { xs: 3, md: 4 },
    mx: { xs: -2, md: -4 },  // bleed beyond container padding
    borderRadius: 0,
    position: 'relative',
    overflow: 'hidden',
    // decorative circles
    '&::before': {
      content: '""', position: 'absolute', top: 0, right: 0,
      width: { xs: '120px', md: '250px' }, height: { xs: '120px', md: '250px' },
      bgcolor: 'rgba(255, 255, 255, 0.05)', borderRadius: '50%',
      transform: 'translate(35%, -35%)',
    },
  }}
>
  ...
</Paper>

MUI Grid

Grid items must use the size prop — never legacy xs/md props or the item prop. See react-standard for the full rule.

Card Grid for Detail Sections

<Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
  <Grid container spacing={3}>
    <Grid size={{ xs: 12, md: 6 }}>
      <SectionCard icon={<InfoIcon />} title="Section Title">
        <InfoRow label="Field" value={value} />
      </SectionCard>
    </Grid>
  </Grid>
</Container>

sx Prop Tips

// Responsive values
sx={{ fontSize: { xs: '1rem', md: '1.25rem' } }}

// Theme-aware colors
sx={{ bgcolor: 'primary.main', color: 'white' }}
sx={{ borderColor: 'divider' }}

// Callback form for theme access
sx={{ bgcolor: (theme) => theme.palette.action.hover }}

// Combined
sx={{
  borderRadius: 3,
  border: '1px solid',
  borderColor: 'divider',
  '&:hover': { borderColor: 'primary.main' },
}}

Theme Config Location

src/core/config/theme.config.ts — edit this file to change global colors, typography, or component defaults.