kripod / kripod/glaze

Color schemes

Open
#7 2 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.