css-theme
通过单一css文件生成多套主题,并合并入一个css文件中
特性
- 只加载一个css,通过切换rootClass瞬间切换主题
- 体积压缩,将多套css合并,去除冗余代码,避免文件体积膨胀
- 低侵入性,不改变现有开发模式,一处修改,全局生效
安装
$ npm i css-theme --save-dev
使用
css编写
在css中需要根据主题变化的地方使用占位符,占位符可以是任何字符串。
你也可以通过预处理器变量的方式向css文件注入这些占位符。
@dark: #theme1;
@light: #theme2;
.container {
.text1 {
font-size: 16px;
color: #theme1;
line-height: normal;
}
.text2 {
font-size: 14px;
color: @dark;
line-height: normal;
}
.text2 {
font-size: 14px;
color: @light;
line-height: normal;
}
}
gulp插件模式
在gulp任务中调用theme插件。详见 demo/gulp
var cssTheme = require('css-theme').gulp; // gulp-plugin
var themeConfig = require('./theme.config'); // configs
less({
plugins:[new LessPluginTheme(themeConfig)]
})
less插件模式
在通过gulp/webpack等工具调用less时,插入theme中间件。详见 demo/less
var LessPluginTheme = require('css-theme').less; // less-plugin
var themeConfig = require('./theme.config'); // configs
gulp.task('default', function() {
return gulp.src('./index.less')
.pipe(less())
.pipe(cssTheme(themeConfig))
.pipe(gulp.dest('./dist'));
});
配置
placeholder: 占位符,描述每个变量在css文件中对应的占位符
list: 主题列表
list.targetMap: 该主题中每个变量对应的值
list.rootClass: 使用该主题时顶层添加的class
list.default: 是否将该主题作为默认主题,在未指定class时默认展示该主题
module.exports = {
'placeholder': {
'dark': '#theme1',
'light': '#theme2'
},
'list': [
{
'default': false,
'targetMap': {
'dark': '#ff6a3a',
'light': '#ffa284',
},
'rootClass': 'skin_orange'
},
{
'default': false,
'targetMap': {
'dark': '#fdd000',
'light': '#ffd71c',
},
'rootClass': 'skin_yellow'
}
]
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。