{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import holoviews as hv\n",
    "import panel as pn\n",
    "from bokeh.themes.theme import Theme\n",
    "\n",
    "hv.extension(\"bokeh\")\n",
    "hv.renderer('bokeh').theme = Theme(json={}) # Reset Theme\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Material Template for Panel\n",
    "\n",
    "[Panel](https://panel.holoviz.org/index.html) is a framework for creating awesome analytics apps in Python.\n",
    "\n",
    "**In Panel you are able to customize the layout and style using a [Custom Template](https://panel.holoviz.org/user_guide/Templates.html).**\n",
    "\n",
    "One popular design specification is [Material Design](https://material.io/design/). The following frameworks aims to implement the Material Design specification\n",
    "\n",
    "- [Material Design Lite](https://getmdl.io/) (`mdl`) (simple components)\n",
    "- [Material Design Components for the Web](https://material.io/develop/web/) (`mdc`) (advanced components)\n",
    "- [Material Web Components](https://github.com/material-components/material-components-web-components) (`mwc`) (web components on top of mdc)\n",
    "\n",
    "The `mwc` components should be the easiest to integrate with Panel, so we will base the following on `mwc` with a fall back to `mdc` when needed.\n",
    "\n",
    "<img src=\"https://www.sketchappsources.com/resources/source-image/baseline-material-design-components-marina.jpg\" alt=\"Girl in a jacket\" style=\"height:200px;display:inline-block\"> \n",
    "<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/master/packages/top-app-bar-fixed/images/fixed.gif\" alt=\"Girl in a jacket\" style=\"height:200px;display:inline-block\"> "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Material Introduction\n",
    "\n",
    "### Fonts\n",
    "\n",
    "Material Design uses the **Roboto** Font and **Material Icons**. Lets import them."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fonts_html = \"\"\"\n",
    "<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\" rel=\"stylesheet\">\n",
    "<link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\">\n",
    "\"\"\"\n",
    "pn.pane.HTML(fonts_html, height=0, width=0, sizing_mode=\"fixed\", margin=0)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### MWC Components\n",
    "\n",
    "We start by importing the **components**. \n",
    "\n",
    "We will be using the `mwc-button`, `mwc-drawer`, `mwc-icon-button`, `mwc-slider`, `mwc-top-app-bar-fixed` in our examples."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "modules_html = \"\"\"\n",
    "<script src=\"https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-button?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-drawer?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-icon-button?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-slider?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-top-app-bar-fixed?module\"></script>\n",
    "\"\"\"\n",
    "pn.pane.HTML(modules_html, height=0, width=0, sizing_mode=\"fixed\", margin=0)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Then the app **layout**, **contents** and some code to enable **toggling** of the `mwcdrawer` as well as displaying the app in a note book cell."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "example_html = \"\"\"\n",
    "<div>\n",
    "<mwc-drawer hasHeader type=\"dismissible\">\n",
    "    <span slot=\"title\">Material App</span>\n",
    "    <div class=\"appMenu\">\n",
    "        <mwc-button label=\"Data\" icon=\"archive\"></mwc-button>\n",
    "        <mwc-button label=\"Models\" icon=\"gesture\"></mwc-button>\n",
    "        <mwc-button label=\"Analytics\" icon=\"assessment\"></mwc-button>\n",
    "    </div>\n",
    "    <div class=\"appContent\" slot=\"appContent\">\n",
    "        <mwc-top-app-bar-fixed class=\"appBar\">\n",
    "            <mwc-icon-button icon=\"menu\" slot=\"navigationIcon\" class=\"appDrawerToggleButton\"></mwc-icon-button>\n",
    "            <div slot=\"title\" style=\"font-size:20px;\">Panel App using Custom Template</div>\n",
    "            <mwc-icon-button icon=\"file_download\" slot=\"actionItems\"></mwc-icon-button>\n",
    "            <mwc-icon-button icon=\"print\" slot=\"actionItems\"></mwc-icon-button>\n",
    "            <mwc-icon-button icon=\"favorite\" slot=\"actionItems\"></mwc-icon-button>\n",
    "        </mwc-top-app-bar-fixed>\n",
    "        <div style=\"padding: 25px\">\n",
    "            <p><h1>Main Content!</h1></p>\n",
    "            <mwc-button raised=\"\" label=\"raised\"></mwc-button>\n",
    "            <mwc-icon-button icon=\"favorite\" slot=\"actionItems\"></mwc-icon-button>\n",
    "            <mwc-slider pin markers max=\"50\" value=\"10\" step=\"5\"></mwc-slider>\n",
    "        </div>\n",
    "    </div>\n",
    "</mwc-drawer>\n",
    "<script>\n",
    "        var drawers = document.getElementsByTagName(\"mwc-drawer\");\n",
    "        \n",
    "        <!-- Enables toggling of multiple drawers --> \n",
    "        for (let drawer of drawers){\n",
    "            var button = drawer.getElementsByClassName('appDrawerToggleButton')[0];\n",
    "            button.onclick = function(e) {\n",
    "            var button = e.target;\n",
    "            var drawer = button;\n",
    "            while (drawer.tagName!==\"MWC-DRAWER\") {\n",
    "              drawer=drawer.parentElement;\n",
    "            }\n",
    "            drawer.open = !drawer.open;\n",
    "            };\n",
    "\n",
    "        \n",
    "            <!-- Enables displaying the bar in a notebook cell instead of full window --> \n",
    "            var bar = drawer.getElementsByClassName('appBar')[0];\n",
    "            bar.scrollTarget = drawer.getElementsByClassName('appContent')[0];\n",
    "        }\n",
    "</script>\n",
    "</div>\n",
    "\"\"\"\n",
    "pn.pane.HTML(example_html, sizing_mode=\"stretch_width\", height=300)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## MDC Grid"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `mwc` framework does not contain a **grid system**. But the `mdc` framework does.\n",
    "\n",
    "It uses a a system of columns to create responsiveness and layout across mobile, tablet and desktop.\n",
    "\n",
    "- Desktop: 12 Columns\n",
    "- Tables: 8 Columns\n",
    "- Mobile: 4 Columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_import_html = \"\"\"\n",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/@material/layout-grid@3.1.0/dist/mdc.layout-grid.min.css\">\n",
    "\"\"\"\n",
    "pn.pane.HTML(grid_import_html, height=0, width=0, sizing_mode=\"fixed\", margin=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid_example_html = \"\"\"\n",
    "<div class=\"mdc-layout-grid demo-grid\">\n",
    "<div class=\"mdc-layout-grid__inner\">\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-1 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-8 demo-grid-cell\"></div>\n",
    "    <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 demo-grid-cell\"></div>\n",
    "</div>\n",
    "</div>\n",
    "<style>\n",
    ".demo-grid {\n",
    "  background: rgba(0, 0, 0, 0.2);\n",
    "  min-width: 360px;\n",
    "}\n",
    "\n",
    ".demo-grid-cell {\n",
    "  background: rgba(0, 0, 0, 0.2);\n",
    "  height: 75px;\n",
    "}\n",
    "</style>\n",
    "\"\"\"\n",
    "pn.pane.Markdown(grid_example_html, sizing_mode=\"stretch_width\", height=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Try **resizing the window** from large to small and back and see how the grid responds."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Material Template for Panel with grid layout\n",
    "\n",
    "Using the above we are now able to construct an example Material Template for Panel with a grid layout."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "template = \"\"\"\n",
    "{% extends base %}\n",
    "\n",
    "<!-- goes in head -->\n",
    "{% block postamble %}\n",
    "<script src=\"https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-button?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-drawer?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-icon-button?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-slider?module\"></script>\n",
    "<script type=\"module\" src=\"https://unpkg.com/@material/mwc-top-app-bar-fixed?module\"></script>\n",
    "<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500\" rel=\"stylesheet\">\n",
    "<link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\">\n",
    "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/@material/layout-grid@0.41.0/dist/mdc.layout-grid.min.css\">\n",
    "<style>\n",
    ".grid {\n",
    "  width: 100%;\n",
    "  background: #EEEEEE;\n",
    "}\n",
    "\n",
    ".grid-cell {\n",
    "  height: 210px;\n",
    "  border-radius: 4px;\n",
    "  <-- box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -->\n",
    "  padding: 5px;\n",
    "}\n",
    "</style>\n",
    "\n",
    "<style>\n",
    "body {\n",
    "    font-family: roboto;\n",
    "    margin: 0px;\n",
    "}\n",
    "mwc-top-app-bar-fixed {\n",
    "    box-shadow: 5px 5px 20px #9E9E9E;\n",
    "    font-size: 20px;\n",
    "}\n",
    "\n",
    "mwc-drawer {\n",
    "    min-height:200px;\n",
    "    height:100%;\n",
    "}\n",
    ".appMenu * {\n",
    "    width:100%;\n",
    "    align-items: left;\n",
    "}\n",
    ".appMain {\n",
    "    margin: 25px;\n",
    "    padding: 25px;\n",
    "}\n",
    "</style>\n",
    "\n",
    "{% endblock %}\n",
    "\n",
    "<!-- goes in body -->\n",
    "{% block contents %}\n",
    "<mwc-drawer hasHeader type=\"dismissible\">\n",
    "    <span slot=\"title\">{{ app_title }}</span>\n",
    "    <span slot=\"subtitle\">subtitle</span>\n",
    "    <div class=\"appMenu\">\n",
    "        <mwc-button label=\"Data\" icon=\"archive\"></mwc-button>\n",
    "        <mwc-button label=\"Models\" icon=\"gesture\"></mwc-button>\n",
    "        <mwc-button label=\"Analytics\" icon=\"assessment\"></mwc-button>\n",
    "    </div>\n",
    "    <div class=\"appContent\" slot=\"appContent\">\n",
    "        <mwc-top-app-bar-fixed class=\"appBar\">\n",
    "            <mwc-icon-button icon=\"menu\" slot=\"navigationIcon\" class=\"appDrawerToggleButton\"></mwc-icon-button>\n",
    "            <div slot=\"title\" style=\"font-size:20px;\">{{ app_title }}</div>\n",
    "            <mwc-icon-button icon=\"favorite\" slot=\"actionItems\"></mwc-icon-button>\n",
    "            <mwc-icon-button icon=\"perm_identity\" slot=\"actionItems\" label=\"Login\"></mwc-icon-button>\n",
    "        </mwc-top-app-bar-fixed>\n",
    "        <div class=\"appMain\">\n",
    "            {{ embed(roots.Styles) }}\n",
    "            <p><h1>Content!</h1></p>\n",
    "            <p>This is a Panel app using <b>a custom template</b> based on Material Design. It works both in the Notebook and as a web app.</p><br>\n",
    "            <mwc-button raised=\"\" label=\"raised\"></mwc-button>\n",
    "            <mwc-icon-button icon=\"favorite\" slot=\"actionItems\"></mwc-icon-button>\n",
    "            <mwc-slider pin markers max=\"50\" value=\"10\" step=\"5\"></mwc-slider>\n",
    "            <div class=\"mdc-layout-grid grid\">\n",
    "            <div class=\"mdc-layout-grid__inner\">\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12 grid-cell\">{{ embed(roots.G) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 grid-cell\">{{ embed(roots.A) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 grid-cell\">{{ embed(roots.B) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 grid-cell\">{{ embed(roots.C) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 grid-cell\">{{ embed(roots.D) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 grid-cell\">{{ embed(roots.E) }}</div>\n",
    "            <div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-3 grid-cell\">{{ embed(roots.F) }}</div>\n",
    "        </div>\n",
    "    </div>\n",
    "</mwc-drawer>\n",
    "<script>\n",
    "    var drawers = document.getElementsByTagName(\"mwc-drawer\");\n",
    "\n",
    "    <!-- Enables toggling of drawer --> \n",
    "    for (let drawer of drawers){\n",
    "      var button = drawer.getElementsByClassName('appDrawerToggleButton')[0];\n",
    "      button.onclick = function(e) {\n",
    "        var button = e.target;\n",
    "        var drawer = button;\n",
    "        while (drawer.tagName!==\"MWC-DRAWER\") {\n",
    "          drawer=drawer.parentElement;\n",
    "        }\n",
    "        drawer.open = !drawer.open;\n",
    "        const open = drawer.open;\n",
    "        \n",
    "        var drawers = document.getElementsByTagName(\"mwc-drawer\");\n",
    "        for (let drawer of drawers){drawer.open=open}\n",
    "      };\n",
    "      \n",
    "      <!-- Enables displaying the bar in a notebook cell instead of full window --> \n",
    "      var bar = drawer.getElementsByClassName('appBar')[0];\n",
    "      bar.scrollTarget = drawer.getElementsByClassName('appContent')[0];\n",
    "      \n",
    "      drawer.shadow\n",
    "    }\n",
    "</script>\n",
    "{% endblock %}\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's use the template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# The style_panel supports incrementally adding css in cells below for educational reasons\n",
    "style_panel = pn.pane.HTML(\"\", height=0, width=0, sizing_mode=\"fixed\", margin=0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tmpl = pn.Template(template=template)\n",
    "\n",
    "tmpl.add_variable('app_title', 'Panel App using Custom Template')\n",
    "material_green = \"rgb(0, 128, 0)\"\n",
    "material_purple= \"#9C27B0\"\n",
    "color = material_green\n",
    "line_width=4\n",
    "\n",
    "tmpl.add_panel('A', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('B', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('C', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('D', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('E', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('F', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('G', hv.Curve([1, 2, 3]).opts(height=200,color=color, line_width=line_width, responsive=True))\n",
    "tmpl.add_panel('Styles', style_panel)\n",
    "tmpl"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Lets take a look in the server"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def show_in_server(event):\n",
    "    tmpl.show()\n",
    "show_in_server_button = pn.widgets.Button(name=\"Show in server\")\n",
    "show_in_server_button.on_click(show_in_server)\n",
    "show_in_server_button"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Lets update the theme in the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dark_theme_style = \"\"\"\n",
    "<style>\n",
    ":root {\n",
    "    --mdc-theme-primary: green;\n",
    "    --mdc-theme-on-primary: white;\n",
    "    --mdc-theme-secondary: purple;\n",
    "    --mdc-theme-on-secondary: white;\n",
    "    --mdc-theme-background: #121212;\n",
    "}\n",
    "mwc-drawer {\n",
    "    color: white;\n",
    "    background: var(--mdc-theme-background);\n",
    "}\n",
    "\n",
    "mwc-top-app-bar-fixed {\n",
    "    box-shadow: none;\n",
    "}\n",
    "body {\n",
    "    background: var(--mdc-theme-background);\n",
    "}\n",
    ".grid {\n",
    "    background: #121212;\n",
    "}\n",
    ".grid-cell {\n",
    "  box-shadow: none;\n",
    "}\n",
    "\n",
    ".mdc-layout-grid__cell {\n",
    "    background: white;\n",
    "    background: #121212;\n",
    "    margin: -1px;\n",
    "    margin-right: -5px;\n",
    "}\n",
    "\n",
    ".mdc-layout-grid__cell .bk {\n",
    "    border-radius: 4px;\n",
    "}\n",
    "<style>\n",
    "\"\"\"\n",
    "style_panel.object += dark_theme_style"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Go back and take a look at the app."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Holoviews Theme\n",
    "\n",
    "You will also need to update the theme of each widget or pane your are using accordingly. For example the Holoviews plots as shown below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def set_hv_theme(\n",
    "    text,\n",
    "    inner_plot_color,\n",
    "    outer_plot_color,\n",
    "    legend_color,\n",
    "    \n",
    "):\n",
    "    theme = {\n",
    "        \"attrs\": {\n",
    "            \"Figure\": {\n",
    "                \"background_fill_color\": inner_plot_color,\n",
    "                \"border_fill_color\": outer_plot_color,\n",
    "                \"outline_line_color\": legend_color,\n",
    "                \"outline_line_alpha\": 0.25,\n",
    "            },\n",
    "            \"Grid\": {\"grid_line_color\": text, \"grid_line_alpha\": 0.25},\n",
    "            \"Axis\": {\n",
    "                \"major_tick_line_alpha\": 0,\n",
    "                \"major_tick_line_color\": text,\n",
    "                \"minor_tick_line_alpha\": 0,\n",
    "                \"minor_tick_line_color\": text,\n",
    "                \"axis_line_alpha\": 0,\n",
    "                \"axis_line_color\": text,\n",
    "                \"major_label_text_color\": text,\n",
    "                \"major_label_text_font\": \"roboto\",\n",
    "                \"major_label_text_font_size\": \"1.025em\",\n",
    "                \"axis_label_standoff\": 10,\n",
    "                \"axis_label_text_color\": text,\n",
    "                \"axis_label_text_font\": \"roboto\",\n",
    "                \"axis_label_text_font_size\": \"1.25em\",\n",
    "                \"axis_label_text_font_style\": \"normal\",\n",
    "            },\n",
    "            \"Legend\": {\n",
    "                \"spacing\": 8,\n",
    "                \"glyph_width\": 15,\n",
    "                \"label_standoff\": 8,\n",
    "                \"label_text_color\": text,\n",
    "                \"label_text_font\": \"roboto\",\n",
    "                \"label_text_font_size\": \"1.025em\",\n",
    "                \"border_line_alpha\": 0,\n",
    "                \"background_fill_alpha\": 0.25,\n",
    "                \"background_fill_color\": legend_color,\n",
    "            },\n",
    "            \"ColorBar\": {\n",
    "                \"title_text_color\": text,\n",
    "                \"title_text_font\": \"roboto\",\n",
    "                \"title_text_font_size\": \"1.025em\",\n",
    "                \"title_text_font_style\": \"normal\",\n",
    "                \"major_label_text_color\": text,\n",
    "                \"major_label_text_font\": \"roboto\",\n",
    "                \"major_label_text_font_size\": \"1.025em\",\n",
    "                \"background_fill_color\": legend_color,\n",
    "                \"major_tick_line_alpha\": 0,\n",
    "                \"bar_line_alpha\": 0,\n",
    "            },\n",
    "            \"Title\": {\n",
    "                \"text_color\": text,\n",
    "                \"text_font\": \"roboto\",\n",
    "                \"text_font_size\": \"1.15em\",\n",
    "            },\n",
    "        }\n",
    "    }\n",
    "    hv.renderer('bokeh').theme = Theme(json=theme)\n",
    "    \n",
    "\n",
    "set_hv_theme(\n",
    "    text=\"white\",\n",
    "    inner_plot_color=\"#424242\",\n",
    "    outer_plot_color=\"#212121\",\n",
    "    legend_color=\"#333333\",\n",
    ")\n",
    "tmpl.servable()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Resources\n",
    "\n",
    "- `mdc`: [Github](https://github.com/material-components/material-components-web), [Demo](https://material-components.github.io/material-components-web-catalog/#/), [Grid-Demo](https://material-components.github.io/material-components-web-catalog/#/component/layout-grid) [Css settings](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme)\n",
    "- `mwc`: [Github](https://github.com/material-components/material-components-web-components), [Demo](https://mwc-demos.glitch.me/demos/)\n",
    "- material-io: [Color System](https://material.io/design/color/#color-theme-creation), [Color Tool](https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee), [Resources](https://material.io/resources/)\n",
    "- Other: [material-ui](https://material-ui.com)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
