A adaptação de temas em aplicações Android pode ser desafiadora, especialmente ao atender às expectativas dos usuários por temas que mudam automaticamente com o modo escuro do sistema ou que se ajustam às cores do papel de parede. Felizmente, a biblioteca Accompanist simplifica essas funcionalidades. Este artigo explora como integrar o sistema de cores dinâmicas (Dynamic Color) do Material Design e personalizar temas com o componente ThemeAdapter do Accompanist.

Cores Dinâmicas e o Componente ThemeAdapter

O Material Design 3 introduziu o sistema de cores dinâmicas, que extrai a cor principal do papel de parede ou tema do dispositivo para gerar um esquema de cores harmonioso. O Accompanist, uma biblioteca de extensão para Jetpack Compose, oferece o componente ThemeAdapter para facilitar essa integração.

O módulo ThemeAdapter do Accompanist inclui duas implementações principais:

• Adaptador de tema Material 2
• Adaptador de tema Material 3

Esses adatpadores alinham-se com as especificações de design Material Design 2 e 3 do Google, permitindo uma integração fluida com o sistema de cores do Android.

Integração de Cores do Sistema em Três Passos

Passo 1: Adicionar Dependências

Primeiro, adicione a dependência do ThemeAdapter ao arquivo build.gradle do seu módulo:

dependencies {
    // Para Material 3
    implementation "com.google.accompanist:accompanist-themeadapter-material3:0.33.1"
    // Ou para Material 2
    implementation "com.google.accompanist:accompanist-themeadapter-material:0.33.1"
}

Nota: Certifique-se de que a versão da biblioteca seja compatível com a sua versão do Jetpack Compose. Consulte o README do projeto para obter as versões mais recentes.

Passo 2: Inicializar o Adaptador de Tema

No Activity principle da sua aplicação, envolva o conteúdo Compose com o ThemeAdapter. Exemplo para o tema Material 3:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Usando o adaptador de tema Material 3
            MaterialTheme3Theme {
                // Conteúdo da sua aplicação
                MainScreen()
            }
        }
    }
}

Passo 3: Aplicar Cores do Tema

Dentro dos seus componentes Compose, acesse as cores diretamente de MaterialTheme.colorScheme:

@Composable
fun MainScreen() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Exemplo de Cores Dinâmicas") },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primary,
                    titleContentColor = MaterialTheme.colorScheme.onPrimary
                )
            )
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "Cores Dinâmicas Aplicadas",
                color = MaterialTheme.colorScheme.onSurface
            )
            Spacer(modifier = Modifier.height(16.dp))
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(MaterialTheme.colorScheme.secondary)
            )
        }
    }
}

Personalizando o Esquema de Cores Dinâmicas

O Accompanist não apenas suporta cores dinâmicas do sistema, mas também permite que os desenvolvedores personalizem as regras de cores para efeitos visuais de marca únicos.

Customização Básica: Ajustando a Tonalidade

Controle a ativação das cores dinâmicas do sistema com o parâmetro dynamicColor e defina uma cor base usando seedColor:

MaterialTheme3Theme(
    dynamicColor = true, // Ativa cores dinâmicas do sistema
    seedColor = Color(0xFF6200EE) // Cor base
) {
    // Conteúdo da aplicação
}

Customização Avançada: Misturadores de Cores

Para cenários que exigem controle mais refinado, use o construtor ColorScheme para personalizar as regras de mistura:

val customColorScheme = lightColorScheme(
    primary = Color(0xFF4CAF50),
    secondary = Color(0xFF2196F3),
    // Outras definições de cores...
)

MaterialTheme3Theme(
    colorScheme = customColorScheme,
    dynamicColor = false // Desativa cores dinâmicas do sistema
) {
    // Conteúdo da aplicação
}

Casos de Adaptação em Múltiplos Cenários

Caso 1: Seguindo o Modo Escuro do Sistema

O ThemeAdapter do Accompanist responde automaticamente às mudanças de tema do sistema, eliminando a necessidade de código adicional:

MaterialTheme3Theme(
    // Segue o modo escuro do sistema por padrão
) {
    // O conteúdo da aplicação se adapta automaticamente à troca de tema do sistema
}

Caso 2: Troca de Tema na Aplicação

Implemente a troca manual de tema dentro da aplicação usando gerenciamento de estado:

var darkTheme by remember { mutableStateOf(false) }

MaterialTheme3Theme(
    darkTheme = darkTheme,
    dynamicColor = true
) {
    Scaffold(
        content = { innerPadding ->
            Column(
                modifier = Modifier.padding(innerPadding),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text("Tema Atual: ${if (darkTheme) "Escuro" else "Claro"}")
                Switch(
                    checked = darkTheme,
                    onCheckedChange = { darkTheme = it }
                )
            }
        }
    )
}

Melhores Práticas e Considerações

Otimização de Desempenho

Evite criar instâncias de ColorScheme repetidamente durante a recomposição. Use remember para cachear:

val colorScheme = remember {
    if (darkTheme) darkColorScheme(seedColor = seedColor)
    else lightColorScheme(seedColor = seedColor)
}

Compatibilidade de Versão

Cores dinâmicas exigem Android 12 (API 31) ou superior. Dispositivos de versões anteriores usarão esquemas de cores padrão. Configure a versão mínima de suporte no gradle.properties do seu projeto:

minSdkVersion=21
targetSdkVersion=33

Sugestões de Teste

Utilize as ferramentas de teste do Accompanist para verificar a funcionalidade de troca de tema:

@RunWith(AndroidJUnit4::class)
class ThemeTest {
    @Test
    fun testThemeSwitch() {
        composeTestRule.setContent {
            MaterialTheme3Theme {
                // Conteúdo para teste
            }
        }
        // Verifique o comportamento do tema
    }
}

O componente ThemeAdapter do Accompanist simplifica significativamente a implementação de cores dinâmicas do Material Design em aplicações Jetpack Compose. Você aprendeu a:

1. Integrar rapiadmente cores dinâmicas do sistema.
2. Personalizar esquemas de cores.
3. Aplicar melhores práticas para adaptação de temas em diversos cenários.

À medida que o Material Design 3 evolui, o Accompanist continuará a ser atualizado com novos recursos de temas. Consulte a documentação CONTRIBUTING.md do projeto para obter o plano de desenvolvimento mais recente.