Skip to main content
Zep provides a comprehensive theming system through the ZepTheme class, allowing you to customize every aspect of the editor’s appearance including syntax highlighting, UI colors, and unique identifier colors.

​
ZepTheme Class

The ZepTheme class manages all color definitions for the editor. It supports both dark and light themes out of the box.
Zep comes with built-in dark and light themes. You can also create completely custom themes by extending ZepTheme or modifying colors at runtime.

​
Theme Types

Zep includes two pre-configured themes:
enum class ThemeType
{
    Dark,   // Dark background theme (default)
    Light   // Light background theme  
};

// Switch themes
ZepTheme theme;
theme.SetThemeType(ThemeType::Dark);
theme.SetThemeType(ThemeType::Light);

ThemeType current = theme.GetThemeType();

​
Theme Colors

The ThemeColor enum defines all available color categories:

​
Editor Colors

ThemeColor::Background              // Main editor background
ThemeColor::Text                    // Default text color
ThemeColor::TextDim                 // Dimmed text
ThemeColor::HiddenText              // Hidden/invisible text
ThemeColor::CursorLineBackground    // Current line highlight

​
Cursor Colors

ThemeColor::CursorNormal   // Normal mode cursor (block)
ThemeColor::CursorInsert   // Insert mode cursor (bar)

​
Line Numbers

ThemeColor::LineNumberBackground  // Line number gutter background
ThemeColor::LineNumber            // Line number text
ThemeColor::LineNumberActive      // Active line number

​
Syntax Highlighting

ThemeColor::Normal       // Normal text
ThemeColor::Keyword      // Language keywords (if, for, while)
ThemeColor::Identifier   // Function/variable names  
ThemeColor::Number       // Numeric literals
ThemeColor::String       // String literals
ThemeColor::Comment      // Comments
ThemeColor::Whitespace   // Whitespace markers
ThemeColor::HiddenChar   // Hidden characters
ThemeColor::Parenthesis  // Parentheses, brackets, braces

​
UI Elements

ThemeColor::TabActive           // Active tab
ThemeColor::TabInactive         // Inactive tabs
ThemeColor::TabBorder           // Tab borders  
ThemeColor::AirlineBackground   // Status bar background
ThemeColor::Mode                // Mode indicator
ThemeColor::WidgetBackground    // Widget backgrounds
ThemeColor::WidgetBorder        // Widget borders
ThemeColor::WidgetActive        // Active widget
ThemeColor::WidgetInactive      // Inactive widget

​
Diagnostics

ThemeColor::Error      // Error markers/text  
ThemeColor::Warning    // Warning markers
ThemeColor::Info       // Info markers

​
Special

ThemeColor::Light         // Foreground for light mode
ThemeColor::Dark          // Foreground for dark mode
ThemeColor::FlashColor    // Temporary highlights
ThemeColor::VisualSelectBackground  // Visual mode selection

​
Unique Colors

ThemeColor::UniqueColor0 through UniqueColor15
// Pre-generated distinguishable colors for syntax elements

​
Using Themes

ZepTheme& theme = editor.GetTheme();

// Get a color (returns NVec4f with RGBA components 0-1)
const NVec4f& bgColor = theme.GetColor(ThemeColor::Background);
const NVec4f& keywordColor = theme.GetColor(ThemeColor::Keyword);

// Colors are RGBA vectors
float red = bgColor.x;
float green = bgColor.y;  
float blue = bgColor.z;
float alpha = bgColor.w;

ZepTheme& theme = editor.GetTheme();

// Set individual colors (RGBA values from 0.0 to 1.0)
theme.SetColor(ThemeColor::Background, NVec4f(0.1f, 0.1f, 0.15f, 1.0f));
theme.SetColor(ThemeColor::Keyword, NVec4f(0.3f, 0.7f, 1.0f, 1.0f));
theme.SetColor(ThemeColor::String, NVec4f(0.9f, 0.6f, 0.3f, 1.0f));

// Or use RGB with auto-alpha
theme.SetColor(ThemeColor::Comment, NVec4f(0.4f, 0.4f, 0.4f, 1.0f));
Color values are floats from 0.0 to 1.0, not 0-255. Divide RGB values by 255 to convert.

