Skip to content

lab2.dev is launched! Build python web apps with plain English, no code required.

Tematização do Streamlit: Como Mudar o Fundo e o Tema do seu Aplicativo

Olaf Källström
Name
Olaf Källström

Updated on

Se você é um entusiasta de dados, provavelmente já ouviu falar do Streamlit. Ele é o assunto do momento na comunidade de ciência de dados, e por boas razões. O Streamlit é uma inovação, uma ferramenta que revolucionou o mundo do desenvolvimento de aplicativos web. Mas você sabia que o Streamlit não é apenas sobre dados? Ele também é sobre estética. Sim, você ouviu direito! Com o Streamlit, você pode personalizar a aparência do seu aplicativo, tornando-o único como um floco de neve em uma tempestade de neve. Então, prepare-se enquanto mergulhamos fundo no mundo da tematização do Streamlit.

Tematização do Streamlit: Explicação Rápida

Streamlit é uma joia no mundo áspero da codificação. É uma biblioteca Python de código aberto que elimina o trabalho árduo do desenvolvimento de aplicativos web. Com o Streamlit, você pode criar aplicativos web interativos e centrados em dados mais rápido do que você pode dizer "Python". E a melhor parte? Você não precisa saber uma única linha de HTML, CSS ou JavaScript.

O que é Streamlit?

Imagine só: você acabou de escrever um script em Python. É uma coisa de beleza, uma obra-prima. Mas agora, você quer compartilhá-lo com o mundo. Você quer transformá-lo em um aplicativo web. No passado, você teria que aprender HTML, CSS e JavaScript. Mas com o Streamlit, você pode transformar seu script em um aplicativo web em minutos, tudo em Python. É como ter o melhor dos dois mundos!

Tematização do Streamlit: Uma Nova Forma de Personalizar seus Aplicativos

Mas o Streamlit não é apenas sobre velocidade e eficiência. Também é sobre personalização. Com a tematização do Streamlit, você pode alterar a aparência do seu aplicativo mais rápido do que um camaleão muda de cor. Quer mudar a cor de fundo? Moleza. Quer mudar o tipo de fonte? Sem problemas. Com a tematização do Streamlit, o mundo é seu.

Temas Personalizados, Modo Escuro e Modo Claro

E não para por aí. A tematização do Streamlit também permite que você crie temas personalizados. Você pode criar um tema que combine com sua marca, seu estilo ou até mesmo seu humor. Se sentindo sombrio e misterioso? Experimente o modo escuro. Se sentindo leve e descontraído? Experimente o modo claro. Com o Streamlit, você é o mestre do seu universo.

Quer criar um aplicativo de análise e visualização de dados gratuitamente dentro do Streamlit?

PyGWalker (opens in a new tab) é uma biblioteca Python que ajuda você a incorporar facilmente uma interface semelhante ao Tableau em seu próprio aplicativo Streamlit sem esforço. Confira este incrível vídeo produzido por Sven do Coding is Fun (opens in a new tab) demonstrando os passos detalhados para capacitar seu aplicativo Streamlit com esta poderosa Biblioteca de Visualização de Dados em Python!


Agradecimentos especiais a Sven e suas grandes contribuições (opens in a new tab) à comunidade do PyGWalker!

Além disso, você também pode conferir a Página do GitHub do PyGWalker (opens in a new tab) para mais exemplos do PyGWalker.

Personalizando o Aplicativo Streamlit: Da Cor de Fundo às Fontes

Agora, vamos aos detalhes. Como você personaliza o seu aplicativo Streamlit? Bem, é fácil como comer um pedaço de bolo.

Mudando a Cor de Fundo

Para alterar a cor de fundo do seu aplicativo Streamlit, tudo o que você precisa fazer é adicionar algumas linhas de código. Aqui está um exemplo:

[theme]
backgroundColor = "#F0F0F0"

Esse código muda a cor de fundo para um cinza claro. Você pode substituir "#F0F0F0" por qualquer cor que desejar. O céu é o limite!

Personalizando as Fontes no Streamlit

As fontes são a alma do seu aplicativo. Elas podem fazer com que seu aplicativo pareça profissional, divertido ou até mesmo peculiar. Para personalizar as fontes no seu aplicativo Streamlit, você pode usar o seguinte código:

[theme]
font = "Helvetica Neue"

Esse código altera a fonte para "Helvetica Neue". Você pode substituir "Helvetica Neue" por qualquer fonte que você goste. Apenas lembre-se, a fonte deve ser do Google Fonts.

Opções de Configuração e Uso da Linha de Comando

O Streamlit também oferece uma variedade de opções de configuração. Essas opções permitem que você controle vários aspectos do seu aplicativo, desde o tema até o layout. Você pode acessar essas opções por meio da linha de comando. Por exemplo, para definir o tema, você pode usar o seguinte comando:

streamlit config set [theme]

Personalização Avançada do Streamlit: Imagem de Fundo e CSS

Se você estiver se sentindo aventureiro, pode levar a personalização do Streamlit a um nível mais avançado. Você pode adicionar uma imagem de fundo ou usar um arquivo CSS para personalização adicional da interface do usuário. Vamos ver como fazer isso.

