fix: scope un-themed editor color fallback so dark-mode ramp wins

[Liewzheng]

Description

Fixes stickies (and any other consumer of --editor-colors-*-background) rendering with light pastel backgrounds in dark mode, making their light text unreadable.

Both apps/web/styles/globals.css and apps/space/styles/globals.css keep an un-scoped :root fallback block of editor color variables (light values) for the pre-theme window. In the bundled CSS these blocks are ordered after @plane/editor's [data-theme*="dark"] ramp; at equal specificity the later rule wins, so the light fallback overrode the dark ramp in every theme.

The fix scopes the fallback with :not([data-theme*="light"]):not([data-theme*="dark"]), so it only applies before a theme lands and for custom themes (next-themes ships a custom theme matching neither selector — deleting the block outright would leave those variables undefined there).

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Test Scenarios

• Rebuilt the web and space images from this branch on a self-hosted instance and verified in dark mode: sticky card backgrounds now compute to the dark ramp (rgb(88, 62, 42) for orange, rgb(31, 73, 92) for light-blue) with light, readable text.
• Light mode unchanged: computed values identical to before (rgb(255, 227, 205) for orange + dark text) — the fallback block's values are value-identical to the editor package's [data-theme*="light"] ramp, and the :not() scoping never matches once a theme is applied.
• npx oxfmt --check passes on both modified files.

References

Closes #9753

Summary by CodeRabbit

• Bug Fixes
  • Fixed themed editor colors being overridden by unthemed fallback styles.
  • Light and dark editor themes now display the intended background color ramps consistently.

[coldtea-pr-lens]

◈ PR Lens

🟢 +0 new · 🟠 ~2 changed · 🔴 -0 removed · 0 flows · 2 files · commit 7d5e775

Architecture

2 components touched across 1 lane.

Open full size

Data flow

No data-flow sequence changed in this PR.

Drill down

Client Applications — 2 components

🟡 CHANGED Plane Web App

Main web application consuming editor styles with fallback color variables scoped to un-themed roots.

• apps/web/styles/globals.css:14-25

🟡 CHANGED Plane Space Portal

Public portal application consuming editor styles with fallback color variables scoped to un-themed roots.

• apps/space/styles/globals.css:12-23

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

PR Lens is free for open source. A star on the repository is what keeps it going.

🪧 More tips

• Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• GitHub will not let you zoom an image in a comment. The link under each diagram opens it full size on a page of its own, where you can.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 951936d6-0134-4ca6-9625-897b1d01ae5c

📥 Commits

Reviewing files that changed from the base of the PR and between da1a7ab and 7d5e775.

📒 Files selected for processing (2)

• apps/space/styles/globals.css
• apps/web/styles/globals.css

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Both application stylesheets scope the unthemed editor color fallback to roots without light or dark theme attributes. This prevents the fallback variables from overriding themed editor color ramps.

Changes

Editor color fallback

Layer / File(s)	Summary
Scope fallback selectors apps/space/styles/globals.css, apps/web/styles/globals.css	The fallback selector now excludes roots with light or dark theme attributes. The space stylesheet also documents this scope in its comment.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to 7d5e7

Dark-mode editor consumers can use their dark color ramps without fallback backgrounds overriding them, while unthemed and custom themes retain fallback behavior. No current merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main fix: scoping the un-themed editor color fallback so the dark-mode ramp applies.
Description check	✅ Passed	The description is complete and relevant. It explains the root cause, the fix, preserved custom-theme behavior, test scenarios, formatting validation, and linked issue. No screenshots are needed becau…
Linked Issues check	✅ Passed	The changes satisfy issue #9753. Both fallback blocks are scoped so dark-mode ramps are no longer overridden, while light-mode, pre-theme, and custom-theme behavior remains available.
Out of Scope Changes check	✅ Passed	The changes are limited to the two CSS fallback blocks identified by issue #9753. No unrelated code or behavior changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

Full details: Description check

Explanation

The description is complete and relevant. It explains the root cause, the fix, preserved custom-theme behavior, test scenarios, formatting validation, and linked issue. No screenshots are needed because this is a styling fix with documented computed-color verification.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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