Personalizando os temas de Streamlit: Um guia para iniciantes

Se você está começando a usar o Streamlit para criar web apps, provavelmente já percebeu como ele facilita a prototipagem rápida e a visualização de dados. Mas você sabia que pode personalizar a aparência do seu app para refletir seu estilo pessoal ou a identidade visual da sua empresa? Neste guia, vamos explorar como personalizar os temas no Streamlit, desde a ativação de temas padrão até a criação de temas personalizados. Vamos lá!

Introdução ao Streamlit e à personalização de temas

O que é Streamlit?

Streamlit é uma biblioteca de código aberto em Python que permite criar aplicativos web interativos de forma rápida e fácil. Ele é especialmente popular entre cientistas de dados e analistas, pois facilita a criação de dashboards e visualizações de dados sem a necessidade de conhecimentos avançados em desenvolvimento web.

Por que personalizar temas no Streamlit?

Personalizar os temas do seu app Streamlit não é apenas uma questão estética. Um tema bem escolhido pode melhorar a usabilidade, tornar o app mais acessível e até mesmo alinhar a aparência do app com a identidade visual da sua empresa. Além disso, a possibilidade de alternar entre modos claro e escuro pode ser um diferencial importante para a experiência do usuário.

Personalizar temas no Streamlit permite que você adapte a aparência do seu web app às necessidades específicas do seu projeto ou da sua marca. Isso pode melhorar a experiência do usuário, tornando a interface mais agradável e intuitiva. Além disso, a personalização de temas pode ajudar a manter a consistência visual com outros produtos ou serviços da sua organização, reforçando a identidade visual e profissionalismo do seu trabalho.

Entendendo os temas no Streamlit

O que são temas no Streamlit?

No Streamlit, um tema é um conjunto de configurações que define a aparência do seu app, incluindo cores, fontes e estilos de componentes. Os temas podem ser usados para criar uma experiência visualmente agradável e consistente para os usuários do seu app.

No Streamlit, temas são configurações visuais que permitem personalizar a aparência do seu web app. Eles incluem ajustes de cores, fontes e estilos que podem ser aplicados para criar uma interface mais atraente e adequada ao seu público-alvo. O Streamlit oferece temas padrão, como claro e escuro, mas também permite que você crie temas personalizados para atender às necessidades específicas do seu projeto.

Diferença entre os modos claro e escuro

Streamlit oferece dois temas padrão: claro e escuro. O modo claro é o tema padrão que você já conhece, enquanto o modo escuro é uma nova adição que muitos usuários pediram. O modo escuro é útil para ambientes com pouca luz e pode ser mais confortável para os olhos de alguns usuários.

Como ativar e alternar entre temas padrão

Ativando o modo escuro

Para ativar o modo escuro no seu app Streamlit, você pode usar o menu de configurações. No canto superior direito do seu app, clique em “Menu” e depois em “Settings”. Lá, você verá a opção de alternar entre os modos claro e escuro.

Alternando entre temas no menu de configurações

Além de alternar entre os modos claro e escuro, você também pode configurar o Streamlit para usar o tema do sistema operacional do usuário. Isso significa que o Streamlit ajustará automaticamente o tema do app com base nas configurações de tema do sistema operacional do usuário.

Criando temas personalizados

Usando o editor de temas do Streamlit

O Streamlit oferece um editor de temas que permite criar e visualizar temas personalizados em tempo real. Para acessar o editor de temas, vá para “Menu” → “Settings” → “Edit Active Theme”. Note que essa opção está disponível apenas durante o desenvolvimento local.

Definindo temas no arquivo config.toml

Outra maneira de criar temas personalizados é definindo-os diretamente no arquivo config.toml. Este arquivo permite configurar várias opções do Streamlit, incluindo temas.

Estrutura do arquivo config.toml

O arquivo config.toml deve ser colocado no diretório .streamlit do seu projeto. Aqui está um exemplo de como definir um tema personalizado:

[theme]
primaryColor = "#F63366"
backgroundColor = "black"
secondaryBackgroundColor = "#D3D3D3"
textColor = "white"
font = "sans serif"

Exemplo de configuração de tema

Vamos ver um exemplo mais detalhado de configuração de tema:

[theme]
# Cor principal para elementos interativos
primaryColor = "#7792E3"

