Skip to content

feature: PR 3/8 — SettingsContext and SCSS theming - #700

Open
devin-ai-integration[bot] wants to merge 1 commit into
devin/react-migration-02-models-apifrom
devin/react-migration-03-settings-theme
Open

feature: PR 3/8 — SettingsContext and SCSS theming#700
devin-ai-integration[bot] wants to merge 1 commit into
devin/react-migration-02-models-apifrom
devin/react-migration-03-settings-theme

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Aug 26, 2026

Copy link
Copy Markdown

Summary

PR 3 of 8 (stacked on #699). Replaces SettingsService with a React context and brings the SCSS theme layer into the React tree. src/app/ and src/styles.scss are untouched — Angular still builds from them.

  • src/react/context/SettingsContext.tsxSettingsProvider + useSettings(). Same localStorage keys (theme, openLinkInNewTab, titleFontSize, listSpacing), same defaults ('16' / '0'), same string types, same write-through-on-set behavior, and the same prefers-color-scheme handling: use the stored theme if present, otherwise matches ? 'night' : 'default' (read directly instead of Angular's synthetic MediaQueryListEvent dispatch).
  • A system scheme change still overwrites (and persists) the user's chosen theme — that's the existing app behavior, kept deliberately.
  • The listener is registered in useEffect and torn down with the same function reference. The Angular service passed a fresh .bind(this) to removeEventListener, so its listener was never actually removed; not reproduced.
  • localStorage / matchMedia access is guarded so the module can't throw where they're unavailable.
  • SCSS: sass added as a devDependency; styles.scss and the three partials copied to src/react/ byte-identically except the partial import path, and imported from main.tsx. Sass prints legacy @import/slash-division/darken() deprecation warnings inherited from the original files.
  • vite.config.ts: the entry-injecting transformIndexHtml hook now runs with order: 'pre', otherwise the injected module script isn't part of the build graph and the SCSS never reaches the output.
  • App temporarily applies settings.theme as its wrapper className; PR 4 replaces it with the real shell.

Verified: npm run typecheck:react, npx vite build (built CSS contains .default / .night / .amoledblack), and vite dev server boots clean.

Devin-Org: engineering

Link to Devin session: https://app.devin.ai/sessions/e6419ebe67ff4f749fe1573a8e26cd07
Requested by: @abboudp


Note

Devin errored when opening this Pull Request as abboudp.
As a fallback, Devin opened this PR as itself.


Devin Review

Status Commit
⚪ Not started

Run Devin Review

Devin Review (Staging)

Co-Authored-By: Paul Abboud <abboudpaul112@gmail.com>
@devin-ai-integration

Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

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.

0 participants