Как динамически сделать выбранный цвет темнее

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.

Вот пример .

$linkcolour: red;

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