如何在运行时用css更改和维护多个颜色主题？ [英] How to change and maintain multiple color themes at runtime with css?
问题描述
我想让我的网络应用程序有不同的彩色主题：
I'd like my web app to have different colored themes:
现在我有：
RedTheme.css 0047
BlueTheme.css
RedTheme.css
BlueTheme.css
我在运行时动态加载它们。根据用户在他的选项菜单中选择。
这个工作，但我不喜欢为每个主题单独的文件。
And I load each dynamically at runtime. Depending what user selects in his options menu. And that works, but I don't like having a separate file for each theme.
选项1.我想知道是否有任何方式，我可以做类似于：
Option 1. I'm wondering if there's any way I can do something like:
Theme.css？Theme = Red，然后在css中，让它找出基于该变量使用哪一个。
Theme.css?Theme=Red and then within the css to have it figure out which one to use based on that variable.
选项2.我也想知道我是否可以像CSS里面做的那样做：
Option 2. I'm also wondering if maybe I can do something like inside the CSS to do:
background-color： @themeBackgroundColor
background-color: @themeBackgroundColor
然后以某种方式在运行时通过javascript或某事设置此变量。
and then somehow set this variable at runtime via javascript or something.
如果选项1和选项2不可用，除了为每个主题保存不同的文件之外，您还有其他建议吗？
If Option 1 and Option 2 are not available, do you have any other suggestions for theming apart from keeping a different file for each theme? b/c maybe I'd like an option where the user can choose custom colors in the future.
推荐答案
如果您想要使用自定义颜色，在CSS中使用变量，请查看 Less 或 Sass ，都有客户端解决方案。
If you want to use variables in your CSS, have a look at Less or Sass, both have client side solutions for this.
要切换样式，您可以：
- 使用身体的ID属性，例如
< body id =red>与此ID。所以#red myelement.myclass {}或者什么。 - 您可以在服务器端使用基本CSS文件和多个主题CSS文件（例如gmail），并通过更改URL，这将在浏览器中生成一个新的请求以获取其他CSS。
- 您可以寻找或编写一个自己的小框架，在html本身中添加正确的样式样式属性（像这里完成），或者添加内嵌样式元素到您定义自定义样式的HTML，并使用javascript替换它们。
- Use a ID attribute for the body like
<body id="red">and have css prefixed with this id. So#red myelement.myclass{}or something. Then switch the ID with javascripts. - You could have a base CSS file and several theme CSS files on the server side(like gmail does for example) and swap between them with javascript by changing the URL, this would generate a new request in the browser to get the other CSS.
- You could look for or write some small framework of your own which adds the proper styling inside the html itself as a style attribute (like done here), or which adds inline style elements to the html where you define the custom styles and swap them out with javascript.
到目前为止，javascript对元素或HTML的CSS的任何更改都会触发浏览器再次呈现页面。
Any changes to the CSS of elements or HTML by javascript as far as i've seen will trigger the browser to render the page again.
无法直接更改客户端硬盘上的CSS文件，因为javascript不允许这样做。但您可以更改缓存或html中的CSS。
Changing the CSS files on your clients hardisk directly is not possible since javascript does not allow this. You can however change the CSS in the cache or html.
这篇关于如何在运行时用css更改和维护多个颜色主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
