orderly-sdk-theming

Orderly Network：SDK のテーマ設定

Orderly DEX のビジュアルをカスタマイズできます。OrderlyAppProvider の themes プロパティに 1 つ以上の テーマ を渡して、SDK のテーマを設定します。各テーマには、CSS 変数（--oui-*）のセットと、任意の TradingView チャートの色が含まれます。

使用する場面

• DEX のブランディング（色、ロゴ、ファビコン）
• 複数のテーマの提供（ダーク＋ライト、またはブランドのバリエーション）
• TradingView チャートのスタイルをテーマに合わせる
• PnL シェア用ポスターのカスタマイズ

前提条件

• @orderly.network/react-app、@orderly.network/ui がインストールされていること
• OrderlyAppProvider がマウントされていること

テーマ設定の仕組み

1. テーマオブジェクト の配列を定義します（プレーンな TS。以下を参照）。
2. 配列を <OrderlyAppProvider themes={themes}> に渡します。
3. プロバイダーがデフォルトテーマの CSS 変数を適用し、テーマ切り替え機能を提供します。

SDK は特定の設定ソースに依存しません。テーマは単なるデータです。インラインで定義する、モジュールからインポートする、設定から読み込むなど、アプリに合った方法を選べます。

テーマの定義

テーマはプレーンなオブジェクトです。isDefault がマークされたものを 必ず 1 つだけ 含め、1～6 個のテーマを定義します。

import type { ThemeCssVars } from '@orderly.network/ui';

const themes = [
  {
    id: '11111111-1111-4111-8111-111111111111', // unique UUID
    displayName: 'Dark', // shown in the theme switcher
    mode: 'dark', // "dark" | "light"
    isDefault: true, // exactly ONE theme sets this
    cssVars: {
      // optional: override --oui-* vars
      '--oui-color-primary': '#29dfa9',
      '--oui-color-base-1': '#0e0e10',
      '--oui-color-base-2': '#161618',
      '--oui-color-trading-profit': '#29dfa9',
      '--oui-color-trading-loss': '#f5618b',
      '--oui-gradient-brand-start': '#29dfa9',
      '--oui-gradient-brand-end': '#1aa37c',
    },
    tradingViewColorConfig: {
      // optional: chart colors
      chartBG: '#0e0e10',
      upColor: '#29dfa9',
      downColor: '#f5618b',
      pnlUpColor: '#29dfa9',
      pnlDownColor: '#f5618b',
      pnlZeroColor: '#8b8b8b',
      textColor: '#b8b8b8',
      qtyTextColor: '#8b8b8b',
      volumeUpColor: '#29dfa9',
      volumeDownColor: '#f5618b',
      closeIconColor: '#b8b8b8',
    },
  },
  {
    id: '22222222-2222-4222-8222-222222222222',
    displayName: 'Light',
    mode: 'light',
    cssVars: { '--oui-color-primary': '#1aa37c', '--oui-color-base-1': '#ffffff' },
  },
];

プロバイダーへの接続

import { OrderlyAppProvider } from '@orderly.network/react-app';

function Provider({ children }) {
  return (
    <OrderlyAppProvider brokerId={brokerId} networkId="mainnet" themes={themes}>
      {children}
    </OrderlyAppProvider>
  );
}

テーマオブジェクトのスキーマ

themes が想定する形式は次のとおりです。参照テンプレートでは zod を使って検証していますが、プレーンな TS 型としても使用できます。

フィールド	型	必須	説明
id	UUID 文字列	はい	テーマ間で一意である必要があります
displayName	文字列（1～50 文字）	はい	テーマ切り替え機能に表示されます。大文字と小文字を区別せず一意である必要があります
mode	"dark" | "light"	はい	ベースモード
cssVars	Partial<ThemeCssVars>	いいえ	--oui-* 変数を上書きします（以下の一覧を参照）
tradingViewColorConfig	Partial<TradingViewColorConfig>	いいえ	チャートの色（以下を参照）
isDefault	boolean	いいえ	true に設定するテーマは 必ず 1 つだけ です

制約：テーマは 1～6 個、id は一意、displayName は大文字と小文字を区別せず一意、デフォルトテーマは必ず 1 つです。

export type DexThemeConfig = Array<{
  id: string;
  displayName: string;
  mode: 'dark' | 'light';
  cssVars?: Partial<ThemeCssVars>;
  tradingViewColorConfig?: TradingViewColorConfig;
  isDefault?: boolean;
}>;

CSS 変数（--oui-*）

cssVars でこれらの値を上書きできます。すべて任意です。指定しない場合は、テーマの mode に対応する SDK のデフォルト値が維持されます。

ブランド／アクセント： --oui-color-primary、--oui-color-primary-light、--oui-color-primary-darken、--oui-color-primary-contrast、--oui-color-link、--oui-color-link-light、--oui-color-secondary、--oui-color-tertiary、--oui-color-quaternary

セマンティック： --oui-color-danger（および -light、-darken、-contrast）、--oui-color-success（同様）、--oui-color-warning（同様）

サーフェス／テキスト： --oui-color-fill、--oui-color-fill-active、--oui-color-base-1 … --oui-color-base-10、--oui-color-base-foreground、--oui-color-base-static、--oui-color-base-static-contrast、--oui-color-line

