Skip to content

feat(cli): add --theme option to build command#2874

Merged
davydkov merged 1 commit intomainfrom
fix/build-theme-option
Apr 13, 2026
Merged

feat(cli): add --theme option to build command#2874
davydkov merged 1 commit intomainfrom
fix/build-theme-option

Conversation

@ckeller42
Copy link
Copy Markdown
Collaborator

Summary

Add --theme light|dark option to likec4 build, setting the default color scheme for the generated static website. When omitted, defaults to auto (follows system preference, same as current behavior).

Closes #1934

How it works

  • CLI: new --theme option in likec4 build (same choices as likec4 export png --theme)
  • Vite: injected via define as __DEFAULT_THEME__ constant
  • App: MantineProvider reads __DEFAULT_THEME__ as defaultColorScheme instead of hardcoded "auto"
  • Users can still override per-page via ?theme=light|dark URL parameter

Files changed (7)

  • packages/likec4/src/cli/options.ts — new theme option definition
  • packages/likec4/src/cli/build/index.ts — wire --theme to viteBuild
  • packages/likec4/src/vite/config-app.prod.ts — add __DEFAULT_THEME__ to Vite define
  • packages/likec4/src/vite/config-app.ts — same for dev config
  • packages/likec4/src/vite/config-webcomponent.ts — same for webcomponent config
  • packages/likec4/app/global.d.ts — type declaration
  • packages/likec4/app/src/routes/__root.tsx — consume __DEFAULT_THEME__

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 11, 2026

🦋 Changeset detected

Latest commit: 07f3e4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages
Name Type
likec4 Minor
@likec4/docs-astro Minor
likec4-vscode Minor
@likec4/playground Minor
@likec4/style-preset Minor
@likec4/styles Minor
@likec4/config Minor
@likec4/core Minor
@likec4/diagram Minor
@likec4/generators Minor
@likec4/language-server Minor
@likec4/language-services Minor
@likec4/layouts Minor
@likec4/leanix-bridge Minor
@likec4/log Minor
@likec4/lsp Minor
@likec4/mcp Minor
@likec4/react Minor
@likec4/tsconfig Minor
@likec4/vite-plugin Minor
@likec4/vscode-preview Minor

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

@ckeller42
Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from e965d3f to a14a764 Compare April 11, 2026 00:48
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

📝 Walkthrough

Walkthrough

Adds a --theme option to likec4 build, forwards it into Vite as a compile-time __DEFAULT_THEME__ constant (defaults to "auto"), declares that constant in ambient types, and uses it at runtime in the Root component to set MantineProvider’s default color scheme.

Changes

Cohort / File(s) Summary
Changeset Documentation
\.changeset/build-theme-option.md
New changeset entry documenting the --theme option and a minor version bump.
CLI Option Definition
packages/likec4/src/cli/options.ts
Added exported theme option (choices: ['light','dark'], desc, nargs: 1).
CLI Build Integration
packages/likec4/src/cli/build/index.ts
Wired theme into the build command and forwarded args.theme to viteBuild.
Vite Configs / Build Defines
packages/likec4/src/vite/config-app.ts, packages/likec4/src/vite/config-app.prod.ts, packages/likec4/src/vite/config-webcomponent.ts
Added __DEFAULT_THEME__ to Vite define; prod config type gains optional `theme?: 'light'
Runtime Types & Usage
packages/likec4/app/global.d.ts, packages/likec4/app/src/routes/__root.tsx
Declared ambient `DEFAULT_THEME: 'light'
TS Project Include
packages/likec4/app/tsconfig.json
Added global.d.ts to include so the ambient constant is visible to the compiler.
Tests
packages/likec4/app/src/searchParams.spec.ts
New Vitest file covering force-color-scheme resolution and build-time/default theme derive/serialization behavior.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • davydkov
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat(cli): add --theme option to build command' clearly and concisely summarizes the main change: adding a new CLI option to the build command.
Description check ✅ Passed The PR description comprehensively documents the feature with summary, implementation approach, affected files, and issue closure. However, the description template checklist is not completed.
Linked Issues check ✅ Passed The PR fully implements the requirement from issue #1934: adds --theme option to build command with light/dark choices, defaults to auto, and maintains per-page URL override capability.
Out of Scope Changes check ✅ Passed All changes are within scope. The PR adds theme support to build command, related Vite configs, CLI options, and app components, plus tests and changesets. No unrelated modifications detected.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/build-theme-option

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from a14a764 to a40082e Compare April 11, 2026 00:50
@ckeller42
Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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 shared buildThemeChoices/BuildTheme from one module and reusing it in CLI + Vite config typings.

