如何动态地使所选颜色变暗

Question

我在HTML上有一个表格显示所选择的数据，表格颜色可以通过我的设置模块动态更改。现在，我要使表格标题的颜色比表格行的颜色深。

例如：如果我选择颜色red，则表格行将为red，表格标题将为dark red。

我该怎么做？这可能吗？还是需要为每种颜色设置修复条件？

Answer 1

您可以尝试使用透明度

table {
  background-color: red;
  border-collapse: collapse;
}

th {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

<table>
  <tr>
    <th>1 H</th>
    <th>2 H</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>    
   </tr>
   <tr>
    <td>3</td>
    <td>4</td>    
   </tr>
</table>

Answer 2

您可以使用SASS darken函数。

Here is an example。

$linkcolour: red;

table {
  background-color: $linkcolour;
}
thead{
  background-color: darken($linkcolour, 30%);
}