用户输入的实时配色方案更改

Question

我设计了一个网站，以便更改两种用户输入的颜色会改变整个网站的配色方案。

实现这一点的最佳方法是什么。我知道我必须将项目保存在数据库中并在每次用户登录时提取，以便在每次登录时实现配色方案。

但目前我更担心用户更改 html 颜色值后会立即进行实时更改。

我知道一个选项，我可以将 CSS 类添加到每个会更改的组件中，例如 ....primaryColor 和 .secondaryColor。然后使用该类更改所有元素。 React 或其他 CSS/Javascript 解决方案是否有更好的方法？

另外一个复杂的问题是，当用户加载其他尚未渲染的组件时，更改仍然有效。

Answer 1

一种可能的解决方案是使用<style> 元素加上dangerouslySetInnerHTML，就像这样。 （注意 CSS 周围的反引号 ` - 它是一个内插的字符串文字。）

const Theme = props => {
  <style dangerouslySetInnerHTML={{__html: `
    .styled { color: ${props.userColor} }
    `}} 
  />
}

那么使用主题的组件就是<div className="styled" />

我想到了这个解决方案here。

如果您使用此方法，请务必小心使用经过清理的变量来创建 CSS 主题。否则，存在注入攻击的潜在问题。

Answer 2

我会在输入上使用事件侦听器，读取值，如果它与您想要触发配色方案更改的任何内容匹配，则将主题值应用于根元素上的数据属性并使用 CSS 来控制颜色计划。

var input = document.getElementById('input'),
    body = document.getElementsByTagName('body')[0];
input.addEventListener('keyup',function() {
  var val = this.value;
  if (this.value == 'foo') {
    body.setAttribute('data-theme','secondary');
  } else if (this.value == 'bar') {
    body.setAttribute('data-theme','primary');
  } else {
    body.setAttribute('data-theme','');
  }
  // ajax request to save theme pref in db
})

/* defaults */

body {
  color: #333;
}

/* primary theme */

[data-theme="primary"] {
  color: red;
}

[data-theme="primary"] p {
  background: yellow;
}

/* secondary theme */

[data-theme="secondary"] {
  color: blue;
}

[data-theme="secondary"] ul {
  background: grey;
}

<input id="input" placeholder="enter 'foo' or 'bar'">

<p>
  paragraph
</p>

<ul>
  <li>list</li>
</ul>

Answer 3

你可以使用 js 轻松做到这一点。 只需使用 jQuery addClass() 方法添加您的类 .primaryColor, .secondaryColor 。 选择元素

示例： $(selector).addClass(classname,function(index,currentclass))

更多示例：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass