orderly-sdk-theming

Customize the visual appearance of your Orderly DEX with CSS variables, colors, fonts, logos, and TradingView chart styling.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "orderly-sdk-theming" with this command: npx skills add Tarnadas/orderly-sdk-theming

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:

  1. CSS Variables - Define colors, spacing, border radius
  2. Tailwind Preset - Orderly's custom Tailwind configuration
  3. OrderlyThemeProvider - Component-level overrides
  4. 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) not rgb() syntax. This allows Tailwind to apply opacity modifiers.

2. Color Variable Reference

Brand Colors

VariableUsage
--oui-color-primaryPrimary buttons, active states, accents
--oui-color-primary-lightHover states, secondary highlights
--oui-color-primary-darkenActive/pressed states
--oui-color-primary-contrastText on primary backgrounds
--oui-color-linkLink text color

Semantic Colors

VariableUsage
--oui-color-successProfit, positive values, success messages
--oui-color-dangerLoss, negative values, errors, sell buttons
--oui-color-warningWarnings, alerts, caution states

Trading Colors

VariableUsage
--oui-color-trading-profitGreen for profits in orderbook, PnL
--oui-color-trading-lossRed for losses in orderbook, PnL

Background Scale

base-1 (lightest) → base-10 (darkest)
VariableUsage
--oui-color-base-1 to base-3Muted/disabled text
--oui-color-base-4 to base-5Borders, dividers
--oui-color-base-6 to base-7Card/panel backgrounds
--oui-color-base-8 to base-9Page backgrounds
--oui-color-base-10Darkest 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

  1. Use RGB values - CSS variables use space-separated RGB (e.g., 99 102 241)
  2. Import order matters - Import Orderly styles first, then your overrides
  3. Test all states - Verify hover, active, disabled states look correct
  4. Check accessibility - Ensure sufficient color contrast (WCAG 2.1)
  5. Test on mobile - Some components have different mobile styling
  6. 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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open Registry RecordOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

Zip

Zip - command-line tool for everyday use

Registry SourceRecently Updated
210xueyetianya
General

Youtube Script

YouTube视频脚本、标题A/B测试、缩略图文案、SEO优化、开头Hook、章节标记。YouTube script writer with title testing, thumbnail copy, SEO optimization, hooks, chapter markers. Use when you...

Registry SourceRecently Updated
1760ckchzh
General

Topmediai AI Music Generator

Generate AI music, BGM, or lyrics via TopMediai API. Supports auto polling and two-stage output (preview first, then final full audio) for generation tasks.

Registry SourceRecently Updated
00Topmediai
General

Yamlcheck

YAML validator and formatter. Validate YAML syntax, pretty-print with proper indentation, convert between YAML and JSON, and lint YAML files for common issues.

Registry SourceRecently Updated
770bytesagain1