Valinor VSCode Theme

🇺🇸 Read in English

Valinor reúne 30 temas de cores (19 escuros e 11 claros, sendo 2 de alto contraste), cada um inspirado em um tema consolidado e batizado com um nome do universo de Tolkien, além de temas de ícones que combinam com eles.

🖼️ Galeria interativa: prévia ao vivo com qualquer combinação de tema, ícones de arquivo, ícones de interface e itálico (e o settings.json pronto), comparação lado a lado, filtros por tipo e família, busca e pares claro/escuro.

Todos os temas Valinor

Instalação

Abra o gerenciador de extensões (Ctrl+Shift+X / Cmd+Shift+X), pesquise por Valinor Theme e clique em Instalar. Ou, pela Quick Open (Ctrl+P / Cmd+P):

ext install DiegoBrocanelli.valinor-theme

Depois, Ctrl+K Ctrl+T (ou Cmd+K Cmd+T) abre a lista de temas de cores.

Temas

Tema	Tipo	Inspirado em
Arien	escuro	Kanagawa
Arwen	escuro	Rosé Pine
Azaghâl	escuro	Nord (variante)
Bombur	escuro	Gruvbox
Celeborn	escuro	Catppuccin Mocha
Celebrimbor	escuro	Hackerman
Círdan	escuro	Osaka Jade
Durin	escuro	Nord
Eärendil	escuro	Tokyo Night
Fangorn	escuro	Everforest
Gimli	escuro	Tokyo Night Storm
Legolas	escuro	Night Owl
Lúthien	escuro	Ethereal
Morgoth	escuro	Matte Black
Shelob	escuro	Vantablack
Smaug	escuro	Ristretto
Thranduil	escuro	Nord (Polar Night profundo)
Ungoliant	escuro	Miasma
Elbereth	claro	Catppuccin Latte
Fëanor	claro	Quiet Light
Galadriel	claro	Solarized Light
Gandalf	claro	Tokyo Night Light
Glorfindel	claro	Night Owl Light
Goldberry	claro	Flexoki Light
Bilbo	claro	Gruvbox Light
Lothlórien	claro	Everforest Light
Nienna	claro	Rosé Pine Dawn
Yavanna	claro	Kanagawa Lotus
Telperion	alto contraste escuro	VS Code High Contrast
Laurelin	alto contraste claro	VS Code High Contrast Light

Telperion e Laurelin, as Duas Árvores de Valinor, são temas de alto contraste: texto e tokens a pelo menos 7:1 (WCAG AAA) e contornos em foco, seleção e aba ativa. O VS Code os trata como temas High Contrast (hc-black / hc-light).

Prévias de cada tema

Escuros

Claros

Pares claro/escuro

Oito temas escuros têm um par claro da mesma família. Com a configuração abaixo, o VS Code troca de tema sozinho quando o sistema alterna entre modo claro e escuro:

"window.autoDetectColorScheme": true,
"workbench.preferredDarkColorTheme": "Valinor Arwen",
"workbench.preferredLightColorTheme": "Valinor Nienna"

Escuro	Claro	Família
Arien	Yavanna	Kanagawa
Arwen	Nienna	Rosé Pine
Bombur	Bilbo	Gruvbox
Celeborn	Elbereth	Catppuccin
Eärendil	Gandalf	Tokyo Night
Fangorn	Lothlórien	Everforest
Legolas	Glorfindel	Night Owl
Telperion	Laurelin	Alto contraste

Todos os temas passam por uma validação automática de contraste (WCAG): texto do editor e tokens de código ≥ 4,5:1, comentários e números de linha ≥ 3:1, ícones de arquivo recoloridos ≥ 3:1 sobre a sidebar, botões, badges e status bar ≥ 4,5:1, item selecionado ≥ 4,5:1. Nos temas de alto contraste, todo texto (inclusive comentários e tokens) ≥ 7:1 e números de linha ≥ 4,5:1.

Itálico

Por padrão, todos os temas usam itálico em comentários, doc blocks (incluindo tags como @param e @returns, tipos e nomes dentro deles) e em this/self. O itálico do Markdown (*texto*) é sempre mantido.

Para mudar, copie um dos trechos abaixo para o seu settings.json. Eles valem para todos os temas Valinor ("[Valinor*]"). A versão sempre atualizada está na galeria, e também sai de npm run italic -- none ou npm run italic -- more.

