Skip to content
Showcase Ecosystem Docs

Theme Selection

Theme Selection

Discover and customize your visual experience with OpenCode’s theme options. Personalizing your workspace can significantly enhance your productivity and reduce eye strain during long coding sessions.

Available Themes

OpenCode offers three primary theme options to suit different preferences and working environments.

Dark Theme

A modern dark theme with a sleek interface, ideal for low-light environments and night coding sessions.

Features:

  • Dark background with high-contrast text
  • Reduced eye strain in dimly lit spaces
  • Modern, professional appearance
  • Optimized for extended coding sessions

Preview:

Dark Theme Preview

Light Theme

A clean light theme with a bright, airy interface, perfect for well-lit spaces and those who prefer a traditional coding environment.

Features:

  • Light background with dark text
  • Clear visibility in bright environments
  • Familiar, traditional coding appearance
  • Optimized for daytime use

Preview:

Light Theme Preview

System Theme

Automatically adapts to your operating system’s theme setting, providing a seamless experience across your devices.

Features:

  • Synchronizes with your OS theme
  • Consistent experience across applications
  • Automatically adjusts to day/night cycles
  • No manual switching required

How it works: When set to system, OpenCode will:

  1. Detect your operating system’s current theme
  2. Apply the corresponding OpenCode theme
  3. Automatically update when your OS theme changes

Theme Configuration

Basic Theme Setup

Configure your theme in the OpenCode configuration file:

{
  "theme": "dark" // Options: dark, light, system
}

Quick Theme Switching

You can quickly switch themes using the command palette:

  1. Press Ctrl/Cmd + Shift + P to open the command palette
  2. Type “Theme”
  3. Select “Switch Theme”
  4. Choose your preferred theme from the list

Theme Switching Shortcut

For even faster theme switching, you can assign a keyboard shortcut:

# .opencode
shortcuts:
  toggle_theme: "Ctrl+T"

Custom Themes

For advanced users, OpenCode supports fully customizable themes through CSS variables. Create a theme that perfectly matches your style and preferences.

Custom Theme Configuration

# .opencode
theme:
  primary: "#4f46e5"      # Primary accent color
  secondary: "#10b981"    # Secondary accent color
  background: "#111827"   # Background color
  text: "#f9fafb"         # Text color
  accent: "#f59e0b"       # Accent color
  border: "#374151"       # Border color
  hover: "#1f2937"        # Hover state color
  selection: "#3b82f6"     # Selection color

Theme Color Guidelines

When creating custom themes, consider these best practices:

  • Contrast Ratio: Ensure text is easily readable against the background (aim for at least 4.5:1 ratio)
  • Color Harmony: Use colors that complement each other
  • Accessibility: Consider color blindness and other visual impairments
  • Consistency: Maintain consistent color usage across the interface

Sharing Custom Themes

You can share your custom themes with the OpenCode community:

  1. Export your theme configuration
  2. Share it on the OpenCode Community Forum
  3. Tag your post with “theme”

Theme Recommendations

For Different Environments

EnvironmentRecommended ThemeReason
Night codingDarkReduces eye strain in low light
Daytime officeLightBetter visibility in bright spaces
Mixed lightingSystemAutomatically adjusts to conditions
PresentationsLightMore visible on projectors/screens

For Different Coding Tasks

TaskRecommended ThemeReason
DebuggingDarkHighlights syntax errors more clearly
DocumentationLightMore comfortable for reading long text
Pair programmingSystemAdapts to the environment shared by both developers
Design workLightBetter color accuracy for UI development

Performance Considerations

While theme selection is primarily a matter of personal preference, there are some performance considerations:

  • Dark themes may consume slightly less power on OLED displays
  • Light themes may be more battery-efficient on LCD displays
  • System themes have minimal overhead, as they only check your OS setting when needed

Frequently Asked Questions

Can I create multiple custom themes?

Yes, you can create multiple theme configurations and switch between them as needed.

How do I reset to the default theme?

Simply set your theme to dark, light, or system in your configuration file.

Will themes affect code performance?

No, theme selection has no impact on code execution performance. It only affects the visual interface.

Can I schedule theme changes?

Currently, OpenCode doesn’t have built-in scheduling for theme changes, but you can use the system theme option to have it automatically follow your OS settings, which may include scheduled changes.

Conclusion

OpenCode’s flexible theme system allows you to create a coding environment that perfectly matches your preferences and working conditions. Whether you prefer a dark theme for night coding, a light theme for daytime work, or the convenience of the system theme, OpenCode has you covered.

Experiment with different themes to find the one that works best for you, and don’t hesitate to create custom themes that reflect your personal style. A well-chosen theme can make your coding experience more enjoyable and productive.