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)ZIP package — ready to use