Style Components#
Panel provides a comprehensive system for applying themes and custom styling to components.
Theme and style pn.ui apps#
The pn.ui components are built on Material UI. They are themed with theme_config and styled with sx.
How to style pn.ui components with sx, theme_config and styles.
How to override and extend the color palette of pn.ui components.
How to customize fonts, font sizes and text variants of pn.ui components.
How to force, toggle and customize dark mode for pn.ui components.
How to choose a cohesive, accessible color palette for your theme.
How to customize pn.ui components app-wide with default props, style overrides and variants.
How to build a cohesive branded app with brand colors, fonts, logos and theme configuration.
How to use Material icons in components, Markdown and inline text.
How plots automatically follow the pn.ui theme, and how to match palettes and colormaps.
Classic designs and CSS#
The guides below apply to the classic pn.widgets, pn.pane and pn.layout components and templates, which are styled through designs, CSS variables and stylesheets.
How to switch between different design systems.
How to toggle between themes (e.g. ‘light’ and ‘dark’).
How to apply custom CSS styling.
How to customize designs and themes with CSS variables.
How to customize the loading icon.
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.
How to style an Altair plot
How to style an ECharts plot
How to style a Matplotlib plot
How to style a Plotly plot
How to style a Vega Lite plot
