Merge pull request #73 from RACollins/headers-theme-selection

Headers theme selection
AnswerDotAI · Feb 20, 2025 · 6ba7af9 · 6ba7af9
2 parents eb2f906 + 73ecc92
commit 6ba7af9
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 44 deletions.
diff --git a/monsterui/core.py b/monsterui/core.py
@@ -51,23 +51,25 @@ class ThemeFont:
 
 # %% ../nbs/01_core.ipynb
 def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows.sm, font=ThemeFont.sm):
-    mode_script = {
-        'auto': '''
+    franken_init = '''
           const __FRANKEN__ = JSON.parse(localStorage.getItem("__FRANKEN__") || "{}");
-
+    '''
+
+    mode_script = {
+        'auto': f'''
+          {franken_init}
           if (
             __FRANKEN__.mode === "dark" ||
             (!__FRANKEN__.mode &&
               window.matchMedia("(prefers-color-scheme: dark)").matches)
-          ) {
+          ) {{
             htmlElement.classList.add("dark");
-          } else {
+          }} else {{
             htmlElement.classList.remove("dark");
-          }
-
+          }}
         ''',
-        'light': 'htmlElement.classList.remove("dark");',
-        'dark': 'htmlElement.classList.add("dark");'
+        'light': f'{franken_init}\nhtmlElement.classList.remove("dark");',
+        'dark': f'{franken_init}\nhtmlElement.classList.add("dark");'
     }
 
     return fh.Script(f'''
@@ -106,16 +108,31 @@ def _download_resource(url, static_dir):
 # %% ../nbs/01_core.ipynb
 daisy_styles = Style("""
 :root {
+  --b1: from hsl(var(--background)) l c h;
+  --bc: from hsl(var(--foreground)) l c h;
+  --m: from hsl(var(--muted)) l c h;
+  --mc: from hsl(var(--muted-foreground)) l c h;
+  --po: from hsl(var(--popover)) l c h;
+  --poc: from hsl(var(--popover-foreground)) l c h;
+  --b2: from hsl(var(--card)) l c h;
+  --b2c: from hsl(var(--card-foreground)) l c h;
+  --br: from hsl(var(--border)) l c h;
+  --in: from hsl(var(--input)) l c h;
   --p: from hsl(var(--primary)) l c h;
   --pc: from hsl(var(--primary-foreground)) l c h;
   --s: from hsl(var(--secondary)) l c h;
   --sc: from hsl(var(--secondary-foreground)) l c h;
-  --b2: from hsl(var(--card-background)) l c h;
-  --b1: from hsl(var(--background)) l c h;
-  --bc: from hsl(var(--foreground)) l c h;
-  --b3: from hsl(var(--ring)) l c h;
+  --a: from hsl(var(--accent)) l c h;
+  --ac: from hsl(var(--accent-foreground)) l c h;
   --er: from hsl(var(--destructive)) l c h;
   --erc: from hsl(var(--destructive-foreground)) l c h;
+  --b3: from hsl(var(--ring)) l c h;
+  --ch1: from hsl(var(--chart-1)) l c h;
+  --ch2: from hsl(var(--chart-2)) l c h;
+  --ch3: from hsl(var(--chart-3)) l c h;
+  --ch4: from hsl(var(--chart-4)) l c h;
+  --ch5: from hsl(var(--chart-5)) l c h;
+  --rd: var(--radius);
 }
 """)
 

