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-dark-mode-glow

Use a subtle `box-shadow` with neutral colors for depth, or `border` with low opacity. Colored glows on dark backgrounds are the default AI-generated aesthetic

  • 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 JSX style object has a dark background (backgroundColor or background with all RGB channels at or below 35) AND a boxShadow whose color has visible chroma and blur greater than 4px. False positive: an intentional brand-glow hero CTA, or a tinted neutral shadow that gets its color from a CSS variable.

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace the colored glow with a subtle neutral box-shadow such as 0 1px 3px rgba(0,0,0,0.4), or use a low-opacity border for depth. If a glow is essential, dim the chroma and lower opacity so it reads as ambient light rather than neon. See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

More Architecture rules from the rules reference:

  • react-doctor/no-default-props: React 19 removes `Component.defaultProps` for function components. Move the defaults into the destructured props parameter: `function Foo({ size = "md", variant = "primary" })` instead of `Foo.defaultProps = { size: "md", variant: "primary" }`.
  • react-doctor/no-generic-handler-names: Rename to describe the action: e.g. `handleSubmit` → `saveUserProfile`, `handleClick` → `toggleSidebar`
  • react-doctor/no-giant-component: Extract logical sections into focused components: `<UserHeader />`, `<UserActions />`, etc.
  • react-doctor/no-gradient-text: Use solid text colors for readability. If you need emphasis, use font weight, size, or a distinct color instead of gradients
  • react-doctor/no-inline-exhaustive-style: Move styles to a CSS class, CSS module, Tailwind utilities, or a styled component — inline objects with many properties hurt readability and create new references every render