JSON Themes

JSON themes use a structured format with colors and styles keys. The theme engine converts them to Qt stylesheets (QSS) and applies them to the application.

← Back to Theme Documentation overview · QSS Themes →

Quick Start

1. Copy demo_theme.json.demo and rename to your_theme_name.json
2. Find the name key and change it to your theme name
3. Edit the color and style values to your liking
4. Save in the themes folder:
   • Exe installation: %LOCALAPPDATA%\LYTE\themes\
   • Portable installation: themes\ (relative to application directory)
5. Use View → Reload themes to add new themes without restarting

Basic Structure

A JSON theme file has 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 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 JSON themes. Colors are applied to UI elements in the PySide6/Qt interface via stylesheets.

Style Values

Style properties control appearance and spacing. Mapped to Qt stylesheet properties (border-radius, padding, etc.).

Tips

• Higher rounding values (8–12) create softer corners
• Rounding of 0 creates sharp, modern corners
• Alpha works best for backgrounds, not text
• Keep contrast high for text readability
• Use a color picker to get RGB values from images
• Use View → Reload themes after editing

Example Theme File

The demo_theme.json.demo uses a blue/ocean palette. Rename to .json to use:

{
  "name": "Demo Theme",
  "colors": {
    "WindowBg": [18, 24, 34, 255],
    "FrameBg": [30, 40, 56, 255],
    "Button": [40, 90, 160, 255],
    "ButtonHovered": [55, 120, 200, 255],
    "ButtonActive": [35, 95, 170, 255],
    "Text": [220, 230, 245, 255],
    "SliderGrab": [70, 140, 220, 255],
    "SliderGrabActive": [90, 160, 240, 255],
    "Header": [35, 50, 75, 255],
    "HeaderHovered": [55, 120, 200, 255],
    "HeaderActive": [40, 90, 160, 255],
    "ScrollbarBg": [18, 24, 34, 180],
    "ScrollbarGrab": [60, 120, 190, 255],
    "ScrollbarGrabHovered": [80, 150, 220, 255],
    "ScrollbarGrabActive": [55, 110, 180, 255],
    "CheckMark": [100, 160, 240, 255],
    "Tab": [30, 40, 56, 255],
    "TabHovered": [55, 120, 200, 255],
    "TabActive": [40, 90, 160, 255],
    "TitleBg": [22, 28, 40, 255],
    "TitleBgActive": [30, 40, 56, 255],
    "TitleBgCollapsed": [22, 28, 40, 180],
    "MenuBarBg": [25, 32, 48, 255],
    "Border": [45, 60, 95, 255],
    "Separator": [45, 60, 95, 255],
    "PopupBg": [20, 26, 38, 245],
    "TextSelectedBg": [55, 120, 200, 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]
  }
}