O guia rápido “Dark mode / Modo escuro – Versão Beta” está subdividido nas seções:

• O que é o Dark mode / modo escuro - Versão beta?
• Quais são os benefícios do modo escuro?
• Como ativar o modo escuro?
• Como voltar para o modo claro?
• Como o sistema guarda a preferência do usuário?
• Quais componentes possuem uma versão adaptada para o modo escuro?
• O que significa o modo escuro estar em versão beta?
• O que fazer ao identificar uma inconsistência visual?
• Considerações importantes

O que é o Dark mode / modo escuro - Versão beta?

O modo escuro, também conhecido como dark mode, é uma opção de exibição que adapta a interface do sistema para tons mais escuros. Ao ativá-lo, os fundos, textos, botões, campos e outros componentes passam a utilizar cores ajustadas para proporcionar mais conforto visual, especialmente em ambientes com pouca iluminação ou durante períodos prolongados de uso.

Essa funcionalidade está disponível em versão Beta. Isso significa que ela já pode ser utilizada normalmente, mas alguns componentes ainda podem apresentar diferenças de cor, contraste ou aparência em determinadas telas. Essas variações são apenas visuais e não alteram o funcionamento das rotinas, dos cadastros ou das informações do sistema.

Na prática, o usuário pode escolher entre:

• Modo claro: mantém a aparência padrão do sistema, com predominância de fundos claros.

• Modo escuro: utiliza fundos escuros e cores adaptadas para facilitar a leitura e reduzir a luminosidade da interface.

Caso alguma tela apresente uma aparência que dificulte a visualização, o usuário pode retornar ao modo claro a qualquer momento.

Veja abaixo uma imagem da tela inicial do sistema no modo escuro:

Quais são os benefícios do modo escuro?

O modo escuro oferece uma alternativa de visualização para adequar o sistema às preferências e ao ambiente de trabalho de cada usuário.

Entre os principais benefícios estão:

• Mais conforto durante o uso prolongado: reduz a predominância de áreas brancas e muito claras na tela.

• Melhor adaptação a ambientes com pouca iluminação: diminui o contraste entre a tela e o ambiente ao redor.

• Escolha individual: cada usuário define o modo de exibição mais adequado para sua rotina.

• Alternância rápida: a troca entre os modos claro e escuro é feita diretamente no menu do usuário, sem necessidade de acessar uma tela de configuração.

A percepção de conforto varia de uma pessoa para outra. Por isso, o usuário pode experimentar o modo escuro e retornar ao modo claro a qualquer momento.

Veja abaixo uma imagem da tela "Produtos" no modo escuro:

Como ativar o modo escuro?

Para ativar o modo escuro, siga os passos abaixo:

• Passo 1) Na parte superior do sistema, clique no ícone do usuário. O sistema abre o menu com as informações da conta e as ações disponíveis.

• Passo 2) Localize a opção “Exibição: modo claro”. Essa opção aparece logo abaixo de “Indique e ganhe” e é identificada pelo ícone de sol.

• Passo 3) Clique em “Exibição: modo claro”.

A aparência do sistema é alterada imediatamente para o modo escuro. Não é necessário salvar a alteração ou atualizar a página.

Quando o modo escuro está ativo, o item do menu passa a apresentar:

• O ícone de lua.
• O texto “Exibição: modo escuro”.
• A identificação “Beta”.

Importante: a opção exibida no menu informa o modo que está ativo naquele momento. Portanto, quando o sistema está claro, aparece “Exibição: modo claro”. Quando está escuro, aparece “Exibição: modo escuro”.

Veja abaixo as imagens comparando o menu do usuário no modo claro e no modo escuro:

Como voltar para o modo claro?

Para desativar o modo escuro, siga os passos abaixo:

• Clique novamente no ícone do usuário, localizado na parte superior do sistema.

• Clique na opção “Exibição: modo escuro”.

O sistema retorna imediatamente para o modo claro.

A identificação “Beta” deixa de ser apresentada, e o item do menu volta a exibir o ícone de sol e o texto “Exibição: modo claro”.

