Cusom Themes support in ThemePicker

[ndendic]

No description provided.

[gitnotebooks]

Found 1 changed notebook. Review the changes at https://app.gitnotebooks.com/AnswerDotAI/MonsterUI/pull/71

[ndendic]

Hello @Isaac-Flath, added a small change to support custom themes in ThemePicker. Please review and let me know if something should be adjusted.

[Isaac-Flath]

Would you mind providing an example or a guide I can add to the documentation page for how to do custom themes? Other people are very interested in custom themes too!

(This PR would resolve #38 )

[ndendic]

Hey @Isaac-Flath sure. I thought adding new nb under docs/guides but decided not to mess around that.
Here is my customization flow.

1. Go to https://ui.jln.dev/ to generate a new theme
2. Then "Copy current theme as code" (second button on the bottom menu)
3. I would then adjust the theme CSS to look something like this

/* 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%;
}

4. Place that CSS in new static .css file and load it to your FastHTML headers like:

custom_theme_css = Link(rel="stylesheet", href="/css/custom_theme.css", type="text/css")
monsterui_headers = Theme.rose.headers()

app, rt = fast_app(
    static_path="assets",
    live=True,
    pico=False,
    hdrs=(
        monsterui_headers,
        custom_theme_css,
    ),
    htmlkw=dict(cls="bg-surface-light dark:bg-surface-dark"),
)

5. Add custom theme in ThemePicker like this:

ThemePicker(custom_themes=[("Grass", "#10b981")] 

This will add new "Grass" theme button with circle colored with provided RGB color to theme picker