Sistema de Colorização dinâmica que implementei recentemente em React Native com Expo e Typescript. 🎨
Overview
Eu implementei um sistema (um arquivo color.ts e alguns hooks, sendo mais exato),
que recebe um objeto com três cores (Background, Foreground e Primary) e deriva uma paleta de cores a partir disso aplicando-a(por meio dos hooks) no tema do app. Tem alguns detalhes de arquitetura que tornaram isso possível, mas como Júnior ainda não me sinto confortável pra destrinchar na prática.
Na prática
Na prática, você retorna um array de objetos tipo esse:
export const COLOR_PAIRS = {
default: {
light: 'rgb(242, 245, 248)',
dark: 'rgb(7, 10, 13)',
primary: '#007AFF',
},
greenValley: {
light: 'rgb(220, 245, 220)',
dark: 'rgb(5, 15, 9)',
primary: '#2ECC40',
},
blueSea: {
light: 'rgb(227, 239, 255)',
dark: 'rgb(4, 9, 19)',
primary: '#0074D9',
},
CherryOre: {
light: 'rgb(255, 250, 250)',
dark: 'rgb(24, 6, 9)',
primary: '#FF3860',
},
PurpleHaze: {
light: 'rgb(241, 235, 255)',
dark: 'rgb(17, 6, 26)',
primary: '#B10DC9',
},
YellowSun: {
light: 'rgb(255, 246, 195)',
dark: 'rgb(26, 26, 0)',
primary: '#FFDC00',
},
OrangeFlame: {
light: 'rgb(255, 206, 173)',
dark: 'rgb(7, 3, 0)',
primary: '#FF851B',
}
} as const;
E ficam disponíveis no tema do app os métodos que já tem os temas carregados que podem ser passados pra dentro dos styled components, como:
backgroundColor: colors.surface.unresolved.getSurface12(),
borderColor: colors.surface.unresolved.getSurface50(),
boxShadow: `0 8px 32px 0 ${colors.surface.unresolved.getSurface8()}`,
Parece estranho ver uma 'chamada' de método dentro de um styled component, mas na prática é só uma função que retorna uma string, então não tem problema nenhum. E o resultado é algo como o que está sendo mostrado nesse vídeo aqui:
A questão
Eu gostaria muito de saber se esse é um bom caminho a seguir, ou se existem outras formas de fazer isso que sejam mais simples e que não exijam tanto conhecimento de arquitetura. Eu não sou especialista em React, então não sei se isso é uma boa prática ou não. Eu só sei que funciona e que é uma solução interessante pra um problema que eu tinha. Eu também gostaria de usar esses componentes numa iniciativa open source mas eu sequer tenho ideia de o quão bem alinhado isso está com as boas práticas do React. Alguém com mais XP poderia me dar uma luz? :)