Integrations · TradingView · Themes

Two depths of theming

Web Components take Luc UI's tokens through the provider's published CSS custom properties. iframe widgets take the provider's own theme configuration and nothing else. Switch the theme and watch which parts move.

Web Component: tokens

One mapping, applied by every Web Component wrapper.

MiniChart

Web Component

Follows Luc UI's surface, text and font tokens.

Provider docs

MarketData

Web Component

Same bridge, a denser widget.

Provider docs

--tv-widget-background-color: var(--surface-raised);
--tv-widget-text-color: var(--fg-primary);
--tv-widget-font-family: var(--font-sans);
--tv-widget-accent-color: var(--accent-default);
--tv-widget-price-text-color: var(--fg-primary);
--tv-widget-scales-font-color: var(--fg-muted);
--tv-widget-popup-background-color: var(--surface-overlay);
--tv-widget-tooltip-background-color: var(--chart-tooltip-surface);
--tv-widget-tooltip-text-color: var(--fg-primary);
--tv-widget-positive-color: var(--chart-positive);
--tv-widget-negative-color: var(--chart-negative);

Only tokens with a clear semantic counterpart are mapped. The provider keeps its own market-status chips and its up/down area fills, and LUC does not guess at internal selectors: the shadow root is closed, and ::part() is used only where a widget documents one.

iframe: provider configuration

The chart below is the same widget in a separate document. It matches the theme; it does not inherit Luc UI's colours.

AdvancedChart

iframe

Provider theme, LUC surface colours passed through the provider's own keys.

Provider docs

The wrapper passes theme, backgroundColor and gridColor resolved from LUC tokens, so the chart's surface matches the card it sits in. Everything inside — axis labels, crosshair, toolbar, dialogs — is the provider's. That limit is the honest boundary of iframe theming, not a bug to paper over.

Transparency

Both formats expose an official transparent option. LUC defaults to opaque.

TickerTape

Web Component

Opaque (default).

Provider docs

TickerTape

Web Component

transparent on a LUC surface.

Provider docs

Dense financial content is more readable on an opaque surface, which is why opaque is the default. Transparency is available where a widget needs to sit directly on a LUC panel.

Theme changes are live

Flip the switch at the top of this page.

Web Components follow the attribute update immediately. iframe widgets are re-created with the new configuration — the wrapper removes the previous embed first, so a theme change can never leave two widgets stacked.

Usage

import { TradingViewMiniChart } from "@luc/ui/tradingview";

<TradingViewMiniChart symbol="NASDAQ:AAPL" theme="auto" height={180} />

A Web Component follows the LUC theme through the supported token bridge.

import { TradingViewAdvancedChart } from "@luc/ui/tradingview";

<TradingViewAdvancedChart
  symbol="BINANCE:BTCUSDT"
  preset="minimal"
  theme="auto"
  height={420}
/>

An iframe receives the provider's own theme configuration; it cannot inherit the whole LUC stylesheet.

import { TradingViewTickerTape } from "@luc/ui/tradingview";

<TradingViewTickerTape
  symbols={["NASDAQ:AAPL", "BINANCE:BTCUSDT"]}
  transparent
  height={104}
/>

Use provider transparency only where the surrounding LUC surface is itself a deliberate background.

Configuration

`theme="auto"` follows Luc UI's resolved theme. `inheritTheme` controls the Web Component CSS-variable bridge, while iframe widgets accept only the provider's theme and surface colours; `transparent` is honoured only where the provider publishes it.

Client and provider lifecycle

A LUC theme change updates Web Component attributes immediately. Iframe widgets are re-created with the new provider configuration, and the wrapper removes the previous embed before creating the replacement.

Limitations

The iframe document is a provider boundary: axis labels, crosshairs, toolbars and dialogs stay TradingView's. LUC does not reach into a closed shadow root or invent selectors to restyle provider internals.

Guidelines

Use `theme="auto"` unless the product intentionally pins a provider surface to one theme.
Check both light and dark states around the widget because the surrounding card and the provider document are separate surfaces.

Don't

Do not promise full LUC theming for an iframe or attempt to style provider internals through arbitrary CSS.
Do not default to transparency for dense market data; an opaque provider surface is usually more readable.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`TRADINGVIEW_TOKEN_BRIDGE`	export	`Readonly<Record<string, string>>`