{"id":16797668,"url":"https://github.com/annmariew/dash-bootstrap-templates","last_synced_at":"2025-04-08T02:36:26.507Z","repository":{"id":46123659,"uuid":"360307462","full_name":"AnnMarieW/dash-bootstrap-templates","owner":"AnnMarieW","description":"A collection of 52 Plotly figure templates with a Bootstrap theme.  Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.","archived":false,"fork":false,"pushed_at":"2025-02-13T14:01:08.000Z","size":387,"stargazers_count":143,"open_issues_count":4,"forks_count":28,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-01T01:36:42.650Z","etag":null,"topics":["bootstrap","plotly-dash","theme"],"latest_commit_sha":null,"homepage":"https://hellodash.pythonanywhere.com/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnnMarieW.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-21T21:11:22.000Z","updated_at":"2025-03-06T12:58:45.000Z","dependencies_parsed_at":"2024-05-13T14:57:09.419Z","dependency_job_id":"64fc626c-b60a-419b-b667-c323ec72706b","html_url":"https://github.com/AnnMarieW/dash-bootstrap-templates","commit_stats":{"total_commits":89,"total_committers":9,"mean_commits":9.88888888888889,"dds":0.3146067415730337,"last_synced_commit":"dfa2b3207d9a8729cfc6ebace4ee566139ebaf83"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-templates","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-templates/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-templates/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnMarieW%2Fdash-bootstrap-templates/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnnMarieW","download_url":"https://codeload.github.com/AnnMarieW/dash-bootstrap-templates/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247765461,"owners_count":20992314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","plotly-dash","theme"],"created_at":"2024-10-13T09:23:03.753Z","updated_at":"2025-04-08T02:36:26.482Z","avatar_url":"https://github.com/AnnMarieW.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Bootstrap Templates\n\n#### See these features live at : https://hellodash.pythonanywhere.com/theme_explorer\n\n\n`dash-bootstrap-templates` library provides: \n\n- **54 Bootstrap themed Plotly figure templates** \n  - You will find  Plotly templates in light and dark mode for each of the 26 Bootstrap/Bootswatch themes available in the [Dash Bootstrap Components Library](https://dash-bootstrap-components.opensource.faculty.ai/). \n  - As of 2.1.0, there are also figure templates based on the [Vizro](https://github.com/mckinsey/vizro) theme.\n  - These templates will automatically style your figures with Bootstrap theme colors and fonts.\n  - As of V1.1 a dark mode is available for each theme.  This is ideal for use with the [Bootstrap Color Modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) available as of Bootstrap 5.3.0\n\n\n- **Two  [All-in-One](https://dash.plotly.com/all-in-one-components) components** to change themes in a Dash app.\n  - `ThemeSwitchAIO` toggles between two themes.  (For use with Bootstrap \u003c 5.3 Otherwise, use Bootstrap Color Modes)\n  - `ThemeChangerAIO` select from multiple themes.\n  \n- **Examples of a Color Mode Switch** to toggle between a light and dark theme.\n\n\n- **The dbc.css stylesheet** which styles Dash AG Grid, Dash Core Components and the Dash DataTable with a Bootstrap theme. \n   - [![](https://data.jsdelivr.com/v1/package/gh/AnnMarieW/dash-bootstrap-templates/badge?style=rounded)](https://www.jsdelivr.com/package/gh/AnnMarieW/dash-bootstrap-templates)\n\n\n\n\u003e **Usage Notes**:\n\u003e \n\u003e Dash Bootstrap Templates V2.0.0 required Plotly \u003e= 6.0  If your project requires Plotly 5, please use Dash Bootstrap Templates V1.3.0\n\u003e \n\u003e  - The `ThemeChangerAIO` component  and the `dbc.css` stylesheet requires  Dash Bootstrap Components\u003e=V1.0.0.  It will only\n\u003e work with the themes included in Dash Bootstrap Components\u003e=V1.0.0.\n\u003e \n\u003e  - As of V1.0.8, the themes in the `ThemeSwitchAIO` component can be specified as a pathname or a URL.  This allows for working\n\u003e off-line and with custom stylesheets.\n\u003e \n\u003e - The Bootstrap themed Plotly figure templates can be used with any Plotly figure.  It does not require Dash or\n\u003e the Dash Bootstrap Components library.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## Figure Template Quickstart\n```python\"\npip install dash-bootstrap-templates\n```\n\u003e Learn more about Plotly figure templates and themes at: https://plotly.com/python/templates/\n```python\n\"\"\"\nA sample of 8 of the 26 Bootstrap themed Plotly figure templates available\nin the dash-bootstrap-template library\n\n\"\"\"\nfrom dash import Dash, html, dcc\nimport dash_bootstrap_components as dbc\nfrom dash_bootstrap_templates import load_figure_template\nimport plotly.express as px\n\ndf = px.data.gapminder()\n\ntemplates = [\n    \"bootstrap\",\n    \"minty\",\n    \"pulse\",\n    \"flatly\",\n    \"quartz\",\n    \"cyborg\",\n    \"darkly\",\n    \"vapor\",\n]\n\nload_figure_template(templates)\n\nfigures = [\n    px.scatter(\n        df.query(\"year==2007\"),\n        x=\"gdpPercap\",\n        y=\"lifeExp\",\n        size=\"pop\",\n        color=\"continent\",\n        log_x=True,\n        size_max=60,\n        template=template,\n        title=\"Gapminder 2007: '%s' theme\" % template,\n    )\n    for template in templates\n]\n\napp = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])\n\napp.layout = dbc.Container([dcc.Graph(figure=fig, className=\"m-4\") for fig in figures])\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)\n```\n\n![image](https://user-images.githubusercontent.com/72614349/143956424-9e172c03-139e-4126-bed5-b1800ad7e17a.png)\n![image](https://user-images.githubusercontent.com/72614349/143956545-769a00f8-92a3-44aa-8718-bdbb32b2464e.png)\n![image](https://user-images.githubusercontent.com/72614349/143956649-32b620c7-231a-4de6-ad3a-8fb0863da2a4.png)\n![image](https://user-images.githubusercontent.com/72614349/143956713-7fdbed38-6799-472b-87ba-d863481c6525.png)\n\n\n\n![figure_template2](https://user-images.githubusercontent.com/72614349/129459807-30c22ffe-7a8c-44b9-9555-6cfd50ec355b.png)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## dbc.css  stylesheet\n\nThe  `dash-ag-grid`, `dash-core-components`, the Dash `DataTable` and Plotly figures are not automatically styled with a Bootstrap theme.\nAn easy way to make your Dash components look better with a Bootstrap theme is to use the stylesheet from\n the [dash-bootstrap-templates](https://github.com/AnnMarieW/dash-bootstrap-templates) library. This stylesheet defines the \"dbc\" class.\n\nAdding `className=\"dbc dbc-ag-grid\"` minimally styles Dash components with your selected Bootstrap theme:\n- Makes the text readable in both light and dark themes.\n- Uses theme's font-family.\n- Changes the accent color to the theme's primary color\n\n\nYou can add the dbc class as an external stylesheet like this:\n```\ndbc_css = (\"https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.2/dbc.min.css\")\napp = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])\n\n```\n\n\nAdd  `className=\"dbc dbc-ag-grid\"` to the outer container of the app or a component like this:\n```\napp.layout = dbc.Container(\n    [\n        ...\n    ],\n    fluid=True,\n    className=\"dbc dbc-ag-grid\"\n)\n```\n\n**That's it!** Simply adding `className=\"dbc dbc-ag-grid\"` will make Dash AG Grid,  Dash Core Components and the DataTable look better with **ALL** themes included in the `dash-bootstrap-components` library.\n\u003e See a live demo at: https://hellodash.pythonanywhere.com/adding-themes/dcc-components\n\n\nIf you have suggestion for improvements or if you find a bug, please let us know on the [issue tracker](https://github.com/AnnMarieW/dash-bootstrap-templates/issues)\n\n**Requires `dash-bootstrap-components\u003e=V1.0.0`**\n\n\n\n\n## Theme Switcher Components\n\n\u003e See a live demo at https://hellodash.pythonanywhere.com/theme_change_components\n\n`dash-bootstrap-templates` has two [All-in-One](https://dash.plotly.com/all-in-one-components) components to change themes. \nThe `ThemeSwitchAIO` is a switch with icons on the left and right, which is ideal for toggling between a light and a dark theme. \nThe `ThemeChangerAIO` has a button that opens an `dbc.Offcanvas` component which by default shows all the available themes.\n\nNote the All-in-One component switches the Bootstrap stylesheet for the app and sets the default Plotly figure template\nfor the theme, however, figures must be updated in a callback in order to render the figure with the new template.\nSee the callback below for an example.  The `template_from_url` is a helper function that returns the template name\nbased on the theme url.  For example `template_from_ur(dbc.themes.SLATE)` returns `\"slate\"`\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## ThemeChangerAIO Quickstart\n```python\n\nfrom dash import Dash, dcc, html, Input, Output\nimport pandas as pd\nimport plotly.express as px\nimport dash_bootstrap_components as dbc\nfrom dash_bootstrap_templates import ThemeChangerAIO, template_from_url\n\n\ndbc_css = (\n    \"https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.1/dbc.min.css\"\n)\napp = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])\n\n\ndf = pd.DataFrame(\n    {\n        \"Fruit\": [\"Apples\", \"Oranges\", \"Bananas\", \"Apples\", \"Oranges\", \"Bananas\"],\n        \"Amount\": [4, 1, 2, 2, 4, 5],\n        \"City\": [\"SF\", \"SF\", \"SF\", \"Montreal\", \"Montreal\", \"Montreal\"],\n    }\n)\nheader = html.H4(\n    \"ThemeChangerAIO Demo\", className=\"bg-primary text-white p-4 mb-2 text-center\"\n)\nbuttons = html.Div(\n    [\n        dbc.Button(\"Primary\", color=\"primary\"),\n        dbc.Button(\"Secondary\", color=\"secondary\"),\n        dbc.Button(\"Success\", color=\"success\"),\n        dbc.Button(\"Warning\", color=\"warning\"),\n        dbc.Button(\"Danger\", color=\"danger\"),\n        dbc.Button(\"Info\", color=\"info\"),\n        dbc.Button(\"Light\", color=\"light\"),\n        dbc.Button(\"Dark\", color=\"dark\"),\n        dbc.Button(\"Link\", color=\"link\"),\n    ],\n    className=\"m-4\",\n)\ngraph = html.Div(dcc.Graph(id=\"graph\"), className=\"m-4\")\n\napp.layout = dbc.Container(\n    [\n        header,\n        dbc.Row(\n            [\n                dbc.Col(ThemeChangerAIO(aio_id=\"theme\", radio_props={\"value\":dbc.themes.FLATLY}), width=2,),\n                dbc.Col([buttons, graph],width=10),\n            ]\n        ),\n    ],\n    className=\"m-4 dbc\",\n    fluid=True,\n)\n\n\n@app.callback(\n    Output(\"graph\", \"figure\"), Input(ThemeChangerAIO.ids.radio(\"theme\"), \"value\"),\n)\ndef update_graph_theme(theme):\n    return px.bar(\n        df, x=\"Fruit\", y=\"Amount\", color=\"City\", barmode=\"group\", template=template_from_url(theme)\n    )\n\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)\n\n```\n\n![theme_changer](https://user-images.githubusercontent.com/72614349/141466834-6b02f478-cae8-4927-b05e-be0e98cb61df.gif)\n\n---------\n```python\n\n```\nHere is the same app, but using a the `ThemeSwitchAIO` component to toggle between two themes.\nSee the  [(code here)](https://github.com/AnnMarieW/dash-bootstrap-templates/blob/main/examples/demo_toggle.py).\n\nIt's also possible to change the icons.  See an example of using Bootstrap icons instead of the default FontAwesome\nicons [here](https://github.com/AnnMarieW/dash-bootstrap-templates/blob/main/examples/demo_toggle_icons.py).\n\n![theme_toggle](https://user-images.githubusercontent.com/72614349/141466191-13709102-a2fb-45b5-a984-383d3e6ab373.gif)\n\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## Color Mode Switch\n__Requires dash-bootstrap-components\u003e=1.5.0__\n\nThis is the recommended way to switch between a light and a dark mode using  [Bootstrap Color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) \navailable in Bootstrap 5.3.0.\n\n\n![color-mode-templates](https://github.com/AnnMarieW/dash-bootstrap-templates/assets/72614349/86c56043-08e0-4b8a-a473-13e2ef89533a)\n\n\n\n\n```python\nfrom dash import Dash, html, dcc, Input, Output, clientside_callback, callback\nimport plotly.express as px\nimport dash_bootstrap_components as dbc\n\nfrom dash_bootstrap_templates import load_figure_template\nload_figure_template([\"minty\", \"minty_dark\"])\n\n\ndf = px.data.gapminder()\n\napp = Dash(__name__, external_stylesheets=[dbc.themes.MINTY, dbc.icons.FONT_AWESOME])\n\ncolor_mode_switch =  html.Span(\n    [\n        dbc.Label(className=\"fa fa-moon\", html_for=\"switch\"),\n        dbc.Switch( id=\"switch\", value=False, className=\"d-inline-block ms-1\", persistence=True),\n        dbc.Label(className=\"fa fa-sun\", html_for=\"switch\"),\n    ]\n)\n\napp.layout = dbc.Container(\n    [\n        html.Div([\"Bootstrap Light Dark Color Modes Demo\"], className=\"bg-primary text-white h3 p-2\"),\n        color_mode_switch,\n        dcc.Graph(id=\"graph\", className=\"border\"),\n    ]\n\n)\n\n@callback(\n    Output(\"graph\", \"figure\"),\n    Input(\"switch\", \"value\"),\n)\ndef update_figure_template(switch_on):\n    template = \"minty\" if switch_on else \"minty_dark\"\n    fig = px.scatter(\n        df.query(\"year==2007\"),\n        x=\"gdpPercap\",\n        y=\"lifeExp\",\n        size=\"pop\",\n        color=\"continent\",\n        log_x=True,\n        size_max=60,\n        template=template,\n    )\n    return fig\n\n\n\nclientside_callback(\n    \"\"\"\n    (switchOn) =\u003e {\n       switchOn\n         ? document.documentElement.setAttribute('data-bs-theme', 'light')\n         : document.documentElement.setAttribute('data-bs-theme', 'dark')\n       return window.dash_clientside.no_update\n    }\n    \"\"\",\n    Output(\"switch\", \"id\"),\n    Input(\"switch\", \"value\"),\n)\n\n\nif __name__ == \"__main__\":\n    app.run_server(debug=True)\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Dash AG Grid with a Bootstrap theme\n\nHere is an example of the theme change component to show different Bootstrap themes with Dash AG Grid:\n\n\nSee live demo https://hellodash.pythonanywhere.com/adding-themes/ag-grid\n\n![ag-grid-dbc-theme](https://github.com/AnnMarieW/dash-bootstrap-templates/assets/72614349/10bd25fc-1e01-4ba9-ac38-d18a14d7ef4f)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## Background\n\n[Dash Labs](https://community.plotly.com/t/introducing-dash-labs/52087) is Plotly library that explores new features for future releases of Dash. \nIn Dash Labs V0.4.0, there was a cool feature where Bootstrap themed figure templates were created \"on the fly\". This was a\npart of the layout templates project that is no longer being developed.    \n\nEven though these Bootstrap themed figure templates will not be included in Dash, the `dash-bootstrap-templates` makes\nthem available to you. The figure templates are created using the Dash Labs' algorithms and saved in json format.  When \nyou use `load_figure_template()` in your app, it loads the json file, adds it to `plotly.io` and sets it as the default figure template for an app.  See more \ninformation about  Plotly figure templates [here](https://plotly.com/python/templates/).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## Available Themes\n\nThis library provides a figure template for the following Bootstrap/Bootswatch themes:\n\ntemplates = [\n  \"bootstrap\",\n  \"cerulean\",\n  \"cosmo\",\n  \"cyborg\",\n  \"darkly\",\n  \"flatly\",\n  \"journal\",\n  \"litera\",\n  \"lumen\",\n  \"lux\",\n  \"materia\",\n  \"minty\",\n  \"morph\",\n  \"pulse\",\n  \"quartz\",\n  \"sandstone\",\n  \"simplex\",\n  \"sketchy\",\n  \"slate\",\n  \"solar\",\n  \"spacelab\",\n  \"superhero\",\n  \"united\",\n  \"vapor\",\n  \"vizro\",\n  \"yeti\",\n  \"zephyr\"\n]\n\ntemplates_dark = ['bootstrap_dark', 'cerulean_dark', 'cosmo_dark', 'cyborg_dark', 'darkly_dark', 'flatly_dark', 'journal_dark', 'litera_dark', 'lumen_dark', 'lux_dark', 'materia_dark', 'minty_dark', 'morph_dark', 'pulse_dark', 'quartz_dark', 'sandstone_dark', 'simplex_dark', 'sketchy_dark', 'slate_dark', 'solar_dark', 'spacelab_dark', 'superhero_dark', 'united_dark', 'vapor_dark', 'vizro_dark, 'yeti_dark', 'zephyr_dark']\n\n\n\nNote in dark themes [\"cyborg\", \"darkly\", \"slate\", \"solar\", \"superhero\", \"vapor\"], there is not much difference in the figure templates in light or dark color modes.\n\n\n\n## ThemeChangerAIO Reference\n**ThemeChangerAIO** is an All-in-One component  composed  of a parent `html.Div` with\nthe following components as children:\n\n- `dbc.Button` (\"`switch`\") Opens the Offcanvas component for user to select a theme.\n- `dbc.Offcanvas` (\"`offcanvas`\")\n- `dbc.RadioItems` (\"`radio`\").  The themes are displayed as RadioItems inside the `dbc.Offcanvas` component.\n  The `value` is a url for the theme\n- `html.Div` is used as the `Output` of the clientside callbacks.\n\nThe ThemeChangerAIO component updates the stylesheet  when the `value` of radio changes. (ie the user selects a new theme)\n\n- param: `radio_props` A dictionary of properties passed into the dbc.RadioItems component. The default `value` is `dbc.themes.BOOTSTRAP`\n- param: `button_props`  A dictionary of properties passed into the dbc.Button component.\n- param: `offcanvas_props`. A dictionary of properties passed into the dbc.Offcanvas component\n- param: `aio_id` The All-in-One component ID used to generate components' dictionary IDs.\n\nThe All-in-One component dictionary IDs are available as:\n\n- ThemeChangerAIO.ids.radio(aio_id)\n- ThemeChangerAIO.ids.offcanvas(aio_id)\n- ThemeChangerAIO.ids.button(aio_id)\n    \n\n## ThemeSwitchAIO Reference\n\n**ThemeSwitchAIO** is an All-in-One component  composed  of a parent `html.Div` with the following components as children:\n\n- `dbc.Switch` (\"`switch`\") with icons to the left and right of the switch.\n- `dcc.Store` (\"`store`\") The `themes` are stored in the `data` prop.\n- `html.Div` is used as the `Output` of the clientside callbacks.\n\nThe ThemeSwitchAIO component updates the stylesheet when triggered by changes to the `value` of `switch` or when\nthe themes are updated in the \"`store`\" component.  The themes in the switch may be updated in a callback\nby changing the theme urls in the \"`store`\" component.\n\n- param: `switch_props` A dictionary of properties passed into the dbc.Switch component.\n- param: `themes` A list of two urls for the external stylesheets or pathnames to files.\n- param: `icons`  A dict of the icons to the left and right of the switch. The default is  \n  `{\"left\" :\"fa fa-moon\", \"right\" :\"fa fa-sun\"}`.\n- param: `aio_id` The All-in-One component ID used to generate component's dictionary IDs.\n\nThe All-in-One component dictionary IDs are available as\n- ThemeSwitchAIO.ids.switch(aio_id)\n- ThemeSwitchAIO.ids.store(aio_id)\n\n---\n\n### Contributors\nSpecial thanks to @tcbegley and @emilhe for their help with this project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannmariew%2Fdash-bootstrap-templates","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fannmariew%2Fdash-bootstrap-templates","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fannmariew%2Fdash-bootstrap-templates/lists"}