Should this be a good way for multiple theming?

[Saad-Bashar]

Need some review on using multiple themes. So I have followed the doc and added light, dark themes separately. Let’s say I have to configure some other values like fontFamily and spacing, in that case, I have to duplicate them both inside light and dark. So I did create 3 themes like so

export const light = createTheme({
    colors: {
      // Define your theme colors for light mode
      primary: "#7C5DFA",
      primaryLight: "#9277FF",
      paper: "#F8F8F8",

    }
  })
  
export const dark = createTheme({
    colors: {
      // Define your theme colors for dark mode
      primary: '#000'
    }
})


const t = createTheme({
    fontFamilies: {
        'sans': 'Spartan-Medium' ,
        'sansBold': 'Spartan-Bold',
    },
})

export default t

So I am using the default theme everywhere and for colors, I am using the light or dark based on the theme appearance which is being passed to the app through a context. Even though I am using the color theme just for colors, they do have all other properties just like a normal theme object. Do you think its okay to do so or any other approach I should follow?

[arabold]

I think this is an okay approach. Keep in mind that all the properties you pass to the createTheme are simple objects. So, there's also no reason you couldn't do something like this:

const commonStyles = {
    fontFamilies: {
        'sans': 'Spartan-Medium' ,
        'sansBold': 'Spartan-Bold',
    }
}

export const light = createTheme({
    ...commonStyles,
    colors: {
      // Define your theme colors for light mode
      primary: "#7C5DFA",
      primaryLight: "#9277FF",
      paper: "#F8F8F8",
    }
  })
  
export const dark = createTheme({
    ...commonStyles,
    colors: {
      // Define your theme colors for dark mode
      primary: '#000'
    }
})

const t = { light, dark }
export default t

And then access it like t.light.primary, t.dark.fontSans. Not sure if that would easier or not... 🤔 You can also try to use a hook to select the right theme ad-hoc:

/**
 * Chooses light or dark theme depending on the user's color scheme
 */
export default function useTheme() {
  const colorScheme = useColorScheme()
  return colorScheme === 'dark' ? dark : light
}

[Saad-Bashar]

Thank you so much for your elaborate answer. Your pattern does look cleaner :)