diff --git a/monsterui/core.py b/monsterui/core.py index 77d8046..ef941e7 100644 --- 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 index 580969d..3236d5c 100644 --- 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": {