Skip to content

Fix Accordion SVG icon colour not being set in Dark Mode#74

Open
bencounsell wants to merge 3 commits into
mainfrom
auto-fix/issue-73
Open

Fix Accordion SVG icon colour not being set in Dark Mode#74
bencounsell wants to merge 3 commits into
mainfrom
auto-fix/issue-73

Conversation

@bencounsell
Copy link
Copy Markdown
Member

@bencounsell bencounsell commented Mar 27, 2026

Summary

Fixes #73 — The Accordion SVG icon colour was not being set correctly in Dark Mode.

Root Cause

The hooks.js did not use injectPrefixOnDarkModeColors to ensure the [&>svg]: selector prefix was applied to dark mode colour classes. Without this, dark mode dark:text-* classes were missing the [&>svg]: child selector, so the SVG element didn't receive the correct colour in dark mode.

Changes

  • hooks.source.js / hooks.js: Wrapped iconColor and iconColorClosed with injectPrefixOnDarkModeColors() to ensure dark mode colour classes correctly target the SVG child element via [&>svg]:

Test Plan

  • Open the example project: elementsapp://downloadDocument/XArukxz8fVyZ
  • Verify accordion SVG icon is visible and correctly coloured in both Light and Dark mode
  • Test with both the default chevron icon and custom SVG icons
  • Verify the open and closed states both display correct colours in dark mode

🤖 Generated with Claude Code

claude and others added 3 commits March 27, 2026 18:39
- Add dark mode color settings (darkShade, darkColorStripId) to iconColor
  in all accordion templates that were missing them
- Use injectPrefixOnDarkModeColors in hooks.js to ensure the [&>svg]:
  selector prefix is correctly applied to dark mode color classes

Fixes #73

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The iconColorClosed format is {{value}} (raw color name), so when
dark mode is configured the dark class is missing the text- utility
prefix. Added .replace(/dark:/g, 'dark:text-') to inject text- into
dark values before constructing the full class string.

Made-with: Cursor
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.

Accordion SVG icon colour not being set in Dark Mode

2 participants