fix(docs): layoutColor.overlay

[wingkwong]

Closes #5779

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• New Features

  • None.

• Style

  • Updated overlay colors across light and dark variants of Coffee, Elegant, Modern, and Retro themes for improved visual consistency and readability.

• Refactor

  • Standardized theme overlays to use shared theme tokens across templates for consistent theming behavior.

• Bug Fixes

  • Corrected light/dark overlay inversion to ensure appropriate contrast in each theme.

[linear]

ENG-2832 [BUG] - Default theme extensions don't darken/lighten drawers correctly (they are flipped)

[changeset-bot]

⚠️ No Changeset found

Latest commit: a1cf8ec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 6, 2025 9:58am
heroui-sb	Ready	Preview	Comment	Oct 6, 2025 9:58am

[coderabbitai]

Walkthrough

Swapped overlay color values in light/dark theme constants and updated four theme templates to reference overlay tokens from shared constants instead of hard-coded colors or external library colors.

Changes

Cohort / File(s)	Summary
Theme Constants apps/docs/components/themes/constants.ts	Inverted overlay values: light overlay set to white; dark overlay set to black. No type/interface/export changes.
Templates using shared overlay tokens apps/docs/components/themes/templates/coffee.ts, apps/docs/components/themes/templates/elegant.ts, apps/docs/components/themes/templates/modern.ts, apps/docs/components/themes/templates/retro.ts	Replaced @heroui/theme color imports and hard-coded overlays with initialLightTheme.layoutColor.overlay and initialDarkTheme.layoutColor.overlay from ../constants. Public exports unchanged; imports consolidated to use shared constants.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description contains the template headings and the issue closure but all sections (Description, Current behavior, New behavior, Breaking change, Additional Information) are left blank, so readers cannot understand what was changed or why.	Please fill in each template section with a brief overview of the change, a summary of the existing and new behavior, indicate whether it is a breaking change, and any additional context or testing details.
Title Check	❓ Inconclusive	The title “fix(docs): layoutColor.overlay” mentions a fix and overlay property but is too generic and doesn’t clearly convey that it inverts the overlay colors for light and dark themes, nor does it use the appropriate scope for a theming change.	Please refine the title to explicitly describe the change, for example “fix(themes): correct flipped layoutColor.overlay for light and dark themes.”

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues Check	✅ Passed	The updates to initialLightTheme.layoutColor.overlay and initialDarkTheme.layoutColor.overlay in constants.ts and their use in all theme templates correctly invert the overlay colors as required by issue #5779, addressing the flipped overlay behavior.
Out of Scope Changes Check	✅ Passed	All modifications are focused on updating overlay color values and imports in theme configuration files to fix the inverted overlay issue; there are no unrelated or extraneous changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/eng-2832

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3737870 and a1cf8ec.

📒 Files selected for processing (5)

• apps/docs/components/themes/constants.ts (2 hunks)
• apps/docs/components/themes/templates/coffee.ts (3 hunks)
• apps/docs/components/themes/templates/elegant.ts (3 hunks)
• apps/docs/components/themes/templates/modern.ts (3 hunks)
• apps/docs/components/themes/templates/retro.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (4)

apps/docs/components/themes/templates/modern.ts (1)

apps/docs/components/themes/constants.ts (2)

• initialLightTheme (27-50)
• initialDarkTheme (52-75)

apps/docs/components/themes/templates/elegant.ts (1)

apps/docs/components/themes/constants.ts (2)

• initialLightTheme (27-50)
• initialDarkTheme (52-75)

apps/docs/components/themes/templates/retro.ts (1)

apps/docs/components/themes/constants.ts (2)

• initialLightTheme (27-50)
• initialDarkTheme (52-75)

apps/docs/components/themes/templates/coffee.ts (1)

apps/docs/components/themes/constants.ts (2)

• initialLightTheme (27-50)
• initialDarkTheme (52-75)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Continuous Release
• GitHub Check: Prettier
• GitHub Check: TypeScript
• GitHub Check: Build
• GitHub Check: ESLint
• GitHub Check: Tests

🔇 Additional comments (6)

apps/docs/components/themes/constants.ts (1)

42-42: LGTM! Overlay colors correctly swapped to fix the inversion bug.

The overlay values have been swapped to align with their respective theme backgrounds:

• Light theme overlay is now white (matches light backgrounds)
• Dark theme overlay is now black (matches dark backgrounds)

This directly addresses issue #5779 where drawer overlays were incorrectly inverting the expected behavior (darkening in light mode, lightening in dark mode).

Also applies to: 67-67

apps/docs/components/themes/templates/coffee.ts (1)

3-3: LGTM! Refactored to use shared overlay constants.

The template now references overlay values from the shared constants rather than hardcoding colors.black and colors.white. This improves maintainability and ensures consistent overlay behavior across all theme templates.

Also applies to: 21-21, 46-46

apps/docs/components/themes/templates/retro.ts (1)

3-3: LGTM! Consistent refactoring to shared overlay constants.

The changes correctly replace hardcoded overlay colors with references to the shared theme constants, maintaining consistency with the other template updates.

Also applies to: 21-21, 45-45

apps/docs/components/themes/templates/elegant.ts (1)

3-3: LGTM! Overlay constants correctly integrated.

The template has been successfully updated to use the shared overlay constants, ensuring consistent behavior with the bug fix and matching the pattern used across all other theme templates.

Also applies to: 21-21, 45-45

apps/docs/components/themes/templates/modern.ts (2)

3-3: LGTM! Overlay constants correctly applied.

The changes follow the same consistent pattern as the other theme templates, correctly referencing the shared overlay constants.

Also applies to: 21-21, 45-45

---

1-56: All theme templates updated: no hardcoded overlay colors remain; each template uses initialLightTheme/initialDarkTheme.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5782

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5782

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5782

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5782

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5782

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5782

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5782

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5782

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5782

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5782

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5782

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5782

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5782

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5782

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5782

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5782

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5782

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5782

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5782

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5782

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5782

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5782

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5782

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5782

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5782

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5782

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5782

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5782

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5782

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5782

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5782

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5782

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5782

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5782

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5782

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5782

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5782

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5782

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5782

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5782

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5782

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5782

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5782

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5782

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5782

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5782

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5782

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5782

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5782

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5782

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5782

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5782

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5782

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5782

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5782

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5782

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5782

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5782

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5782

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5782

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5782

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5782

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5782

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5782

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5782

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5782

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5782

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5782

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5782

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5782

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5782

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5782

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5782

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5782

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5782

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5782

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5782

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5782

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5782

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5782

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5782

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5782

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5782

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5782

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5782

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5782

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5782

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5782

commit: a1cf8ec