Adicionando uma Imagem de Fundo

Para adicionar uma imagem de fundo ao seu aplicativo Streamlit, você pode usar o seguinte código:

st.markdown(
    """
    <style>
    .reportview-container {
        background: url("https://www.example.com/image.jpg");
    }
   </style>
    """,
    unsafe_allow_html=True
)

Esse código adiciona uma imagem de fundo ao seu aplicativo. Você pode substituir "https://www.example.com/image.jpg (opens in a new tab)" pelo URL da sua imagem.

Usando um Arquivo CSS

Se você quiser ir além, pode usar um arquivo CSS para personalização adicional. Você pode alterar o layout, adicionar animações e muito mais. Veja como você pode fazer isso:

st.markdown(
    """
    <link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
    """,
    unsafe_allow_html=True
)

Esse código vincula um arquivo CSS ao seu aplicativo. Você pode substituir "https://www.example.com/style.css (opens in a new tab)" pelo URL do seu arquivo CSS.

Tematização do Streamlit: Um Mergulho Profundo

Agora que cobrimos o básico, vamos nos aprofundar no mundo do tema Streamlit. Vamos explorar tudo, desde cores primárias até opções de configuração regulares e até mesmo como adicionar um pouco de contraste extra para um aplicativo mais visualmente atraente.

Cor Primária, Cor de Fundo Secundária e Cor do Texto

No Streamlit, você tem o poder de mudar a cor primária, cor de fundo secundária e a cor do texto do seu aplicativo. Isso permite que você crie um esquema de cores que combine perfeitamente com sua marca ou estilo pessoal. Por exemplo, se você quiser definir a cor primária para azul, a cor de fundo secundária para branca e a cor do texto para preta, você pode usar o seguinte código:

[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"

Elementos da Página e Contraste Adicional

O Streamlit também permite personalizar vários elementos da página, como a barra lateral, cartões e botões. Você também pode adicionar contraste a esses elementos para um aplicativo mais visualmente atraente. Por exemplo, se você quiser adicionar contraste à sua barra lateral, você pode usar o seguinte código:

[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }

Opções de Configuração Regulares

Além do tema, o Streamlit também oferece opções de configuração regulares. Essas opções permitem controlar vários aspectos do seu aplicativo, como a porta do servidor, o navegador e o modo de compartilhamento. Você pode acessar essas opções através do arquivo .streamlit/config.toml ou através da linha de comando.

Você já ouviu falar dessa incrível ferramenta de Análise de Dados e Visualização de Dados, que transforma seu aplicativo Streamlit em um Tableau?

PyGWalker (opens in a new tab) é uma biblioteca em Python que ajuda a incorporar facilmente uma interface semelhante ao Tableau em seu próprio aplicativo Streamlit sem esforço.

PyGWalker para visualização de dados no Streamlit (opens in a new tab)

Conclusão

A personalização de temas no Streamlit é um recurso poderoso que permite alterar a aparência e a sensação de seus aplicativos Streamlit. Com os temas, você pode mudar a cor de fundo, adicionar uma imagem de fundo, personalizar fontes e muito mais. Seja você um desenvolvedor experiente ou um iniciante, a personalização de temas no Streamlit oferece um mundo de possibilidades. Então vá em frente, experimente. Liberte sua criatividade e torne seu aplicativo Streamlit verdadeiramente seu.

FAQ

O Streamlit é uma ferramenta poderosa, mas também pode ser um pouco avassalador para iniciantes. Por isso, compilamos uma lista de perguntas frequentes para ajudá-lo a começar.

Como configurar um tema no Streamlit?

Configurar um tema no Streamlit é fácil como um piscar de olhos. Tudo o que você precisa fazer é adicionar uma seção [theme] em seu arquivo .streamlit/config.toml e especificar as cores, fontes e outras opções desejadas.

Qual é o tema padrão no Streamlit?

O tema padrão no Streamlit é um tema claro com um fundo branco e texto preto. No entanto, você pode facilmente alterar isso para um tema escuro ou um tema personalizado usando a seção [theme] em seu arquivo .streamlit/config.toml.

Quais são as desvantagens do Streamlit?

Embora o Streamlit seja uma ferramenta poderosa, ele também tem algumas desvantagens. Por exemplo, ele não é tão flexível quanto os frameworks tradicionais de desenvolvimento web. Ele também não suporta aplicativos de várias páginas à primeira vista, embora haja soluções alternativas para isso. Por último, embora o Streamlit seja ótimo para criar aplicativos web simples e interativos, pode não ser a melhor escolha para projetos mais complexos.

O que é o Streamlit e por que é usado?

O Streamlit é uma biblioteca em Python de código aberto que permite criar aplicativos web interativos e centrados em dados de forma rápida e fácil. É usado por cientistas de dados e desenvolvedores para compartilhar seu trabalho, visualizar dados e construir ferramentas interativas sem precisar aprender linguagens front-end como HTML, CSS ou JavaScript.