Ordinary Puzzles grayscale palette

colors.ts

import tinycolor from "tinycolor2";
import { useColorScheme } from "react-native-appearance";

const primaryColor = "#171520";

const palette = new Array(10).fill(primaryColor).map((color, index) =>
  tinycolor(color)
    .brighten(index * 10)
    .toString()
);
const lightColors = palette;
const darkColors = palette.slice().reverse();

export const useColors = function() {
  const colorScheme = useColorScheme();
  const colors = {
    primary: colorScheme === "dark" ? darkColors : lightColors
  };
  return colors;
};

Usage:

import { View } from "react-native";
import { useColors } from "./colors";

const ExampleView = function() {
  const colors = useColors();
  const style = {
    backgroundColor: colors[3], // "colors" return the grayscale palette
    width: 50,
    height: 50
  };
  return <View style={style} />
}