Themes

Customize your coding experience with light, dark, and custom editor themes

Overview

LiveCodes offers extensive theming options:

• App themes - Light and dark modes
• Editor themes - Monaco, CodeMirror, and CodeJar themes
• Syntax highlighting - Beautiful code colors
• Custom themes - Create your own

App Themes

Light and Dark Modes

Dark Mode

Optimized for low-light environments:

• Dark background
• High contrast
• Reduced eye strain

Light Mode

Clean and bright:

• Light background
• Clear visibility
• Print-friendly

Switching Themes

1. Open Settings

   Click Menu → Settings

2. Select Theme

   Choose Light or Dark under App Theme

3. Apply

   Theme changes immediately

Keyboard shortcut: Alt + Shift + D to toggle between light and dark themes.

Editor Themes

LiveCodes supports multiple editor themes for Monaco (default), CodeMirror, and CodeJar editors.

Monaco Themes

VS Light

Classic Visual Studio Code light theme

VS Dark

Classic Visual Studio Code dark theme

High Contrast

Maximum contrast for accessibility

Custom Themes

Import VS Code themes

Popular Monaco themes:

• Monokai
• Solarized Dark/Light
• Dracula
• One Dark Pro
• GitHub Light/Dark
• Nord
• Tokyo Night

CodeMirror Themes

When using CodeMirror editor:

• Material Dark
• Gruvbox
• Dracula
• Ayu Light/Dark
• Nord

Setting Editor Theme

1. Access Editor Settings

   Menu → Editor Settings

2. Choose Theme

   Select from available editor themes

3. Preview

   See changes in real-time

Custom Editor Themes

Monaco Custom Themes

Load custom VS Code themes:

{
  "editorTheme": "https://url-to-theme.json"
}

Theme JSON format:

{
  "base": "vs-dark",
  "inherit": true,
  "rules": [
    {
      "token": "comment",
      "foreground": "6A9955"
    },
    {
      "token": "keyword",
      "foreground": "569CD6"
    }
  ],
  "colors": {
    "editor.background": "#1E1E1E",
    "editor.foreground": "#D4D4D4"
  }
}

Theme URLs

Use external theme files:

?editorTheme=https://example.com/my-theme.json

Theme Configuration

Via Config Object

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    theme: 'dark',
    editorTheme: 'vs-dark'
  }
});

Via URL Parameters

# Dark app theme with Monokai editor
?theme=dark&editorTheme=monokai

# Light app with GitHub theme
?theme=light&editorTheme=github

Per-Editor Themes

Set different themes for different editors:

{
  "editorTheme": [
    "monaco:dracula@dark",     // Monaco editor, dark mode
    "codemirror:gruvbox@dark", // CodeMirror, dark mode
    "vs-light@light"           // Light mode fallback
  ]
}

Format: editor:theme@mode

• editor: monaco, codemirror, or codejar (optional)
• theme: Theme name
• mode: light or dark (optional)

Syntax Highlighting

Language-Specific Colors

Each theme provides colors for:

Keywords

const, let, if, return

Colored based on theme

Strings

"text", 'text', `template`

Distinct string color

Comments

// Single line
/* Multi-line */

Muted comment color

Functions

function name() {}

Function name highlighting

Token Scopes

Themes support granular token highlighting:

• Variables
• Functions
• Classes
• Constants
• Operators
• Punctuation
• HTML tags
• CSS properties
• And more…

Accessibility

High Contrast Mode

For better visibility:

{
  "editorTheme": "hc-black" // High contrast dark
}

Features:

• Maximum contrast ratios
• WCAG AAA compliant
• Clear element boundaries
• Accessible colors

Font Settings

Customize for readability:

1. Font Size

   Adjust in Editor Settings:

   • Default: 14px (app) / 12px (embed)
   • Range: 8px - 30px
2. Font Family

   Choose monospace fonts:

   • Consolas
   • Monaco
   • Fira Code
   • JetBrains Mono
3. Ligatures

   Enable font ligatures for better code reading:

   != → ≠
   >= → ≥
   => → ⇒
   

Theme Persistence

Your theme preference is saved:

• In browser localStorage
• Persists across sessions
• Per-project settings available

Theme Examples

Dark Theme Projects

// Perfect for:
- Night coding sessions
- Presentations
- Video recordings
- Reducing eye strain

Light Theme Projects

// Ideal for:
- Daytime work
- Printing
- Screenshots
- Documentation

Creating Custom Themes

1. Use Theme Generator

   Visit VS Code theme generators:

   • Theme Studio
   • Theme Editor
2. Export JSON

   Download theme as JSON file

3. Host Theme

   Upload to:

   • GitHub Gist
   • GitHub Pages
   • Any CDN
4. Use in LiveCodes

   {
     "editorTheme": "https://gist.githubusercontent.com/.../theme.json"
   }
   

Theme Best Practices

1. Match App and Editor

   Use consistent dark/light themes:

   { theme: 'dark', editorTheme: 'vs-dark' }
   
2. Consider Audience

   • Presentations: High contrast
   • Tutorials: Clear, popular themes
   • Personal: Your preference
3. Test Readability

   Ensure code is readable in your theme:

   • Comments visible
   • Strings distinct
   • Keywords highlighted

Embedded Playground Themes

Control themes in embedded playgrounds:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    theme: 'dark',
    editorTheme: 'dracula'
  },
  params: {
    theme: 'dark' // Override app theme
  }
});

Theme URL Parameters

# Specific theme
?theme=dark&editorTheme=monokai

# Auto-detect system theme
?theme=auto

# Multiple editor themes
?editorTheme=dracula@dark,github@light

Troubleshooting

Theme not loading

• Check theme URL is accessible
• Verify JSON format is correct
• Ensure CORS headers allow access
• Try a different CDN

Colors look wrong

• Verify theme matches app mode (dark/light)
• Check browser color settings
• Try different editor theme

Theme not persisting

• Check localStorage is enabled
• Clear browser cache
• Save in project config for permanent setting

Related Features

• Editor - Editor customization
• Embed - Theme in embeds
• Settings - All configuration options