demo

@fhlnet/color-apple

Apple iOS system color CSS variables for web apps.

This package provides Apple iOS-style system color variables, including light mode, dark mode, and high-contrast variants.

Installation

npm install @fhlnet/color-apple

Usage

Import the package once in your app entry file:

import '@fhlnet/color-apple'

Then use the CSS variables in your styles:

.page {
  color: var(--label);
  background: var(--systemBackground);
}

.button {
  color: var(--systemBlue);
  border-color: var(--separator);
}

Theme switching

By default, the colors follow the browser/system preference through prefers-color-scheme and prefers-contrast.

You can also manually set a theme:

import { setTheme } from '@fhlnet/color-apple'

setTheme('light')
setTheme('dark')
setTheme('hc-light')
setTheme('hc-dark')

To return to automatic system preference mode:

setTheme()

The helper updates the data-theme attribute on <html>:

<html data-theme="dark">

A manual theme is exact: it is never changed by the system preference (e.g. light stays light even when the system has Increase Contrast on). Only <html> without data-theme follows prefers-color-scheme / prefers-contrast.

cssVar (auto complete)

cssVar(name) returns var(--name). The name is typed, so your editor auto-completes the color names:

import { cssVar } from '@fhlnet/color-apple'

el.style.background = cssVar('systemGroupedBackground') // 'var(--systemGroupedBackground)'

CSS-only usage

If your tooling supports package CSS imports, you can import the stylesheet directly:

import '@fhlnet/color-apple/css'

or:

@import '@fhlnet/color-apple/apple-color-ios.css';

Available theme values

• light
• dark
• hc-light
• hc-dark
• undefined / no value: remove manual theme and follow system preference

References

• Color | Apple Developer Documentation
• Apple Colors | Mar Codes