Não há limite de alterações. O usuário pode alternar entre os modos sempre que considerar necessário.

Veja uma imagem da opção "Exibição: modo escuro":

Como o sistema guarda a preferência do usuário?

Ao escolher o modo claro ou escuro, o sistema guarda automaticamente a preferência daquele usuário no navegador utilizado.

Com isso, nos próximos acessos realizados pelo mesmo usuário e no mesmo navegador, o sistema reaplica o modo de exibição escolhido anteriormente.

Não é necessário acessar uma configuração, clicar em “Salvar” ou repetir a escolha a cada entrada no sistema.

Quando não existe uma preferência armazenada, o sistema utiliza o modo claro, que permanece como o padrão inicial.

Atenção: como a preferência fica armazenada no navegador, ela não é compartilhada automaticamente com outros dispositivos ou navegadores.

Por exemplo:

• Se o usuário ativa o modo escuro no Google Chrome de um computador, essa escolha não é aplicada automaticamente no Microsoft Edge.
• Ao acessar o sistema em outro computador, o modo claro pode ser apresentado até que o usuário selecione novamente o modo escuro.
• Se os dados de navegação do site forem apagados, a preferência armazenada também é removida.
• Cada usuário possui sua própria preferência, mesmo quando mais de uma pessoa utiliza o sistema no mesmo equipamento.

Veja abaixo uma imagem da tela de contas a receber no modo escuro:

Quais componentes possuem uma versão adaptada para o modo escuro?

Alguns componentes receberam ajustes específicos para melhorar a visualização no modo escuro.

Entre os principais componentes adaptados estão:

Cabeçalho do sistema

A área superior do sistema utiliza cores mais escuras nos fundos e mantém os botões, campos e ícones com contraste adequado.

O logotipo do sistema e o logotipo do cliente mantêm suas cores originais.

Veja abaixo uma imagem do cabeçalho do sistema no modo escuro:

Menu lateral

O menu lateral acompanha o modo de exibição selecionado, ajustando o fundo, os textos, os ícones e os destaques das opções.

Veja abaixo uma imagem do menu lateral do sistema no modo escuro:

Menu do usuário

O menu do usuário apresenta uma versão escura para todas as informações e ações disponíveis, incluindo a opção utilizada para alternar o modo de exibição.

Veja abaixo uma imagem do menu do usuário do sistema no modo escuro:

Menu de suporte

O menu de suporte também possui uma apresentação adaptada, mantendo visíveis as informações dos responsáveis pelo atendimento, os canais de contato e as opções de ajuda.

Veja abaixo uma comparação do menu de suporte nos modos claro e escuro:

Botões

Os principais tipos de botões utilizados no sistema apresentam cores próprias para o modo escuro. Isso inclui:

• Botões principais
• Botões secundários
• Botões terciários
• Botões sem preenchimento
• Botões de ações relacionadas a tickets
• Botões para limpar pesquisas
• Botões de exclusão

Os estados de interação também são adaptados, como botão selecionado, botão com o cursor posicionado sobre ele e botão desabilitado.

Veja abaixo exemplos dos botões nos modos claro e escuro:

Campos de texto e campos de seleção

Os campos utilizados para digitação e seleção de informações acompanham o modo escuro, incluindo:

• Campos de texto
• Campos numéricos
• Campos de seleção
• Listas suspensas
• Campos obrigatórios
• Campos desabilitados
• Campos com mensagens de validação
• Campos em foco

Veja abaixo exemplos dos botões nos modos claro e escuro:

Calendário e seleção de datas

O calendário utilizado nos campos de data possui uma versão escura para a seleção de dias, meses e anos.

Os destaques de data atual, data selecionada e intervalo escolhido permanecem visíveis.

Veja abaixo um exemplo do calendário no modo escuro:

Pesquisa avançada

O painel lateral da pesquisa avançada utiliza um fundo escuro e mantém os campos, títulos, filtros aplicados e botões com contraste adequado.

Veja abaixo exemplos da pesquisa avançada nos modos claro e escuro:

Tabelas e navegação

