dvcrn Orderly Network: SDK Theming
Customize the look and feel of your DEX using CSS variables, the theme provider, and component overrides.
When to Use
- Rebranding your DEX
- Changing color schemes
- Adding custom fonts
- Styling TradingView charts
- Creating PnL share cards
Prerequisites
- Orderly SDK packages installed
- Tailwind CSS configured
- Basic CSS knowledge
Overview
Orderly UI uses a CSS variable-based theming system with Tailwind CSS integration:
- CSS Variables - Define colors, spacing, border radius
- Tailwind Preset - Orderly's custom Tailwind configuration
- OrderlyThemeProvider - Component-level overrides
- Assets - Logo, favicon, PnL backgrounds
1. CSS Variables
All UI components use CSS variables prefixed with --oui-. Override them in your CSS to customize the theme.
Create Theme File
/* 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;
}
Import Theme
/* 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.
2. Color Variable Reference
Brand Colors
| 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 |
Semantic Colors
| 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 |
Trading Colors
| Variable | Usage |
|---|---|
--oui-color-trading-profit |
Green for profits in orderbook, PnL |
--oui-color-trading-loss |
Red for losses in orderbook, PnL |
Background Scale
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 |
3. Custom Fonts
Add Custom Font
/* 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;
}
Apply Font
/* In theme.css */
:root {
--oui-font-family: 'CustomFont', 'Inter', sans-serif;
}
4. Logo & Assets
Configure App Icons
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",
},
}}
>
Favicon
<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>
5. PnL Share Backgrounds
Customize the backgrounds for the PnL sharing feature:
Add Background Images
public/
├── pnl/
│ ├── profit-bg-1.png
│ ├── profit-bg-2.png
│ └── loss-bg-1.png
Configure in TradingPage
<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)',
}}
/>
6. TradingView Chart Colors
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',
},
}}
/>
7. Component Overrides
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>;
8. Tailwind Configuration
tailwind.config.ts
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;
9. Complete Theme Example
Blue/Cyan Theme
: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;
}
Best Practices
- Use RGB values - CSS variables use space-separated RGB (e.g.,
99 102 241) - Import order matters - Import Orderly styles first, then your overrides
- Test all states - Verify hover, active, disabled states look correct
- Check accessibility - Ensure sufficient color contrast (WCAG 2.1)
- Test on mobile - Some components have different mobile styling
- Match TradingView - Keep chart colors consistent with your theme
Related Skills
- orderly-sdk-dex-architecture - Project structure
- orderly-sdk-install-dependency - Installing packages
- orderly-sdk-page-components - Using pre-built components