utils logo UTILS
Free online tools to generate, calculate,
convert, format, encode, and play.
 

Dark Mode Support Checker

Evaluate HTML and CSS for dark mode compatibility. Checks for prefers-color-scheme media queries, CSS custom properties, hardcoded colors, color contrast, meta theme-color, and more.

Drop an .html file here or
Dark mode ready No dark mode Partial support

How It Works

This tool parses your HTML and CSS to evaluate dark mode support across multiple categories. All processing happens entirely in your browser — no data is sent to any server.

Checklist Categories
  • Media Query — Presence of prefers-color-scheme: dark media query
  • CSS Variables — Use of custom properties for theming colors
  • Meta Tags — color-scheme meta tag and theme-color for browsers
  • Hardcoded Colors — Detection of static hex, rgb, or named colors outside variables
  • Images & SVGs — Adaptive images, SVG currentColor usage, and filter-based inversion
  • Contrast & Readability — Background and text color pairings that may be problematic
  • Transitions — Smooth transitions when switching themes
  • Best Practices — Toggle UI, system preference respect, and color scheme declaration
Scoring

Each check is weighted equally. Passes score full points, warnings half, and failures zero. The final percentage determines the grade:

ScoreGrade
80 – 100%Dark mode ready
50 – 79%Needs improvement
0 – 49%No dark mode support
Tip: This checker analyzes static HTML/CSS source. For a complete audit, also test with your OS dark mode toggle and in real browsers.

Related Utils

Contrast Checker CSS Validator Responsive Checker Colorblind Simulator Meta Tags

Feedback

Help us improve this page by providing feedback, and include your name/email if you want us to reach back. Thank you in advance.


Share with