Voltar para os projetos

Tema

Polar Dark

Tema escuro que fiz para usar todos os dias no Zed e depois levei ao VS Code. A paleta parte da minha identidade visual e foi ajustada para deixar o código confortável de ler por horas.

  • v1.0.0
  • MIT
  • 150 chaves · 50 captures
InstalarVer no GitHub
catalog/describe.tsts
import { useMemo } from "react";import type { Star } from "./catalog"; // a estrela polar não se move — é esse o pontoexport function describe(star: Star) {  const visible = useMemo(() => star.magnitude < 6.5, [star]);   if (!visible) {    return { label: "invisível a olho nu", tone: "muted" };  }   return { label: star.name, tone: "accent" };}

Pintado com os valores do próprio tema. A linha destacada é o véu da linha ativa.

Paleta

Uma paleta para passar o dia no editor

O violeta é o ponto de partida. Azul, teal e âmbar criam contraste suficiente para distinguir o código sem transformar a tela numa coleção de cores soltas.

  • Violeta

    #C084FC

    palavras-chave, tags JSX e HTML, código inline em markdown

    violeta principal da identidade visual

  • Violeta claro

    #D8B4FE

    tipos nativos, enums, namespaces, seletores CSS

    variação clara do violeta principal

  • Azul

    #60A5FA

    tipos, funções, métodos, texto de link

    contraste frio para símbolos e navegação

  • Teal

    #2DD4BF

    strings e URIs

    contraste calmo para conteúdo textual

  • Âmbar

    #E8B368

    números, booleanos, constantes, atributos JSX e HTML

    calor para valores e atributos

  • Branco

    #EDEAF5

    variáveis, parâmetros (itálico), títulos de markdown

    texto principal

  • Cinza claro

    #C7C2D6

    texto do editor, propriedades de objeto

    texto de leitura

  • Cinza

    #837C98

    comentários (itálico), pontuação, inlay hints

    informação secundária

  • Violeta profundo

    #6D28D9

    véu da linha ativa, foco, texto fantasma da IA

    variação profunda do violeta principal

  • Lima

    #BEF264

    linhas adicionadas no diff, arquivos criados

  • Rosa

    #FB7185

    linhas removidas no diff, erros

Superfícies

  • #08070Cfundo do editor e do terminal
  • #0E0D14painéis, abas, barra de título e de status
  • #13111Bmenus, popovers, autocomplete
  • #1F1C2Bbordas
  • #322C46números de linha, guias de indentação

Decisões

Escolhas para o uso diário

  1. 01

    #08070C em vez de preto puro

    Preto absoluto borra em painel OLED. A escada de elevação corre para dentro: o editor é a superfície mais funda e a moldura fica por cima dele. A maioria dos temas faz o contrário.

  2. 02

    Um violeta que nenhum token usa

    #6D28D9 é exclusivo do véu da linha ativa, do foco e do texto fantasma da IA. Como nenhuma cor de sintaxe o usa, sugestão de modelo nunca se confunde com código que já está escrito.

  3. 03

    Tipo e função dividem o mesmo azul

    Escolha consciente, não descuido: na prática a distinção entre os dois vem da posição, não da cor. Quem quiser separar tem #88BCFB livre na rampa ANSI do terminal.

Instalar

Dois editores, dois comandos

Zed

O Zed lê arquivos de tema na hora, sem precisar reiniciar.

Zedsh
mkdir -p ~/.config/zed/themescurl -o ~/.config/zed/themes/polar-dark.json \  https://raw.githubusercontent.com/viniengelage/polaris-theme/main/themes/polar-dark.json

Depois, cmd K cmd T e escolha Polar Dark.

VS Code

Pela linha de comando, ou buscando por Polar Dark na aba de extensões.

VS Codesh
code --install-extension viniengelage.polar-dark

Também funciona no Cursor e em qualquer fork que leia o Marketplace.

Código, changelog e licença no repositório. Achou uma cor errada em alguma linguagem? Abre uma issue.