Adjusting the theme color

You can update the values easily but for the usage with components, you have to update the values in default.d.ts file and new variant in the commponent that you are going to use. See more details in extension of the components

./lib/default_values/default_themes.ts

export const DefaultLightPlatelette = { primary: ColorValue, primaryForeground: ColorValue, //... } export const DefaultDarkPlatelette = { primary: ColorValue, primaryForeground: ColorValue, //... } export const DefaultCoffeePlatelett = { primary: ColorValue, primaryForeground: ColorValue, //make sure to contain all the keys and properties }

./lib/unistyles.ts

//... export const LightTheme = { breakPoint:DefaultBreakPoints, //... color:{ ...DefaultLightPlatelette, }, } //... export const DarkTheme = { breakPoint:DefaultBreakPoints, //... color:{ ...DefaultDarkPlatelette, } } //... export const CoffeeTheme = { breakPoint:DefaultBreakPoints, //... color:{ ...DefaultCoffeePlatelette, } } type AppThemes = { light: typeof LightTheme dark: typeof DarkTheme coffee: typeof CoffeeTheme } // OVER-RIDING THE DEFAULT VALUES declare module 'react-native-unistyles' { export interface UnistylesBreakpoints extends breakPoint{} export interface UnistylesThemes extends AppThemes{} } // ADDING TO UNISTYLE REGISTRY UnistylesRegistry .addBreakpoints(DefaultBreakPoints) .addThemes({ light: LightTheme, dark: DarkTheme // add new themes according to your AppThemes type }) .addConfig({ // initial theme to be utilized in your project initialTheme: 'light|dark|coffee', // allow switching theme based on system JUST FOR light and dark adaptiveThemes: true, })