Merge pull request #71 from ndendic/custom-themes-support

Cusom Themes support in ThemePicker

docs/api_reference/api_reference.py

@@ -184,9 +184,18 @@ def ex_theme_switcher():
     H3("Theme Picker", id='theme'),
     fn2code_string(ex_theme_switcher),
     ThemePicker,
+    H3("Custom Themes"),
+    render_md("""
+1. You can use [this theme](https://github.com/AnswerDotAI/MonsterUI/blob/main/docs/custom_theme.css) as a starting point.
+2. Add the theme to your headers as a link like this `Link(rel="stylesheet", href="/custom_theme.css", type="text/css")`
+3. Then add the theme to the `ThemePicker` component. For example `ThemePicker(custom_themes=[('Grass', '#10b981')])`
+"""),
     "Themes are controlled with `bg-background text-foreground` classes on the `Body` tag.  `fast_app` and `FastHTML` will do this for you automatically so you typically do not have to do anything",
     fast_app,
     FastHTML,
+
+    Blockquote(P("Users have said", A("this site", href="https://ui.jln.dev/"), " is helpful in creating your own themes.")),
+
     title="Headers")
 
 # Typography

docs/custom_theme.css

@@ -0,0 +1,56 @@
+/* custom_theme.css */
+
+.uk-theme-grass {
+    --background: 78 47% 99%;
+    --foreground: 78 51% 0%;
+    --muted: 78 12% 85%;
+    --muted-foreground: 78 8% 38%;
+    --popover: 78 47% 99%;
+    --popover-foreground: 78 51% 0%;
+    --card: 78 47% 99%;
+    --card-foreground: 78 51% 0%;
+    --border: 78 2% 93%;
+    --input: 78 2% 93%;
+    --primary: 78 28% 60%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 78 8% 81%;
+    --secondary-foreground: 78 8% 21%;
+    --accent: 78 8% 81%;
+    --accent-foreground: 78 8% 21%;
+    --destructive: 17 86% 32%;
+    --destructive-foreground: 17 86% 92%;
+    --ring: 78 28% 60%;
+    --chart-1: 78 28% 60%;
+    --chart-2: 78 8% 81%;
+    --chart-3: 78 8% 81%;
+    --chart-4: 78 8% 84%;
+    --chart-5: 78 31% 60%;
+    --radius: 0.5rem;
+  }
+
+  .dark.uk-theme-grass {
+    --background: 78 48% 2%;
+    --foreground: 78 24% 99%;
+    --muted: 78 12% 15%;
+    --muted-foreground: 78 8% 62%;
+    --popover: 78 48% 2%;
+    --popover-foreground: 78 24% 99%;
+    --card: 78 48% 2%;
+    --card-foreground: 78 24% 99%;
+    --border: 78 2% 14%;
+    --input: 78 2% 14%;
+    --primary: 78 28% 60%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 78 8% 14%;
+    --secondary-foreground: 78 8% 74%;
+    --accent: 78 8% 14%;
+    --accent-foreground: 78 8% 74%;
+    --destructive: 17 86% 60%;
+    --destructive-foreground: 17 86% 0%;
+    --ring: 78 28% 60%;
+    --chart-1: 78 28% 60%;
+    --chart-2: 78 8% 14%;
+    --chart-3: 78 8% 14%;
+    --chart-4: 78 8% 17%;
+    --chart-5: 78 31% 60%;
+  }

docs/main.py

@@ -23,7 +23,11 @@ def _not_found(req, exc):
         req,
         None)
 
-app,rt = fast_app(exception_handlers={404:_not_found}, pico=False, hdrs=(*Theme.blue.headers(highlightjs=True), Link(rel="icon", type="image/x-icon", href="/favicon.ico")), live=True)
+
+app,rt = fast_app(exception_handlers={404:_not_found}, pico=False, 
+                  hdrs=(*Theme.blue.headers(highlightjs=True), Link(rel="icon", type="image/x-icon", href="/favicon.ico"),
+                        Link(rel="stylesheet", href="/custom_theme.css", type="text/css")), 
+                  live=True)
 
 def is_htmx(request=None): 
     "Check if the request is an HTMX request"
@@ -157,7 +161,7 @@ def tutorial_layout(o:str='', request=None):
 
 @rt
 def theme_switcher(request): 
-    return _create_page(Div(ThemePicker(),cls="p-12"), request, None)
+    return _create_page(Div(ThemePicker(custom_themes=[("Grass", "#10b981")]),cls="p-12"), request, None)
 
 ###
 # Build the Getting Started Pages

monsterui/franken.py

@@ -1496,7 +1496,7 @@ def render_md(md_content:str, # Markdown content
     return NotStr(apply_classes(html_content, class_map, class_map_mods))
 
 # %% ../nbs/02_franken.ipynb
-def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4'):
+def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[]):
     "Theme picker component with configurable sections"
     def _opt(val, txt, **kwargs): return Option(txt, value=val, **kwargs)
     def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)
@@ -1508,7 +1508,7 @@ def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)
           [('Slate','#64748b'),('Stone','#78716c'),('Gray','#6b7280'),
            ('Neutral','#737373'),('Red','#dc2626'),('Rose','#e11d48'),
            ('Orange','#f97316'),('Green','#16a34a'),('Blue','#2563eb'),
-           ('Yellow','#facc15'),('Violet','#7c3aed')]]]))
+           ('Yellow','#facc15'),('Violet','#7c3aed'),*custom_themes]]]))
     if radii: groups.append(_optgrp('radii', 'Radii', [
         _opt('uk-radii-none','None'), _opt('uk-radii-sm','Small'),
         _opt('uk-radii-md','Medium',selected=True), _opt('uk-radii-lg','Large')]))

nbs/02_franken.ipynb

@@ -5642,7 +5642,7 @@
    "outputs": [],
    "source": [
     "#| export\n",
-    "def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4'):\n",
+    "def ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[]):\n",
     "    \"Theme picker component with configurable sections\"\n",
     "    def _opt(val, txt, **kwargs): return Option(txt, value=val, **kwargs)\n",
     "    def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)\n",
@@ -5654,7 +5654,7 @@
     "          [('Slate','#64748b'),('Stone','#78716c'),('Gray','#6b7280'),\n",
     "           ('Neutral','#737373'),('Red','#dc2626'),('Rose','#e11d48'),\n",
     "           ('Orange','#f97316'),('Green','#16a34a'),('Blue','#2563eb'),\n",
-    "           ('Yellow','#facc15'),('Violet','#7c3aed')]]]))\n",
+    "           ('Yellow','#facc15'),('Violet','#7c3aed'),*custom_themes]]]))\n",
     "    if radii: groups.append(_optgrp('radii', 'Radii', [\n",
     "        _opt('uk-radii-none','None'), _opt('uk-radii-sm','Small'),\n",
     "        _opt('uk-radii-md','Medium',selected=True), _opt('uk-radii-lg','Large')]))\n",