A technical guide for customizing the visual identity of an Orderly DEX using CSS variables, Tailwind CSS integration, and component-level overrides.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install orderly-sdk-theming
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install orderly-sdk-theming using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Orderly SDK Theming?
The Orderly SDK Theming skill enables developers to fully white-label and customize the user interface of decentralized exchanges built on the Orderly Network. By utilizing a sophisticated CSS variable-based system prefixed with --oui-, developers can achieve precise control over colors, spacing, typography, and border radii. These Openclaw Skills are essential for creating a unique brand experience while maintaining the high-performance standards of the Orderly UI components.
This system integrates seamlessly with Tailwind CSS, allowing for a utility-first approach to styling that remains consistent across the entire trading ecosystem. From primary brand accents to complex semantic color scales for trading data, this skill provides the roadmap for professional-grade DEX interface development.
Orderly SDK Theming Use Cases
- Rebranding a generic DEX interface to align with corporate identity guidelines.
- Implementing dark and light mode variations using CSS variable overrides.
- Tailoring TradingView chart aesthetics to match the platform's color palette.
- Designing custom Profit and Loss (PnL) share cards for user social media engagement.
- Standardizing typography across trading components using custom web fonts.
How Orderly SDK Theming Works
- Define a custom CSS theme file using space-separated RGB values for --oui- variables to allow for Tailwind opacity modifiers.
- Import the default Orderly UI styles followed by your custom theme and font files in the main CSS entry point.
- Configure the OrderlyAppProvider with broker-specific assets including main logos, secondary icons, and favicons.
- Apply granular component overrides using the OrderlyThemeProvider for specific UI elements like buttons and inputs.
- Synchronize external modules like TradingView by passing theme-specific color configurations into the TradingPage props.
Orderly SDK Theming Setup
Ensure you have the core UI packages installed in your project environment:
npm install @orderly.network/ui @orderly.network/react-app
Update your tailwind.config.ts to include the Orderly UI preset and content paths:
import { OUITailwind } from '@orderly.network/ui';
export default {
content: [
'./node_modules/@orderly.network/**/*.{js,mjs}',
],
presets: [OUITailwind.preset],
// ...additional configuration
};
Orderly SDK Theming Data Schema & Taxonomy
The theming system organizes its configuration through several key metadata structures:
| Category | Property Type | Description |
|---|---|---|
| Brand Colors | RGB Triplets | Primary, light, and dark variants for main actions. |
| Semantic Colors | RGB Triplets | Success, danger, and warning indicators for trade status. |
| Background Scale | 10-Step Scale | A neutral palette from base-1 (lightest) to base-10 (darkest). |
| App Icons | Asset Paths | URLs for main logo, secondary logo, and favicons. |
| PnL Config | Config Object | Custom background images and text colors for share cards. |
Orderly SDK Theming Advanced Features
- Support for space-separated RGB variables enabling dynamic Tailwind CSS opacity support.
- Deep integration with TradingView Charting Library for consistent technical analysis visuals.
- Multi-layer theme overrides via the OrderlyThemeProvider for complex UI logic.
- Automated PnL background selection based on profit or loss status.
- Utility-first styling capabilities through the OUITailwind preset included in Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Orderly SDK React Hooks
A comprehensive React hook library for integrating professional-grade decentralized trading features into web applications.
Orderly SDK Page Components
A collection of pre-built React components for building complete, responsive decentralized exchange pages with minimal effort.
Orderly SDK Install Dependency
A modular installation guide for deploying Orderly Network SDK packages to build high-performance decentralized exchanges.
Orderly SDK DEX Architecture
A comprehensive architectural blueprint for building production-ready decentralized exchanges using the Orderly Network Components SDK.
Orderly Network SDK Trading Workflows
A technical guide for implementing end-to-end trading lifecycles on Orderly Network using SDK hooks and UI components.
Orderly SDK Wallet Connection
A comprehensive framework for integrating EVM and Solana wallet connections into decentralized exchange applications via the Orderly Network SDK.
Featured*
