Generate platform native colors for iOS, Android, Web

Using colors from the underlying platform primitives is powerful, but maintaining it when targeting multiple platforms can be quite cumbersome. With this CLI, you can generate colors and entrypoints for both iOS, Android, and Web with ease.

Features

• Easy to use: TypeScript constants are generated automatically – using it with React Native is as simple as importing the color name.
• Fast: Using platform colors enables you to change from light/dark mode instantly and without any additional rerenders.
• Accessible: By utilizing the underlying platforms, high contrast colors are supported out of the box.

How to Use

To get started with generating platform colors, run the following command:

hnpx @klarnaplatform-colors

The first time you run the command, it will prompt you which platforms you want to generate files for, creating a file with the following format:

js
platform-colors.config.js
module.exports = {
    colors: {
        background: {
            light: #ffffff,
            dark: #000000,
        },
        accent: "pink",
    },
    javascript: {
        typescript: true,
        outputDirectory: "src/colors",
    },
    ios: {
        outputDirectory: "iosYourApp/Images.xcassets",
    },
    android: {
        outputDirectory: "android/app/src/main/res",
    },
    css: {
        outputDirectory: "static/css",
    },
};

Configuration Explained

Think of the configuration options as ingredients in a recipe. Each ingredient plays a pivotal role in the resulting dish (or in this case, your application):

• Colors: This section is like selecting hues of colors for your masterpiece, where each key is the color name and the value is either a string or an object containing specific properties for different modes.
• iOS: Similar to choosing a dish specifically for your Apple-loving friend, this defines where your iOS application will find its color assets.
• Android: Just as you would follow a specific culinary style for Android devices, you’ll need to define how and where to find your color resources.
• CSS: Think of this as your dining table setup where you determine where the CSS styles will reside.
• JavaScript: Dictate how you want your application to serve its flavors, ensuring it tastes delightful across different types of setups.

Getting the Hex Value from Dynamic Color

You must first ensure you’ve added @klarnaplatform-colors as a dependency and recompiled the app. The process is akin to gathering your ingredients before you start cooking:

import PlatformColor from "react-native";
import resolveColorSync from "@klarnaplatform-colors";

const hexColor = resolveColorSync(PlatformColor(colorName));

Development Setup

To start cooking up your own color configurations:

yarn install
yarn test

Example App

There’s an example React Native App available to test under the examples directory. To run it:

sh
cd examples/ColorViewerApp
yarn
pod install --project-directory=ios
Running it either on iOS or Android by:
yarn ios
or
yarn android

Troubleshooting Tips

If you run into any issues, ensure that:

• Your configurations are complete and accurately defined.
• You have re-run the generation command after any changes.
• The necessary dependencies are correctly installed.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

By effectively utilizing the platform-native colors, you ensure a consistent appearance across applications developed for various environments, resembling a homely feast enjoyed by all.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.