javascript - 如何排除特定类不受设置为整个页面的色调旋转过滤器的影响-6ren

javascript - 如何排除特定类不受设置为整个页面的色调旋转过滤器的影响

转载作者：行者123 更新时间：2023-12-04 14:53:42

我正在开发一项功能，让用户可以选择深色或浅色主题以及应用的主题颜色。我是通过 css 过滤器来实现的，特别是 invert(1) 以获得深色主题和 hue-rotate 以获得主题颜色。暗光部分工作得很好，因为我排除了一些类不受 invert() 过滤器的影响，主要是图像和一些 svgs，只需将 invert(0) 设置为他们。但是，由于主题颜色选择器与范围选择器一起使用以带来许多配色方案，我不能使用相同的方法来排除这些类，因为 hue-rotate() 的度数值随用户选择。如果我能够以编程方式计算相反的色调并将其重新应用到那些类，它仍然可以完成，但由于我的 javascript 知识非常有限，我只是在这个过程中搞砸了。因此，对于实现这一目标的任何可能的帮助，我将不胜感激。

所以我想到了这段代码:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/light.css" rel="stylesheet" id="theme-link">
</head>
<body id="usrhue">

<h3><label><b>Theme</b></label></h3>
<input type="checkbox" onchange="toggleTheme()"/>
<h3>Theme Color</h1>
<pre><h3><code id="value">hue-rotate(0deg)</code></h3></pre>
<input id="hue-rotate" step="45" type="range" min="0" max="315" value="0">
<div>
<div class="tile">navbar</div>
<svg class="icon" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="33" viewbox="0 0 50 33"><path style="fill-opacity:1;fill-rule:evenodd;stroke:none" d="m 50,16.111089 c -0.0023,-0.52719 -0.269301,-1.175411 -0.836045,-1.837787 L 33.538651,0 l 0,4.099986 10.560199,12.011103 -10.560199,12.011102 0,4.099986 15.625304,-14.273302 C 49.730699,17.286499 49.997802,16.638278 50,16.111089 Z m -50,0 c 0.0022,-0.52719 0.2693022,-1.175411 0.8360452,-1.837787 L 16.46135,0 l 0,4.099986 -10.5601995,12.011103 10.5601995,12.011102 0,4.099986 L 0.8360452,17.948875 C 0.2693022,17.286499 0.0021979,16.638278 0,16.111089 Z"/></svg>
</div>

<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png">

</body>
</html>

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

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 图标或图像。

但是当您更改主题颜色时，它们都会受到影响。

所以问题是通过这种方式(也许您可以考虑第二种、第三种、第四种或更多方式)以编程方式为色调范围选择器的每个阶段计算相反的色调并动态地将其应用于这些类来解决这个问题。

我在 inspect dev 工具的帮助下做了一些计算，例如，假设你选择了选择器的第一阶段，45deg，那么如果你应用到 img invert(1) hue-rotate(-45deg) on the dark.css and invert(0) hue-rotate(-45deg) on the light.css，然后针对特定的色调值，图像保持正常。按照同样的思路，很容易计算出所有 7 个值。但是以动态方式应用它们的问题仍然是我有限的 JavaScript 技能的一个大问题。

我也在这里找到了这段代码 How to transform black into any given color using only CSS filters

色调旋转计算

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经验和能力的人可以用它来完成我需要的东西。

最佳答案

如果我是对的，您希望将深色主题切换为浅色主题，并在用户选择某种颜色时为 ui 元素着色。我重新设计了一个更像样的 View 。我确实使用了 previrous solution并加以改进。

const value = document.getElementById('value');
const body = document.getElementById('usrhue');
const switcher = document.getElementById('switcher');
const hueRotate = document.getElementById('hue-rotate');

const LIGHT_THEME = 'light';
const DARK_THEME = 'dark';

value.textContent = `Color: Tomato`;
body.classList.add(DARK_THEME);
body.classList.add('tomato');

const toggleTheme = ev => {
  if (ev.target.checked) {
    body.classList.add(LIGHT_THEME);
    body.classList.remove(DARK_THEME);
    return;
  }
  body.classList.add(DARK_THEME);
  body.classList.remove(LIGHT_THEME);
};

