Зачем УСТАНОВКА цвета после ОБРАБОТКИ ФИЛЬТРА теряет точность?

Question

Я пытаюсь создать сценарий в темном режиме для простой страницы HTML.

У меня есть класс скажем child в классе parent, определенный в light.css как:

.parent{
}

.child{
  background: #780000;
}

В dark.css я инвертирую все (для создания темного режима) html как:

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
}

Я хочу сохранить некоторые элементы в их исходных цветах. Итак, я снова invert и hue-change на этих элементах. Но это не помогает, потому что реверс фильтра может привести к потерям. Далее, я ставлю на то, что цвет таких элементов явно устанавливается равным # 780000 в dark.css. Но все равно ничего не помогло.

Мой вопрос: после всех этих инвертирования + возврата + изменения оттенка, как я могу сделать цвет .child точным # 780000?

И

Почему цвет child не изменяется (или устанавливается на чистый # 780000) даже после явной установки цвета в dark.css как:

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
}

.child {
  background: #780000;
}

Как это исправить?

MWE (не javascript) выглядит следующим образом:

html{
  filter: invert(100%) hue-rotate(180deg);
}

.parent{
  filter: invert(100%) hue-rotate(180deg);
  background: green;
}

.child {
  background: #780000;
}

<div class="parent">
  I'm parent.
  <div class="child" style="background: #780000">
    I'm child.
  </div>
<div>

TOP - это то, что я ожидаю (также без фильтров).

BOTTOM - это то, что я получаю (после Filter+Revert_Filter или Filter+Revert_Filter+Explicit_Coloring).