# Function createTheme

- createTheme<
  Argument0 extends
  | string
  | {
  colors?: {
  activeBg?: string
  | number
  | boolean;
  background?: string | number | boolean;
  blue1?: string | number | boolean;
  blue2?: string | number | boolean;
  blue3?: string | number | boolean;
  blue4?: string | number | boolean;
  blue5?: string | number | boolean;
  border?: string | number | boolean;
  buttonBorder?: string | number | boolean;
  choiceActiveBg?: string | number | boolean;
  choiceActiveText?: string | number | boolean;
  choiceBg?: string | number | boolean;
  choiceBorder?: string | number | boolean;
  choiceText?: string | number | boolean;
  focusColor?: string | number | boolean;
  green1?: string | number | boolean;
  green1Darker?: string | number | boolean;
  grey1?: string | number | boolean;
  headerBg?: string | number | boolean;
  headerBorder?: string | number | boolean;
  headerText?: string | number | boolean;
  icon?: string | number | boolean;
  inactiveBg?: string | number | boolean;
  inactiveDarkBg?: string | number | boolean;
  inputDisabledBg?: string | number | boolean;
  inputDisabledText?: string | number | boolean;
  mainColor?: string | number | boolean;
  mainColorAlt?: string | number | boolean;
  modalBg?: string | number | boolean;
  modalButtonBg?: string | number | boolean;
  modalButtonBorder?: string | number | boolean;
  orange1?: string | number | boolean;
  orange1Darker?: string | number | boolean;
  pink1?: string | number | boolean;
  pinky1?: string | number | boolean;
  pinky2?: string | number | boolean;
  pinky3?: string | number | boolean;
  popText?: string | number | boolean;
  purple1?: string | number | boolean;
  red1?: string | number | boolean;
  scrollbarsBg?: string | number | boolean;
  scrollbarsThumb?: string | number | boolean;
  selectorActive?: string | number | boolean;
  selectorText?: string | number | boolean;
  sub?: string | number | boolean;
  tableStripedBg?: string | number | boolean;
  text?: string | number | boolean;
  text2?: string | number | boolean;
  text3?: string | number | boolean;
  toggleBgDisabled?: string | number | boolean;
  toggleHandleBg?: string | number | boolean;
  toggleHandleBgDisabled?: string | number | boolean;
  toggleHandleBorder?: string | number | boolean;
  toggleHandleBorderDisabled?: string | number | boolean;
  toolbarBg?: string | number | boolean;
  toolbarBorder?: string | number | boolean;
  toolButtonText?: string | number | boolean;
  yellow1?: string | number | boolean;
  yellow2?: string | number | boolean;
  yellow3?: string | number | boolean;
  };
  } & {
  [key: string]: {
  [key: string]: string
  | number
  | boolean;
  [key: number]: string | number | boolean;
  };
  },
  Argument1 extends
  | string
  | {
  colors?: {
  activeBg?: string
  | number
  | boolean;
  background?: string | number | boolean;
  blue1?: string | number | boolean;
  blue2?: string | number | boolean;
  blue3?: string | number | boolean;
  blue4?: string | number | boolean;
  blue5?: string | number | boolean;
  border?: string | number | boolean;
  buttonBorder?: string | number | boolean;
  choiceActiveBg?: string | number | boolean;
  choiceActiveText?: string | number | boolean;
  choiceBg?: string | number | boolean;
  choiceBorder?: string | number | boolean;
  choiceText?: string | number | boolean;
  focusColor?: string | number | boolean;
  green1?: string | number | boolean;
  green1Darker?: string | number | boolean;
  grey1?: string | number | boolean;
  headerBg?: string | number | boolean;
  headerBorder?: string | number | boolean;
  headerText?: string | number | boolean;
  icon?: string | number | boolean;
  inactiveBg?: string | number | boolean;
  inactiveDarkBg?: string | number | boolean;
  inputDisabledBg?: string | number | boolean;
  inputDisabledText?: string | number | boolean;
  mainColor?: string | number | boolean;
  mainColorAlt?: string | number | boolean;
  modalBg?: string | number | boolean;
  modalButtonBg?: string | number | boolean;
  modalButtonBorder?: string | number | boolean;
  orange1?: string | number | boolean;
  orange1Darker?: string | number | boolean;
  pink1?: string | number | boolean;
  pinky1?: string | number | boolean;
  pinky2?: string | number | boolean;
  pinky3?: string | number | boolean;
  popText?: string | number | boolean;
  purple1?: string | number | boolean;
  red1?: string | number | boolean;
  scrollbarsBg?: string | number | boolean;
  scrollbarsThumb?: string | number | boolean;
  selectorActive?: string | number | boolean;
  selectorText?: string | number | boolean;
  sub?: string | number | boolean;
  tableStripedBg?: string | number | boolean;
  text?: string | number | boolean;
  text2?: string | number | boolean;
  text3?: string | number | boolean;
  toggleBgDisabled?: string | number | boolean;
  toggleHandleBg?: string | number | boolean;
  toggleHandleBgDisabled?: string | number | boolean;
  toggleHandleBorder?: string | number | boolean;
  toggleHandleBorderDisabled?: string | number | boolean;
  toolbarBg?: string | number | boolean;
  toolbarBorder?: string | number | boolean;
  toolButtonText?: string | number | boolean;
  yellow1?: string | number | boolean;
  yellow2?: string | number | boolean;
  yellow3?: string | number | boolean;
  };
  } & {
  [key: string]: {
  [key: string]: string
  | number
  | boolean;
  [key: number]: string | number | boolean;
  };
  },
  >(
  nameOrScalesArg0: Argument0,
  nameOrScalesArg1?: Argument1,
  ): string & { className: string; selector: string } & (
  Argument0 extends string
  ? ThemeTokens<Argument1, "">
  : ThemeTokens<Argument0, "">
  )

