菜单
Change or add a themable style (border, color, shadow, radius, font) on a Courier UI web component — inbox, toast, preferences, or core. Use when adjusting a component's default look, adding a new theme property, or fixing a style that doesn't render in light or dark mode.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | update-component-theme |
| description | Change or add a themable style (border, color, shadow, radius, font) on a Courier UI web component — inbox, toast, preferences, or core. Use when adjusting a component's default look, adding a new theme property, or fixing a style that doesn't render in light or dark mode. |
The @trycourier/courier-ui-* packages style their web components through a theme object, not per-element CSS. Every default style change touches the same few places; this skill walks them in order.
For a package <pkg> (e.g. courier-ui-toast):
| What | Where |
|---|---|
| Theme types + defaults | @trycourier/<pkg>/src/types/<component>-theme.ts — defaultLightTheme, defaultDarkTheme, mergeTheme |
| CSS that consumes the theme | The component's getStyles(theme) (e.g. src/components/courier-toast.ts) — styles are injected globally, keyed by element id |
| Color palette | @trycourier/courier-ui-core/src/utils/courier-colors.ts (CourierColors) |
CourierColors — don't introduce new hex values. Conventions used across inbox/toast:
CourierColors.gray[500] (#E5E5E5)CourierColors.gray[400] (#3A3A3A)white[500] (light) / black[500] (dark)black[500] on a black[500] background). Assert in a test that the new value differs from backgroundColor.mergeTheme (nested objects need their own spread there — flat props merge automatically), and the component's getStyles. Existing property? Only the default values change.src/types/__tests__/ and run the package suite (see run-tests):
yarn workspace @trycourier/<pkg> run test
web-js example app (see run-example-app) — it aliases packages to src/, so no rebuild is needed. Toasts/inbox items can be spawned without auth from the console:
CourierToastDatastore.shared.addMessage({ messageId: "1", title: "Hi", body: "Test" });
mode="light" / mode="dark" on the element (the style refresh is async; re-read computed styles after ~300ms).sdk-libraries/courier-ui-inbox-web.mdx covers inbox, toast, and preferences; theme types appear in <Expandable> blocks). Package READMEs between the AUTO-GENERATED-OVERVIEW markers are synced from mintlify-docs sdk-libraries/readme-exports/ — never hand-edit those sections.Manage versioning for the @trycourier packages with changesets — create a changeset describing a version bump after changing package source, and bump package versions for release with `yarn changeset version`. Use when modifying @trycourier/*/src and a release-tracking changeset is needed, or when cutting a release locally / running the "Version Packages" step by hand.
Diagnose and drive the courier-web npm release pipeline — the Release workflow on main, the changesets "Version Packages" PR (changelogs + version bumps), and OIDC publishing to npm. Use when a Release run fails, packages didn't appear on npm after merging Version Packages, publishing hits ENEEDAUTH, or someone asks why the changelogs/release didn't kick off after a merge.
Keep the framework-SDK showcase example apps (react-latest, react-17, vue, and angular) at feature parity — the same set of demo pages and routes, one per SDK. Use whenever you add, change, or remove a demo in one showcase example (a new route/page, a themed variant, a custom-renderer demo, etc.) so the change is mirrored across the others, or when auditing that the showcases are in sync.
Checklist for adding a new example app under examples/* so it's runnable and discoverable. Use whenever you create a new example app (any new examples/<name> workspace) — it MUST be registered in .vscode/launch.json's "🚀 Run Example App" picker, and there are a few other wiring steps. Apply this any time you scaffold a new example.
Check or update the committed API reports for the @trycourier packages (API Extractor reports under api/*.api.md). Use when CI's "Build packages and check API changes" job fails on an API diff, when you intentionally changed a package's public API surface and need to refresh the committed report, or to verify locally that the reports are in sync before pushing.
Run one of the example apps' dev servers (the "🚀 Run Example App" launch config). Use when asked to start, run, preview, or manually test an example app (web-js, vue, next-latest, next-12, react-latest, react-17, designer), e.g. to see an inbox/toast/preferences change working in a browser.