I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-rotate for the theme color. I have successfully managed to exclude certain classes from the invert() filter effect, like images and svgs, by setting invert(0) for those classes. However, I encountered an issue with the theme color selector, as the degree value for the hue-rotate() filter changes based on user selection. While it is technically possible to calculate and apply the opposite hue dynamically to those classes, my limited knowledge in JavaScript has hindered my progress.
In attempting to address this issue, I developed the following code:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- rest of HTML code here -->
JS
// Theme Chooser and Theme Color Chooser scripts
<!-- JavaScript code here -->
LIGHT.CSS
/* Light theme CSS styling */
<!-- Styling rules for light theme -->
DARK.CSS
Dark css is the same as light but adding this at the bottom
/* Dark theme CSS with additional styling */
<!-- Additional styling for dark theme -->
When toggling between light and dark themes, the svg icon and image are not affected. However, changing the theme color impacts both elements. Therefore, the challenge lies in dynamically applying the calculated opposite hue values to these classes through JavaScript.
I attempted some calculations manually using the dev tools, determining suitable opposite hue values for different degrees within the selector range. While this approach worked momentarily, finding a dynamic solution eludes me due to my limited JavaScript proficiency.
You may refer to this code snippet found here for transforming black into a specified color using CSS filters.
HUE-ROTATE CALCULATION
function hueRotate(angle = 0) {
// Function for calculating hue rotation
}If someone with more expertise in JavaScript can leverage this function to address the issue, it would be greatly appreciated.