#1003 Support new color themes

[FyreByrd]

Closes #1003

I know this probably could have been left, but there was a bug in main for any project that had additional color themes specified and the easiest way to fix it was to go ahead and support the other colors.

Summary by CodeRabbit

• New Features

  • Theme options now appear in a consistent, predictable order.
  • Dark-mode styling now works more broadly across the app, including additional dark themes.

• Bug Fixes

  • Improved icon and button contrast in dark themes.
  • Updated theme-related hover and border styling for more consistent appearance.

• UI Improvements

  • The theme selection panel now adapts automatically to the number of available themes.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds a themeIsDark(theme) helper and fixed theme ordering to the theme store, replacing hardcoded 'Dark' string comparisons across several components. TextAppearanceSelector is also refactored to render theme buttons dynamically based on the themes array instead of fixed Normal/Sepia/Dark cases.

Changes

Theme Dark-Mode Detection and Selector UI

Layer / File(s)	Summary
Theme store: helper and ordering src/lib/data/stores/theme.ts	Adds themeOrder/orderThemes sorting for the themes derived store and introduces exported themeIsDark(theme), treating both Dark and Charcoal as dark for monoIconColor.
Component invert/border logic src/lib/components/BookTabs.svelte, BottomNavigationBar.svelte, SelectList.svelte, Sidebar.svelte, TextSelectionToolbar.svelte	Replaces $theme === 'Dark' checks with themeIsDark($theme) for picture invert classes, hover colors, and button borders.
Theme appearance selector refactor src/lib/components/TextAppearanceSelector.svelte	Uses themeIsDark(theme) for border color and replaces hardcoded Normal/Sepia/Dark button markup with an iteration over themes, computing grid columns from themes.length.

Estimated code review effort: 2 (Simple) | ~12 minutes

Possibly related PRs

• sillsdev/appbuilder-pwa#857: Both PRs touch BookTabs.svelte's icon rendering, with this PR updating the invert logic introduced there to use themeIsDark.
• sillsdev/appbuilder-pwa#1034: This PR's theme.ts monoIconColor/themeIsDark change directly affects the note icon fill color logic in the related PR.

Suggested reviewers: chrisvire

🚥 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 is concise and accurately describes the main change: adding support for new color themes.
Linked Issues check	✅ Passed	The changes add sage, rose, and charcoal theme support and update dark-mode handling as requested in #1003.
Out of Scope Changes check	✅ Passed	The diff stays focused on theme support, with no obvious unrelated functional changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 feat/new-color-themes

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 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/components/TextAppearanceSelector.svelte`:
- Around line 207-215: The theme selector grid in TextAppearanceSelector.svelte
uses a runtime-built Tailwind class that won’t be generated, so replace the
dynamic grid-cols-{themes.length} usage with a supported approach such as an
inline grid-template-columns style or a fixed set of explicit grid-cols-*
classes. While updating the each block over themes in the selector, also give
each theme button an accessible name by adding an aria-label or visible text so
the controls are screen-reader friendly.

🪄 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: 49312107-0402-495f-a5b7-fbbc994321c8

📥 Commits

Reviewing files that changed from the base of the PR and between 596e7df and 282584f.

📒 Files selected for processing (7)

• src/lib/components/BookTabs.svelte
• src/lib/components/BottomNavigationBar.svelte
• src/lib/components/SelectList.svelte
• src/lib/components/Sidebar.svelte
• src/lib/components/TextAppearanceSelector.svelte
• src/lib/components/TextSelectionToolbar.svelte
• src/lib/data/stores/theme.ts

[benpaj-cps]

Looks good. The Tailwind docs have a different way of dealing with the dynamic class name issue, but this also works.

[FyreByrd]

Looks good. The Tailwind docs have a different way of dealing with the dynamic class name issue, but this also works.

This is... exactly what we discussed in Discord about the @source line... See the section on safelisting variants: https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants

[benpaj-cps]

Looks good. The Tailwind docs have a different way of dealing with the dynamic class name issue, but this also works.

This is... exactly what we discussed in Discord about the @source line... See the section on safelisting variants: https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants

Right. This is also valid, and I just mentioned it for completeness' sake. I didn't look at the URL closely enough to realize that it was the same page lol