♻️ 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
As per coding guidelines, "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 - 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

📥 Commits

Reviewing files that changed from the base of the PR and between e98d9f4 and a40082e.

📒 Files selected for processing (8)
  • .changeset/build-theme-option.md
  • packages/likec4/app/global.d.ts
  • packages/likec4/app/src/routes/__root.tsx
  • packages/likec4/src/cli/build/index.ts
  • packages/likec4/src/cli/options.ts
  • packages/likec4/src/vite/config-app.prod.ts
  • packages/likec4/src/vite/config-app.ts
  • packages/likec4/src/vite/config-webcomponent.ts

@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from a40082e to 764eee3 Compare April 11, 2026 00:55
@ckeller42
Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from 764eee3 to e7c2555 Compare April 11, 2026 00:56
@ckeller42
Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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__: DefaultTheme

As 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

📥 Commits

Reviewing files that changed from the base of the PR and between a40082e and e7c2555.

📒 Files selected for processing (9)
  • .changeset/build-theme-option.md
  • packages/likec4/app/global.d.ts
  • packages/likec4/app/src/routes/__root.tsx
  • packages/likec4/app/tsconfig.json
  • packages/likec4/src/cli/build/index.ts
  • packages/likec4/src/cli/options.ts
  • packages/likec4/src/vite/config-app.prod.ts
  • packages/likec4/src/vite/config-app.ts
  • packages/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

@ckeller42
Copy link
Copy Markdown
Collaborator Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@ckeller42
Copy link
Copy Markdown
Collaborator Author

Re: CodeRabbit nitpicks on shared theme type —

Thanks for the suggestions! Keeping the inline 'light' | 'dark' union for now to stay consistent with the existing pattern — PAGE_TITLE, WEBCOMPONENT_PREFIX, and __USE_HASH_HISTORY__ all use inline types without shared definitions. Happy to extract if the union grows beyond two values in the future.

@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from e7c2555 to 443c203 Compare April 11, 2026 10:14
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/likec4/app/src/searchParams.spec.ts (1)

25-30: Avoid re-implementing production logic inside spec helpers.

deriveDefaultColorScheme and themeDefineValue duplicate 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

📥 Commits

Reviewing files that changed from the base of the PR and between e7c2555 and 443c203.

📒 Files selected for processing (10)
  • .changeset/build-theme-option.md
  • packages/likec4/app/global.d.ts
  • packages/likec4/app/src/routes/__root.tsx
  • packages/likec4/app/src/searchParams.spec.ts
  • packages/likec4/app/tsconfig.json
  • packages/likec4/src/cli/build/index.ts
  • packages/likec4/src/cli/options.ts
  • packages/likec4/src/vite/config-app.prod.ts
  • packages/likec4/src/vite/config-app.ts
  • packages/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>
@ckeller42 ckeller42 force-pushed the fix/build-theme-option branch from 443c203 to 07f3e4f Compare April 11, 2026 10:19
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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 shared Theme type (and optionally THEME_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 Options

As 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

📥 Commits

Reviewing files that changed from the base of the PR and between 443c203 and 07f3e4f.

📒 Files selected for processing (10)
  • .changeset/build-theme-option.md
  • packages/likec4/app/global.d.ts
  • packages/likec4/app/src/routes/__root.tsx
  • packages/likec4/app/src/searchParams.spec.ts
  • packages/likec4/app/tsconfig.json
  • packages/likec4/src/cli/build/index.ts
  • packages/likec4/src/cli/options.ts
  • packages/likec4/src/vite/config-app.prod.ts
  • packages/likec4/src/vite/config-app.ts
  • packages/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

@ckeller42 ckeller42 requested a review from davydkov April 11, 2026 12:02
@davydkov davydkov merged commit 54e8435 into main Apr 13, 2026
16 checks passed
@davydkov davydkov deleted the fix/build-theme-option branch April 13, 2026 07:30
@likec4-ci likec4-ci Bot mentioned this pull request Apr 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add an option --theme for yarn build

2 participants