Theming

orbit-ui uses CSS variables for full color customization. Create your own themes with a JSON config file.

Custom Themes

Create a JSON file with your theme definition:

{
  "name": "my-theme",
  "colors": {
    "background": "#0a0a0f",
    "foreground": "#fafafa",
    "primary": "#3087ed",
    "primary-foreground": "#ffffff",
    "border": "#1e1e3a",
    "ring": "#3087ed"
  },
  "gradient": {
    "gradient": "#3087ed",
    "gradient-highlight": "#3dc3fb",
    "gradient-shadow": "#015ecb",
    "gradient-opacity": 0.6,
    "glow-intensity": 0.3
  },
  "depth": {
    "highlight": "#ffffff",
    "highlight-opacity": 0.08,
    "inner-shadow": 0.3,
    "inner-gradient-direction": "to-bottom"
  },
  "radius": "0.75rem"
}

Gradient Settings

gradient — main gradient color used for the glass shine line

gradient-highlight — lighter version for reflections

gradient-shadow — darker version for depth and glow

gradient-opacity — visibility of the shine line (0-1)

glow-intensity — outer glow shadow strength (0-1)

Included Presets

Orbit Dark

Cyan-blue on dark

Orbit Light

Blue on white

Ocean Night

Teal on deep blue

Sunset Ember

Orange on warm dark

Emerald Dream

Emerald on dark green