react-typing-test/src/themes/themes.ts

A react component typing test, user input and wpm calculations.

export type Theme = {
  mainBackgroundColor: string;
  altBackgroundColor: string;
  mainTextColor: string;
  mainHighlightColor: string;
  correctColor: string;
  incorrectColor: string;
};

export type ThemeNames =
  | "Purpleish"
  | "Patagonia"
  | "Orangish"
  | "Miami"
  | "WarmNight";

export const themes: Record<ThemeNames, Theme> = {
  Purpleish: {
    mainBackgroundColor: "#2E2C2F",
    altBackgroundColor: "#3B4449",
    mainTextColor: "#E5D4ED",
    mainHighlightColor: "#AA7BC3",
    correctColor: "#944BBB",
    incorrectColor: "#A54657",
  },
  Patagonia: {
    mainBackgroundColor: "#264653",
    altBackgroundColor: "#E9C46A",
    mainTextColor: "#2A9D8F",
    mainHighlightColor: "#8C8C8C",
    correctColor: "#F4A261",
    incorrectColor: "#E76F51",
  },
  Orangish: {
    mainBackgroundColor: "#FF4800",
    altBackgroundColor: "#CE4257",
    mainTextColor: "#FFB600",
    mainHighlightColor: "#FF9100",
    correctColor: "#944BBB",
    incorrectColor: "#A54657",
  },
  Miami: {
    mainBackgroundColor: "#560BAD",
    altBackgroundColor: "#4CC9F0",
    mainTextColor: "#F72585",
    mainHighlightColor: "#f72585",
    correctColor: "#4CC9F0",
    incorrectColor: "#944BBB",
  },
  WarmNight: {
    mainBackgroundColor: "#14213D",
    altBackgroundColor: "#FCA311",
    mainTextColor: "#CCCCCC",
    mainHighlightColor: "#FFFFFF",
    correctColor: "#F1C47B",
    incorrectColor: "#886227",
  },
};