Color schemes
- Dominant language
- TypeScript
- Stars
- 414
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
## Motivation
As [foreshadowed in 2018](https://css-tricks.com/dark-modes-with-css/), dark mode has taken over the web, Not only does it create a new aesthetic twist for websites, but it also serves better accessibility.
Additionally, popular frameworks like [Theme UI](https://theme-ui.com/color-modes/) and [Chakra UI](https://chakra-ui.com/color-mode) offer first-class support for color schemes.
## Details
In Theme UI, colors for different schemes can be [defined like below](https://theme-ui.com/theme-spec#color-modes):
```js
{
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
secondary: '#05a',
muted: '#f6f6f6f',
modes: {
dark: {
text: '#fff',
background: '#000',
primary: '#0cf',
secondary: '#09c',
muted: '#111',
},
papaya: {
// this color mode will fallback to the root color object
// for values not defined here
text: '#433',
background: 'papayawhip',
},
},
},
}
```
An alternative with less nesting could be:
```js
{
colors: {
default: {
text: '#000',
background: '#fff',
primary: '#07c',
secondary: '#05a',
muted: '#f6f6f6f',
},
dark: {
text: '#fff',
background: '#000',
primary: '#0cf',
secondary: '#09c',
muted: '#111',
},
papaya: {
// this color mode will fallback to the default color object
// for values not defined here
text: '#433',
background: 'papayawhip',
},
},
}
```
The active color scheme could be queried through [a hook](https://github.com/kripod/react-hooks/blob/master/packages/web-api-hooks/src/usePreferredColorScheme.ts), implemented [with opt-out functionality in mind](https://web.dev/prefers-color-scheme/#dark-mode-but-add-an-opt-out).
Contributor guide
Research direction
Start by reviewing the issue's Theme UI color-mode examples and the linked usePreferredColorScheme hook. Then locate the repository's existing theme and color-handling entry points; the issue names no repository files or tests. Done should include a defined color-scheme API, active-scheme querying with opt-out behavior, and coverage for fallback colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100