diff --git a/README.md b/README.md index ec29254..0289c9f 100644 --- a/README.md +++ b/README.md @@ -482,18 +482,51 @@ Now write raw HTML with ShellUI's Tailwind classes: --- +### Using tweakcn themes with `shellui theme` (new in 0.4.x) + +[tweakcn.com](https://tweakcn.com) is a visual theme editor for shadcn-style CSS variables. ShellUI's `theme` subcommand fetches a theme by URL and bakes it into your project at **build time** — no runtime dep, works offline, exactly-what-you-see-is-what-ships. + +```bash +# One-shot: init a fresh project AND apply a theme (Path C setup) +shellui theme init https://tweakcn.com/themes/ + +# Existing project: apply a theme to your input.css (Path B/C) +shellui theme apply https://tweakcn.com/themes/ + +# Existing project: emit standalone override CSS (Path A/D) +shellui theme apply https://tweakcn.com/themes/ --emit-override wwwroot/theme.css + +# Re-fetch the theme recorded in shellui.theme.lock +shellui theme update +``` + +Each `apply` writes a `shellui.theme.lock` file recording the source URL + SHA-256, so `shellui theme update` refreshes from the same source without you having to remember the URL. + +**How it drops into each install path:** + +| Path | Command | Where the theme lands | +|---|---|---| +| **A** — precompiled bundle | `shellui theme apply --emit-override wwwroot/theme.css`, then `` it after `shellui-all.css` | Standalone override CSS; wins the cascade over the baked bundle | +| **B** — safelist | `shellui theme apply ` | Sentinel-marked region in your `wwwroot/input.css`; user content outside markers survives re-applies | +| **C** — CLI | `shellui theme init ` (fresh) or `shellui theme apply ` (existing) | Sentinel-marked region in the `input.css` `shellui init` created; Tailwind rebuilds on `dotnet build` | +| **D** — CDN | `shellui theme apply --emit-override theme.css`, then `` it after the CDN link | Same override pattern as Path A | + +The apply is **idempotent** — re-running with the same URL produces byte-identical output. Custom utilities, `@source` directives, and imports you added around the theme block are preserved verbatim. + +--- + ### Theming across paths All four paths use the same CSS variable system, so theming works uniformly — just with different edit surfaces: -| Path | Where the theme lives | How you edit it | -|---|---|---| -| A | Baked in `shellui-all.css` | Override CSS vars in a ` + ``` **Best for:** new projects, prototypes, teams without existing Tailwind, "just get me components" scenarios. @@ -93,6 +96,13 @@ The package copies `shellui-classes.txt` (auto-generated safelist of every Tailw } ``` +Or auto-import a tweakcn theme into the `:root` / `.dark` blocks (idempotent, preserves your custom utilities and imports around it): + +```bash +dotnet tool install -g ShellUI.CLI +dotnet shellui theme apply https://tweakcn.com/themes/ +``` + ```razor @* _Imports.razor *@ @using ShellUI.Components @@ -122,6 +132,9 @@ The package copies `shellui-classes.txt` (auto-generated safelist of every Tailw dotnet tool install -g ShellUI.CLI shellui init # one-time shellui add button card dialog # any time you want more components + +# Or one-shot: init + tweakcn theme +shellui theme init https://tweakcn.com/themes/ --yes ``` `shellui init` automatically: @@ -259,12 +272,29 @@ ShellUI components work alongside Bootstrap. You can: ### 🎨 Theme Customization -**Easily customize themes with [tweakcn](https://tweakcn.com/):** +**Easiest — auto-import a [tweakcn](https://tweakcn.com/) theme with the CLI:** + +```bash +dotnet tool install -g ShellUI.CLI + +# Path B / Path C — write into wwwroot/input.css between sentinel markers +dotnet shellui theme apply https://tweakcn.com/themes/ + +# Path A — emit standalone override CSS, link AFTER shellui-all.css +dotnet shellui theme apply https://tweakcn.com/themes/ --emit-override wwwroot/theme.css + +# Refresh later from the same URL (recorded in shellui.theme.lock) +dotnet shellui theme update +``` + +Re-runs are idempotent. Your custom utilities, `@source` directives, and imports outside the sentinel block are preserved verbatim. + +**Manual alternative:** 1. Design your perfect theme on tweakcn 2. Copy the generated CSS variables 3. Paste into `wwwroot/input.css` -4. All ShellUI components update automatically! +4. All ShellUI components update automatically **Custom Fonts:** Add Google Fonts links and update `--font-*` variables in your CSS.