Set styles and themes

You can customize the look and feel of TradingView Widgets using standard CSS. This guide covers the main approaches, from applying a simple color theme to making targeted visual tweaks.

All widgets are built with closed shadow roots, meaning you cannot style widgets’ internal elements directly. Instead, we provide three ways to customize their appearance:

Theming for setting a light or dark theme for a widget.
CSS tokens for overriding default colors and fonts to match your brand.
Selectors for applying styles to specific, exposed parts of a widget for fine-grained control.

By default, a widget will adapt to your page’s theme by following the color-scheme CSS property of the page. If you don’t set a theme attribute on the widget, the widget will automatically switch between light and dark mode along with your site.

The example below shows the Mini Chart widget that follows the page’s theme.

<tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>

Forcing a specific theme

To lock a widget to a specific theme regardless of the page’s color-scheme, add the theme attribute to the element.

theme="dark" forces the widget to always use the dark theme.
theme="light" forces the widget to always use the light theme.

The examples below show two Mini Chart widgets with locked theme.

<!-- Forces dark theme even if the site is light -->
<tv-mini-chart theme="dark" symbol="NASDAQ:NVDA"></tv-mini-chart>

<!-- Forces light theme even if the site is dark -->
<tv-mini-chart theme="light" symbol="NASDAQ:TSLA"></tv-mini-chart>

Global styling with CSS tokens

To align widgets with your brand, you can override the public CSS custom properties (tokens) that widgets use for colors, fonts, and backgrounds. Apply these tokens on any ancestor element or globally on the :root. These tokens work for both light and dark themes.

The example below shows the Mini Chart widget with custom style.

<style>
  /* Scoped token overrides — example “Arctic” look */
  .arctic-scope {
    /* Let widgets inherit a specific color scheme in this area */
    color-scheme: light;

    /* CSS tokens */
    --tv-widget-accent-color: #111;
    --tv-widget-text-color: #222;
    --tv-widget-background-color: #eee;
    --tv-widget-font-family: monospace;
    --tv-widget-price-text-color: black;

    --tv-widget-market-status-pre-color: black;
    --tv-widget-market-status-post-color: black;
    --tv-widget-market-status-open-color: black;
    --tv-widget-market-status-closed-color: black;

    --tv-widget-positive-color: rgb(0, 118, 221);
    --tv-widget-positive-area-top-color: rgba(0, 118, 221, 0.2);
    --tv-widget-positive-area-bottom-color: rgba(0, 118, 221, 0.1);

    --tv-widget-negative-color: rgb(221, 66, 0);
    --tv-widget-negative-area-top-color: rgba(221, 66, 0, 0.2);
    --tv-widget-negative-area-bottom-color: rgba(221, 66, 0, 0.1);

    --tv-widget-scales-font-color: #222;
    --tv-widget-popup-background-color: #eee;
    --tv-widget-tooltip-text-color: #ddd;
    --tv-widget-tooltip-background-color: #222;
  }
</style>

<div class="arctic-scope">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
</div>

Targeted styling with selectors

Certain internal elements are exposed to allow small, targeted customizations. Use ::part selectors to style these elements. This is the only supported way to access and modify specific components inside the widget.

Prefer CSS tokens for broad theming. Use ::part only for minor presentation tweaks.

<style>
  /* Example parts — names will vary by widget */
  .my-widget-scope ::part(selected-button) {
    background-color: transparent;
    border-radius: 2px;
    border: 2px solid #111;
  }
  .my-widget-scope ::part(unselected-button) {
    background-color: transparent;
    border-radius: 2px;
    border: 2px solid transparent;
  }
  .my-widget-scope ::part(unselected-button):hover,
  .my-widget-scope ::part(selected-button):hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
</style>

<div class="my-widget-scope">
  <tv-mini-chart symbol="NASDAQ:NVDA"></tv-mini-chart>
</div>

Create transparent background

You can make the widget’s background transparent so it blends in with your site. For doing this, use either a CSS custom token or an HTML attribute.

Using CSS token

Set the --tv-widget-background-color token to transparent or a semi-transparent value. For more information, see Global styling with CSS tokens.

<style>
  .my-widget-scope {
    /* Make the widget background transparent or semi-transparent */
    --tv-widget-background-color: transparent; /* fully transparent */
    /* or */
    /* --tv-widget-background-color: rgba(255, 255, 255, 0.0); */
    /* --tv-widget-background-color: rgba(0, 0, 0, 0.08);  subtle translucency */
  }
</style>

<div class="my-widget-scope">
  <tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
</div>

Set the transparent attribute to the widget element.

<tv-mini-chart symbol="NASDAQ:AAPL" transparent></tv-mini-chart>

Troubleshooting

Colors don’t update as expected

Ensure you’re modifying CSS tokens on an ancestor container or the document :root, and that no more specific CSS rule is overriding them. For more information, see Global styling with CSS tokens.

If your site theme changes but a widget doesn’t, check if the widget has a theme attribute set. This attribute prevents the widget from following the site’s theme. Simply remove it to let your widget follow the site theme. For more information, see Theming (light & dark modes).

Targeted styling doesn’t apply

Confirm that the ::part name is correct and is exposed for that specific widget. Also, ensure your CSS selector correctly targets the widget instance. Note that you cannot style any internal elements that are not explicitly exposed via ::part. For more information, see Targeted styling with selectors.

Set styles and themes

Theming (light & dark modes)

Automatic theming