velsa/styled-rn

Theme example

Opened this issue · 0 comments

orta commented

I wondered if the multi-theme example got made TODO because of the issue with as const and having a literal type object. There's many possible answers to ensure your types match, but here's the one I use (because I keep Widen around for other uses). The docs for it are here

export const mainTheme = {
  primary: "blue",
  background: "white",
} as const

export const darkTheme: GeneralTheme = {
  primary: "white",
  backgrund: "black",
}

export type AppTheme = typeof mainTheme
export type GeneralTheme = Widen<typeof mainTheme>


type Widen<T> = { [key in keyof T]: ToPrimitive<T[key]> }

type ToPrimitive<T> = T extends string
  ? string
  : T extends number
  ? number
  : T extends boolean
  ? boolean
  : T extends (..._args: any[]) => any
  ? (..._args: Parameters<T>) => ReturnType<T>
  : T