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

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

您可以使用SASSdarken函数。

下面是一个例子。

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