Skip to main content
Monkeytype features an extensive theme system with over 56 built-in themes and the ability to create custom themes. Themes change the color scheme of the entire application.

​
Theme System Overview

Themes in Monkeytype control:
  • Background colors
  • Text colors
  • Caret color
  • Sub-element colors (timers, buttons)
  • Error colors
  • Navigation colors
All themes are stored as CSS files in frontend/static/themes/ and are loaded dynamically.

​
Built-in Themes

Monkeytype includes 56 professionally designed themes. Here’s a selection of popular themes:

9009

Clean, minimal theme with keyboard-inspired colors.Style: Minimal, professional

Dracula

The famous dark theme with purple and pink accents.Style: Dark, colorfulSpecial: Custom navigation colors

Nord

Arctic, north-bluish color palette.Style: Cool, muted

Solarized Dark

Popular developer theme with warm contrast.Style: Dark, balanced

Monokai

Classic code editor theme.Style: Dark, vibrant

Gruvbox

Retro groove theme with warm colors.Style: Warm, vintage

​
Complete Theme List

All 56 available themes:
  • 9009
  • Aether
  • Aurora
  • Beach
  • Bingsu
  • Blueberry Dark
  • Blueberry Light
  • Camping
  • Catppuccin
  • Chaos Theory
  • Cheesecake
  • Dark Note
  • Desert Oasis
  • DMG
  • Dots
  • Dracula
  • Dualshot
  • Ez Mode
  • Fire
  • Froyo
  • Fruit Chew
  • Fundamentals
  • Future Funk
  • Graen
  • Grape
  • Horizon
  • Husqy
  • Incognito
  • Ishtar
  • Lavender
  • Lil Dragon
  • Matrix
  • Metropolis
  • Milkshake
  • Modern Ink
  • Moonlight
  • Mr Sleeves
  • Oblivion
  • Phantom
  • Rainbow Trail
  • Retrocast
  • RGB
  • Sewing Tin
  • Sewing Tin Light
  • Shadow
  • SNES
  • Solarized Osaka
  • Stealth
  • Suisei
  • Sunset
  • Taro
  • Terrazzo
  • Trackday
  • Trance
  • Vesper
  • Vesper Light

​
Browsing & Applying Themes

​
Theme Selector

1

Open Theme Menu

Click the theme button in the header or press Ctrl/Cmd + Shift + T
2

Browse Themes

  • Scroll through theme previews
  • Hover to see live preview
  • Search by name
  • Filter favorites
3

Apply Theme

Click a theme to apply it immediately. Your selection is saved automatically.

​
Theme Features

Save Your Favorites:
  • Star themes to add to favorites
  • Quick access to preferred themes
  • Favorites list in settings
  • Stored in config: favThemes array
Configuration: frontend/src/ts/config-metadata.ts:790-795

​
Custom Themes

​
Creating Custom Themes

Custom themes require an account to save and sync across devices.
1

Open Custom Theme Creator

Navigate to Settings > Themes > Custom Theme
2

Choose Colors

Select colors for each element:
  • Background (--bg-color)
  • Main text (--main-color)
  • Caret (--caret-color)
  • Sub elements (--sub-color)
  • Sub alt color (--sub-alt-color)
  • Text color (--text-color)
  • Error color (--error-color)
  • Error extra color (--error-extra-color)
  • Colorful error color (--colorful-error-color)
  • Colorful error extra color (--colorful-error-extra-color)
3

Preview & Save

  • See live preview as you edit
  • Name your theme
  • Save to your account
  • Theme syncs across devices

​
Managing Custom Themes

Add Theme

  • Create new custom theme
  • Name and color configuration
  • Maximum themes per account (configurable)
API: backend/src/api/controllers/user.ts:828-836

Edit Theme

  • Modify existing custom theme
  • Change colors or name
  • Live preview updates
API: backend/src/api/controllers/user.ts:847-855

Remove Theme

  • Delete custom theme
  • Cannot be undone
  • Reverts to default if currently active
API: backend/src/api/controllers/user.ts:838-845

Share Themes

  • Export custom theme as JSON
  • Share theme code with others
  • Import themes from community

​
Custom Theme Storage

