1001Ferramentas
🎨Generators

color-scheme Meta

Build <meta name="color-scheme"> for light/dark hints.


  


  
  

    
color-scheme: the one property every dark-mode site forgets

    
The CSS color-scheme property — or its meta-tag equivalent <meta name="color-scheme"> — tells the browser which color schemes the page is willing to render in. Allowed values are normal, light, dark or any space-separated combination. The effect is subtle but transformative: when the page declares light dark, the browser switches the default colors of form controls, scrollbars, the canvas, the system caret and even SVG currentColor to match the user's OS preference automatically — no custom CSS needed for those primitives.

    
/* CSS option */
:root { color-scheme: light dark; }

/* HTML option, parsed earlier by the browser */
<meta name="color-scheme" content="light dark">


    
Why a "white site" still needs the declaration

    
Even if your design is light-only, declaring color-scheme: light explicitly prevents Chrome on Android and Edge from applying their auto-dark heuristics — features that invert the page algorithmically when the user enables system dark mode and the site has not opted in. The auto-invert usually produces ugly results (gray backgrounds, washed-out brand colors, broken contrast). Setting the property to only light is a clean opt-out; setting it to light dark is an opt-in that you commit to handle yourself with your own dark theme.


    
prefers-color-scheme media query and Tailwind integration

    
The CSS media query @media (prefers-color-scheme: dark) is the runtime hook that lets you swap your own color palette based on user preference. Tailwind's dark: variant is a wrapper around this media query (or a class strategy if you prefer manual control). Combining color-scheme with the media query gives you a consistent stack: the browser styles its primitives and your CSS styles your custom widgets.

    
:root {
  color-scheme: light dark;
  --bg: white;
  --fg: #111;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b0b0b; --fg: #e6e6e6; }
}
body { background: var(--bg); color: var(--fg); }


    
Manual theme picker with CSS custom properties

    
When users want explicit control (a button that forces dark regardless of OS), the common pattern is: store the choice in localStorage, add a data-theme attribute to <html>, and swap CSS variables based on it. Combine this with the color-scheme property — also overridable inline — so the browser's primitives follow the manual choice too. Otherwise, scrollbars and inputs keep showing the OS preference while the rest of the page is in your forced theme, producing a jarring split.

    
[data-theme="dark"]  { color-scheme: dark; --bg: #0b0b0b; --fg: #eee; }
[data-theme="light"] { color-scheme: light; --bg: white;   --fg: #111; }

// JS
const saved = localStorage.getItem('theme') ?? 'auto';
document.documentElement.dataset.theme = saved;


    
SVG, currentColor and battery on OLED screens

    
    
      
  • Inline SVG with fill="currentColor" automatically inverts when color-scheme switches, because the inherited color changes — no JS required.
    • 
      
  • OLED screens (most modern smartphones) consume ~20% less battery when displaying mostly black pixels; a real dark theme is a measurable accessibility and sustainability win.
    • 
      
  • Use slightly lighter font weights in dark mode — bright text on dark backgrounds appears bolder due to halation; switching from 400 to 350 (or 500 to 400) compensates.
    • 
      
  • Brand colors often need tuning: a vibrant saturated red that looks great on white can vibrate painfully on black. Desaturate by 10–20% for the dark variant.
    • 
      
  • Apple Human Interface Guidelines and Material You both formalize tonal palettes for adaptive themes — worth borrowing the methodology even outside native platforms.
    • 
    


    
FAQ

    
My site is light-only — do I still need color-scheme? Yes. Declare color-scheme: light explicitly to opt out of browser auto-dark features and document your intent.

    
Do SVG icons work with color-scheme? Yes, as long as you use fill="currentColor" or stroke="currentColor". The inherited color follows the scheme automatically.

    
Can I let users override the OS preference? Yes. Use a manual theme picker with localStorage and a data-theme attribute on <html>, then override color-scheme inline so browser primitives match the manual choice.

    
Browser support in 2026? Chrome 81+, Edge 81+, Firefox 96+, Safari 13+. Combined coverage is above 97% of global traffic. Safe to ship as a baseline declaration.

  

  
  


  
Related Tools

  

    
      
  

    ✒️
    

      
Handwriting Generator

      
Convert typed text into an image with handwriting appearance. Useful for adding a personal touch to digital work.

    

  



    
      
  

    📋
    

      
Resume Generator

      
Fill a simple printable A4 CV from a form with personal data, education and experience.

    

  



    
      
  

    🔖
    

      
Favicon Generator

      
Generate a favicon from text/emoji in all common sizes (16, 32, 48, 64, 192, 512). PNG download.