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

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

完成此操作的最佳方法是什么？我知道我必须将这些项目保存在数据库中，并且每次用户登录时都会将其拉出，以便在每次登录时实现配色方案。

但是现在我更加担心用户更改html颜色值后的实时更改。

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

另一个复杂因素是，它必须以某种方式，当用户加载尚未渲染的其他组件时，更改仍然受影响。

2017-05-08 Sequential

用户是创建一个任意的主题，还是在几个预定义的主题之间进行选择？目前的解决方案似乎假设用户在几个预定义的主题之间进行选择。 – speckledcarp

@speckledcarp你是对的。所以我开始在Redux状态下保存primaryColor和secondaryColor的路径。该解决方案如何发声？我现在的问题是如何在存储状态后执行它。我一直在每个元素上使用样式标签。似乎重复。 – Sequential

@speckledcarp当然，我刚刚遇到了一个问题，即应用样式标签取消了任何：悬停或：焦点元素...我可以使用Radium，但我宁愿不必将Radium包含在该项目中... – Sequential

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

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

然后，所使用的主题组件，简直是<div className="styled" />

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

如果你使用这个方法，要非常小心你使用了清理变量来创建你的CSS主题。否则，注入攻击可能存在问题。

来源

2017-05-09 03:15:05 speckledcarp

Woweee！这工作绝对完美。谢谢。 – Sequential

很高兴工作！ – speckledcarp

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

来源

2017-05-08 17:49:31

有趣。真的很简单。谢谢！ – Sequential

@顺序不用客气。 –

Michael Coker - 这个解决方案不是直接操纵DOM吗？如果是这样，@Sequential很可能会遇到与实现jQuery解决方案时相同的问题。 – speckledcarp

，你可以很容易地做到这一点使用JS。只需使用jQuery addClass（）方法添加类.primaryColor，.secondaryColor即可。选择元件

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

来源

2017-05-08 17:53:33

谢谢。我知道JQuery中的路线。但我试着远离Jquery，因为我的堆栈里有React。 – Sequential

我不好反应我也许这可以帮助你.http：//stackoverflow.com/questions/36209432/reactjs-add-dynamic-class-to-manual-class-names –

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

回答

相关问题