Os elementos utilizados para consultar e navegar pelas tabelas também acompanham o modo escuro, como:

• Cabeçalhos
• Linhas e divisões
• Botões de navegação
• Paginação
• Campos de pesquisa
• Seletores de quantidade de registros
• Ações disponíveis em cada registro

A aparência exata pode variar de acordo com a tela e com os componentes utilizados nela.

Veja abaixo exemplos de tabelas e navegação nos modos claro e escuro:

Quais elementos mantêm suas cores originais?

Alguns elementos não passam pela conversão de cores, pois suas cores possuem significado visual ou fazem parte da identidade da empresa.

Entre eles estão:

• Logotipos: o logotipo do Nomus e o logotipo cadastrado pelo cliente mantêm sua aparência original.

• Fotos de perfil: as imagens dos usuários não são alteradas.

• Imagens e arquivos visuais: fotografias, ilustrações, vídeos, documentos incorporados e outros conteúdos visuais mantêm suas cores.

• Ícones coloridos com significado de negócio: determinados ícones utilizam cores para representar situações, alertas ou estados específicos. Essas cores são preservadas para evitar interpretações incorretas.

• Etiquetas e marcadores do CRM: componentes que utilizam cores para representar datas, situações ou classificações permanecem com as cores definidas no sistema.

Por esse motivo, alguns elementos podem apresentar mais destaque quando estão sobre um fundo escuro. Esse comportamento é esperado e ajuda a preservar a identificação visual das informações.

Veja uma imagem da tela de ordens no modo escuro:

O que significa o modo escuro estar em versão beta?

A identificação “Beta” indica que o modo escuro está disponível para utilização, mas continua em processo de revisão e aprimoramento visual.

Como o Nomus possui diversas telas e componentes desenvolvidos em diferentes momentos, alguns elementos podem apresentar uma aparência diferente do padrão esperado.

Durante o uso, podem ocorrer situações como:

• Elementos azuis apresentados em tons próximos ao laranja
• Botões ou detalhes com cores diferentes das utilizadas no modo claro
• Áreas mais claras ou mais escuras do que os componentes ao redor
• Componentes antigos que ainda não possuem uma adaptação visual completa
• Diferenças de aparência entre telas que utilizam estruturas distintas

Essas diferenças são visuais e não alteram o funcionamento das rotinas.

O sistema busca manter o contraste necessário para que os textos e informações continuem legíveis. Mesmo assim, quando uma tela não estiver confortável para uso, o usuário pode retornar imediatamente ao modo claro.

A versão beta permite que a funcionalidade seja utilizada enquanto os diferentes componentes do sistema continuam sendo revisados e padronizados.

O que fazer ao identificar uma inconsistência visual?

Ao encontrar um elemento difícil de visualizar ou com uma cor inadequada, siga estas orientações:

• Verifique se o caso ocorre somente no modo escuro: Alterne temporariamente para o modo claro e confira o mesmo componente.

• Atualize a página: Em alguns casos, a atualização permite que todos os estilos do modo escolhido sejam reaplicados corretamente.

• Registre a tela em que o problema ocorreu: Anote o nome da tela e, quando possível, faça uma captura da área com a inconsistência.

• Informe o navegador utilizado: Essa informação ajuda a equipe de atendimento a reproduzir o comportamento.

• Entre em contato com o suporte da Nomus: Envie a imagem, o nome da tela e uma breve descrição do que ficou difícil de visualizar.

Enquanto o caso é analisada, o usuário pode continuar utilizando a mesma funcionalidade no modo claro.

Considerações importantes

• O modo escuro é uma preferência individual e não precisa ser habilitado por um administrador.

• A alteração não interfere nos demais usuários conectados ao sistema.

• O modo claro continua sendo utilizado quando não existe uma preferência salva.

• A escolha é aplicada automaticamente nos próximos acessos realizados pelo mesmo usuário no mesmo navegador.

• Por estar em versão beta, algumas telas podem apresentar diferenças de cores ou componentes ainda não totalmente adaptados.

• A alternância entre os modos pode ser feita a qualquer momento pelo menu do usuário.

#VamosEmFrente