javascript - 调整不同主题的文本颜色

Question

我致力于维护一个只能以白色背景显示的系统，最近我们采用了用户选择深色背景的可能性。

某些文本字段以格式保存在数据库中，因此如果格式化文本的颜色为黑色， View 就会受到影响。

有什么方法可以改善这些黑色背景上的格式化文本的显示吗？

我正在寻找一些 javascript 库或 asp.net 兼容来进行颜色匹配。

以下是如何将数据保存在数据库中的示例:

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

Answer 1

这不是世界上最好的主意，但您可以使用 important 来覆盖内联样式的特殊性。

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("invert");
});

body.invert {
  background-color: black;
}

body.invert p, body.invert span {
  color: #FFF!important;
}

<button>toggle</button>

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

另一个选项是您可以在页面加载时使用 JavaScript 来查找颜色并替换它。

其他选项在服务器上，查找颜色:#000000 并替换它

或者有过滤器:

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("invert");
});

body {
  background-color: white;
}

body.invert {
  background-color: black;
}

body.invert {
  filter: invert(100%);
}

<button>toggle</button>

<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 <span style="color:blue">lista de produtos cadastrada em nosso ERP</span>, 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 <span style="color:green">especifica alguns dos principais requisitos da API.</span>
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>