Как исключить воздействие на определенные классы фильтра поворота оттенка, установленного для всей страницы ⇐ Html

[Anonymous]

Я разрабатываю функцию, позволяющую пользователю выбирать темную или светлую тему, а также цвет темы для приложения. Я делаю это через фильтр CSS, в частности, invert(1), чтобы получить темную тему, и поворот оттенка для цвета темы. Часть темного света работает отлично, потому что я исключил некоторые классы из-под влияния фильтра invert(), в основном изображения и некоторые SVG-файлы, просто установив для них invert(0). Но поскольку средство выбора цвета темы работает с селектором диапазона для создания множества цветовых схем, я не могу использовать один и тот же метод для исключения этих классов, поскольку значение в градусах hue-rotate() меняется в зависимости от выбора пользователя. Это все еще можно сделать, если бы я мог программно вычислить противоположный оттенок и повторно передать его этим классам, но я просто запутался в этом процессе, поскольку мои знания JavaScript очень ограничены.Поэтому я был бы признателен за любую возможную помощь в этом.
Итак, я придумал этот код:

Код: Выделить всё

// Theme Chooser
const theme = document.querySelector('#theme-link');
const currentTheme = localStorage.getItem('theme');

if (currentTheme == 'dark' &&  theme.getAttribute('href') == 'css/light.css') {
theme.href = 'css/dark.css';
}

function toggleTheme() {
if (theme.getAttribute('href') == 'css/light.css') {
theme.href = 'css/dark.css';
themeName = 'dark';
} else {
theme.href = 'css/light.css';
themeName = 'light';
}
localStorage.setItem('theme', themeName);
};

// Theme Color Chooser

const currentThemec = localStorage.getItem('themeColor');
const value = document.getElementById('value');
const body = document.getElementById('usrhue');

if (currentThemec) {
const themeColor = currentThemec;
body.style.filter = currentThemec;
value.textContent = currentThemec;
}

document.getElementById('hue-rotate').oninput = function() {
const filter = 'hue-rotate(xdeg)'.replace('x', this.value);
value.textContent = filter;
body.style.filter = filter;

localStorage.setItem('themeColor', body.style.filter);
}

Код: Выделить всё

**LIGHT.CSS** html {
height: 100%;
overflow: hidden;
}

body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
background: #999;
}

input {
margin-bottom: 5px;
}

.tile {
width: 50px;
height: 50px;
display: inline-block;
}

.tile:nth-child(1) {
background: #006648;
}

.tile:nth-child(2) {
background: #007aff;
}

pre {
color: #ff0000;
}

img {
width: 5%;
}

h3 {
color: #0000ff;
}

svg {
fill: #007aff;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

Код: Выделить всё

Theme[/b]

Theme Color
hue-rotate(0deg)

navbar









DARK.css
Темный CSS — это то же самое, что и светлый, но добавление его внизу

Код: Выделить всё

html, img, svg, pre, code { filter: invert(1) contrast(1) saturate(1);}

.webp, .png, .jpg { filter: invert(0) contrast(1) saturate(1);}

Как вы заметите, если вы переключаетесь между светлым и темным, это действие не влияет ни на значок svg, ни на изображение.
Но когда вы меняете цвет темы, они оба затрагиваются.
Итак, вопрос в том, чтобы решить эту проблему таким способом (возможно, вы могли бы подумать вторым, третьим, четвертым или более способами), программно вычислить противоположный оттенок для каждого этапа селектора диапазона оттенков и динамически применить его к ним классы.
Я провел некоторые расчеты с помощью инструмента проверки проверки, и, например, предположим, что вы выбрали первый этап селектора, 45deg, затем, если вы примените img invert(1) hue-rotate(-45deg) на dark.css и invert(0) hue-rotate(-45deg) на Light.css, то для с этим конкретным значением оттенка, изображение остается в порядке. Следуя той же схеме мышления, очень легко вычислить все 7 значений. Но вопрос их динамического применения по-прежнему остается огромной проблемой для моих ограниченных навыков работы с Javascript.
Я также нашел здесь этот фрагмент кода. Как преобразовать черный цвет в любой заданный цвет, используя только фильтры CSS
РАСЧЕТ ОТТЕНКА-ВРАЩЕНИЯ

Код: Выделить всё

function hueRotate(angle = 0) {
angle = angle / 180 * Math.PI;
let sin = Math.sin(angle);
let cos = Math.cos(angle);

this.multiply([
0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
]);}

Может быть, кто-то, у кого больше опыта и способностей в области js, чем у меня, сможет использовать его для достижения того, что мне нужно.

Подробнее здесь: https://stackoverflow.com/questions/685 ... lter-set-t