O que são temas?

Um tema é um tipo especial de extensão que muda a aparência do navegador. Os temas são empacotados como extensões normais, mas não contêm código JavaScript ou HTML.

Os temas são enviados para a Chrome Web Store usando o mesmo procedimento de uma extensão. Durante o upload, você vai precisar selecionar uma categoria. Você vai encontrar uma lista de categorias de temas na documentação da Chrome Web Store em Práticas recomendadas.

Você pode encontrar e testar vários temas na Chrome Web Store.

Manifesto

Confira um exemplo de arquivo manifest.json para um tema:

{
  "manifest_version": 3,
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.png",
      "theme_toolbar" : "images/theme_toolbar_camo.png",
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
      "theme_ntp_attribution" : "images/attribution.png"
    },
    "colors" : {
      "frame" : [71, 105, 91],
      "toolbar" : [207, 221, 192],
      "ntp_text" : [20, 40, 0],
      "ntp_link" : [36, 70, 0],
      "ntp_section" : [207, 221, 192],
      "button_background" : [255, 255, 255]
    },
    "tints" : {
      "buttons" : [0.33, 0.5, 0.47]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom"
    }
  }
}

cores

As cores estão no formato RGB. Para encontrar as strings que podem ser usadas no campo "colors", consulte kOverwritableColorTable.

imagens

Os recursos de imagem usam caminhos relativos à raiz da extensão. É possível substituir qualquer uma das imagens especificadas pelas strings em kPersistingImages. Todas as imagens precisam ser armazenadas no formato PNG, caso contrário, elas não serão renderizadas corretamente.

properties

Esse campo permite especificar propriedades como alinhamento de plano de fundo, repetição de plano de fundo e um logotipo alternativo. Para conferir as propriedades e os valores que elas podem ter, consulte kDisplayProperties.

tons

É possível especificar cores para serem aplicadas a partes da interface, como botões, moldura e guia de plano de fundo. O Google Chrome oferece suporte a matizes, não imagens, porque as imagens não funcionam em todas as plataformas e são frágeis no caso de adição de novos botões. Para encontrar as strings que podem ser usadas no campo "tints", consulte kTintTable.

As cores estão no formato tonalidade-saturação-brilho (HSL, na sigla em inglês), usando números de ponto flutuante no intervalo de 0 a 1,0:

• Hue é um valor absoluto, em que 0 e 1 são vermelhos.
• A saturação é relativa à imagem fornecida no momento. 0, 5 é sem mudança, 0 é totalmente desaturado e 1 é totalmente saturado.
• A luminosidade também é relativa, sendo 0, 5 sem alteração, 0 como todos os pixels em preto e 1 como todos os pixels em branco.

Como alternativa, use -1.0 para qualquer um dos valores HSL para especificar sem alteração.