Sem itálico

{
  "editor.tokenColorCustomizations": {
    "[Valinor*]": {
      "textMateRules": [
        {
          "scope": [
            "comment",
            "punctuation.definition.comment",
            "comment.block.documentation",
            "comment.block.documentation storage",
            "comment.block.documentation keyword",
            "comment.block.documentation entity.name.type",
            "comment.block.documentation variable",
            "comment.block.documentation support",
            "comment.block.documentation punctuation",
            "storage.type.class.jsdoc",
            "entity.name.type.instance.jsdoc",
            "variable.other.jsdoc",
            "keyword.other.phpdoc",
            "keyword.other.documentation.javadoc",
            "variable.language.this",
            "variable.language.self",
            "variable.language.super",
            "keyword.control",
            "storage.modifier",
            "storage.type",
            "variable.parameter",
            "entity.other.attribute-name",
            "entity.other.inherited-class",
            "markup.quote",
            "keyword.expressions-and-types.swift",
            "keyword.other.this",
            "variable.language",
            "variable.language punctuation.definition.variable.php",
            "variable.other.readwrite.instance.ruby",
            "variable.parameter.function.language.special",
            "punctuation.definition.variable.php",
            "keyword.control.php",
            "variable.language.php",
            "unused.comment",
            "wildcard.comment",
            "entity.name.variable.parameter",
            "meta.at-rule.function variable",
            "meta.at-rule.mixin variable",
            "meta.function.arguments variable.other.php",
            "meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql",
            "punctuation.definition.keyword",
            "keyword.control.new",
            "keyword.operator.new",
            "text.html.basic constant.other.inline-data",
            "source.css.scss variable.interpolation",
            "text.xml string.unquoted.cdata",
            "text.xml string.unquoted.cdata punctuation.definition.string",
            "meta.var.expr storage.type",
            "keyword.control.flow",
            "keyword.control.return",
            "meta.directive.vue punctuation.separator.key-value.html",
            "meta.directive.vue entity.other.attribute-name.html",
            "tag.decorator.js entity.name.tag.js",
            "tag.decorator.js punctuation.definition.tag.js",
            "string.quoted.docstring.multi",
            "string.quoted.docstring.multi.python punctuation.definition.string.begin",
            "string.quoted.docstring.multi.python punctuation.definition.string.end",
            "string.quoted.docstring.multi.python constant.character.escape",
            "markup.changed",
            "meta.diff.header.git",
            "meta.diff.header.from-file",
            "meta.diff.header.to-file",
            "markup.deleted.diff",
            "markup.inserted.diff",
            "punctuation.accessor",
            "keyword",
            "storage",
            "meta.var.expr",
            "meta.class meta.method.declaration meta.var.expr storage.type.js",
            "storage.type.property.js",
            "storage.type.property.ts",
            "storage.type.property.tsx",
            "entity.name.function",
            "keyword.operator.relational",
            "meta.delimiter.period",
            "meta.selector",
            "entity.name.tag.doctype",
            "meta.tag.sgml.doctype",
            "variable.other.object.property",
            "keyword.operator.comparison",
            "keyword.control.flow.js",
            "keyword.control.flow.ts",
            "keyword.control.flow.tsx",
            "keyword.control.ruby",
            "keyword.control.module.ruby",
            "keyword.control.class.ruby",
            "keyword.control.def.ruby",
            "keyword.control.loop.js",
            "keyword.control.loop.ts",
            "keyword.control.import.js",
            "keyword.control.import.ts",
            "keyword.control.import.tsx",
            "keyword.control.from.js",
            "keyword.control.from.ts",
            "keyword.control.from.tsx",
            "keyword.operator.instanceof.js",
            "keyword.operator.expression.instanceof.ts",
            "keyword.operator.expression.instanceof.tsx",
            "italic",
            "quote",
            "source.elixir .punctuation.binary.elixir",
            "source.go keyword.package.go",
            "source.go keyword.import.go",
            "source.go keyword.function.go",
            "source.go keyword.type.go",
            "source.go keyword.struct.go",
            "source.go keyword.interface.go",
            "source.go keyword.const.go",
            "source.go keyword.var.go",
            "source.go keyword.map.go",
            "source.go keyword.channel.go",
            "source.go keyword.control.go",
            "meta.tag.sgml.doctype.html",
            "variable.other.object.js",
            "variable.language.this.js"
          ],
          "settings": {
            "fontStyle": ""
          }
        }
      ]
    }
  },
  "editor.semanticTokenColorCustomizations": {
    "[Valinor*]": {
      "rules": {
        "selfKeyword": {
          "italic": false
        }
      }
    }
  }
}

