Use style color instead of hardcoding white

[chrisvire]

Fixes #984

Summary by CodeRabbit

• New Features

  • Icon and text colors across navigation bars, toolbars, and key UI controls now follow a dynamic theme color so interface elements adapt to your selected theme instead of using fixed white.

• Refactor

  • Shared theme wiring unified across multiple components for consistent runtime styling and cleaner imports.

[coderabbitai]

Warning

Review limit reached

@chrisvire, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 44 minutes and 18 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d2419515-11f8-4fed-b919-42cf414d8e7d

📥 Commits

Reviewing files that changed from the base of the PR and between 7d03e0d and 42ab6af.

📒 Files selected for processing (1)

• src/lib/components/AudioBar.svelte

📝 Walkthrough

Walkthrough

This PR adds a derived actionBarColor store and replaces hardcoded white colors with $actionBarColor bindings across the navbar, selector components, tabs, and many route pages for dynamic top-bar theming.

Changes

Action Bar Icon Color Theming

Layer / File(s)	Summary
New actionBarColor derived store src/lib/data/stores/theme.ts	Export new actionBarColor derived store that extracts ui.bar.action.color from the theme style map with an 'inherit' fallback.
Navbar background & icon theming src/lib/components/Navbar.svelte	Navbar derives actionBarBackgroundColor for container background and uses imported actionBarColor for hamburger/back/forward icon colors.
Component selector and menu theming src/lib/components/BookSelector.svelte, src/lib/components/ChapterSelector.svelte, src/lib/components/SortMenu.svelte, src/lib/components/TabsMenu.svelte	Selectors/menus import actionBarColor and apply it to dropdown/tab icons and borders; TabsMenu adds a derived borderColor for active-tab styling.
Route pages icon/text color updates src/routes/about/+page.svelte, src/routes/bookmarks/+page.svelte, src/routes/contents/[id]/+page.svelte, src/routes/highlights/+page.svelte, src/routes/history/+page.svelte, src/routes/image/+page.svelte, src/routes/image/upload/+page.svelte, src/routes/lexicon/+layout.svelte, src/routes/notes/+page.svelte, src/routes/notes/edit/[noteid]/+page.svelte, src/routes/quiz/[collection]/[id]/+page.svelte, src/routes/text/+page.svelte	Import actionBarColor in route components/layouts and bind icon/text color or style:color to $actionBarColor instead of hardcoded white strings or classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• sillsdev/appbuilder-pwa#963: Both PRs touch /image page header controls; #963 added the controls and this PR updates their icon color props to use actionBarColor instead of "white".

Suggested reviewers

• eomerdws

Poem

🐰 A rabbit hops through code so bright,
Swapping white for stores that light,
Icons hum in themed delight,
Action bars now wear the right,
Hooray — the top bar’s dressed just right!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing hardcoded white color values with dynamic style color values throughout the codebase.
Linked Issues check	✅ Passed	The PR successfully implements the requirement from issue #984 by creating an actionBarColor derived store from ui.bar.action color and applying it across all components instead of hardcoded white values.
Out of Scope Changes check	✅ Passed	All changes are directly related to replacing hardcoded white colors with the actionBarColor store value as specified in issue #984; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/hardcoded-white

---

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.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/lib/data/stores/theme.ts`:
- Line 71: The derived selector actionBarColor can throw if intermediate objects
are undefined; update its accessor to safely optional-chain the intermediate
property (use $s?.['ui.bar.action']?.['color'] ?? 'inherit' inside the derived
callback so the lookup won't throw when ui.bar.action is missing), keeping the
same derived(s, ($s) => ...) structure and default 'inherit'.

In `@src/routes/lexicon/`+layout.svelte:
- Line 8: The lexicon top-bar title still uses the hardcoded CSS class
"text-white", which breaks themed text color; locate the title element(s) in
+layout.svelte (the elements mentioned around the lexicon title and the lines
flagged) and remove the "text-white" class, instead bind the color to the
existing actionBarColor store (e.g. replace the hardcoded class with a class or
style that uses $actionBarColor) so the title text follows the same theme as the
icons; ensure all occurrences (the title and the other elements referenced
around the same block) are updated consistently.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9371c3c9-7ed4-44f8-acf6-186458c461d8

📥 Commits

Reviewing files that changed from the base of the PR and between 333106f and f8866c2.

📒 Files selected for processing (17)

• src/lib/components/BookSelector.svelte
• src/lib/components/ChapterSelector.svelte
• src/lib/components/Navbar.svelte
• src/lib/components/SortMenu.svelte
• src/lib/components/TabsMenu.svelte
• src/lib/data/stores/theme.ts
• src/routes/bookmarks/+page.svelte
• src/routes/contents/[id]/+page.svelte
• src/routes/highlights/+page.svelte
• src/routes/history/+page.svelte
• src/routes/image/+page.svelte
• src/routes/image/upload/+page.svelte
• src/routes/lexicon/+layout.svelte
• src/routes/notes/+page.svelte
• src/routes/notes/edit/[noteid]/+page.svelte
• src/routes/quiz/[collection]/[id]/+page.svelte
• src/routes/text/+page.svelte

[chrisvire]

There are issues with the colors when changing themes.

[TheNonPirate]

What should I do to review this? Should I test it locally, or just look through the code?

[chrisvire]

Screenshots:

White Theme:

Still works with other themes (sepia and black):

[TheNonPirate]

It seems like the text on the book and chapter selectors is still hardcoded (Or at least, not matching the style it's supposed to). I made a project where I changed every white color in the normal theme to a different color, but the book and chapter selection text is still white.

Here is the native app for comparison:

[TheNonPirate]

There seems to be a white line or border on the "Add Note" screen: