---
title: 'colorScheme'
description: 'Force the browser to render websites in light or dark mode using the prefers-color-scheme CSS media feature.'
---

import { MultiCodeEditorInteractive } from 'components/markdown/MultiCodeEditorInteractive'
import { Type } from 'components/markdown/Type'

Type: <Type children='<string>'/><br/>
Default: <Type children="'no-preference'"/>

Sets [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature, indicating user preference to use `'light'` or `'dark'` color theme over the target [url](/docs/api/parameters/url).

![](/images/color-scheme.png)

<MultiCodeEditorInteractive 
  mqlCode={{ url: 'https://googlechromelabs.github.io/dark-mode-toggle/demo', screenshot: true, colorScheme: 'dark' }} 
/>
