Caule Themes Pack 1 - by caulecriativo.com

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 :slight_smile:










Í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 :slight_smile:

Buy me a coffee

Ícones criados pela amCharts e modificados por mim.

4 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