取引 PnL： --oui-color-trading-profit、--oui-color-trading-profit-contrast、--oui-color-trading-loss、--oui-color-trading-loss-contrast

グラデーション： --oui-gradient-primary-{start,end}、--oui-gradient-secondary-*、--oui-gradient-success-*、--oui-gradient-danger-*、--oui-gradient-brand-{start,end,stop-start,stop-end,angle}、--oui-gradient-warning-*、--oui-gradient-neutral-*

形状と間隔： --oui-rounded-sm、--oui-rounded、--oui-rounded-{md,lg,xl,2xl,full}、--oui-spacing-{xs,sm,md,lg,xl}、--oui-font-family

キーの完全な一覧は typeof DARK_THEME_CSS_VARS です（@orderly.network/ui から ThemeCssVars としてエクスポートされています）。任意の一部を指定できます。

TradingView チャートのスタイル設定

チャートの色は、テーマの tradingViewColorConfig に設定します。チャート設定自体（ライブラリのパス）は、tradingViewConfig を介して TradingPage に渡します。

TradingViewColorConfig のフィールド

Field	Type	Notes
chartBG	hex	チャートの背景
upColor	hex	上昇時のローソク足／ライン
downColor	hex	下落時のローソク足／ライン
pnlUpColor	hex	PnL のプラス
pnlDownColor	hex	PnL のマイナス
pnlZeroColor	hex	PnL のゼロ
textColor	hex	軸／ラベルのテキスト
qtyTextColor	hex	数量のテキスト
volumeUpColor	hex	出来高バー（上昇時）
volumeDownColor	hex	出来高バー（下落時）
closeIconColor	hex or rgba	閉じるボタンのアイコン（rgba に対応）

<TradingPage
  symbol={symbol}
  tradingViewConfig={{
    scriptSRC: '/tradingview/charting_library/charting_library.js',
    library_path: '/tradingview/charting_library/',
    customCssUrl: '/tradingview/chart.css',
    // colorConfig is omitted when themes carry tradingViewColorConfig;
    // the chart then reads colors from the active theme.
  }}
/>

ロゴとファビコン

ロゴは appIcons プロパティを介して OrderlyAppProvider に渡します。型は AppLogos です（@orderly.network/react-app）：

import type { AppLogos } from '@orderly.network/react-app';

const appIcons: AppLogos = {
  main: hasPrimaryLogo
    ? { component: <img src="/logo.webp" alt="logo" style={{ height: '42px' }} /> }
    : { img: '/orderly-logo.svg' }, // { img } for a plain URL
  secondary: { img: hasSecondaryLogo ? '/logo-secondary.webp' : '/orderly-logo-secondary.svg' },
};

<OrderlyAppProvider appIcons={appIcons} /* … */ />;

アセットは public/（例：public/logo.webp）に配置します。サブパスでのデプロイでも解決できるように、ベースパス用のラッパーを使用します。ファビコンを変更するには、public/favicon.webp と index.html の <link> タグを更新します。

PnL シェアポスター

TradingPage は sharePnLConfig を受け取ります：

const sharePnLConfig = {
  backgroundImages: posterBackgrounds, // URLs to your poster backgrounds
  color: 'rgba(255,255,255,0.98)',
  profitColor: 'rgba(41,223,169,1)',
  lossColor: 'rgba(245,97,139,1)',
  brandColor: 'rgba(255,255,255,0.98)',
  refLink: window.location.origin,
  refSlogan: brokerName, // your brand slogan
};

<TradingPage sharePnLConfig={sharePnLConfig} /* … */ />;

Tailwind

SDK には Tailwind プリセットは含まれていません。コンテンツの glob をソースに向け、Tailwind でブランドカラーを定義しないでください。代わりに --oui-* CSS 変数を使用します。

// tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
  content: ['./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: { sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
    },
  },
  plugins: [],
} satisfies Config;

/* global styles (imported once at app entry) */
@import '@orderly.network/ui/dist/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

カスタム上書きには、SDK の要素を oui-* クラス名と CSS 変数で指定します：

.oui-card {
  border-radius: var(--oui-rounded-lg);
}

設定からテーマを読み込む（任意）

コードを変更せずにテーマを切り替えるには、テーマ配列を JSON として保存し、実行時に読み込みます。リファレンステンプレートでは、Vite の .env 変数と小規模な検証用ローダーを使用しています：

# .env  (single line — shown pretty-printed for readability)
VITE_ORDERLY_THEME_CONFIG=[{"id":"…","displayName":"Dark","mode":"dark","isDefault":true,"cssVars":{...}}]

// resolves + zod-validates the JSON into a DexThemeConfig[]; falls back to a
// single synthesized default theme when the var is absent/invalid
const { themes } = resolveDexThemeConfig(import.meta.env.VITE_ORDERLY_THEME_CONFIG);

実行時設定を介する方法（public/config.js / window.__RUNTIME_CONFIG__）が役立つのは、異なるテーマを使いながら同じビルドを再利用するマルチインスタンスのデプロイに限られます。これは Orderly One 固有の事情であり、orderly-one-dex に記載されています。通常の DEX では、静的なテーマ配列（または .env）で十分です。

関連スキル

• orderly-sdk-dex-architecture - Provider のセットアップと themes の設定箇所
• orderly-ui-components - これらの CSS 変数を使用するコンポーネントライブラリ
• orderly-sdk-install-dependency - UI パッケージのインストール