Dark Mode
MaV flips from electric blue #352EFF to lime green #A1FF5B in dark mode. Background becomes #171717. Implemented via [data-theme="dark"] selector.
Live Comparison
Toggle the button above to see the current page flip between modes.
Light Mode
Email address
ℹ️ Primary alert message
Primary
Success
Dark Mode
Email address
ℹ️ Primary alert message
Primary
Success
Token Override Map
Only tokens that change between modes. Tokens not listed here are identical in both themes (e.g. system/danger, system/success).
Light
Dark
Background / Surface
background/bg-default
#ffffff
background/bg-default
#171717
background/bg-secondary
#e5e5e5
background/bg-secondary
#242424
Brand Primary
Main/Primary
#352eff
Main/Primary
#a1ff5b
Buttons
btn/primary/default
#352eff
btn/primary/default
#a1ff5b
btn/primary/text-default
#ffffff
btn/primary/text-default
#171717
btn/primary/disabled
#e5e5e5
btn/primary/disabled
#242424
Input Fields
input-field/default/bg-box
#ffffff
input-field/default/bg-box
#171717
input-field/default/outline-box
#cccccc
input-field/default/outline-box
#484848
input-field/focus/outline-box
#352eff
input-field/focus/outline-box
#a1ff5b
Divider
devider/default
#efefef
devider/default
#484848
Implementation
/* CSS — attribute selector approach */
[data-theme="dark"] {
--mav-primary: #a1ff5b;
--mav-bg: #171717;
--mav-fg: #ffffff;
--mav-border: #484848;
--btn\/primary\/default: #a1ff5b;
/* ... full list in css/tokens.css */
}
/* React Native — useColorScheme hook */
const colorScheme = useColorScheme();
const theme = colorScheme === 'dark' ? DarkColorTheme : LightColorTheme;
/* Web (MUI) — createTheme with mode */
createTheme({ palette: { mode: 'dark' } });
⚠ Focus ring exception
The OTP/input focus ring
0 0 0 3px rgba(53,46,255,0.4) is the same in both themes. Do NOT replace it with the dark accent color. This is explicitly specified in the design spec.