Skip to content

Dark mode fix#483

Open
shreya8040 wants to merge 1 commit intoProtonMail:mainfrom
shreya8040:fix-messageeditor-dark
Open

Dark mode fix#483
shreya8040 wants to merge 1 commit intoProtonMail:mainfrom
shreya8040:fix-messageeditor-dark

Conversation

@shreya8040
Copy link
Copy Markdown

@shreya8040 shreya8040 commented Apr 12, 2026

For Issue #484

Hi!

I'm Shreya, a CS student who's looking to contribute to open source projects. I'm a beginner, but I like to tinker around. I noticed the composer editor stays white in dark mode which felt like a hiccup in UX, so I decided to dig into it. My skillset also lies in design and i thought this was a UI bug that was making the UX a bit annoying.

Screenshot (5)

I'll be honest - it took me a while to figure out what was going on. I started by searching for the editor styles, found the hardcoded 'background: white' in RoosterEditorIframe.raw.scss, and thought that was the fix. But changing it didn't work, which sent me down a rabbit hole.
I used Claude to help me what was going wrong and tried to fix it:
The composer loads in an iframe that's isolated from the parent page, so CSS variables from the theme don't just pass through automatically. After tracing through useInitRooster.ts and useSyncIframeStyles, I found that properties.ts only syncs two CSS variables into the iframe. Adding --background-norm to that list, along with changing the hardcoded white in the SCSS, seemed like the right fix.

I can't fully run the app locally to verify it end to end, so I'd really appreciate your review. If I've missed something or approached this wrong, I'm happy to learn and fix it!

Thank you,
Shreya

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.

1 participant