> ## 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 > Learn how to personalize the Project Editor with custom themes, color schemes, and syntax highlighting. Themes in Replit allow you to customize the appearance of the Project Editor, 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. Screenshot of the Replit themes editor showing color customization options ## Creating a custom theme Follow these steps to create and customize your own theme: 1. Open [Settings](https://replit.com/settings) and go to **User** → **Personalization** (or 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. 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. | 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 | ## 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 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 ## Managing your themes Access and manage all your installed themes in [Settings](https://replit.com/settings) under **User** → **Personalization** (or 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**. Only custom themes that you've created can be edited or deleted. Default themes and themes created by others cannot be modified. ### 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 the Project Editor. ## Porting from VS Code Import your favorite VS Code themes to Replit by mapping equivalent colors during the theme creation process.