Studio: Fix dark mode onboarding screen

[katinthehatsite]

Related issues

Fixes STU-1532

How AI was used in this PR

It was used to suggest the fix.

Proposed Changes

This PR ensures that the onboarding screen in the dark mode has light blue color instead of black color.

Before

After

Light mode:

Testing Instructions

• Pull the changes from this branch
• Switch Studio to the dark mode
• Apply the following diff:

diff --git a/apps/studio/src/components/app.tsx b/apps/studio/src/components/app.tsx
index a6d845af2..6e38a7c3e 100644
--- a/apps/studio/src/components/app.tsx
+++ b/apps/studio/src/components/app.tsx
@@ -28,7 +28,8 @@ import 'src/index.css';
 
 export default function App() {
        useLocalizationSupport();
-       const { needsOnboarding } = useOnboarding();
+       const { needsOnboarding: _needsOnboarding } = useOnboarding();
+       const needsOnboarding = true || _needsOnboarding; // TEMP: force onboarding screen for preview
        const isOnboardingLoading = useRootSelector( selectOnboardingLoading );
        const { isSidebarVisible, toggleSidebar } = useSidebarVisibility();
        const { showWhatsNew, closeWhatsNew } = useWhatsNew();

• Start Studio with npm start
• Confirm that you can see the blue screen instead of black
• Test with the light mode and confirm it looks as expected

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[wpmobilebot]

📊 Performance Test Results

Comparing 3219434 vs trunk

app-size

Metric	trunk	3219434	Diff	Change
App Size (Mac)	1261.13 MB	1261.00 MB	0.14 MB	⚪ 0.0%

site-editor

Metric	trunk	3219434	Diff	Change
load	1880 ms	1825 ms	55 ms	🟢 -2.9%

site-startup

Metric	trunk	3219434	Diff	Change
siteCreation	9148 ms	9147 ms	1 ms	⚪ 0.0%
siteStartup	4308 ms	4303 ms	5 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[gcsecsey]

The fix looks good and it works as described 👍

Mode	Before	After
Dark
Light