Menu
Customize the visual appearance of your Orderly DEX with CSS variables, colors, fonts, logos, and TradingView chart styling.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Agent onboarding for Orderly Network - omnichain perpetual futures infrastructure, MCP server, skills, and developer quickstart
Create and manage a custom white-label DEX using Orderly One - launch paths, deployment, custom domains, graduation, theming, and admin operations
Complete authentication guide for Orderly Network - EIP-712 wallet signatures for EVM accounts, Ed25519 message signing for Solana accounts, and Ed25519 signatures for API requests
Handle token deposits and withdrawals across chains, including allowance approval, vault interactions, and cross-chain operations
Monitor positions in real-time, configure Take-Profit/Stop-Loss orders, and manage risk with leverage settings
Place, manage, and cancel orders using REST API or SDK hooks. Covers market, limit, IOC, FOK, POST_ONLY order types and batch operations
Based on SOC occupation classification
| name | orderly-sdk-theming |
| description | Customize the visual appearance of your Orderly DEX with CSS variables, colors, fonts, logos, and TradingView chart styling. |
Customize the look and feel of your DEX using CSS variables, the theme provider, and component overrides.
Orderly UI uses a CSS variable-based theming system with Tailwind CSS integration:
All UI components use CSS variables prefixed with --oui-. Override them in your CSS to customize the theme.
/* src/styles/theme.css */
:root {
/* BRAND COLORS */
--oui-color-primary: 99 102 241;
--oui-color-primary-light: 165 180 252;
--oui-color-primary-darken: 79 70 229;
--oui-color-primary-contrast: 255 255 255;
--oui-color-link: 99 102 241;
--oui-color-link-light: 165 180 252;
/* SEMANTIC COLORS */
--oui-color-success: 34 197 94;
--oui-color-success-light: 134 239 172;
--oui-color-success-darken: 22 163 74;
--oui-color-success-contrast: 255 255 255;
--oui-color-danger: 239 68 68;
--oui-color-danger-light: 252 165 165;
--oui-color-danger-darken: 220 38 38;
--oui-color-danger-contrast: 255 255 255;
--oui-color-warning: 245 158 11;
--oui-color-warning-light: 252 211 77;
--oui-color-warning-darken: 217 119 6;
--oui-color-warning-contrast: 255 255 255;
/* TRADING COLORS */
--oui-color-trading-profit: 34 197 94;
--oui-color-trading-loss: 239 68 68;
/* BACKGROUND SCALE (dark theme: 1=lightest, 10=darkest) */
--oui-color-base-1: 100 116 139;
--oui-color-base-2: 71 85 105;
--oui-color-base-3: 51 65 85;
--oui-color-base-4: 45 55 72;
--oui-color-base-5: 39 49 66;
--oui-color-base-6: 30 41 59;
--oui-color-base-7: 24 33 47;
--oui-color-base-8: 18 26 38;
--oui-color-base-9: 15 23 42;
--oui-color-base-10: 10 15 30;
--oui-color-base-foreground: 255 255 255;
--oui-color-line: 255 255 255;
--oui-color-fill: 30 41 59;
--oui-color-fill-active: 39 49 66;
/* GRADIENTS */
--oui-gradient-primary-start: 79 70 229;
--oui-gradient-primary-end: 139 92 246;
/* TYPOGRAPHY */
--oui-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* BORDER RADIUS */
--oui-rounded-sm: 2px;
--oui-rounded: 4px;
--oui-rounded-md: 6px;
--oui-rounded-lg: 8px;
--oui-rounded-xl: 12px;
--oui-rounded-2xl: 16px;
--oui-rounded-full: 9999px;
}
/* src/styles/index.css */
@import '@orderly.network/ui/dist/styles.css';
@import './theme.css';
@import './fonts.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
Note: CSS variables use space-separated RGB values (e.g.,
99 102 241) notrgb()syntax. This allows Tailwind to apply opacity modifiers.
| Variable | Usage |
|---|---|
--oui-color-primary | Primary buttons, active states, accents |
--oui-color-primary-light | Hover states, secondary highlights |
--oui-color-primary-darken | Active/pressed states |
--oui-color-primary-contrast | Text on primary backgrounds |
--oui-color-link | Link text color |
| Variable | Usage |
|---|---|
--oui-color-success | Profit, positive values, success messages |
--oui-color-danger | Loss, negative values, errors, sell buttons |
--oui-color-warning | Warnings, alerts, caution states |
| Variable | Usage |
|---|---|
--oui-color-trading-profit | Green for profits in orderbook, PnL |
--oui-color-trading-loss | Red for losses in orderbook, PnL |
base-1 (lightest) → base-10 (darkest)
| Variable | Usage |
|---|---|
--oui-color-base-1 to base-3 | Muted/disabled text |
--oui-color-base-4 to base-5 | Borders, dividers |
--oui-color-base-6 to base-7 | Card/panel backgrounds |
--oui-color-base-8 to base-9 | Page backgrounds |
--oui-color-base-10 | Darkest background |
/* src/styles/fonts.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Or use local font files */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/CustomFont-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
/* In theme.css */
:root {
--oui-font-family: 'CustomFont', 'Inter', sans-serif;
}
import { OrderlyAppProvider } from "@orderly.network/react-app";
<OrderlyAppProvider
brokerId="your_broker_id"
brokerName="Your DEX"
networkId="mainnet"
appIcons={{
main: {
img: "/logo.svg",
},
secondary: {
img: "/logo-small.svg",
},
}}
>
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</head>
Customize the backgrounds for the PnL sharing feature:
public/
├── pnl/
│ ├── profit-bg-1.png
│ ├── profit-bg-2.png
│ └── loss-bg-1.png
<TradingPage
symbol={symbol}
sharePnLConfig={{
backgroundImages: ['/pnl/profit-bg-1.png', '/pnl/profit-bg-2.png'],
color: 'rgba(255, 255, 255, 0.98)',
profitColor: 'rgb(34, 197, 94)',
lossColor: 'rgb(239, 68, 68)',
brandColor: 'rgb(99, 102, 241)',
}}
/>
Customize the TradingView chart to match your theme:
<TradingPage
symbol={symbol}
tradingViewConfig={{
scriptSRC: '/tradingview/charting_library/charting_library.js',
library_path: '/tradingview/charting_library/',
colorConfig: {
chartBG: '#0f172a',
upColor: '#22c55e',
downColor: '#ef4444',
pnlUpColor: '#22c55e',
pnlDownColor: '#ef4444',
textColor: '#e2e8f0',
},
overrides: {
'paneProperties.background': '#0f172a',
'scalesProperties.textColor': '#e2e8f0',
},
}}
/>
Use OrderlyThemeProvider for component-level customization:
import { OrderlyThemeProvider } from '@orderly.network/ui';
<OrderlyThemeProvider
overrides={{
button: {
primary: {
className: 'custom-primary-button',
},
},
input: {
className: 'custom-input',
},
}}
>
{children}
</OrderlyThemeProvider>;
import type { Config } from 'tailwindcss';
import { OUITailwind } from '@orderly.network/ui';
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/@orderly.network/**/*.{js,mjs}',
],
presets: [OUITailwind.preset],
theme: {
extend: {
colors: {
brand: {
500: '#6366f1',
600: '#4f46e5',
},
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
} satisfies Config;
:root {
--oui-font-family: 'Inter', sans-serif;
/* Brand - Cyan */
--oui-color-primary: 6 182 212;
--oui-color-primary-light: 103 232 249;
--oui-color-primary-darken: 8 145 178;
--oui-color-primary-contrast: 255 255 255;
--oui-color-link: 34 211 238;
/* Trading */
--oui-color-trading-profit: 34 197 94;
--oui-color-trading-loss: 239 68 68;
/* Dark backgrounds */
--oui-color-base-6: 17 24 39;
--oui-color-base-7: 17 24 39;
--oui-color-base-8: 10 15 25;
--oui-color-base-9: 5 10 20;
--oui-color-base-10: 0 5 15;
/* Gradients */
--oui-gradient-primary-start: 8 145 178;
--oui-gradient-primary-end: 34 211 238;
}
99 102 241)