feat(cli): add --theme option to build command#2874
Conversation
🦋 Changeset detectedLatest commit: 07f3e4f The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
e965d3f to
a14a764
Compare
📝 WalkthroughWalkthroughAdds a Changes
Sequence Diagram(s)sequenceDiagram
participant User as User/CLI
participant Build as Build (likec4 build)
participant Vite as Vite Build
participant App as App Runtime (__root)
rect rgba(200,220,255,0.5)
User->>Build: run `likec4 build --theme (light|dark)`
end
rect rgba(200,255,200,0.5)
Build->>Vite: pass `theme` into viteBuild config
Vite->>Vite: define __DEFAULT_THEME__ = JSON.stringify(theme ?? 'auto')
end
rect rgba(255,230,200,0.5)
Vite->>App: compiled app with __DEFAULT_THEME__ constant
App->>App: RootComponent reads __DEFAULT_THEME__ and URL to set defaultColorScheme
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
a14a764 to
a40082e
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/likec4/src/cli/options.ts (1)
70-74: Extract shared theme choices/type to avoid drift.The option works, but the
'light' | 'dark'union is now duplicated across files. Consider exporting a sharedbuildThemeChoices/BuildThemefrom one module and reusing it in CLI + Vite config typings.As per coding guidelines, "Agent types and interfaces should be defined separately and reused across the codebase."♻️ Suggested local refactor starting point
+export const buildThemeChoices = ['light', 'dark'] as const +export type BuildTheme = (typeof buildThemeChoices)[number] + export const theme = { - choices: ['light', 'dark'] as const, + choices: buildThemeChoices, desc: 'default color scheme for the built website', nargs: 1, } as const satisfies Options🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/likec4/src/cli/options.ts` around lines 70 - 74, The theme option duplicates the 'light'|'dark' union; extract a shared constant and type (e.g., export const buildThemeChoices = ['light','dark'] as const and export type BuildTheme = typeof buildThemeChoices[number]) from a common module and import them where needed; update the CLI option (theme) to use buildThemeChoices for choices and BuildTheme for any typings, and update the Vite/config typings to reference the same BuildTheme so the union is defined in one place and reused.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/likec4/src/cli/options.ts`:
- Around line 70-74: The theme option duplicates the 'light'|'dark' union;
extract a shared constant and type (e.g., export const buildThemeChoices =
['light','dark'] as const and export type BuildTheme = typeof
buildThemeChoices[number]) from a common module and import them where needed;
update the CLI option (theme) to use buildThemeChoices for choices and
BuildTheme for any typings, and update the Vite/config typings to reference the
same BuildTheme so the union is defined in one place and reused.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f15e47c3-2290-42c4-9606-3d2878ae36d2
📒 Files selected for processing (8)
.changeset/build-theme-option.mdpackages/likec4/app/global.d.tspackages/likec4/app/src/routes/__root.tsxpackages/likec4/src/cli/build/index.tspackages/likec4/src/cli/options.tspackages/likec4/src/vite/config-app.prod.tspackages/likec4/src/vite/config-app.tspackages/likec4/src/vite/config-webcomponent.ts
a40082e to
764eee3
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
764eee3 to
e7c2555
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/likec4/app/global.d.ts (1)
19-20: Extract__DEFAULT_THEME__union into a reusable type.Line 20 currently inlines the theme union. Defining a named type improves reuse and reduces drift risk across CLI/Vite/app boundaries.
♻️ Proposed refactor
+type DefaultTheme = 'light' | 'dark' | 'auto' + // default is 'auto', set via --theme CLI option -declare const __DEFAULT_THEME__: 'light' | 'dark' | 'auto' +declare const __DEFAULT_THEME__: DefaultThemeAs per coding guidelines:
**/*.{ts,tsx}: Agent types and interfaces should be defined separately and reused across the codebase.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/likec4/app/global.d.ts` around lines 19 - 20, Extract the inline union into a named exported type (e.g., ThemeMode or DefaultTheme) and replace the inline union on the const declaration with that type; specifically create a reusable type declaration for the theme union and update __DEFAULT_THEME__'s type to reference it so other modules (CLI/Vite/app) can import and reuse the same Theme type instead of duplicating "'light' | 'dark' | 'auto'".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/likec4/app/global.d.ts`:
- Around line 19-20: Extract the inline union into a named exported type (e.g.,
ThemeMode or DefaultTheme) and replace the inline union on the const declaration
with that type; specifically create a reusable type declaration for the theme
union and update __DEFAULT_THEME__'s type to reference it so other modules
(CLI/Vite/app) can import and reuse the same Theme type instead of duplicating
"'light' | 'dark' | 'auto'".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a4056770-4af9-4e92-a82d-7e687b622890
📒 Files selected for processing (9)
.changeset/build-theme-option.mdpackages/likec4/app/global.d.tspackages/likec4/app/src/routes/__root.tsxpackages/likec4/app/tsconfig.jsonpackages/likec4/src/cli/build/index.tspackages/likec4/src/cli/options.tspackages/likec4/src/vite/config-app.prod.tspackages/likec4/src/vite/config-app.tspackages/likec4/src/vite/config-webcomponent.ts
✅ Files skipped from review due to trivial changes (5)
- .changeset/build-theme-option.md
- packages/likec4/app/tsconfig.json
- packages/likec4/src/vite/config-app.ts
- packages/likec4/src/cli/options.ts
- packages/likec4/src/vite/config-webcomponent.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/likec4/app/src/routes/__root.tsx
- packages/likec4/src/vite/config-app.prod.ts
- packages/likec4/src/cli/build/index.ts
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
Re: CodeRabbit nitpicks on shared theme type — Thanks for the suggestions! Keeping the inline |
e7c2555 to
443c203
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/likec4/app/src/searchParams.spec.ts (1)
25-30: Avoid re-implementing production logic inside spec helpers.
deriveDefaultColorSchemeandthemeDefineValueduplicate app/build expressions, so these tests can still pass if real implementation changes incorrectly. Prefer importing/testing shared helpers from production code (or extracting these expressions into exported utilities first).Also applies to: 74-76
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/likec4/app/src/searchParams.spec.ts` around lines 25 - 30, The spec currently re-implements production logic in deriveDefaultColorScheme (and themeDefineValue) which risks tests remaining green when the real implementation changes; instead, remove these duplicated helper implementations and import the canonical functions from the production module (or move the shared logic into a new exported utility and import that) so tests exercise the same code paths—locate deriveDefaultColorScheme and themeDefineValue in the spec and replace their local definitions with imports from the app codebase, updating imports and any references accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/likec4/app/src/searchParams.spec.ts`:
- Around line 25-30: The spec currently re-implements production logic in
deriveDefaultColorScheme (and themeDefineValue) which risks tests remaining
green when the real implementation changes; instead, remove these duplicated
helper implementations and import the canonical functions from the production
module (or move the shared logic into a new exported utility and import that) so
tests exercise the same code paths—locate deriveDefaultColorScheme and
themeDefineValue in the spec and replace their local definitions with imports
from the app codebase, updating imports and any references accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 985056c6-523d-46a4-9276-e99e22547eb4
📒 Files selected for processing (10)
.changeset/build-theme-option.mdpackages/likec4/app/global.d.tspackages/likec4/app/src/routes/__root.tsxpackages/likec4/app/src/searchParams.spec.tspackages/likec4/app/tsconfig.jsonpackages/likec4/src/cli/build/index.tspackages/likec4/src/cli/options.tspackages/likec4/src/vite/config-app.prod.tspackages/likec4/src/vite/config-app.tspackages/likec4/src/vite/config-webcomponent.ts
✅ Files skipped from review due to trivial changes (3)
- .changeset/build-theme-option.md
- packages/likec4/app/global.d.ts
- packages/likec4/app/tsconfig.json
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/likec4/src/vite/config-webcomponent.ts
- packages/likec4/src/vite/config-app.ts
- packages/likec4/app/src/routes/__root.tsx
- packages/likec4/src/cli/options.ts
- packages/likec4/src/vite/config-app.prod.ts
- packages/likec4/src/cli/build/index.ts
Add --theme light|dark option to likec4 build, setting the default color scheme for the generated static website. When omitted, defaults to "auto" (system preference). The theme is injected via Vite define (__DEFAULT_THEME__) and consumed by the MantineProvider in __root.tsx as defaultColorScheme. Users can still override per-page via ?theme=light|dark URL parameter. Closes #1934 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
443c203 to
07f3e4f
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/likec4/src/cli/options.ts (1)
70-75: Centralize theme literals into a shared type/constant.
'light' | 'dark'is now represented in multiple files (CLI choices and Vite config types). Please extract a sharedThemetype (and optionallyTHEME_CHOICES) to avoid drift when new variants are added.♻️ Suggested direction
+export const THEME_CHOICES = ['light', 'dark'] as const +export type Theme = (typeof THEME_CHOICES)[number] + export const theme = { - choices: ['light', 'dark'] as const, + choices: THEME_CHOICES, desc: 'default color scheme for the built website (default: auto, follows system preference)', nargs: 1, } as const satisfies OptionsAs per coding guidelines,
**/*.{ts,tsx}: Agent types and interfaces should be defined separately and reused across the codebase.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/likec4/src/cli/options.ts` around lines 70 - 75, Extract a shared Theme literal type and choices constant and use them everywhere instead of repeating 'light'|'dark': create a exported type Theme = 'light' | 'dark' and an exported const THEME_CHOICES = ['light','dark'] as const, then update the existing exported theme object (the symbol theme) to reference THEME_CHOICES for choices and use Theme in its type annotation; also update any Vite config types or other files that currently duplicate the literal to import and use Theme/THEME_CHOICES so all code shares the single source of truth.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/likec4/src/cli/options.ts`:
- Around line 70-75: Extract a shared Theme literal type and choices constant
and use them everywhere instead of repeating 'light'|'dark': create a exported
type Theme = 'light' | 'dark' and an exported const THEME_CHOICES =
['light','dark'] as const, then update the existing exported theme object (the
symbol theme) to reference THEME_CHOICES for choices and use Theme in its type
annotation; also update any Vite config types or other files that currently
duplicate the literal to import and use Theme/THEME_CHOICES so all code shares
the single source of truth.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: eff9e6a0-ad84-49f9-87a2-158c6bf97638
📒 Files selected for processing (10)
.changeset/build-theme-option.mdpackages/likec4/app/global.d.tspackages/likec4/app/src/routes/__root.tsxpackages/likec4/app/src/searchParams.spec.tspackages/likec4/app/tsconfig.jsonpackages/likec4/src/cli/build/index.tspackages/likec4/src/cli/options.tspackages/likec4/src/vite/config-app.prod.tspackages/likec4/src/vite/config-app.tspackages/likec4/src/vite/config-webcomponent.ts
✅ Files skipped from review due to trivial changes (6)
- .changeset/build-theme-option.md
- packages/likec4/src/vite/config-webcomponent.ts
- packages/likec4/src/vite/config-app.ts
- packages/likec4/app/global.d.ts
- packages/likec4/app/src/searchParams.spec.ts
- packages/likec4/app/tsconfig.json
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/likec4/src/vite/config-app.prod.ts
- packages/likec4/src/cli/build/index.ts
- packages/likec4/app/src/routes/__root.tsx
Summary
Add
--theme light|darkoption tolikec4 build, setting the default color scheme for the generated static website. When omitted, defaults toauto(follows system preference, same as current behavior).Closes #1934
How it works
--themeoption inlikec4 build(same choices aslikec4 export png --theme)defineas__DEFAULT_THEME__constantMantineProviderreads__DEFAULT_THEME__asdefaultColorSchemeinstead of hardcoded"auto"?theme=light|darkURL parameterFiles changed (7)
packages/likec4/src/cli/options.ts— newthemeoption definitionpackages/likec4/src/cli/build/index.ts— wire--themetoviteBuildpackages/likec4/src/vite/config-app.prod.ts— add__DEFAULT_THEME__to Vite definepackages/likec4/src/vite/config-app.ts— same for dev configpackages/likec4/src/vite/config-webcomponent.ts— same for webcomponent configpackages/likec4/app/global.d.ts— type declarationpackages/likec4/app/src/routes/__root.tsx— consume__DEFAULT_THEME__