Apply a Design#

Panel empowers you to effortlessly style your apps using pre-built designs, regardless of your prior experience in frontend development. These designs offer ready-made visual themes for your applications:

  • “bootstrap”: Embraces the elegance and responsiveness of the Bootstrap library.

  • “fast”: Harnesses the speed and modern aesthetics of the Microsoft Fast Design library.

  • “material”: Draws inspiration from Google’s Material Design, providing a clean and intuitive user experience.

  • “native”: Ensures compatibility and consistency with the default styling inherited from Bokeh.

Additionally, Panel supports both "default" and "dark" themes to further tailor the appearance of your application.

Note

In the sections below, you can run the provided code directly in the Panel documentation by utilizing the green run button, executing it in a notebook cell, or saving it in a file named app.py and serving it with panel serve app.py --autoreload.

Change the Design#

Let’s elevate our apps with a clean and intuitive user experience by applying the "material" design.

Run the following code:

import panel as pn

pn.extension(design="material")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
).servable()




Feel free to experiment by changing the design to "bootstrap", "fast", or "native".






Change the Theme#


Choose a tab to proceed:







Run the code below:


import panel as pn

pn.extension(design="fast", theme="dark")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
    styles={"background": "#181818"} # styles only necessary in the Panel docs
).servable()













In the notebook, the theme automatically adapts to the current JupyterLab theme.


Run the code below:


import panel as pn

pn.extension(design="material")

pn.Column(
    pn.widgets.FloatSlider(name="Slider"),
    pn.widgets.TextInput(name="TextInput"),
    pn.widgets.Select(name="Select", options=["Wind Turbine", "Solar Panel", "Battery Storage"]),
    pn.widgets.Button(name="Click me!", icon="hand-click", button_type="primary"),
).servable()








Experiment by switching the JupyterLab Theme from Dark to Light or vice versa.


The experience should look something like this:


Jupyterlab Theme Switching










Recap#


You don’t need to be a frontend developer to style your Panel apps. With high-level designs, you can effortlessly tailor your applications:



Panel also supports the "default" and "dark" themes.






References#




How-to#







Explanation#