New
Introducing React Doctor for Enterprise
Menu
What Is React Doctor?
Quickstart
CLI to CI
How to Fix Issues
GitHub Actions Setup
Updating CI
Other CI Providers
Migrating to CI v2
Config Files
ESLint & oxlint Plugins
Add Custom Rules
CLI Reference
GitHub Action Reference
Node.js API
Changelog
Modified MIT License
Terms of Service
Privacy Policy
Data Use
Security
Support
Rules reference

react-doctor/no-pure-black-background

Tint the background slightly toward your brand hue — e.g. `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern displays

  • Category: Architecture
  • Severity: warn
  • Source: oxlint-plugin-react-doctor
  • Framework: global
  • Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the element sets background or backgroundColor to pure black (#000, #000000, rgb(0,0,0), or the keyword black), or uses the Tailwind class bg-black with no opacity modifier — bg-black/50 is explicitly skipped. False positive: an intentional OLED energy-saving mode where pure black is required for battery savings.

Fix prompt

Use this once validation confirms the diagnostic is real.

Use a near-black tinted toward your brand hue — e.g. #0a0a0f, #0b0c10, or Tailwind's bg-gray-950 / bg-zinc-950. This adds visual depth and reduces the harsh halation that pure black causes around bright text on OLED displays. See https://m2.material.io/design/color/dark-theme.html

More Architecture rules from the rules reference:

  • react-doctor/no-react-children: Pass children as props or render them directly instead of calling React.Children methods.
  • react-doctor/no-react-dom-deprecated-apis: Switch the legacy `react-dom` root API (`render` / `hydrate` / `unmountComponentAtNode`) to `createRoot` / `hydrateRoot` / `root.unmount()` from `react-dom/client`. Replace `findDOMNode` with a ref. The whole `react-dom/test-utils` entry point is removed in React 19 — use `act` from `react` and `fireEvent` / `render` from `@testing-library/react`. Only enabled on projects detected as React 18+.
  • react-doctor/no-react19-deprecated-apis: Pass `ref` as a regular prop on function components — `forwardRef` is no longer needed in React 19+. Replace `useContext(X)` with `use(X)` for branch-aware context reads. Only enabled on projects detected as React 19+.
  • react-doctor/no-redundant-should-component-update: Drop shouldComponentUpdate when extending PureComponent, or extend React.Component if custom comparison logic is genuinely needed.
  • react-doctor/no-render-in-render: Extract to a named component: `const ListItem = ({ item }) => <div>{item.name}</div>`