Color adjustment of text on different themes

Question

Color adjustment of text on different themes

Asked 7 years ago

Viewed 74 times

2

Work on maintaining a system that could only be displayed with the white background, and we recently adopted the possibility for the user to choose the dark background.

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

Is there any way to improve the display of these black-colored formatted texts on dark background?

I’m looking for a javascript or Asp.net-compatible library to match the colors.

Edit

Here is an example of how data is saved to 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>

Colors, font sizes, among others, deals with CSS

– Jorge.M

2018/10/04 at 21:24
You could ask the question some examples of formatting that comes from the database for a better analysis.

– Sam

2018/10/04 at 23:23
@Sam inserted an example I took straight from the bank

– Pilati

2018/10/05 at 11:57
@Pilati just edited my answer worth you give a run and analyzed in my code and try to adapt to your.

– Gunblades

2018/10/05 at 17:45

2 answers

Browser other questions tagged javascript asp.net

You are not signed in. Login or sign up in order to post.

by LuisHF • **348** points · Answer 1 · 2018-10-04T22:47:52+00:00

You can change the colors/fonts of the letters by css.

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

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

Hug, any doubt I’m available!

by Gunblades • **719** points · Answer 2 · 2018-10-04T22:50:36+00:00

EDITED ANSWER

I do 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 to call some class that changes the formatting of data inputs, within that class (in CSS) all elements must have the

!important

because this command will ignore old rules and run over them for example my code has command of Style inline in HTML and my CSS has the ! 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>

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