/ Widgets theme builder
type: Web Component

Widgets theme builder

Widgets theme builder is a standalone web application designed to help you customize the appearance of TradingView Web Component-based widgets.

Widget theme builder

Unlike standard widget constructors that focus on one widget at a time, the theme builder allows you to design a unified theme and see it applied across multiple widget types (charts, tickers, and maps) simultaneously.

Because themes are built using standard CSS, you have complete control over their scope. You can apply a theme to your entire page, restrict it to specific sections, or target individual widgets. This flexibility also allows you to set a global theme and then override specific styles for a single widget when needed.

Try the widgets theme builder

Interface overview

The builder is divided into two main areas:

  • Preview (left): a live area where changes appear instantly. You can view your theme across several widgets simultaneously.
  • Settings (right): your control panel. This is where you adjust colors and fonts, and manage the preview environment.
Widget theme builder

How to build your theme

1. Set up light and dark modes

The Light/Dark switch at the top of the preview panel toggles the environment. By default, Light and Dark modes are independent. This means a color change made while Light is selected will not affect the Dark version of the theme, and the other way around. This allows you to ensure perfect contrast and readability for both environments.

If you prefer to have the same colors applied to both modes simultaneously:

  1. Click Settings button () next to the Basic/Advanced tabs.
  2. Go to Mode settings and disable Separate dark/light customizations. Now, any color you pick applies to both modes.

2. Choose customization level

On the settings panel, you can switch between these two tabs at any time without losing your progress:

  • Basic is best for quick changes. Changing one value automatically calculates related hues and opacities for the full theme.
  • Advanced is best for detailed styling. This allows you to fine-tune specific elements like borders or individual CSS parts.

Note that Advanced settings have higher precedence than Basic settings.

3. Fine-tune the visuals

Every change you make is applied instantly to the preview. There is no Save button because the builder uses local storage. Your theme will remain exactly as you left it even if you refresh your browser or close the tab.

4. Export and apply your theme

  1. Click Download in the bottom right to get a CSS file, or select Copy to clipboard from the dropdown menu.
  2. Paste the code into a <style> tag in your HTML.
  3. Apply the CSS prefix to the desired container in your HTML. For more details on scoping and theme implementation, see Set styles and themes.

If you want to start over, click Reset to return to the original TradingView theme.

Important to note

  • This builder is specifically designed for TradingView widgets of the Web Component format. It is not compatible with iframe-based widgets.
  • Since data is stored in your browser’s local storage, your themes will not automatically follow you to a different computer or a different browser.

What’s next

This is just the beginning for the TradingView theme builder. We are already planning future updates, including undo/redo functionality, preset example themes, and ability to import existing themes for editing.

We value your input! As we continue to evolve this product, share your feedback with us.