2

Trabalho na manutenção de um sistema que só podia ser exibido com o fundo branco, e recentemente adotamos a possibilidade de o usuário escolher o fundo escuro.

Alguns campos de texto são guardados com formatação no banco de dados, sendo assim caso a cor do texto formatado seja preto a exibição fica comprometida.

Há alguma forma de melhorar a exibição desses textos formatados com cor preta no fundo escuro?

Procuro alguma biblioteca javascript ou compatível com asp.net para fazer a adequação das cores.

Edit

Segue um exemplo de como os dados são salvos no banco:

<p class="CorpodoTexto">&nbsp;</p>
	<p class="CorpodoTexto">Todo e qualquer retrabalho &eacute; desnecess&aacute;rio e causa perda
	de tempo, v&ecirc;-se logo ao analisar a palavra. Com foco em evitar o retrabalho e
	perda de tempo, foi criada a API . Tendo em sua primeira vers&atilde;o a
	finalidade de disponibilizar a lista de produtos cadastrada em nosso ERP, bem
	como, a possibilidade de inserir atrav&eacute;s de servi&ccedil;o, pedidos no j&aacute; mencionad<span style="color: #000000;">o
	ERP.</span></p>
	<p class="CorpodoTexto"><span style="color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Este
	documento especifica alguns dos principais requisitos da API .
	Sua cria&ccedil;&atilde;o se deu para auxiliar desenvolvedores, fornecendo as informa&ccedil;&otilde;es
	necess&aacute;rias para a implementa&ccedil;&atilde;o de uma integra&ccedil;&atilde;o coerente e pr&aacute;tica.</span></p>
	<p class="CorpodoTexto"><span style="color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As
	demais se&ccedil;&otilde;es apresentam as especifica&ccedil;&otilde;es da API </span>e est&atilde;o organizadas da
	seguinte forma:</p>
	<p class="CorpodoTexto" style="margin-left: 36pt; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol;">&middot;<span style="font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 7pt; line-height: normal; font-family: 'Times New Roman';">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	</span></span><!--[endif]--><strong>Se&ccedil;&atilde;o 2 &ndash;
	Classes para a comunica&ccedil;&atilde;o:</strong> Descreve o formato das classes de comunica&ccedil;&atilde;o
	bem como as tipagens e obrigatoriedades de seus atributos.</p>
	<strong><span style="font-size: 11pt; line-height: 107%; font-family: Calibri, sans-serif;">Se&ccedil;&atilde;o
	3 &ndash; Servi&ccedil;os dispon&iacute;veis:</span></strong><span style="font-size: 11pt; line-height: 107%; font-family: Calibri, sans-serif;"> Descreve
	os servi&ccedil;os dispon&iacute;veis na vers&atilde;o corrente da API  bem como um
	exemplo passo&nbsp;</span><span style="font-size: 11pt; font-family: 'Times New Roman';"></span>

4
  • Cores, tamanhos de fonte, entre outros, se trata com CSS Commented 4/10/2018 às 21:24
  • Poderia colocar na pergunta alguns exemplos da formatação que vem do banco para uma melhor análise.
    – Sam
    Commented 4/10/2018 às 23:23
  • @sam inseri um exemplo que peguei direto do banco
    – Pilati
    Commented 5/10/2018 às 11:57
  • @Pilati acabei de editar minha resposta vale a pena tu dar uma executada e analisada no meu código e tentar adaptar para o seu.
    – Mirusky
    Commented 5/10/2018 às 17:45

2 Respostas 2

1

Você pode fazer a mudança das cores/fontes das letras por css.

No seu código js, quando o usuário chamar a função que troca a cor do fundo, serão executados os comandos para a mudança do tema, nessa mesma função coloque comandos css para fazer a troca da cor das letras.

Ou caso não queira fazer isso, pode mudar a cor padrão da fonte para um cinza, que combinaria com o preto e o branco, dando destaque em ambos!

Abraço, qualquer duvida estou a disposição!

2
  • Colocar uma cor intermediária não seria uma opção, posso colocar um cinza, mas e se o texto for cinza? apenas altero a cor do problema
    – Pilati
    Commented 5/10/2018 às 12:00
  • Ah sim, entendi! Você está utilizando o bootstrap ou algo para te auxiliar com o design da pagina? pode fazer a alteração com código in-line por JS... Seria interessante ter algum código que coloque automaticamente uma cor que de contraste com o fundo. De uma procurada no google, provavelmente já fizeram algo parecido!
    – LuisHF
    Commented 5/10/2018 às 18:37
0

RESPOSTA EDITADA

Bem acredito que a maioria das coisas visuais que você esteja enfrentando possam ser resolvidas com CSS e alguns tratamentos. Por exemplo quando o usuário mudar para o BackGround escuro chamar alguma class que mudasse a formatação dos inputs de dados, dentro dessa class (no CSS) todos elementos devem ter o

!important

pois esse comando vai ignorar regras antigas e executar por cima delas por exemplo meu código tem comando de Style inline no HTML e meu CSS tem o !important olhe o resultado:

    function changeclass() {

    var NAME = document.getElementById("change")

    NAME.classList.toggle('bgEscuro');

    }
    .bgEscuro {
        background-color: black !important;
        color: grey !important;
    }
    <html>
    <head>

    </head>
    <body>

    <h1 id="change" style="background-color: white; color: black">Hello World!</h1>

    <button type="button" onClick="changeclass()">Click Me!</button>


    </body>
    </html>

https://docs.microsoft.com/en-us/aspnet/web-forms/videos/how-do-i/how-do-i-customize-my-site-with-profiles-and-themes

https://www.w3schools.com/css/css_background.asp

https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css

5
  • Não consigo alterar por css porque as cores estão como estilo inline, que tem maior prioridade do que definidos em classes CSS
    – Pilati
    Commented 5/10/2018 às 11:58
  • e não há uma função javascript que troca a cor, a folha de estilo inteira é alterada para a que contém o tema correspondente
    – Pilati
    Commented 5/10/2018 às 11:59
  • Bem eu acredito que você possa colocar assim no CSS então .bgEscuro { background-color: black !important; color: grey !important; } Colocando o !important ele ignora todo e qualquer outro código mesmo que inline e executa com prioridade o codigo com !important
    – Mirusky
    Commented 5/10/2018 às 16:15
  • Vou editar minha resposta colocando style inline e o css com !important para você ver
    – Mirusky
    Commented 5/10/2018 às 16:16
  • @Pilati resposta editada pode conferir agora
    – Mirusky
    Commented 5/10/2018 às 17:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .