docs: set <meta name='color-scheme'

.eslintrc.js

@@ -11,5 +11,6 @@ module.exports = {
   rules: {
     'no-use-before-define': 'off',
     'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-redeclare': 'off',
   },
 }

packages/color-modes/src/index.tsx

@@ -146,7 +146,7 @@ export function useColorMode<T extends string = string>(): [
   }
 
   // We're allowing the user to specify a narrower type for its color mode name.
-  return ([colorMode, setColorMode] as unknown) as [
+  return [colorMode, setColorMode] as unknown as [
     T,
     Dispatch<SetStateAction<T>>
   ]

packages/docs/src/components/head.js

@@ -13,7 +13,9 @@ export default (props) => {
     .filter(Boolean)
     .join(' – ')
 
-  const { theme } = useThemeUI()
+  const { theme, colorMode } = useThemeUI()
+
+  const isColorModeDark = ['dark', 'deep'].includes(colorMode)
 
   return (
     <Helmet htmlAttributes={{ lang: 'en-US' }}>
@@ -32,7 +34,10 @@ export default (props) => {
       <meta name="twitter:image" content="https://theme-ui.com/card.png" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={pkg.description} />
+
       <meta name="theme-color" content={theme.colors.background} />
+      <meta name="color-scheme" content={isColorModeDark ? 'dark' : 'light'} />
+
       <script
         src="https://unpkg.com/favicon-switcher@1.2.2/dist/index.js"
         crossOrigin="anonymous"

packages/theme-ui/test/color-modes.tsx

@@ -193,11 +193,11 @@ test('converts color modes to css custom properties', () => {
 test('uses default mode', () => {
   let mode
   const Button = () => {
-    const [colorMode, setMode] = useColorMode()
+    const [colorMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
   }
-  const tree = render(
+  render(
     <ThemeProvider theme={{}}>
       <Button />
     </ThemeProvider>
@@ -209,11 +209,11 @@ test('initializes mode based on localStorage', () => {
   window.localStorage.setItem(STORAGE_KEY, 'dark')
   let mode
   const Button = () => {
-    const [colorMode, setMode] = useColorMode()
+    const [colorMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
   }
-  const tree = render(
+  render(
     <ThemeProvider theme={{}}>
       <Button />
     </ThemeProvider>
@@ -351,7 +351,7 @@ test('does not initialize mode from prefers-color-scheme media query when useCol
 test('useColorMode throws when there is no theme context', () => {
   expect(() => {
     const Consumer = () => {
-      const _ = useColorMode()
+      useColorMode()
       return null
     }
     render(<Consumer />)
@@ -367,7 +367,7 @@ test('useThemeUI returns current color mode colors', () => {
     colors = theme.colors
     return null
   }
-  const root = render(
+  render(
     <ThemeProvider
       theme={{
         config: {
@@ -392,7 +392,7 @@ test('useThemeUI returns current color mode colors', () => {
 })
 
 test('warns when initialColorModeName matches a key in theme.colors.modes', () => {
-  const root = render(
+  render(
     <ThemeProvider
       theme={{
         config: {
@@ -416,7 +416,7 @@ test('warns when initialColorModeName matches a key in theme.colors.modes', () =
 
 test('dot notation works with color modes', () => {
   const Button = () => {
-    const [colorMode, setMode] = useColorMode()
+    const [, setMode] = useColorMode()
     return (
       <button
         sx={{
@@ -458,7 +458,7 @@ test('dot notation works with color modes', () => {
 
 test('dot notation works with color modes and custom properties', () => {
   const Button = () => {
-    const [colorMode, setMode] = useColorMode()
+    const [, setMode] = useColorMode()
     return (
       <button
         sx={{
@@ -509,7 +509,7 @@ test('raw color values are passed to theme-ui context when custom properties are
     color = context.theme.rawColors!.primary
     return null
   }
-  const root = render(
+  render(
     <ThemeProvider
       theme={{
         colors: {