Question

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

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

但目前，只要用户更改html颜色值，我就会更加担心实时更改。

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

另一个复杂因素是，当用户加载尚未渲染的其他组件时，必须采取的方式仍然有效。

Answer 1

我会在输入上使用事件监听器，读取值，如果它匹配您想要触发颜色方案更改的任何内容，请将主题值应用于根元素上的数据属性并使用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 2

一种可能的解决方案是使用与<style>结合的dangerouslySetInnerHTML元素，如下所示。（注意CSS周围的反引号 - 它是一个插值的字符串文字。）

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

然后使用主题的组件只是<div className="styled" />

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

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

Answer 3

您可以使用js轻松完成此操作。只需使用jQuery addClass（）方法添加您的类.primaryColor，.secondaryColor。选择元素

示例： $（选择器）.addClass（类名，功能（索引，currentclass））

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

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

3 个答案: