#Complete example how to add custom colors in TypeScript

2 messages · Page 1 of 1 (latest)

terse kayak
#

Hello, I was reading about how to add custom colors in TypeScript, by using

// colors.ts
import { DefaultMantineColor, Tuple } from "@mantine/core";

type ExtendedCustomColors = "ijblue" | "ijgray" | DefaultMantineColor;

type CustomColors = Record<ExtendedCustomColors, Tuple<string, 10>>;

declare module "@mantine/core" {
    export interface MantineThemeColorsOverride {
        colors: Record<ExtendedCustomColors, Tuple<string, 10>>;
    }
}

export const ThemeColors: CustomColors = {
    ijblue: [
        "#8b92a8",
        "#737c97",
        "#5c6685",
        "#455174",
        "#2d3b62",
        "#242e42", // base
        "#142149",
        "#121e41",
        "#0f1a39",
        "#0d1631",
    ],

    ijgray: [
        "#f4f4f4",
        "#f2f2f2",
        "#f0f0f0",
        "#ededed",
        "#ebebeb",
        "#E9E9E9", // base
        "#d2d2d2",
        "#bababa",
        "#a3a3a3",
        "#8c8c8c",
    ],
};

till latest update, it worked by now I got

Type '{ ijblue: [string, string, string, string, string, string, string, string, string, string]; ijgray: [string, string, string, string, string, string, string, string, string, string]; }' is missing the following properties from type 'CustomColors': dark, gray, red, pink, and 10 more.ts(2740)

any clue?

terse kayak
#

currently, I fix creating

// custom-colors-type.ts
import { DefaultMantineColor, Tuple } from "@mantine/core";

type ExtendedCustomColors = "ijblue" | "ijgray" | DefaultMantineColor;

declare module "@mantine/core" {
    export interface MantineThemeColorsOverride {
        colors: Record<ExtendedCustomColors, Tuple<string, 10>>;
    }
}

and

// colors.ts
import { Tuple } from "@mantine/core";

export const colors: Record<string, Tuple<string, 10>> = {
    ijblue: [
        "#8b92a8",
        "#737c97",
        "#5c6685",
        "#455174",
        "#2d3b62",
        "#242e42", // base
        "#142149",
        "#121e41",
        "#0f1a39",
        "#0d1631",
    ],
    ijgray: [
        "#f4f4f4",
        "#f2f2f2",
        "#f0f0f0",
        "#ededed",
        "#ebebeb",
        "#E9E9E9", // base
        "#d2d2d2",
        "#bababa",
        "#a3a3a3",
        "#8c8c8c",
    ],
};

and finally

// _app.tsx
...
import { colors } from "theme/colors";
...
<MantineProvider
    withCSSVariables
    withGlobalStyles
    withNormalizeCSS
    theme={{
        colorScheme,
        colors,
    }}
>
....