Colors

Every colour a screen needs, named by role rather than by shade, so light and dark can swap freely. lightColors and darkColors hold the same nine names, and withAlpha turns any #rrggbb colour into an rgba() string for overlays and pressed states. One file that works unchanged in React and in React Native, with no extra packages.

Installation

CLI

npx @modus-ui/cli add theme-colors

Manual

1. Copy the code from the code tab.
2. Create a file at components/ui/theme-colors.ts.
3. Paste the code.

The same file serves React and React Native, so the CLI installs it unchanged in either.

Usage

import { Text, View } from "react-native";
import { darkColors, lightColors, withAlpha } from "@/components/ui/theme-colors";

export default function Banner({ dark }: { dark: boolean }) {
  const colors = dark ? darkColors : lightColors;

  return (
    <View style={{ backgroundColor: withAlpha(colors.primary, 0.12) }}>
      <Text style={{ color: colors.primary }}>Heads up</Text>
    </View>
  );
}

API

The names are background, foreground, card, muted, mutedForeground, primary, primaryForeground, border and destructive.