Adjusting text color on different themes

Navigation
2

I work on maintaining a system that could only be displayed with the white background, and recently we adopted the possibility of the user choosing the dark background.

Some text fields are saved with formatting in the database, so if the color of the formatted text is black the view is compromised.

Is there any way I can improve the display of these black-formatted text on the dark background?

I'm looking for some javascript or asp.net-compatible library to do the color matching.

Edit

Here is an example of how data is saved in the database: 

<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>
    
asked by anonymous 04.10.2018 / 22:57

2 answers

1

You can change the font colors / fonts by css.

In your code js, when the user calls the function that changes the background color, the commands will be executed to change the theme, in that same function put css commands to do the color change of the letters.

Or if you do not want to do this, you can change the default font color to gray, which would match black and white, highlighting both!

Hug, any doubts I am at your disposal!

    
05.10.2018 / 00:47
0

EDITED ANSWER

Well I believe that most of the visual things you're facing can be solved with CSS and some treatments. For example when the user switches to the Dark BackGround call some class that changes the formatting of the data inputs, within that class (in the CSS) all elements must have 

!important

This command will ignore old rules and run over them for example my code has Style inline command in HTML and my CSS has! important look at the result: 

    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>

link

link

link

    
05.10.2018 / 00:50
Mongodb Agregation + Lookup How do I retrieve and calculate 2 numbers via POST on the Controller in Laravel?