​
Creating Custom Themes

Extend ZepTheme to create a custom theme:
class MyCustomTheme : public ZepTheme
{
public:
    MyCustomTheme()
    {
        // Set custom colors
        SetupCustomColors();
    }
    
    void SetupCustomColors()
    {
        // Background and text
        SetColor(ThemeColor::Background, NVec4f(0.05f, 0.05f, 0.08f, 1.0f));
        SetColor(ThemeColor::Text, NVec4f(0.9f, 0.9f, 0.95f, 1.0f));
        
        // Cursor  
        SetColor(ThemeColor::CursorNormal, NVec4f(0.5f, 0.7f, 1.0f, 0.8f));
        SetColor(ThemeColor::CursorInsert, NVec4f(1.0f, 1.0f, 1.0f, 0.9f));
        
        // Syntax - Monokai-inspired
        SetColor(ThemeColor::Keyword, NVec4f(0.98f, 0.15f, 0.45f, 1.0f));    // Pink
        SetColor(ThemeColor::String, NVec4f(0.9f, 0.86f, 0.45f, 1.0f));      // Yellow
        SetColor(ThemeColor::Number, NVec4f(0.68f, 0.51f, 1.0f, 1.0f));      // Purple  
        SetColor(ThemeColor::Comment, NVec4f(0.45f, 0.48f, 0.4f, 1.0f));     // Gray-green
        SetColor(ThemeColor::Identifier, NVec4f(0.4f, 0.85f, 0.94f, 1.0f));  // Cyan
        
        // Line numbers
        SetColor(ThemeColor::LineNumber, NVec4f(0.3f, 0.3f, 0.35f, 1.0f));
        SetColor(ThemeColor::LineNumberActive, NVec4f(0.6f, 0.6f, 0.7f, 1.0f));
        
        // Selection
        SetColor(ThemeColor::VisualSelectBackground, NVec4f(0.25f, 0.35f, 0.5f, 1.0f));
        
        // Diagnostics
        SetColor(ThemeColor::Error, NVec4f(1.0f, 0.3f, 0.3f, 1.0f));
        SetColor(ThemeColor::Warning, NVec4f(1.0f, 0.8f, 0.2f, 1.0f));
        SetColor(ThemeColor::Info, NVec4f(0.3f, 0.8f, 1.0f, 1.0f));
    }
};

// Use custom theme
auto customTheme = std::make_shared<MyCustomTheme>();
editor.SetTheme(customTheme);

​
Dark Theme Reference

From src/theme.cpp:41-78:
Background:              rgb(28, 28, 28)      // Dark gray
Text:                    rgb(255, 255, 255)   // White
TextDim:                 rgb(115, 115, 115)   // Medium gray

CursorNormal:            rgb(130, 140, 230)   // Blue-purple
CursorInsert:            rgb(255, 255, 255)   // White
CursorLineBackground:    rgb(64, 64, 64)      // Light gray

Keyword:                 rgb(26, 255, 255)    // Cyan
Identifier:              rgb(255, 191, 128)   // Orange  
Number:                  rgb(255, 255, 26)    // Yellow
String:                  rgb(255, 128, 255)   // Pink
Comment:                 rgb(0, 255, 26)      // Green

LineNumber:              rgb(33, 255, 33)     // Bright green
LineNumberActive:        rgb(33, 255, 33)     // Bright green

Error:                   rgb(166, 51, 38)     // Dark red
Warning:                 rgb(38, 51, 166)     // Dark blue  
Info:                    rgb(38, 153, 38)     // Dark green

VisualSelectBackground:  rgb(120, 77, 64)     // Brown

​
Light Theme Reference

From src/theme.cpp:80-117:
Background:              rgb(255, 255, 255)   // White
Text:                    rgb(0, 0, 0)         // Black
TextDim:                 rgb(140, 140, 140)   // Gray

CursorNormal:            rgb(130, 140, 230)   // Blue-purple
CursorInsert:            rgb(255, 255, 255)   // White  
CursorLineBackground:    rgb(217, 217, 217)   // Light gray

Keyword:                 rgb(26, 51, 77)      // Dark blue
Identifier:              rgb(51, 51, 26)      // Dark yellow
Number:                  rgb(26, 77, 51)      // Dark green
String:                  rgb(26, 26, 102)     // Dark blue
Comment:                 rgb(26, 102, 26)     // Dark green

