Color schemes

[kripod]

Motivation

As foreshadowed in 2018, 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 and Chakra UI offer first-class support for color schemes.

Details

In Theme UI, colors for different schemes can be defined like below:

{
  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:

{
  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, implemented with opt-out functionality in mind.

[kripod]

An upcoming article by @joshwcomeau will cover important implementation details to avoid unwanted color flashes during page loads.

[kripod]

An upcoming article by @joshwcomeau will cover important implementation details to avoid unwanted color flashes during page loads.

The article is now out. Great news for implementing this feature!