So schließen Sie bestimmte Klassen von der Auswirkung eines auf die gesamte Seite eingestellten Farbton-Rotationsfilters ⇐ CSS

[Anonymous]

Ich entwickle eine Funktion, mit der der Benutzer ein dunkles oder helles Design sowie eine Designfarbe für die App auswählen kann. Ich mache es über den CSS-Filter, insbesondere invert(1), um das dunkle Thema zu erhalten, und hue-rotate für die Themenfarbe. Der Dunkel-Hell-Teil funktioniert perfekt, weil ich einige Klassen von der Beeinflussung durch den invert()-Filter ausgeschlossen habe, hauptsächlich Bilder und einige SVGs, indem ich einfach invert(0) auf sie gesetzt habe. Da der Theme-Farbwähler jedoch mit einem Bereichswähler arbeitet, um viele Farbschemata bereitzustellen, kann ich nicht dieselbe Methode verwenden, um diese Klassen auszuschließen, da sich der Wert in Grad von hue-rotate() mit der Benutzerauswahl ändert. Es ist immer noch möglich, wenn ich in der Lage wäre, den entgegengesetzten Farbton programmgesteuert zu berechnen und ihn auf diese Klassen anzuwenden, aber ich habe dabei nur einen Fehler gemacht, da meine Javascript-Kenntnisse sehr begrenzt sind.Daher wäre ich dankbar für jede mögliche Hilfe dabei.
Also habe ich mir diesen Code ausgedacht:
HTML

Code: Select all

Theme[/b]

Theme Color
hue-rotate(0deg)

navbar








JS

Code: Select all

// 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

Code: Select all

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;
}

DARK.CSS
Dunkles CSS ist dasselbe wie helles CSS, fügt es jedoch unten hinzu

Code: Select all

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

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

Wie Sie feststellen werden, wirkt sich diese Aktion weder auf das SVG-Symbol noch auf das Bild aus, wenn Sie zwischen hell und dunkel wechseln.
Aber wenn Sie die Designfarbe ändern, sind beide betroffen.
Die Frage besteht also darin, dieses Problem auf diese Weise zu lösen (vielleicht könnten Sie sich eine zweite, dritte, vierte oder mehrere Möglichkeiten vorstellen), den entgegengesetzten Farbton für jede Stufe des Farbtonbereichsselektors programmgesteuert zu berechnen und ihn dynamisch auf diese anzuwenden Klassen.
Ich habe einige Berechnungen mit Hilfe des Inspect-Dev-Tools durchgeführt und nehmen zum Beispiel an, dass Sie die erste Stufe des Selektors auswählen, 45deg. Wenn Sie dann auf img invert(1) hue-rotate(-45deg) in der Datei „dark.css“ und invert(0) hue-rotate(-45deg) in der Datei „dark.css“ anwenden light.css, dann bleibt das Bild für diesen bestimmten Farbtonwert in Ordnung. Wenn man dem gleichen Gedankengang folgt, ist es sehr einfach, alle 7 Werte zu berechnen. Aber die Frage, sie dynamisch anzuwenden, stellt immer noch ein großes Problem für meine begrenzten Javascript-Kenntnisse dar.
Ich habe auch diesen Codeblock hier gefunden: Wie man Schwarz nur mit CSS-Filtern in eine beliebige Farbe umwandelt
FARBTON-ROTIERUNGSBERECHNUNG

Code: Select all

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
]);}

Vielleicht könnte jemand mit mehr JS-Erfahrung und -Fähigkeiten als ich damit das erreichen, was ich brauche.