Mais itálico (keywords de controle, modificadores, parâmetros e atributos)

{
  "editor.tokenColorCustomizations": {
    "[Valinor*]": {
      "textMateRules": [
        {
          "scope": [
            "keyword.control",
            "storage.modifier",
            "storage.type",
            "variable.parameter",
            "entity.other.attribute-name",
            "entity.other.inherited-class",
            "source.cpp keyword.control.directive.conditional",
            "source.c keyword.control.directive.conditional",
            "keyword.control.flow.block-scalar.literal",
            "keyword.control.flow.python",
            "storage.type.function.arrow.js",
            "variable.parameter.function",
            "keyword.control.conditional.js",
            "keyword.control.conditional.ts",
            "keyword.control.switch.js",
            "keyword.control.switch.ts",
            "meta.class meta.method.declaration meta.var.expr storage.type.js",
            "storage.type.property.js",
            "storage.type.property.ts",
            "storage.type.property.tsx",
            "keyword.control.flow.js",
            "keyword.control.flow.ts",
            "keyword.control.flow.tsx",
            "keyword.control.ruby",
            "keyword.control.def.ruby",
            "keyword.control.loop.js",
            "keyword.control.loop.ts",
            "keyword.control.import.js",
            "keyword.control.import.ts",
            "keyword.control.import.tsx",
            "keyword.control.from.js",
            "keyword.control.from.ts",
            "keyword.control.from.tsx"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        }
      ]
    }
  }
}

Ícones

Ícones de arquivo

Ctrl+Shift+P / Cmd+Shift+P → Preferences: File Icon Theme:

Valinor Icons – <tema>: um conjunto por tema de cores (30 no total). São os ícones Lucide coloridos com a paleta do tema: pastas na cor de destaque, linguagens e formatos nos tons do tema (JavaScript em amarelo, TypeScript em azul, Rust em laranja…) e arquivos genéricos em tom neutro. Pastas conhecidas (src, test, docs, .github, node_modules, dist…) e arquivos como package.json, .env, Makefile, README e LICENSE têm ícone próprio. Escolha o que tem o mesmo nome do seu tema.
Valinor Icons Logos – <tema>: também um conjunto por tema (30 no total), com os mais de 550 ícones do Catppuccin (logos das linguagens e ferramentas e cerca de 190 pastas) recoloridos com a paleta do tema.
Valinor Icons Lucide: ícones de linha do Lucide, um por tipo de arquivo, com versões para tema claro e escuro.
Valinor Icons Symbols: ícones geométricos e limpos (Miguel Solorio).
Valinor Icons Mocha / Latte / Frappé / Macchiato: Catppuccin Icons.
Valinor Icons Material: Material Icon Theme, o conjunto mais completo (mais de 1.200 ícones).

Ícones de interface

Trocam os ícones do próprio VS Code (barra de atividades, explorer, abas, barra de status, depuração). Ctrl+Shift+P / Cmd+Shift+P → Preferences: Product Icon Theme:

Valinor Product Icons Lucide: ícones de linha do Lucide, combinando com os ícones de arquivo Lucide e por tema.
Valinor Product Icons Fluent: Fluent Design System (Microsoft).
Valinor Product Icons Carbon: Carbon Design System (IBM).
Valinor Product Icons Material: Material Design (Google).

Fontes

As fontes Zed Plex Mono (recomendada para o editor) e Zed Plex Sans estão no repositório. Elas não vêm na extensão: baixe e instale no sistema.

"editor.fontFamily": "Zed Plex Mono",
"terminal.integrated.fontFamily": "Zed Plex Mono"

Desenvolvimento

Pré-requisitos

Node.js 22 (veja .nvmrc) ou Docker + Make
Git com suporte a submodules
Opcional, para atualizar os prints: Xvfb, xdotool, ImageMagick e VS Code, em qualquer distro ou ambiente (Fedora: sudo dnf install xorg-x11-server-Xvfb xdotool ImageMagick; Arch: sudo pacman -S xorg-server-xvfb xdotool imagemagick)

Primeiros passos

git clone --recurse-submodules git@github.com:Diego-Brocanelli/valinor-theme.git
cd valinor-theme
npm ci
npm run build

Se clonou sem --recurse-submodules, rode make init. Com Docker: make build && make sh e, dentro do container, npm ci && npm run build.

Para testar, abra o projeto no VS Code e pressione F5: uma nova janela abre com a extensão carregada.

Como os temas são feitos

Cada tema é um arquivo em src/themes/<id>.yml com uma paleta semântica:

name: Valinor Arien
type: dark
upstream: Kanagawa
palette:
  bg: "#181616"       # editor
  bgAlt: "#252526"    # sidebar, abas, painéis
  fg: "#c5c9c5"       # texto
  accent: "#f4a620"   # destaque (status bar, botões, seleção)
  red: "#e46876"      # + orange, yellow, green, cyan, blue, magenta
syntax:               # cores da sintaxe (gera tokenColors e semanticTokenColors)
  comment: "#727169"
  keyword: "#f4a620"
  # ...
colors: {}            # opcional: sobrescreve chaves específicas
tokenColors: []       # opcional: regras TextMate extras

O src/lib/template.js deriva as mais de 300 cores da interface a partir da paleta: listas, abas, terminal (16 cores ANSI), Git, diff, diagnósticos, colchetes, minimap etc. Para mudar algo em todos os temas, edite o template. Para mudar um tema só, edite o .yml dele.

Comando	O que faz
`npm run build`	Valida e gera `themes/`, os ícones por tema e Lucide e atualiza o `package.json`
`npm run vendor:lucide`	Copia de `lucide-static` os SVGs listados em `icons/lucide/map.json`
`npm run vendor:product-icons`	Baixa do Open VSX os temas de ícones de produto Carbon e Material para `icons/carbon` e `icons/material-product`
`npm run validate`	Mostra erros e avisos de contraste, cores inválidas e chaves desconhecidas
`npm run watch`	Refaz o build a cada alteração em `src/`
`npm run site`	Gera a galeria em `site/` (publicada no GitHub Pages pelo workflow `pages.yml`)
`npm run screenshots`	Captura prints reais do VS Code de cada tema em `assets/previews/` (Xvfb, sem ocupar a tela)
`npm run package`	Gera `bin/valinor-theme.vsix`

Atualizar ícones

make update-icons

Os SVGs do Lucide ficam em icons/lucide/src (para trocar um ícone, edite icons/lucide/map.json e rode npm run vendor:lucide). O tema de produto Lucide mapeia codicons para ícones do Lucide em icons/lucide/product-map.json. O Material Icon Theme vem do pacote npm material-icon-theme (atualize a versão no package.json); Carbon e Material Product Icons têm a versão fixada em src/vendor-product-icons.js. O Catppuccin é atualizado manualmente, copiando os theme.json gerados pela extensão.

Publicação

Crie uma tag com a mesma versão do package.json (por exemplo, v2.26.0). O workflow valida, empacota, cria a release no GitHub e publica o mesmo .vsix no Marketplace.

Créditos

Temas

Better Solarized
Catppuccin
Everforest
Flexoki
Gruvbox
Kanagawa
Miasma
Night Owl (MIT): tokens adaptados no Glorfindel e no Legolas
Nord (MIT): tokens adaptados no Durin
Omarchy: Ethereal, Hackerman, Matte Black, Osaka Jade, Ristretto, Vantablack
Quiet Light for VSC
Rosé Pine
Solarized
Tokyo Night (MIT): tokens adaptados no Gimli

Ícones

Lucide (ISC): Lucide Contributors
Symbols (MIT): Miguel Solorio
Fluent Icons (MIT): Miguel Solorio, com os Fluent UI System Icons da Microsoft
Catppuccin Icons (MIT): Catppuccin
Material Icon Theme (MIT): Material Extensions
Material Product Icons (MIT): Philipp Kief, com os Material Design Icons (Apache-2.0) do Google
Carbon Icons (MIT): Anthony Fu, com os ícones do Carbon Design System (Apache-2.0) da IBM

Os ícones de pasta raiz (estrela de oito pontas) são arte própria do projeto.

O texto completo das licenças de terceiros está em THIRD_PARTY_NOTICES.md.

Licença

Este projeto está licenciado sob a licença MIT.

Autor

Diego Brocanelli, diegod2@msn.com