@theme-ui/color-modes

Adds support for user-controlled color modes

https://theme-ui.com

Note: This package is included in the main theme-ui package, and generally should not be used on its own.

npm i @theme-ui/color-modes

import { ThemeProvider } from '@theme-ui/core'
import { ColorModeProvider } from '@theme-ui/color-modes'
import theme from './theme'

export default (props) => (
  <ThemeProvider theme={theme}>
    <ColorModeProvider>{props.children}</ColorModeProvider>
  </ThemeProvider>
)

API

• useColorMode
• ColorModeProvider

v0.13.0 (Mon Dec 27 2021)

Release Notes

Move Emotion and MDX packages to peerDeps (#1867)

BREAKING CHANGE: @emotion/react and @mdx-js/react were moved to peerDependencies of theme-ui, @theme-ui/mdx and @theme-ui/sidenav and must be installed separately. This is a revert of change from Theme UI v0.3, and it's meant to help solve version clashes and context mismatch bugs on user side. Connected issues: #1793, #1531, #1530, #1388, #1345, #1130.

🚀 Enhancement

• Move Emotion and MDX packages to peerDeps #1867 (@hasparus)
• feat(deps): move Emotion to peerDeps (@hasparus)

🐛 Bug Fix

• fix(eslint): Add import/no-extraneous-dependencies and fix bad imports (@hasparus)

Authors: 1

• Piotr Monwid-Olechnowicz (@hasparus)

v0.12.0 (Thu Oct 28 2021)

:tada: This release contains work from new contributors! :tada:

Thanks for all your work!

:heart: Julian Benegas (@julianbenegas)

:heart: William Pei (@draekien)

🚀 Enhancement

• Use media query value when useColorSchemeMediaQuery is set to 'system' #1981 (@julianbenegas @draekien)
• feat(color-modes): update client side effect so that it maintains existing behaviour (@draekien)
• feat(color-modes): add media query event listeners and effects (@draekien)

🐛 Bug Fix

• Merge remote-tracking branch 'upstream/develop' into fix/color-scheme-media-query-api-update #981 (@draekien)
• fix(css): reexport CSSObject from @emotion/react (@hasparus)
• Check if function before executing. (@julianbenegas)
• use addEventListener instead of addListener (@julianbenegas)
• added media query listeners. added dependencies to effects (@julianbenegas)
• made media query win when useColorSchemeMediaQuery set to true (@julianbenegas)

Authors: 6

• @dependabot[bot]
• Julian Benegas (@julianbenegas)
• Lachlan Campbell (@lachlanjc)
• Lennart (@LekoArts)
• Piotr Monwid-Olechnowicz (@hasparus)
• William Pei (@draekien)

v0.11.0 (Wed Aug 25 2021)

🚀 Enhancement

• fix(color-modes): combine colors in nested providers #1838 (@hasparus)

🐛 Bug Fix

• fix(color-modes): respect html.theme-ui-{mode} class in nested providers to reduce FOUC (@hasparus)
• 0.10 chores #1842 (@hasparus)
• fix(color-modes): properly combine colors from nested providers (@hasparus)
• fix(color-modes): nest styles using css not style (@hasparus)

Authors: 1

• Piotr Monwid-Olechnowicz (@hasparus)

v0.10.0 (Sat Jun 19 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Vlad Shcherbin (@vladshcherbin), for all your work!

Release Notes

Allow easy styling autofilled of Inputs (#1811)

Background color of autofilled inputs will now default to theme.colors.background. It can be changed by setting autofillBackgroundColor prop.

🚀 Enhancement

🐛 Bug Fix

• Allow easy styling autofilled of Inputs #1811 (@hasparus)

🏠 Internal

• Docs: update JSX pragma guide with automatic runtime section #1718 (@flo-sch @hasparus)
• docs: set <meta name='color-scheme' (@hasparus)

Authors: 4

• @dependabot[bot]
• Florent SCHILDKNECHT (@flo-sch)
• Piotr Monwid-Olechnowicz (@hasparus)
• Vlad Shcherbin (@vladshcherbin)

v0.8.3 (Wed May 05 2021)

🐛 Bug Fix

• fix(color-modes): stop showing current color mode as initial mode in rawColors.modes (@hasparus)

⚠️ Pushed to stable

• Merge branch 'stable' into develop (@hasparus)

Authors: 1

• Piotr Monwid-Olechnowicz (@hasparus)

v0.8.0 (Wed May 05 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Francis Champagne (@fcisio), for all your work!

🚀 Enhancement

• v0.8 #1688 (@lachlanjc @hasparus)
• Refactor color objects and expose default colors as a mode #1639 (@fcisio)
• feat(css): remove deprecated theme.useBodyStyles (@hasparus)
• feat: create the allColorModes object in the context (@fcisio)

🐛 Bug Fix

• Merge remote-tracking branch 'origin/develop' into v0.8 (@hasparus)
• test: read root styles from html element (@hasparus)
• fix(color-modes): default useCustomProperties to true, as in the docs (@hasparus)
• Merge branch 'stable' into config-2 (@hasparus)
• Merge branch 'config' into config-2 #1421 (@hasparus)
• refactor: memoize theme colors mutation (@fcisio)
• refactor: remove lodash dependency (@fcisio)
• refactor: assemble the modes inside rawColors (@fcisio)
• fix: test coverage (@fcisio)
• Update color-modes to be more backwards compatible (@lachlanjc)
• Remove duplicate vars from merge conflict (@lachlanjc)
• Merge branch 'develop' into config (@lachlanjc)
• Fix remaining issues (@lachlanjc)
• Begin moving theme config options (@lachlanjc)
• Re-add config options to root theme type as deprecated (@lachlanjc)
• Make changes to ColorModeProvider non-breaking (@lachlanjc)

⚠️ Pushed to stable

• Merge branch 'stable' into develop (@hasparus)

Authors: 4

• Brent Jackson (@jxnblk)
• Francis Champagne (@fcisio)
• Lachlan Campbell (@lachlanjc)
• Piotr Monwid-Olechnowicz (@hasparus)

v0.7.5 (Wed Apr 28 2021)

⚠️ Pushed to stable

• Merge branch 'develop' into stable (@hasparus)

Authors: 1

• Piotr Monwid-Olechnowicz (@hasparus)

v0.7.0 (Thu Apr 15 2021)

🚀 Enhancement

• WIP: Build packages with Preconstruct 2 #1423 (@alexanderchan @hasparus)

🐛 Bug Fix

• Merge branch 'develop' into preconstruct-2 (@hasparus)
• test: fix test types (@hasparus)
• wip(workspace): update to preconstruct 2 (@hasparus)
• Merge branch 'add/preconstruct' into preconstruct-2 (@hasparus)
• Remove types reference since it comes from cjs.d.ts (@alexanderchan)
• Remove references to microbundle (@alexanderchan)
• Remove unused files (@alexanderchan)
• Run preconstruct fix to update main (@alexanderchan)

⚠️ Pushed to stable

• Merge branch 'develop' into stable (@hasparus)

Authors: 2

• Alex Chan (@alexanderchan)
• Piotr Monwid-Olechnowicz (@hasparus)