diff --git a/nbs/01_core.ipynb b/nbs/01_core.ipynb
@@ -175,23 +175,25 @@
    "source": [
     "#| export\n",
     "def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows.sm, font=ThemeFont.sm):\n",
-    "    mode_script = {\n",
-    "        'auto': '''\n",
+    "    franken_init = '''\n",
     "          const __FRANKEN__ = JSON.parse(localStorage.getItem(\"__FRANKEN__\") || \"{}\");\n",
-    "\n",
+    "    '''\n",
+    "    \n",
+    "    mode_script = {\n",
+    "        'auto': f'''\n",
+    "          {franken_init}\n",
     "          if (\n",
     "            __FRANKEN__.mode === \"dark\" ||\n",
     "            (!__FRANKEN__.mode &&\n",
     "              window.matchMedia(\"(prefers-color-scheme: dark)\").matches)\n",
-    "          ) {\n",
+    "          ) {{\n",
     "            htmlElement.classList.add(\"dark\");\n",
-    "          } else {\n",
+    "          }} else {{\n",
     "            htmlElement.classList.remove(\"dark\");\n",
-    "          }\n",
-    "\n",
+    "          }}\n",
     "        ''',\n",
-    "        'light': 'htmlElement.classList.remove(\"dark\");',\n",
-    "        'dark': 'htmlElement.classList.add(\"dark\");'\n",
+    "        'light': f'{franken_init}\\nhtmlElement.classList.remove(\"dark\");',\n",
+    "        'dark': f'{franken_init}\\nhtmlElement.classList.add(\"dark\");'\n",
     "    }\n",
     "    \n",
     "    return fh.Script(f'''\n",
@@ -244,16 +246,31 @@
     "#| export\n",
     "daisy_styles = Style(\"\"\"\n",
     ":root {\n",
+    "  --b1: from hsl(var(--background)) l c h;\n",
+    "  --bc: from hsl(var(--foreground)) l c h;\n",
+    "  --m: from hsl(var(--muted)) l c h;\n",
+    "  --mc: from hsl(var(--muted-foreground)) l c h;\n",
+    "  --po: from hsl(var(--popover)) l c h;\n",
+    "  --poc: from hsl(var(--popover-foreground)) l c h;\n",
+    "  --b2: from hsl(var(--card)) l c h;\n",
+    "  --b2c: from hsl(var(--card-foreground)) l c h;\n",
+    "  --br: from hsl(var(--border)) l c h;\n",
+    "  --in: from hsl(var(--input)) l c h;\n",
     "  --p: from hsl(var(--primary)) l c h;\n",
     "  --pc: from hsl(var(--primary-foreground)) l c h;\n",
     "  --s: from hsl(var(--secondary)) l c h;\n",
     "  --sc: from hsl(var(--secondary-foreground)) l c h;\n",
-    "  --b2: from hsl(var(--card-background)) l c h;\n",
-    "  --b1: from hsl(var(--background)) l c h;\n",
-    "  --bc: from hsl(var(--foreground)) l c h;\n",
-    "  --b3: from hsl(var(--ring)) l c h;\n",
+    "  --a: from hsl(var(--accent)) l c h;\n",
+    "  --ac: from hsl(var(--accent-foreground)) l c h;\n",
     "  --er: from hsl(var(--destructive)) l c h;\n",
     "  --erc: from hsl(var(--destructive-foreground)) l c h;\n",
+    "  --b3: from hsl(var(--ring)) l c h;\n",
+    "  --ch1: from hsl(var(--chart-1)) l c h;\n",
+    "  --ch2: from hsl(var(--chart-2)) l c h;\n",
+    "  --ch3: from hsl(var(--chart-3)) l c h;\n",
+    "  --ch4: from hsl(var(--chart-4)) l c h;\n",
+    "  --ch5: from hsl(var(--chart-5)) l c h;\n",
+    "  --rd: var(--radius);\n",
     "}\n",
     "\"\"\")\n"
    ]
@@ -402,15 +419,7 @@
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "serving katex JS\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "hdrs = Theme.blue.headers()\n",
     "app = FastHTML(hdrs=hdrs)"
@@ -420,15 +429,7 @@
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "serving katex JS\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "app, rt = fast_app(hdrs=Theme.blue.headers())\n",
     "Show = partial(HTMX, app=app)"
@@ -450,6 +451,13 @@
     "#| hide\n",
     "import nbdev; nbdev.nbdev_export()"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {