Fleet UI: Fix 403, 404, 500 clouds in dark mode

[RachelElysia]

Issue

Followup of #44771

Description

• Dark clouds to match dark mode background color below them
• Temporary error states until design team designs new dark mode/light mode error states

Screenshots

• QA'd all new/changed functionality manually

Summary by CodeRabbit

Release Notes

• New Features
  • Error pages (403, 404, 500) now support dark mode with theme-appropriate backgrounds that automatically adapt to the user's current theme preference.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 34093f5a-d9b9-4c5b-b48a-aa5321cec8b3

📥 Commits

Reviewing files that changed from the base of the PR and between 16dc49d and af70c00.

⛔ Files ignored due to path filters (3)

• assets/images/403-dark.svg is excluded by !**/*.svg
• assets/images/404-dark.svg is excluded by !**/*.svg
• assets/images/500-dark.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• frontend/pages/errors/Fleet403/Fleet403.tsx
• frontend/pages/errors/Fleet404/Fleet404.tsx
• frontend/pages/errors/Fleet500/Fleet500.tsx

---

Walkthrough

The PR adds dark mode support to three error pages (Fleet403, Fleet404, and Fleet500). Each file receives an import of the isDarkMode utility function, an import of a dark-themed background image asset, and the background image rendering logic is updated to conditionally select between light and dark assets based on the active theme mode.

Possibly related PRs

• fleetdm/fleet#44771: Updates error-page styles for dark-mode text contrast alongside this PR's dark-mode background image additions to the same error pages.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description includes issue reference, clear explanation of changes, screenshots demonstrating the fix, and a checked QA box, but lacks a changes file entry and most other template checklist items.	Confirm whether a changes file was added per contribution guidelines, and clarify if the incomplete checklist items are intentionally not applicable or need completion.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding dark mode support to Fleet error pages (403, 404, 500) by fixing cloud graphics.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 404-clouds

---

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 and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.68%. Comparing base (55d63e9) to head (af70c00).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #44842      +/-   ##
==========================================
- Coverage   66.68%   66.68%   -0.01%     
==========================================
  Files        2665     2665              
  Lines      214783   214783              
  Branches     9759     9881     +122     
==========================================
- Hits       143227   143225       -2     
- Misses      58521    58523       +2     
  Partials    13035    13035              

Flag	Coverage Δ
frontend	54.24% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.