Caule Themes Pack 1 - by caulecriativo.com - Instale via HACS

Caule Themes Pack 1 - by caulecriativo.com

hacs_badge
ha brasil
ha brasil discord
homeassistant_community
Github Stars
Github Follow

Criado por Ricardo Correia para a comunidade Home Assistant Brasil.

  • 10 cores modernas;
  • 4 categorias de estilos;
    • Black Glass
    • Black
    • Dark
    • Light
  • 40 temas no total;
  • Ícones animados para o card de previsão do tempo;
  • E de bônus um seletor de temas automático para sua interface.

Quero pedir apenas 3 coisas para quem se beneficiar com esses temas:

  1. Contribua com meu trabalho! Me pague um cafézinho
  2. Entre na comunidade HABR no Discord: habr.ml
  3. Siga meu estúdio de criação no instagram: caulecriativo.com

Faça bom aproveito dos temas :relaxed:










Ícones animados inclusos


Se você AINDA NÃO tem a pasta “themes”

Então você precisa configurar seu arquivo configuration.yaml, acrescentando o código que segue abaixo para que o seu Home Assistant busque os temas na pasta themes:

frontend:
  themes: !include_dir_merge_named themes

ATENÇÃO! É necessário reiniciar após essa configuração!

Instalação via HACS (Home Assistant Community Store)

(Se você não o HACS) Saiba como instalar

  • Vá até a loja HACS
  • Clique em "Frontend"
  • Clique no botão (+)
  • Procure por "Caule Themes Pack"
  • Clique em "Install"
  • Reinicie o seu Home Assistant

Instalação manual

Faça o download do caule-themes-pack-1.yaml clicando aqui e copie o arquivo para sua pasta themes

Se sua pasta themes ainda não existir, você deve cria-la dentro da pasta config

Download dos backgrounds e dos ícones (necessário apenas para instalação manual)

10 dos 40 temas possuem backgrounds e todos os temas usam ícones animados para o card de previsão do tempo. Esses arquivos precisam ser baixados e copiados para o seu servidor do Home Assistant.

  1. Baixe os backgrounds e ícones clicando aqui.
  2. Extraia o arquivo .zip
  3. Copie a pasta caule-themes-pack para dentro da pasta config/www/. O caminho final para a pasta dos arquivos deve ser config/www/caule-themes-pack-1/

ATENÇÃO! Se sua pasta www ainda não existir, crie ela dentro da pasta config.

Agora reinicie o seu Home Assistante e os temas estarão disponíveis para uso.



Criando um seletor de temas automático para a interface (opcional)

Vamos criar um seletor de temas para ser implementado na sua interface do usuário. É uma forma prática de alterar o tema instantaneamente em todos os dispositivos conectados ao seu Home Assistant. Veja como funciona no gif abaixo:

1ª Etapa - Criando o input_select

O input_select será usado para criar a lista de seleção com os temas que eu criei.

Insira esse código no seu arquivo configuration.yaml

Se você nunca usou input select, saiba mais clicando aqui.

input_select:

  themes:
    name: 'Temas'
    icon: mdi:format-paint
    options:
      - Caule Black Rose
      - Caule Black Purple
      - Caule Black Blue 
      - Caule Black Aqua
      - Caule Black Green
      - Caule Black Yellow
      - Caule Black Orange
      - Caule Black Coral
      - Caule Black Pink
      - Caule Black Gray
      - Caule Dark Rose
      - Caule Dark Purple
      - Caule Dark Blue 
      - Caule Dark Aqua
      - Caule Dark Green
      - Caule Dark Yellow
      - Caule Dark Orange
      - Caule Dark Coral
      - Caule Dark Pink
      - Caule Dark Gray
      - Caule Light Rose
      - Caule Light Purple
      - Caule Light Blue 
      - Caule Light Aqua
      - Caule Light Green
      - Caule Light Yellow
      - Caule Light Orange
      - Caule Light Coral
      - Caule Light Pink
      - Caule Light Gray
      - Caule Black Rose Glass
      - Caule Black Purple Glass
      - Caule Black Blue Glass 
      - Caule Black Aqua Glass
      - Caule Black Green Glass
      - Caule Black Yellow Glass
      - Caule Black Orange Glass
      - Caule Black Coral Glass
      - Caule Black Pink Glass
      - Caule Black Gray Glass      
      - default

Reinicie o seu Home Assistant para que o input_select seja criado.

Resultado:

  • input_select.themes

2ª Etapa - Automação do seletor de temas

Atenção! Essa automação está disponível em dois métodos. Escolha apenas um método.

Método 1) Automação nativa do Home Assistant com YAML

Copie o código abaixo e cole no seu arquivo automations.yaml

- alias: "set Themes - by caulecriativo.com"
  initial_state: true
  trigger:
    platform: state
    entity_id: input_select.themes
  action:
  - service: frontend.set_theme
    data_template:
      name: >
        {{ trigger.to_state.state }}

Método 2) Automação com Node-RED

ATENÇÃO! Se você nunca usou o Node-RED, saiba mais clicando aqui.

Vamos criar um flow no Node-RED para definir o tema automaticamente toda vez que você escolher um tema na sua interface. É bem simples! Basta fazer o download do arquivo .json ou copiar o código e colar na janela de importação do Node-RED.

Clique aqui para copiar ou fazer download do código dos fluxos do Node-RED

Após importar o flow para o seu Node-RED, clique em Deploy

3ª Etapa - Implementando o seletor na sua interface

Agora é só inserir o código do seletor na sua interface.

  • Se você usa a interface no Modo YAML, copie o código e insira no seu ui-lovelace.yaml
  • Se você usa a interface no modo automático, vá até o modo de edição da sua interface, escolha a opção “manual” lá no final, depois copie e cole o código abaixo.
  type: entities
  show_header_toggle: false
  entities:
    - entity: input_select.themes

4ª Etapa - Configurando o tema “Backend-selected”

Altere o tema no perfil do usuário para “Backend-selected”. Dessa forma todos os dispositivos conectados que estiverem com o tema “Backend-selected” terão seus temas alterados sincronizadamente com o seletor de temas que você acabou de criar.

Agora é só aproveitar!

Se tudo der certo, mande um print :relaxed:

Buy me a coffee

Ícones criados pela amCharts e modificados por mim.

9 Likes

Lindos temas parabéns

1 Like

Show!
To seguindo lá o instagram…
Eu consigo colocar um tema que já uso dentro desse seletor junto com os seus temas?

1 Like

Opa tudo bem? Muito legal deu tudo certinho. Uma pergunta dá para aproveitar esse Node e fazer com que o tema mude em determinada hora?

1 Like

Entra na nossa comunidade no discord e me procura lá. Posso te mandar um arquivo do node para fazer isso. Link do discord habr.ml

1 Like

Sim! É só acrescentar o nome dos temas q vc já tem no input_select.themes
Mas tenha atenção pq os nomes do input_select deve ser exatamente o mesmo nome dos temas.

1 Like

Um belo trabalho, parabéns @orickcorreia

1 Like

Grande trabalho, @orickcorreia . Muito boa esta coleção. parabéns!
Agora a minha pergunta, os fundos e os ícones da lateral ficam na cor desejada, já os ícones na visão geral não mudam. Será que falta fazer alguma coisa?
Obrigado.

Amigo, eu parei na etapa 3, não sei onde fica essa configuração no HA, pode me ajudar com mais detalhes? Obrigado

Show! Parabéns pelos temas!

image

Da esse erro ao importar o JSON no node-red =(