LineNumber:              rgb(33, 102, 33)     // Medium green
LineNumberActive:        rgb(33, 153, 33)     // Bright green

Error:                   rgb(227, 51, 38)     // Bright red
Warning:                 rgb(38, 51, 227)     // Bright blue
Info:                    rgb(38, 217, 38)     // Bright green

VisualSelectBackground:  rgb(125, 153, 115)   // Green-gray

​
Unique Colors

Zep generates 16 unique, distinguishable colors using the golden ratio:
// Get a unique color by index
ThemeColor color = theme.GetUniqueColor(5);  // Returns UniqueColor5
const NVec4f& rgb = theme.GetColor(color);

// Use for syntax highlighting of different identifiers
for (int i = 0; i < numIdentifiers; i++)
{
    ThemeColor idColor = theme.GetUniqueColor(i);
    // Apply to identifier i
}
Implementation in src/theme.cpp:8-19:
// Colors generated using HSV with golden ratio conjugate
double golden_ratio_conjugate = 0.618033988749895;
double h = .85f;
for (int i = 0; i < 16; i++)
{
    h += golden_ratio_conjugate;
    h = std::fmod(h, 1.0);
    m_uniqueColors.emplace_back(HSVToRGB(h * 360.0f, 0.6f, 200.0f));
}

​
Helper Functions

// Get complementary color (for good contrast)
NVec4f complement = theme.GetComplement(
    theme.GetColor(ThemeColor::Background)
);

// With adjustment
NVec4f adjusted = theme.GetComplement(
    baseColor,
    NVec4f(0.1f, 0.1f, 0.1f, 0.0f)  // Adjust by this amount
);
The complement function returns light color for dark backgrounds and dark color for light backgrounds, ensuring good contrast.

​
Complete Example

class SolarizedDarkTheme : public ZepTheme
{
public:
    SolarizedDarkTheme()
    {
        // Solarized dark base colors  
        NVec4f base03(0.0f, 0.169f, 0.212f, 1.0f);      // Background
        NVec4f base02(0.027f, 0.212f, 0.259f, 1.0f);    // Background highlights
        NVec4f base01(0.345f, 0.431f, 0.459f, 1.0f);    // Comments
        NVec4f base0(0.514f, 0.580f, 0.588f, 1.0f);     // Body text
        NVec4f base1(0.576f, 0.631f, 0.631f, 1.0f);     // Emphasized
        
        // Accent colors
        NVec4f yellow(0.710f, 0.537f, 0.0f, 1.0f);
        NVec4f orange(0.796f, 0.294f, 0.086f, 1.0f);
        NVec4f red(0.863f, 0.196f, 0.184f, 1.0f);
        NVec4f magenta(0.827f, 0.212f, 0.510f, 1.0f);
        NVec4f violet(0.424f, 0.443f, 0.769f, 1.0f);
        NVec4f blue(0.149f, 0.545f, 0.824f, 1.0f);
        NVec4f cyan(0.165f, 0.631f, 0.596f, 1.0f);
        NVec4f green(0.522f, 0.600f, 0.0f, 1.0f);
        
        // Apply theme
        SetColor(ThemeColor::Background, base03);
        SetColor(ThemeColor::Text, base0);
        SetColor(ThemeColor::TextDim, base01);
        SetColor(ThemeColor::CursorLineBackground, base02);
        
        SetColor(ThemeColor::Keyword, green);
        SetColor(ThemeColor::Identifier, blue);
        SetColor(ThemeColor::Number, cyan);
        SetColor(ThemeColor::String, cyan);
        SetColor(ThemeColor::Comment, base01);
        
        SetColor(ThemeColor::Error, red);
        SetColor(ThemeColor::Warning, orange);
        SetColor(ThemeColor::Info, blue);
    }
};

​
Implementation Reference

The theming system is defined in:
  • include/zep/theme.h:11-102 - Theme structures and API
  • src/theme.cpp - Theme implementation with built-in themes

Syntax Extensions

Learn how syntax highlighting uses theme colors

Build docs developers (and LLMs) love

Get started for freeTalk to us