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.

Embed This Util

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML: 


    

       Copy snippet
      Adjust the height to taste.
    

  









  
 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