theme
Add New Theme

XSite Add New Theme Guide

This guide explains how to add a new theme to the XSite platform. A theme is a JSON configuration that defines light mode colors, dark mode colors, radius, shadows, sidebar colors, chart colors, and other design tokens used by Tailwind CSS and Shadcn-based components.

Overview

XSite themes are stored as structured JSON objects. Each theme contains:

  • name: Human-readable theme name
  • slug: Unique theme identifier
  • color: Primary preview color
  • lightTheme: Design tokens for light mode
  • darkTheme: Design tokens for dark mode

The theme values are usually based on CSS variables like:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(1 0 0);
}

Theme File Structure

A theme should follow this structure:

{
  "name": "Neon Flux",
  "slug": "neon-flux",
  "color": "#e12f22",
  "lightTheme": {},
  "darkTheme": {}
}

Example Theme

{
  "name": "Neon Flux",
  "slug": "neon-flux",
  "color": "#e12f22",
  "lightTheme": {
    "background": "oklch(1.0000 0 0)",
    "foreground": "oklch(0.1448 0 0)",
    "card": "oklch(0.9816 0.0017 247.8390)",
    "cardForeground": "oklch(0.1448 0 0)",
    "popover": "oklch(1.0000 0 0)",
    "popoverForeground": "oklch(0.1448 0 0)",
    "primary": "oklch(0.5712 0.2219 20.0874)",
    "primaryForeground": "oklch(1.0000 0 0)",
    "secondary": "oklch(0.3749 0.1590 260.6871)",
    "secondaryForeground": "oklch(1.0000 0 0)",
    "muted": "oklch(0.9683 0.0069 247.8956)",
    "mutedForeground": "oklch(0.5544 0.0407 257.4166)",
    "accent": "oklch(0.8391 0.1615 84.3763)",
    "accentForeground": "oklch(0 0 0)",
    "destructive": "oklch(0.6368 0.2078 25.3313)",
    "destructiveForeground": "oklch(1.0000 0 0)",
    "border": "oklch(0.9288 0.0126 255.5078)",
    "input": "oklch(0.9288 0.0126 255.5078)",
    "ring": "oklch(0.5712 0.2219 20.0874)",
    "chart1": "oklch(0.5712 0.2219 20.0874)",
    "chart2": "oklch(0.3749 0.1590 260.6871)",
    "chart3": "oklch(0.8391 0.1615 84.3763)",
    "chart4": "oklch(0.7227 0.1920 149.5793)",
    "chart5": "oklch(0.6268 0.2325 303.9004)",
    "sidebar": "oklch(0.9816 0.0017 247.8390)",
    "sidebarForeground": "oklch(0.1448 0 0)",
    "sidebarPrimary": "oklch(0.5712 0.2219 20.0874)",
    "sidebarPrimaryForeground": "oklch(1.0000 0 0)",
    "sidebarAccent": "oklch(0.3749 0.1590 260.6871)",
    "sidebarAccentForeground": "oklch(1.0000 0 0)",
    "sidebarBorder": "oklch(0.9288 0.0126 255.5078)",
    "sidebarRing": "oklch(0.5712 0.2219 20.0874)",
    "radius": "0.375rem",
    "shadow2xs": "0px 4px 10px -3px hsl(0 0% 0% / 0.05)",
    "shadowXs": "0px 4px 10px -3px hsl(0 0% 0% / 0.05)",
    "shadowSm": "0px 4px 10px -3px hsl(0 0% 0% / 0.10), 0px 1px 2px -4px hsl(0 0% 0% / 0.10)",
    "shadow": "0px 4px 10px -3px hsl(0 0% 0% / 0.10), 0px 1px 2px -4px hsl(0 0% 0% / 0.10)",
    "shadowMd": "0px 4px 10px -3px hsl(0 0% 0% / 0.10), 0px 2px 4px -4px hsl(0 0% 0% / 0.10)",
    "shadowLg": "0px 4px 10px -3px hsl(0 0% 0% / 0.10), 0px 4px 6px -4px hsl(0 0% 0% / 0.10)",
    "shadowXl": "0px 4px 10px -3px hsl(0 0% 0% / 0.10), 0px 8px 10px -4px hsl(0 0% 0% / 0.10)",
    "shadow2xl": "0px 4px 10px -3px hsl(0 0% 0% / 0.25)"
  },
  "darkTheme": {
    "background": "oklch(0.1857 0.0480 268.6748)",
    "foreground": "oklch(0.9842 0.0034 247.8575)",
    "card": "oklch(0.2290 0.0544 266.8142)",
    "cardForeground": "oklch(0.9842 0.0034 247.8575)",
    "popover": "oklch(0.1857 0.0480 268.6748)",
    "popoverForeground": "oklch(0.9842 0.0034 247.8575)",
    "primary": "oklch(0.5899 0.2280 19.0135)",
    "primaryForeground": "oklch(1.0000 0 0)",
    "secondary": "oklch(0.2509 0.0888 277.0052)",
    "secondaryForeground": "oklch(1.0000 0 0)",
    "muted": "oklch(0.2795 0.0368 260.0310)",
    "mutedForeground": "oklch(0.7107 0.0351 256.7878)",
    "accent": "oklch(1 0 0)",
    "accentForeground": "oklch(0 0 0)",
    "destructive": "oklch(0.3958 0.1331 25.7230)",
    "destructiveForeground": "oklch(1.0000 0 0)",
    "border": "oklch(0.2795 0.0368 260.0310)",
    "input": "oklch(0.2795 0.0368 260.0310)",
    "ring": "oklch(0.6502 0.2377 18.0011)",
    "chart1": "oklch(0.6502 0.2377 18.0011)",
    "chart2": "oklch(0.6231 0.1880 259.8145)",
    "chart3": "oklch(0.9052 0.1657 98.1108)",
    "chart4": "oklch(0.8003 0.1821 151.7110)",
    "chart5": "oklch(0.7217 0.1767 305.5038)",
    "sidebar": "oklch(0.1698 0.0408 268.3692)",
    "sidebarForeground": "oklch(0.9842 0.0034 247.8575)",
    "sidebarPrimary": "oklch(0.6502 0.2377 18.0011)",
    "sidebarPrimaryForeground": "oklch(1.0000 0 0)",
    "sidebarAccent": "oklch(0.6231 0.1880 259.8145)",
    "sidebarAccentForeground": "oklch(1.0000 0 0)",
    "sidebarBorder": "oklch(0.2795 0.0368 260.0310)",
    "sidebarRing": "oklch(0.6502 0.2377 18.0011)",
    "radius": "0.375rem",
    "shadow2xs": "0px 8px 15px 0px hsl(0 0% 0% / 0.25)",
    "shadowXs": "0px 8px 15px 0px hsl(0 0% 0% / 0.25)",
    "shadowSm": "0px 8px 15px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50)",
    "shadow": "0px 8px 15px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50)",
    "shadowMd": "0px 8px 15px 0px hsl(0 0% 0% / 0.50), 0px 2px 4px -1px hsl(0 0% 0% / 0.50)",
    "shadowLg": "0px 8px 15px 0px hsl(0 0% 0% / 0.50), 0px 4px 6px -1px hsl(0 0% 0% / 0.50)",
    "shadowXl": "0px 8px 15px 0px hsl(0 0% 0% / 0.50), 0px 8px 10px -1px hsl(0 0% 0% / 0.50)",
    "shadow2xl": "0px 8px 15px 0px hsl(0 0% 0% / 1.25)"
  }
}
Guideui-builder v1.0.12