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.

Toggle themes

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

Apply CSS

How to apply custom CSS styling.

Customize a Design

How to customize designs and themes with CSS variables.

Customize Loading Icon

How to customize the loading icon.

Control Visibility

How to control the visibility of a component.

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

ECharts
../../_images/echarts-logo.png

How to style an ECharts plot

Matplotlib
../../_images/matplotlib-logo.png

How to style a Matplotlib plot

Plotly
../../_images/plotly-logo.png

How to style a Plotly plot

Vega Lite
../../_images/vegalite-logo.png

How to style a Vega Lite plot