const setClassName = (name, color, num, el) => {
  const colorArr = [
    'tomato',
    'wood',
    'green-gross',
    'green-house',
    'fun-green',
    'sky-blue',
    'vivid-violet',
    'rose-guns',
  ];

  const className = name.toLowerCase().split(' ').join('-');
  colorArr.forEach(col => {
    if (col === className) {
      return el.classList.add(className);
    }
    el.classList.remove(col);
  });
};

switcher.addEventListener('change', toggleTheme);

hueRotate.oninput = function() {
  const filter = 'hue-rotate(xdeg)'.replace('x', this.value);
  let name;

  switch (this.value) {
    case '45':
      name = `Wood`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color:${name}`);
    case '90':
      name = `Green House`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    case '135':
      name = `Green Gross`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    case '180':
      name = `Fun Green`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    case '225':
      name = `Sky Blue`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    case '270':
      name = `Vivid Violet`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    case '315':
      name = `Rose Guns`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
    default:
      name = `Tomato`;
      setClassName(name, filter, this.value, body);
      return (value.textContent = `Color: ${name}`);
  }
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: serif;
}

:root {
  --background-color: hsl(240 14% 15% / 1);
  --context-color: hsl(217 8% 68% / 1);
  --buttons-color: var(--context-color);

  --tomato: hsl(0 50% 64% / 1);
  --wood: hsl(45 50% 50% / 1);
  --green-house: hsl(90 50% 50% / 1);
  --green-gross: hsl(135 50% 50% / 1);
  --fun-green: hsl(180 50% 50% / 1);
  --sky-blue: hsl(225 50% 50% / 1);
  --vivid-violet: hsl(270 50% 50% / 1);
  --rose-guns: hsl(315 50% 50% / 1);
}
.dark {
  --background-color: hsl(240 14% 15% / 1);
  --context-color: hsl(217 8% 68% / 1);
  --buttons-color: var(--context-color);
}
.light {
  --background-color: hsl(217 8% 68% / 1);
  --context-color: hsl(240 14% 15% / 1);
  --buttons-color: var(--context-color);
}
.tomato {
  --buttons-color: var(--tomato);
}
.wood {
  --buttons-color: var(--wood);
}
.green-house {
  --buttons-color: var(--green-house);
}
.green-gross {
  --buttons-color: var(--green-gross);
}
.fun-green {
  --buttons-color: var(--fun-green);
}
.sky-blue {
  --buttons-color: var(--sky-blue);
}
.vivid-violet {
  --buttons-color: var(--vivid-violet);
}
.rose-guns {
  --buttons-color: var(--rose-guns);
}

html {
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: 200px minmax(min-content, 500px);
  grid-template-rows: 70px max-content;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0px 10px 20px 10px;
  background-color: var(--background-color);
  color: var(--context-color);
}

button {
  border-radius: 3px;
  background-color: var(--buttons-color);
  color: black;
  transition: all 0.3s ease-in-out;
}
button:hover {
  filter: brightness(0.8);
}

#control {
  display: flex;
  gap: 50px;
}
#theme-switcher,
#theme-colors {
  grid-row: 1;
  padding: 10px;
  color: var(--context-color);
}
#theme-switcher {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#theme-colors {
  grid-column: 2;
}

#theme-colors p {
  color: var(--buttons-color);
}

#example {
  padding: 10px;
  grid-row: 2;
  grid-column: 2;
}
#example h1 {
  color: var(--buttons-color);
}
#example p {
  padding: 10px 0;
}
#example button {
  padding: 5px 15px;
  border: none;
  cursor: pointer;
}

#images {
  grid-column: 1;
  grid-row: 2;
}
#images img {
  width: 100%;
}
#images svg {
  margin: auto;
}

svg {
  fill: var(--buttons-color);
  width: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

<body id="usrhue">
  <div id="theme-switcher">
    <h3>Theme Switcher</h3>
    <input type="checkbox" id="switcher" />
  </div>
  <div id="theme-colors">
    <h3>Theme Color</h1>
      <p id="value"></p>
      <input id="hue-rotate" step="45" type="range" min="0" max="315" value="0">
  </div>
  <section id=example>
    <h1>Some title</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse dolorem corporis praesentium natus soluta distinctio iure eos facere tenetur, assumenda sequi ducimus architecto provident nobis ad, quia nostrum. Voluptas, expedita.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci hic alias facilis autem!</p>
    <button>Cancel</button>
    <button>Submit</button>
  </section>
  <section id='images'>
    <img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png">
    <svg class="icon" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="33" viewbox="0 0 50 33"><path style="fill-opacity:1;fill-rule:evenodd;stroke:none" d="m 50,16.111089 c -0.0023,-0.52719 -0.269301,-1.175411 -0.836045,-1.837787 L 33.538651,0 l 0,4.099986 10.560199,12.011103 -10.560199,12.011102 0,4.099986 15.625304,-14.273302 C 49.730699,17.286499 49.997802,16.638278 50,16.111089 Z m -50,0 c 0.0022,-0.52719 0.2693022,-1.175411 0.8360452,-1.837787 L 16.46135,0 l 0,4.099986 -10.5601995,12.011103 10.5601995,12.011102 0,4.099986 L 0.8360452,17.948875 C 0.2693022,17.286499 0.0021979,16.638278 0,16.111089 Z"/></svg>
  </section>
</body>

使用本地存储

  const theme = localStorage.getItem('theme');
  const swithTheme = localStorage.getItem('switcher');

  const value = document.getElementById('value');
  const body = document.getElementById('usrhue');
  const switcher = document.getElementById('switcher');
  const hueRotate = document.getElementById('hue-rotate');

  const LIGHT_THEME = 'light';
  const DARK_THEME = 'dark';

  value.textContent = `Color: Tomato`;

  if (!swithTheme) {
    localStorage.setItem('switcher', DARK_THEME);
    body.classList.add(DARK_THEME);
  }

  if (swithTheme) {
    if (swithTheme === LIGHT_THEME) {
      switcher.setAttribute('checked', true);
    }
    body.classList.add(swithTheme);
  }

  if (!theme) {
    localStorage.setItem(
      'theme',
      JSON.stringify({
        color: 'hue-rotate(0deg)',
        num: 0,
        name: `Tomato`,
      })
    );
    body.classList.add('tomato');
  }

  if (theme) {
    const LS = JSON.parse(theme);
    const className = LS.name.toLowerCase().split(' ').join('-');

    body.classList.add(className);
    hueRotate.value = LS.num;
    value.textContent = `Color: ${LS.name}`;
  }

  const toggleTheme = ev => {
    if (ev.target.checked) {
      body.classList.add(LIGHT_THEME);
      body.classList.remove(DARK_THEME);
      localStorage.setItem('switcher', LIGHT_THEME);
      return;
    }
    body.classList.add(DARK_THEME);
    body.classList.remove(LIGHT_THEME);
    localStorage.setItem('switcher', DARK_THEME);
  };

  const setClassName = (name, color, num, el) => {
    const colorArr = [
      'tomato',
      'wood',
      'green-gross',
      'green-house',
      'fun-green',
      'sky-blue',
      'vivid-violet',
      'rose-guns',
    ];

    localStorage.setItem(
      'theme',
      JSON.stringify({
        color,
        num,
        name,
      })
    );

    const className = name.toLowerCase().split(' ').join('-');
    colorArr.forEach(col => {
      if (col === className) {
        return el.classList.add(className);
      }
      el.classList.remove(col);
    });
  };

  switcher.addEventListener('change', toggleTheme);

  hueRotate.oninput = function () {
    const filter = 'hue-rotate(xdeg)'.replace('x', this.value);
    let name;

    switch (this.value) {
      case '45':
        name = `Wood`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color:${name}`);
      case '90':
        name = `Green House`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      case '135':
        name = `Green Gross`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      case '180':
        name = `Fun Green`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      case '225':
        name = `Sky Blue`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      case '270':
        name = `Vivid Violet`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      case '315':
        name = `Rose Guns`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
      default:
        name = `Tomato`;
        setClassName(name, filter, this.value, body);
        return (value.textContent = `Color: ${name}`);
    }
  };

关于javascript - 如何排除特定类不受设置为整个页面的色调旋转过滤器的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68579939/

文章推荐： r - 向脊线图添加显着性括号

文章推荐： Reactjs如何获取开始日期和结束日期的值？

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何排除特定类不受设置为整个页面的色调旋转过滤器的影响