Saltar para o conteúdo principal

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

Os temas no Replit permitem personalizar a aparência do Editor de Projetos, desde cores de fundo e elementos de interface até o realce de sintaxe do seu código. Personalize seu ambiente de desenvolvimento para melhor legibilidade, menos cansaço visual e uma experiência de programação mais agradável.
Captura de tela do editor de temas do Replit exibindo opções de personalização de cores

Criando um tema personalizado

Siga estas etapas para criar e personalizar seu próprio tema:
  1. Abra as Configurações e vá para UsuárioPersonalização (ou a seção Temas)
  2. Selecione Criar novo tema
  3. Insira um título, selecione um esquema de cores (claro ou escuro) e adicione uma descrição opcional
  4. Selecione Criar Tema para abrir o Editor de Temas
As configurações globais do tema controlam a aparência geral da interface:
  • Fundo: Define a cor base para a maioria das superfícies da interface
  • Contorno: Controla a cor das bordas e divisórias
  • Primeiro plano: Determina as cores de texto e ícones
  • Primário: Define a cor de botões e elementos interativos
  • Positivo: Aplicado a indicadores de sucesso, como o botão Executar
  • Negativo: Exibido para erros e avisos de ações destrutivas
Selecione Aplicar Tema para começar a usar seu tema personalizado imediatamente.

Realce de sintaxe

Personalize como diferentes elementos de código são exibidos para melhorar a legibilidade e a compreensão.
Um realce de sintaxe adequado torna o código mais fácil de escanear e entender rapidamente. Escolha cores que funcionem bem juntas e forneçam contraste suficiente em relação ao fundo.
ElementoDescrição
Nomes de VariáveisAplicado a variáveis quando nenhuma palavra-chave de declaração é usada
Definições de VariáveisColore nomes de variáveis quando definidas com palavras-chave como const ou var
Referências a FunçõesAplicado ao chamar funções
Definições de FunçõesColore nomes de funções durante a declaração
Palavras-chaveRealça palavras-chave da linguagem como import, function e return
Nomes de PropriedadesColore o acesso a propriedades de variáveis
Definições de PropriedadesUsado ao definir propriedades de objetos
Propriedades de FunçõesAplicado ao chamar métodos em objetos
Nomes de TagsUsado para tags HTML e JSX
Nomes de TiposColore anotações de tipo em linguagens tipadas
Nomes de ClassesAplicado a declarações e referências de classes
Nomes de AtributosRealça atributos HTML e JSX
ComentáriosAplicado a todos os comentários de código
StringsColore literais de string
NúmerosRealça valores numéricos
BooleanosFormata valores booleanos (true/false)
Expressões RegularesColore padrões de regex
OperadoresRealça operadores como +, -, * e /
ColchetesColore colchetes quadrados e angulares quando apropriado

Boas práticas de design de temas

Crie temas visualmente atraentes e funcionais seguindo estas diretrizes:

Cor e contraste

  • Equilibre o contraste: Garanta diferença suficiente entre elementos de fundo e de primeiro plano
  • Crie paletas coesas: Escolha cores que se complementem em vez de conflitar
  • Mantenha brilho consistente: Preserve um nível de brilho similar entre os elementos de sintaxe
  • Design para acessibilidade: Considere usuários com deficiências visuais evitando combinações de baixo contraste
Problemas comuns de design de temas a evitar:
  • Diferenças excessivas de brilho entre elementos de sintaxe
  • Cores mal combinadas que criam discordância visual
  • Contraste insuficiente entre o código e o fundo

Gerenciando seus temas

Acesse e gerencie todos os seus temas instalados em Configurações em UsuárioPersonalização (ou a seção Temas).

Alternando temas

Selecione o botão ao lado do título de um tema para ativá-lo como seu tema atual.

Editando temas

Modifique seus temas personalizados selecionando o menu de três pontos e clicando em Editar.
Apenas temas personalizados que você criou podem ser editados ou excluídos. Temas padrão e temas criados por outras pessoas não podem ser modificados.

Excluindo temas

Remova temas personalizados usando o menu de três pontos e selecionando Excluir.

Explorando temas da comunidade

Descubra temas criados pela comunidade do Replit na Página de Exploração de Temas.

Encontrando temas

  • Pesquise por nome para encontrar temas específicos como “Atom One Dark”
  • Filtre por autor para explorar temas de criadores específicos
  • Navegue por esquema de cores para encontrar temas claros ou escuros
  • Pesquise por cores específicas para combinar com suas preferências
Pré-visualize qualquer tema antes de instalá-lo para ver como ele ficará no Editor de Projetos.

Portando do VS Code

Importe seus temas favoritos do VS Code para o Replit mapeando as cores equivalentes durante o processo de criação do tema.

Publicando seu tema

Compartilhe seus temas personalizados com a comunidade do Replit seguindo estas etapas:
  1. Abra o Editor de Temas do seu tema personalizado
  2. Selecione o botão Publicar
  3. Preencha os campos de título e descrição
  4. Envie seu tema
Após a publicação, seu tema aparecerá na Página de Exploração de Temas, onde outros usuários poderão pré-visualizá-lo e instalá-lo.

Recursos relacionados