{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a37ac4b2-78f7-4fb6-8f53-5b8cbdedbf20",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "from panel_material_ui import ThemeToggle\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "01e701e1-808e-4fba-91ad-feb760a41acd",
   "metadata": {},
   "source": [
    "The `ThemeToggle` provides a toggle to switch between light and dark themes. When added to an application the theme will be managed globally. This means that toggling will switch between the default light theme and the dark theme for all other components on the page.\n",
    "\n",
    "## Parameters:\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`theme`** (`Literal[\"dark\", \"default\"]`): The currently selected theme.\n",
    "* **`value`** (`boolean`): Reflects the current `theme` (True if 'dark', False if 'default').\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`color`** (`Literal[\"primary\", \"secondary\"]`): The color variant of the theme toggle.\n",
    "* **`variant`** (`Literal[\"icon\", \"switch\"]`): The display variant of the toggle.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cff50f9a-2b28-4b5b-811d-441d9e5ea587",
   "metadata": {},
   "source": [
    "The `ThemeToggle` can be added to an application like any other component and will globally take control over the theme:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ce4a6c12-733c-4923-b863-0f31691a9da6",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle = ThemeToggle()\n",
    "\n",
    "pmui.Row(\n",
    "    \"# My App\",\n",
    "    toggle\n",
    ").preview(height=100, width=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "deb6fd5b-285e-44af-8d49-57215efa484b",
   "metadata": {},
   "source": [
    "The current theme value is available via the `theme` and `value` parameters, where `theme` toggles between \"dark\" and \"default\" while the `value` reflects whether dark mode is enabled:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "74a7c4bb-af1d-4518-98a4-00b85c39c654",
   "metadata": {},
   "outputs": [],
   "source": [
    "toggle.value, toggle.theme"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c5aa99b2-6cc5-4cac-b19e-620c137f8894",
   "metadata": {},
   "source": [
    "By default the application will use the `\"icon\"` variant but you can be toggled to use a `\"switch\"` variant instead:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "405b1d6b-93cb-40c2-b798-e584e3eb6191",
   "metadata": {},
   "outputs": [],
   "source": [
    "switch = ThemeToggle(variant='switch')\n",
    "\n",
    "pmui.Row(\n",
    "    \"# My App\",\n",
    "    switch\n",
    ").preview(height=100, width=320)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}