Account Storage:
  • Custom themes saved to user account
  • Retrieved on login: backend/src/api/controllers/user.ts:817-826
  • Stored as array with ID, name, and colors
  • Full theme data structure: 
    {
  _id: ObjectId,
  name: string,
  colors: [10 color values]
}
Configuration:
  • customTheme: Boolean to enable custom theme
  • customThemeColors: Array of 10 color values
  • Validation ensures all colors are different: frontend/src/ts/config-metadata.ts:812-825

​
Theme Modifiers

​
Color Adjustments

Feature: flipTestColorsInverts the main color and background color in the test area.Use case:
  • Light text on dark background (or vice versa)
  • Better contrast for some themes
  • Accessibility preference
Configuration: frontend/src/ts/config-metadata.ts:706-710
Feature: colorfulModeUses theme accent colors for various UI elements:
  • Stats display
  • Buttons and navigation
  • Charts and graphs
  • More vibrant appearance
Configuration: frontend/src/ts/config-metadata.ts:712-716

​
Custom Backgrounds

URL Backgrounds:Settings:
  • customBackground: Image URL
  • customBackgroundSize: cover, contain, or max
  • customBackgroundFilter: Array of filter values [blur, brightness, opacity, saturation]
Filters:
  • Blur: 0-10px
  • Brightness: 0-200%
  • Opacity: 0-100%
  • Saturation: 0-200%
Use cases:
  • Personal photos
  • Aesthetic images
  • Branding
  • Subtle textures
Configuration: frontend/src/ts/config-metadata.ts:718-738

​
Theme Structure

Themes are CSS files that define CSS custom properties: 
:root {
  --bg-color: #323437;
  --main-color: #e2b714;
  --caret-color: #e2b714;
  --sub-color: #646669;
  --sub-alt-color: #2c2e31;
  --text-color: #d1d0c5;
  --error-color: #ca4754;
  --error-extra-color: #7e2a33;
  --colorful-error-color: #ca4754;
  --colorful-error-extra-color: #7e2a33;
}

​
Color Variables

Core Colors:
  • --bg-color: Main background
  • --main-color: Primary text and active elements
  • --caret-color: Typing cursor
  • --text-color: General UI text
Secondary Colors:
  • --sub-color: Inactive/secondary elements
  • --sub-alt-color: Tertiary elements, dividers
Error Colors:
  • --error-color: Standard error indication
  • --error-extra-color: Extra error indication (unused letters)
  • --colorful-error-color: Colorful mode error
  • --colorful-error-extra-color: Colorful mode extra error

​
Advanced Customization

Some themes include additional CSS rules for specific elements: 
/* Example: Custom navigation colors (Dracula theme) */
nav > .textButton:nth-child(1) { color: #ec75c4; }
nav > .textButton:nth-child(2) { color: #8be9fd; }
nav > .textButton:nth-child(3) { color: #50fa7b; }
nav > .textButton:nth-child(4) { color: #f1fa8c; }
Theme locations:
  • Built-in: frontend/static/themes/*.css
  • Custom: Stored in database, generated dynamically

​
Tips for Choosing Themes

For Accuracy

Choose themes with:
  • High contrast
  • Clear error colors
  • Distinct caret color
Recommended: 9009, Dracula, Nord

For Long Sessions

Choose themes with:
  • Lower contrast (easier on eyes)
  • Muted colors
  • Darker backgrounds
Recommended: Gruvbox, Moonlight, Solarized Dark

For Speed

Choose themes with:
  • Minimal distractions
  • Single-color focus
  • Clear word boundaries
Recommended: Stealth, Phantom, Modern Ink

For Fun

Choose themes with:
  • Vibrant colors
  • Unique styles
  • Animated elements
Recommended: RGB, Matrix, Rainbow Trail

​
Accessibility

When creating or choosing themes, consider:
  • Color blindness (avoid red/green only differences)
  • Contrast ratios (WCAG AA: 4.5:1 minimum)
  • Motion sensitivity (some themes have animations)
  • Screen reader compatibility (themes don’t affect this)

​
Community Themes

While custom themes are account-specific, users can:
  • Share theme configurations (color arrays)
  • Submit themes to the project on GitHub
  • Browse community theme collections
  • Import/export theme settings

​
Source Code References

  • Theme files: frontend/static/themes/
  • Theme configuration: frontend/src/ts/config-metadata.ts:705-825
  • Custom theme API: backend/src/api/controllers/user.ts:817-855
  • Theme colors config: frontend/src/ts/config.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us