# Cor de fundo para a área principal do conteúdo
backgroundColor = "#273346"

# Cor de fundo para a barra lateral e a maioria dos widgets interativos
secondaryBackgroundColor = "#B9F1C0"

# Cor usada para quase todos os textos
textColor = "#FFFFFF"

# Família de fontes para todos os textos no app, exceto blocos de código
font = "sans serif"

Como personalizar temas no Streamlit

Personalizar temas no Streamlit é uma maneira eficaz de melhorar a aparência do seu web app e proporcionar uma experiência mais agradável aos usuários. Para definir um tema padrão, como o tema dark, siga os passos abaixo:

1. Crie uma pasta de configuração: No diretório do seu projeto, crie uma pasta chamada .streamlit.
2. Arquivo de configuração: Dentro dessa pasta, crie um arquivo chamado config.toml.
3. Defina o tema: No arquivo config.toml, adicione a seguinte configuração para definir o tema dark como padrão:

   [theme]
   base="dark"

4. Execute o Streamlit: Salve o arquivo e execute seu aplicativo Streamlit novamente. O tema dark será aplicado automaticamente.

Esses passos simples permitem que você personalize o tema do seu web app Streamlit, tornando-o mais atraente e alinhado com a identidade visual desejada.

Personalizando cores e fontes

Configurando cores principais e de fundo

As cores principais e de fundo são definidas no arquivo config.toml e afetam a aparência geral do seu app. A cor principal é usada para elementos interativos, enquanto as cores de fundo são usadas para a área principal do conteúdo e a barra lateral.

Ajustando a cor do texto

A cor do texto é outra configuração importante que pode ser definida no arquivo config.toml. Certifique-se de escolher uma cor que ofereça um bom contraste com o fundo para garantir a legibilidade.

Escolhendo a fonte

Você pode escolher entre três tipos de fontes: “sans serif”, “serif” e “monospace”. A escolha da fonte pode afetar a legibilidade e a estética do seu app, então escolha com cuidado.

Aplicando temas em componentes personalizados

Como os temas afetam componentes personalizados

Os temas no Streamlit também afetam componentes personalizados. Se você estiver criando seus próprios componentes, pode usar as propriedades de tema para garantir que eles se integrem bem com o restante do app.

Usando a biblioteca streamlit-component-lib para componentes

A biblioteca streamlit-component-lib facilita a criação de componentes personalizados que respeitam o tema ativo do app. Aqui está um exemplo de como usar essa biblioteca:

import streamlit as st
from streamlit_component_lib import st_component

# Cria um componente personalizado que respeita o tema ativo
def my_custom_component():
    theme = st_component()
    st.write(f"Cor principal: {theme['primaryColor']}")
    st.write(f"Cor de fundo: {theme['backgroundColor']}")

my_custom_component()

Ferramentas e recursos adicionais

Utilizando o componente st-theme para obter o tema ativo

O componente st-theme permite obter o tema ativo do app Streamlit. Isso pode ser útil para ajustar dinamicamente a aparência dos componentes personalizados com base no tema atual.

Exemplos práticos de temas personalizados

Aqui estão alguns exemplos de temas personalizados que você pode experimentar:

[theme]
primaryColor = "#6eb52f"
backgroundColor = "#f0f0f5"
secondaryBackgroundColor = "#e0e0ef"
textColor = "#262730"
font = "sans serif"

exemplo de tema personalizado:

[theme]
primaryColor = "#d33682"
backgroundColor = "#002b36"
secondaryBackgroundColor = "#586e75"
textColor = "#fafafa"
font = "sans serif"

Conclusão

Neste guia, exploramos como personalizar os temas no Streamlit, desde a ativação de temas padrão até a criação de temas personalizados. Vimos como configurar cores, fontes e aplicar temas em componentes personalizados. A personalização de temas pode melhorar significativamente a usabilidade e a aparência do seu app, tornando-o mais alinhado com suas necessidades e preferências.

Se você quiser continuar aprendendo sobre Streamlit e outras ferramentas de visualização de dados, recomendamos explorar mais tutoriais e recursos disponíveis na documentação oficial e na comunidade do Streamlit. Boa sorte e divirta-se personalizando seus apps!

Referências

• Documentação oficial do Streamlit
• Blog do Streamlit sobre temas
• Discussão sobre o componente