# Source: https://docs.replit.com/replit-workspace/replit-themes.md

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replit Themes

> Personalize your workspace with custom color schemes, syntax highlighting, and UI preferences, or explore and use themes created by the community.

Themes in Replit allow you to customize the appearance of your workspace, from background colors and UI elements to syntax highlighting for your code. Personalize your development environment for better readability, reduced eye strain, and a more enjoyable coding experience.

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=c281da129853b7482f8c89f75777f415" alt="Screenshot of the Replit themes editor showing color customization options" data-og-width="1920" width="1920" data-og-height="1080" height="1080" data-path="images/workspace/themes.jpg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=280&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=315286886b57dbef0b7011b2dbc4d1e4 280w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=560&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=50742bbb8a5fccccb8039e9163369992 560w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=840&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=362901fe6a236a6f796b09c0439e6eec 840w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=1100&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=be23fc532fcbb8bb7c6423a9af929c53 1100w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=1650&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=88b25b3834666ff17a263827b992fc16 1650w, https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?w=2500&fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=60372dd0ad95fe8263ae91a5343eb951 2500w" />
</Frame>

## Creating a custom theme

Follow these steps to create and customize your own theme:

1. Navigate to your [account page](https://replit.com/account) and scroll to the **Themes** section
2. Select **Create new theme**
3. Enter a title, select a color scheme (light or dark), and add an optional description
4. Select **Create Theme** to open the Themes Editor

Global theme settings control the overall UI appearance:

* **Background**: Sets the base color for most UI surfaces
* **Outline**: Controls the color of borders and dividers
* **Foreground**: Determines text and icon colors
* **Primary**: Defines the color for buttons and interactive elements
* **Positive**: Applies to success indicators like the **Run** button
* **Negative**: Displays for errors and destructive action warnings

Select **Apply Theme** to start using your custom theme immediately.

## Syntax highlighting

Customize how different code elements appear to improve readability and comprehension.

<Tip>
  Proper syntax highlighting makes code easier to scan and understand at a glance. Choose colors that work well together and provide sufficient contrast against your background.
</Tip>

<Accordion title="Syntax highlighting elements">
  | Element                  | Description                                                            |
  | ------------------------ | ---------------------------------------------------------------------- |
  | **Variable Names**       | Applies to variables where no declaration keyword is used              |
  | **Variable Definitions** | Colors variable names when defined with keywords like `const` or `var` |
  | **Function References**  | Applies when calling functions                                         |
  | **Function Definitions** | Colors function names during declaration                               |
  | **Keywords**             | Highlights language keywords like `import`, `function`, and `return`   |
  | **Property Names**       | Colors property access from variables                                  |
  | **Property Definitions** | Used when defining object properties                                   |
  | **Function Properties**  | Applies when calling methods on objects                                |
  | **Tag Names**            | Used for HTML and JSX tags                                             |
  | **Type Names**           | Colors type annotations in typed languages                             |
  | **Class Names**          | Applies to class declarations and references                           |
  | **Attribute Names**      | Highlights HTML and JSX attributes                                     |
  | **Comments**             | Applies to all code comments                                           |
  | **Strings**              | Colors string literals                                                 |
  | **Numbers**              | Highlights numeric values                                              |
  | **Booleans**             | Formats boolean values (`true`/`false`)                                |
  | **Regular Expressions**  | Colors regex patterns                                                  |
  | **Operators**            | Highlights operators like `+`, `-`, `*`, and `/`                       |
  | **Brackets**             | Colors square and angle brackets when appropriate                      |
</Accordion>

## Theme design best practices

Create visually appealing and functional themes by following these guidelines:

### Color and contrast

* **Balance contrast**: Ensure sufficient difference between background and foreground elements
* **Create cohesive palettes**: Choose colors that complement each other rather than clash
* **Maintain consistent brightness**: Keep a similar brightness level across syntax elements
* **Design for accessibility**: Consider users with visual impairments by avoiding low-contrast combinations

<Warning>
  Common theme design issues to avoid:

  * Excessive brightness differences between syntax elements
  * Poorly matched colors that create visual discord
  * Insufficient contrast between code and background
</Warning>

## Managing your themes

Access and manage all your installed themes from your [account settings](https://replit.com/account) under the **Themes** section.

### Switching themes

Select the button next to a theme's title to activate it as your current theme.

### Editing themes

Modify your custom themes by selecting the three-dot menu and clicking **Edit**.

<Note>
  Only custom themes that you've created can be edited or deleted. Default themes and themes created by others cannot be modified.
</Note>

### Deleting themes

Remove custom themes using the three-dot menu and selecting **Delete**.

## Exploring community themes

Discover themes created by the Replit community on the [Themes Explore Page](https://replit.com/themes).

### Finding themes

* Search by name to find specific themes like "Atom One Dark"
* Filter by author to explore themes from specific creators
* Browse by color scheme to find light or dark themes
* Search by specific colors to match your preferences

Preview any theme before installing it to see how it will look in your workspace.

## Porting from VS Code

Import your favorite VS Code themes to Replit by mapping equivalent colors during the theme creation process.

<Frame>
  <iframe width="100%" height="400" src="https://www.loom.com/embed/ba4eb90eb3dd4ec7802954bf695b9c82?sid=4a5274a2-cfd7-4f2b-9c11-f54d7a56eb7f" frameborder="0" allowfullscreen />
</Frame>

## Publishing your theme

Share your custom themes with the Replit community by following these steps:

1. Open the Themes Editor for your custom theme
2. Select the **Publish** button
3. Complete the title and description fields
4. Submit your theme

Once published, your theme will appear on the Themes Explore Page, where other users can preview and install it.

## Related resources

* [Workspace features](/replit-workspace/workspace-features/console) - Explore other workspace features like Console, Shell, and Multiplayer
* [User settings](/replit-workspace/workspace-features/user-settings) - Configure your workspace preferences
* [Keyboard shortcuts](/replit-workspace/keyboard-shortcuts) - Speed up your workflow with keyboard shortcuts
* [Multiplayer collaboration](/replit-workspace/workspace-features/multiplayer) - Collaborate in real-time with team members