Mobiis Theme
Temas de cores para o VS Code baseados no Mobiis Design System (MDS): a mesma paleta, os mesmos tons e o mesmo cuidado com legibilidade das interfaces da Mobiis, agora no seu editor.
Temas incluídos
| Tema |
Tipo |
Indicado para |
| Mobiis Dark |
Escuro |
Uso diário, com fundo grafite levemente azulado e cores suaves |
| Mobiis Dark Blue |
Escuro |
Quem prefere o fundo azul-marinho do tema escuro do MDS |
| Mobiis Light |
Claro |
Ambientes bem iluminados, com fundo claro sem brilho excessivo |
| Fretefy |
Escuro |
Tema original da paleta Fretefy |
Pensado para reduzir a fadiga visual
Os três temas Mobiis seguem os mesmos princípios, para sessões longas de código:
- Sem extremos de contraste: nada de preto ou branco puro. O texto mantém contraste confortável, bem acima do mínimo WCAG AA (4,5:1).
- Cores suaves: a sintaxe usa tons pastel de baixa saturação, com poucos destaques competindo entre si.
- Azul da marca só onde importa: o
#408afa aparece no cursor, na seleção e na aba ativa, e não em grandes áreas.
- Interface discreta: linha atual, seleção, guias de indentação, réguas e scrollbar usam transparência baixa, e a separação entre áreas vem da diferença de tom, não de bordas pesadas.
- Estados legíveis: erro, aviso, sucesso e informação seguem as famílias semânticas do MDS, sem fundos chapados.
Instalação
- Abra o VS Code e vá em Extensões (
Ctrl+Shift+X / Cmd+Shift+X).
- Pesquise por Mobiis Theme e clique em Instalar.
- Abra a paleta de comandos (
Ctrl+Shift+P / Cmd+Shift+P), execute Preferences: Color Theme e escolha um dos temas Mobiis.
Para fixar o tema nas configurações:
{
"workbench.colorTheme": "Mobiis Dark"
}
Ajustes de fonte recomendados
Não fazem parte do tema, mas ajudam no conforto de leitura:
{
"editor.fontWeight": "400",
"editor.lineHeight": 1.6,
"editor.fontLigatures": true
}
Mobiis Design System
As cores destes temas vêm dos tokens do MDS. Para construir interfaces com o mesmo visual, consulte a documentação oficial em design.fretefy.com.br, que reúne:
- Fundamentos: cores, tipografia, espaçamento, elevação e formas.
- Componentes Angular: uso, propriedades e exemplos de cada componente.
- CSS/HTML: classes
mds-* e exemplos de marcação, para quem não usa Angular.
- Diretrizes de interface: estados, feedback, formulários, navegação e estilo de escrita.
Contribuindo
Encontrou um problema de contraste ou uma cor que poderia melhorar? Abra uma issue ou envie um pull request no repositório.
Desenvolvido com ❤️ pela equipe ♾️ Mobiis.
