המאפיין color-scheme מאפשר לאלמנט לציין באילו ערכות צבעים ניתן להציג אותו בנוחות.
האפשרויות הנפוצות עבור ערכות צבע של מערכת ההפעלה הן "בהיר" ו"כהה", או "מצב יום" ו"מצב לילה". כאשר משתמש בוחר באחת מסכימות הצבעים הללו, מערכת ההפעלה מבצעת התאמות לממשק המשתמש. זה כולל פקדי טפסים, פסי גלילה והערכים המשומשים של צבעי מערכת CSS
דוגמא: הגדרת ערכת צבעים
Lorem ipsum dolor sit amet
| הערך שנבדק | Chrome | Firefox | EdgeC | Opera |
|---|---|---|---|---|
| only light | ✔️ | ✔️ | ✔️ | ✔️ |
| normal | ✔️ | ✔️ | ✔️ | ✔️ |
| light | ✔️ | ✔️ | ✔️ | ✔️ |
| dark | ✔️ | ✔️ | ✔️ | ✔️ |
| light dark | ✔️ | ✔️ | ✔️ | ✔️ |
| light only | ✔️ | ✔️ | ✔️ | ✔️ |
| dark only | ✔️ | ✔️ | ✔️ | ✔️ |
| revert | ✔️ | ✔️ | ✔️ | ✔️ |
| revert-layer | ✔️ | ✔️ | ✔️ | ✔️ |
| unset | ✔️ | ✔️ | ✔️ | ✔️ |
| inherit | ✔️ | ✔️ | ✔️ | ✔️ |
| initial | ✔️ | ✔️ | ✔️ | ✔️ |