Voltar para os projetos

Tema

Polar Dark

As cores deste site, dentro do editor. Um tema escuro para Zed e VS Code cuja paleta de sintaxe saiu de um design system em uso — cada cor tem origem, nenhuma foi escolhida isolada.

  • 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

Onze cores, cada uma com um motivo

Três delas são os acentos dos produtos que estão no ar. Ler código neste tema é ler as mesmas cores do resto do portfólio.

  • Violeta

    #C084FC

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

    acento da marca

  • Violeta claro

    #D8B4FE

    tipos nativos, enums, namespaces, seletores CSS

    acento da marca, um passo acima

  • Azul

    #60A5FA

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

    acento da Bússola

  • Teal

    #2DD4BF

    strings e URIs

    acento do Organizadin

  • Âmbar

    #E8B368

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

    acento do Trix

  • Branco

    #EDEAF5

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

    ink 100

  • Cinza claro

    #C7C2D6

    texto do editor, propriedades de objeto

    ink 200

  • Cinza

    #837C98

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

    ink 400

  • Violeta profundo

    #6D28D9

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

    acento da marca, passo mais fundo

  • 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

O que não é óbvio

  1. 01

    #08070C em vez de preto puro

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

  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 — não precisa 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.