In amirmasoudabdol/sfthemes: An Accessible Set of Themes and Color Palettes Optimized for Light/Dark Appearances, and Different Screen Sizes

Apple's Human Interface Guidelines provides two primary color palettes for each platform, light and dark.

On iOS, each palette is accompanied by an accessible variant where the temperature and transparency of colors are adjusted to provide higher contrast and brightness. Both light and dark palettes can be used with theme_sf_light() and theme_sf_dark() themes. However, we recommend using light palettes with light themes, and dark palettes with dark themes.

iOS Light Palette

iOS Accessible Light Palette

On macOS, in addition to light and dark palettes and their accessible forms, each palette is accompanied with a vibrant variant where the contrast between colors is even higher.

macOS Light Palette

macOS Vibrant Light Palette

On watchOS, only one color palette is provided. The watchOS color palette is specifically designed to provide higher level of contrast and brightness, and it is best accompanied by dark themes.

watchOS Dark Palette

Collectively, sfthemes offers 17 color palettes:

iOS Set

• iOS Light
  • iOS Accessible Light
• iOS Dark
  • iOS Accessible Dark
• iOS Gray Light
  • iOS Accessible Gray Light
• iOS Gray Dark
  • iOS Accessible Gray Dark

macOS Set

• macOS Light
  • macOS Accessible Light
• macOS Vibrant Light
  • macOS Accessible Vibrant Light
• macOS Dark
  • iOS Accessible Dark
• macOS Vibrant Dark
  • iOS Accessible Vibrant Dark

watchOS Set

• watchOS Dark

Color’s Order

Each palette in sfthemes can be sorted in two ways. The default order returns colors of the palette according to their appearance in Apple’s HIG document, and the contrast (default) order returns an optimized ordering of colors to maximize their in-between contrast.

iOS palette ordered for more in-between contrast

iOS palette ordered for more in-between contrast

amirmasoudabdol/sfthemes documentation built on July 5, 2022, 5:36 p.m.