- #### Type Parameters

  - Argument0 extends
    | string
    | {
    colors?: {
    activeBg?: string
    | number
    | boolean;
    background?: string | number | boolean;
    blue1?: string | number | boolean;
    blue2?: string | number | boolean;
    blue3?: string | number | boolean;
    blue4?: string | number | boolean;
    blue5?: string | number | boolean;
    border?: string | number | boolean;
    buttonBorder?: string | number | boolean;
    choiceActiveBg?: string | number | boolean;
    choiceActiveText?: string | number | boolean;
    choiceBg?: string | number | boolean;
    choiceBorder?: string | number | boolean;
    choiceText?: string | number | boolean;
    focusColor?: string | number | boolean;
    green1?: string | number | boolean;
    green1Darker?: string | number | boolean;
    grey1?: string | number | boolean;
    headerBg?: string | number | boolean;
    headerBorder?: string | number | boolean;
    headerText?: string | number | boolean;
    icon?: string | number | boolean;
    inactiveBg?: string | number | boolean;
    inactiveDarkBg?: string | number | boolean;
    inputDisabledBg?: string | number | boolean;
    inputDisabledText?: string | number | boolean;
    mainColor?: string | number | boolean;
    mainColorAlt?: string | number | boolean;
    modalBg?: string | number | boolean;
    modalButtonBg?: string | number | boolean;
    modalButtonBorder?: string | number | boolean;
    orange1?: string | number | boolean;
    orange1Darker?: string | number | boolean;
    pink1?: string | number | boolean;
    pinky1?: string | number | boolean;
    pinky2?: string | number | boolean;
    pinky3?: string | number | boolean;
    popText?: string | number | boolean;
    purple1?: string | number | boolean;
    red1?: string | number | boolean;
    scrollbarsBg?: string | number | boolean;
    scrollbarsThumb?: string | number | boolean;
    selectorActive?: string | number | boolean;
    selectorText?: string | number | boolean;
    sub?: string | number | boolean;
    tableStripedBg?: string | number | boolean;
    text?: string | number | boolean;
    text2?: string | number | boolean;
    text3?: string | number | boolean;
    toggleBgDisabled?: string | number | boolean;
    toggleHandleBg?: string | number | boolean;
    toggleHandleBgDisabled?: string | number | boolean;
    toggleHandleBorder?: string | number | boolean;
    toggleHandleBorderDisabled?: string | number | boolean;
    toolbarBg?: string | number | boolean;
    toolbarBorder?: string | number | boolean;
    toolButtonText?: string | number | boolean;
    yellow1?: string | number | boolean;
    yellow2?: string | number | boolean;
    yellow3?: string | number | boolean;
    };
    } & {
    [key: string]: {
    [key: string]: string
    | number
    | boolean;
    [key: number]: string | number | boolean;
    };
    }
  - Argument1 extends
    | string
    | {
    colors?: {
    activeBg?: string
    | number
    | boolean;
    background?: string | number | boolean;
    blue1?: string | number | boolean;
    blue2?: string | number | boolean;
    blue3?: string | number | boolean;
    blue4?: string | number | boolean;
    blue5?: string | number | boolean;
    border?: string | number | boolean;
    buttonBorder?: string | number | boolean;
    choiceActiveBg?: string | number | boolean;
    choiceActiveText?: string | number | boolean;
    choiceBg?: string | number | boolean;
    choiceBorder?: string | number | boolean;
    choiceText?: string | number | boolean;
    focusColor?: string | number | boolean;
    green1?: string | number | boolean;
    green1Darker?: string | number | boolean;
    grey1?: string | number | boolean;
    headerBg?: string | number | boolean;
    headerBorder?: string | number | boolean;
    headerText?: string | number | boolean;
    icon?: string | number | boolean;
    inactiveBg?: string | number | boolean;
    inactiveDarkBg?: string | number | boolean;
    inputDisabledBg?: string | number | boolean;
    inputDisabledText?: string | number | boolean;
    mainColor?: string | number | boolean;
    mainColorAlt?: string | number | boolean;
    modalBg?: string | number | boolean;
    modalButtonBg?: string | number | boolean;
    modalButtonBorder?: string | number | boolean;
    orange1?: string | number | boolean;
    orange1Darker?: string | number | boolean;
    pink1?: string | number | boolean;
    pinky1?: string | number | boolean;
    pinky2?: string | number | boolean;
    pinky3?: string | number | boolean;
    popText?: string | number | boolean;
    purple1?: string | number | boolean;
    red1?: string | number | boolean;
    scrollbarsBg?: string | number | boolean;
    scrollbarsThumb?: string | number | boolean;
    selectorActive?: string | number | boolean;
    selectorText?: string | number | boolean;
    sub?: string | number | boolean;
    tableStripedBg?: string | number | boolean;
    text?: string | number | boolean;
    text2?: string | number | boolean;
    text3?: string | number | boolean;
    toggleBgDisabled?: string | number | boolean;
    toggleHandleBg?: string | number | boolean;
    toggleHandleBgDisabled?: string | number | boolean;
    toggleHandleBorder?: string | number | boolean;
    toggleHandleBorderDisabled?: string | number | boolean;
    toolbarBg?: string | number | boolean;
    toolbarBorder?: string | number | boolean;
    toolButtonText?: string | number | boolean;
    yellow1?: string | number | boolean;
    yellow2?: string | number | boolean;
    yellow3?: string | number | boolean;
    };
    } & {
    [key: string]: {
    [key: string]: string
    | number
    | boolean;
    [key: number]: string | number | boolean;
    };
    }

  #### Parameters

  - nameOrScalesArg0: Argument0
  - `Optional` nameOrScalesArg1: Argument1

  #### Returns string & { className: string; selector: string } & (
  Argument0 extends string
  ? ThemeTokens<Argument1, "">
  : ThemeTokens<Argument0, "">
  )

  - Defined in src/theme.ts:25