我有一个页面,<link>在标题中加载了名为的CSS light.css.我还有一个名为的文件dark.css.我想要一个按钮来交换页面的样式(css文件中有40个选择器,有些在两个文件中不匹配).
如何删除对light.cssJS的引用并删除所有应用的样式,然后dark.css从中加载并应用所有样式？我不能简单地重置所有元素,因为一些样式是通过不同的css文件应用的,有些是由JS动态生成的.没有重新加载页面,有没有一种简单而有效的方法呢？香草JS是首选,但我会使用jQuery进行后续处理,所以jQ也没关系.
我有一个VueJS应用程序,它将有许多不同的主题(至少20左右).每个主题样式表不仅会更改颜色和字体大小等内容,还会更改某些元素的位置和布局.
我希望用户能够动态地在这些主题之间切换.因此,在运行时,用户将能够打开"选项"菜单并从下拉列表中进行选择.
在VueJS中拥有许多动态用户可选主题的最简洁方法是什么？
我想过几个方面,比如:
<link>或<style>标记.虽然这可能有用,但我并不认为它特别"干净",如果我从AJAX加载,那么我经常会看到一个FOUC.if-else为每个组件中的每个受支持主题建立链.我并不特别喜欢这个解决方案,因为每次我添加新主题时,我制作的每个组件都需要更新.在React中,我认为有一个插件或具有<ThemeProvider>组件的东西,其中添加主题就像包装它一样简单,即<ThemeProvider theme={themeProp}><MyComponent></ThemeProvider>,该主题中的所有样式将应用于该组件和所有子组件.
VueJS有类似的东西,还是有办法实现它？
所以我认为这个标题足以解释:我想动态地设计我的整个应用程序.也许这意味着当我按下特定按钮时更改所有div的颜色,或者在特定用户登录时更改整个webapp的颜色.
只是为了对我目前正在进行的工作提供一些见解,我会说我已经构建了一个使用许多库的Vue.js应用程序,其中包括一个名为Element-ui的库,它已经内置了一个主题选项.问题是它是用scss编写的,我想在导航过程中更改所有变量颜色.我的项目看起来像这样:
<template>
... some HTML and components...
</template>
<script>
... some javascript ...
</script>
<style scoped>
... some style that is scoped to the current component only ...
</style>
我有很多类似这样的文件,因此对所有这些文件进行"全局功能"对我来说似乎并不实用.我也只在我的导入一次主scss文件main.js.
有什么办法可以为我的webapp创建一个dinamic主题吗？使用saas是个好主意吗？可能是Javascript？
我觉得我没有足够好地解释它,所以我想添加一个简单的例子.如果您访问元素页面,您可以在右上角看到一个颜色选择器,当颜色发生变化时,它也会改变整个网站的重点颜色,如按钮颜色,链接颜色等.
希望这有助于更好地理解
现在我已经找到了一个非常差的,我认为,非常优化的解决方案.我们的想法是,当用户更改主题时,我只需创建一个新的css文件并将其附加到当前文档.
let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
background-color: ${colors[0]};
}
...`;
document.body.appendChild(sheet);
我真的认为这是一个非常糟糕的解决方案,但是现在当用户更改参数时,我无法想出任何其他可以正常工作的方法.我真的希望这个过程是完美无缺的:用户选择一种颜色,整个应用程序只是更改为特定的颜色,没有预先构建theme.css.
我终于找到了解决方案,请参考答案!