Style Components
Panel provides a comprehensive system for applying designs, themes and custom styling for components. This section will take you through these concepts.
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}pencil;2.5em;sd-mr-1 sd-animate-grow50 Apply a Design 🔗 design :link-type: doc
How to switch between different design systems. :::
:::{grid-item-card} {octicon}sun;2.5em;sd-mr-1 sd-animate-grow50 Toggle themes 🔗 themes :link-type: doc
How to toggle between themes (e.g. 'light' and 'dark'). :::
:::{grid-item-card} {octicon}gift;2.5em;sd-mr-1 sd-animate-grow50 Apply CSS 🔗 apply_css :link-type: doc
How to apply custom CSS styling. :::
:::{grid-item-card} {octicon}paintbrush;2.5em;sd-mr-1 sd-animate-grow50 Customize a Design 🔗 design_variables :link-type: doc
How to customize designs and themes with CSS variables. :::
:::{grid-item-card} {octicon}hourglass;2.5em;sd-mr-1 sd-animate-grow50 Customize Loading Icon 🔗 load_icon :link-type: doc
How to customize the loading icon. :::
:::{grid-item-card} {octicon}eye;2.5em;sd-mr-1 sd-animate-grow50 Control Visibility 🔗 visibility :link-type: doc
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.
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Altair 🔗 altair :link-type: doc
How to style an Altair plot :::
:::{grid-item-card} ECharts 🔗 echarts :link-type: doc
How to style an ECharts plot :::
:::{grid-item-card} Matplotlib 🔗 matplotlib :link-type: doc
How to style a Matplotlib plot :::
:::{grid-item-card} Plotly 🔗 plotly :link-type: doc
How to style a Plotly plot :::
:::{grid-item-card} Vega Lite 🔗 vega :link-type: doc
How to style a Vega Lite plot :::
::::