Theme Documentation

This guide explains how to create custom themes for LYTE.

Quick Start

1. Copy demo_theme.json.demo and rename it to your_theme_name.json
2. Find the name key in the JSON ("name": "Demo Theme") and change it to your theme
3. Edit the color and style values to your liking
4. Save the file in the themes folder:
   • Exe installation: %LOCALAPPDATA%\LYTE\themes\
   • Portable installation: themes\ (relative to application directory)
5. Restart LYTE - your theme will appear in the theme dropdown menu

Basic Structure

A theme file is a JSON file with the following structure:

{
    "name": "Your Theme Name",
    "colors": {
        "Element1Name": [R, G, B, A],
        "Element2Name": [R, G, B, A]
    },
    "styles": {
        "Element1Name": Value,
        "Element2Name": Value
    }
}

File Naming

• Theme files must end with .json (e.g., my_theme.json)
• The filename (without .json) becomes the theme identifier
• Example: ocean_theme.json creates a theme named ocean_theme
• See demo_theme.json.demo for a complete example (rename it to .json to use it)

Theme Folder Location

Theme files are stored in the themes folder:

• Exe installation: %localappdata%\LYTE\themes\
• Portable installation: themes\ (relative to application directory)

Note: %LOCALAPPDATA% typically expands to C:\Users\<YourUsername>\AppData\Local\ on Windows.

Color Values

All colors are in RGBA format: [Red, Green, Blue, Alpha]

• Each value ranges from 0-255
• Alpha controls transparency: 255 = fully opaque, 0 = fully transparent
• Example: [255, 0, 0, 255] = solid red, [255, 0, 0, 128] = semi-transparent red

Available Colors

All color properties available in LYTE themes. Colors are applied to different UI elements in the DearPyGui interface.

Style Values

Style properties control the appearance and spacing of UI elements. These values affect the visual style rather than colors.

Tips

• Use a color picker tool to get RGB values from images or websites
• Test your theme with both light and dark content to ensure readability
• Keep contrast ratios high for text readability
• Alpha values (transparency) work best for backgrounds, not text
• Rounding values of 0.0 create sharp, modern corners
• Higher rounding values (8-12) create softer, more rounded corners

Example Theme File

{
  "name": "Demo Theme",
  "colors": {
    "WindowBg": [25, 25, 25, 255],
    "FrameBg": [35, 35, 35, 255],
    "Button": [60, 70, 60, 255],
    "ButtonHovered": [80, 120, 80, 255],
    "ButtonActive": [100, 150, 100, 255],
    "Text": [220, 220, 220, 255],
    "SliderGrab": [100, 150, 100, 255],
    "SliderGrabActive": [120, 180, 120, 255],
    "Header": [40, 40, 40, 255],
    "HeaderHovered": [80, 120, 80, 255],
    "HeaderActive": [100, 150, 100, 255],
    "ScrollbarBg": [35, 35, 35, 128],
    "ScrollbarGrab": [60, 70, 60, 255],
    "ScrollbarGrabHovered": [80, 120, 80, 255],
    "ScrollbarGrabActive": [100, 150, 100, 255],
    "CheckMark": [100, 150, 100, 255],
    "Tab": [60, 70, 60, 255],
    "TabHovered": [80, 120, 80, 255],
    "TabActive": [100, 150, 100, 255],
    "TitleBg": [25, 25, 25, 255],
    "TitleBgActive": [40, 50, 40, 255],
    "TitleBgCollapsed": [25, 25, 25, 128],
    "MenuBarBg": [30, 30, 30, 255],
    "Border": [70, 90, 70, 255],
    "Separator": [70, 90, 70, 255],
    "PopupBg": [35, 35, 35, 240],
    "TextSelectedBg": [80, 120, 80, 150]
  },
  "styles": {
    "FrameRounding": 8,
    "FrameBorderSize": 0.5,
    "WindowRounding": 12,
    "ScrollbarSize": 12,
    "ScrollbarRounding": 8,
    "TabRounding": 8,
    "GrabRounding": 8,
    "ChildRounding": 8,
    "PopupRounding": 8,
    "ItemSpacing": [8, 6],
    "ItemInnerSpacing": [6, 6]
  }
}