Style Components#

Panel provides a comprehensive system for applying designs, themes and custom styling for components. This section will take you through these concepts.

Apply a Design

How to switch between different design systems.

Apply a Design
Toggle themes

How to toggle between themes (e.g. ‘light’ and ‘dark’).

Toggling themes
Apply CSS

How to apply custom CSS styling.

Apply CSS
Customize a Design

How to customize designs and themes with CSS variables.

Customize a Design
Customize Loading Icon

How to customize the loading icon.

Customize Loading Icon
Control Visibility

How to control the visibility of a component.

Control Visibility

This section will show you how to style the most common plotting libraries for use with Panel.

Altair
../../_images/altair-logo.png

How to style an Altair plot

Style Altair Plots
ECharts
../../_images/echarts-logo.png

How to style an ECharts plot

Style Echarts Plots
Matplotlib
../../_images/matplotlib-logo.png

How to style a Matplotlib plot

Style Matplotlib Plots
Plotly
../../_images/plotly-logo.png

How to style a Plotly plot

Style Plotly Plots
Vega Lite
../../_images/vegalite-logo.png

How to style a Vega Lite plot

Style Vega Plots