openblogCSS变量预设 v1.0.0
网站开发时，统一提前预设css全局变量，方便后续做主题切换
WARNING
css变量：1 - 4 表示色号从深到浅
linght 主题
css
:root{
/* 网站主色 */
--app-color-1: #000;
--app-color-2: #333;
/**
* -默认状态色
* 1 - 4： 颜色从深到浅
*/
--color-primary-1: #337ecc;
--color-primary-2: #409eff;
--color-primary-3: #ecf5ff;
--color-success-1: #529b2e;
--color-success-2: #67c23a;
--color-success-3: #f0f9eb;
--color-warn-1: #b88230;
--color-warn-2: #e6a23c;
--color-warn-3: #fdf6ec;
--color-danger-1: #c45656;
--color-danger-2: #f56c6c;
--color-danger-3: #fef0f0;
/**
* -默认字体色
* 1 - 4： 颜色从深到浅
*/
--color-font-1: #000000;
--color-font-2: #606266;
--color-font-3: #909399;
--color-font-4: #fff;
--color-placeholder: #A8ABB2;
--color-disable: #C0C4CC;
/**
* 边框色
*/
--color-border: #EBEEF5;
/**
* -背景色
* -元素背景色
*/
--color-bg: #fff;
--color-box: #F5F7FA;
/**
* 边框阴影色
*/
--color-shadow: 0px 0.1rem 1rem rgba(0,0,0,0.1);
/**
* 字体大小
*/
--size-12: 0.75rem;
--size-14: 0.9rem;
--size-16: 1rem;
--size-18: 1.2rem;
--size-22: 1.4rem;
--size-36: 2.4rem;
--size-48: 3rem;
--size-60: 4rem;
/**
* 边框弯曲数值
*/
--radius-box: 0.4rem;
/**
* 边距
*/
--space-5: 0.5rem;
--space-10: 1rem;
--space-15: 1.5rem;
/**
* 模块上下的边距
*/
--module-space: 8rem;
/**
* 字体类型
*/
--font-family: Poppins,"Microsoft YaHei",Arial, Helvetica, sans-serif;
}:root{
/* 网站主色 */
--app-color-1: #000;
--app-color-2: #333;
/**
* -默认状态色
* 1 - 4： 颜色从深到浅
*/
--color-primary-1: #337ecc;
--color-primary-2: #409eff;
--color-primary-3: #ecf5ff;
--color-success-1: #529b2e;
--color-success-2: #67c23a;
--color-success-3: #f0f9eb;
--color-warn-1: #b88230;
--color-warn-2: #e6a23c;
--color-warn-3: #fdf6ec;
--color-danger-1: #c45656;
--color-danger-2: #f56c6c;
--color-danger-3: #fef0f0;
/**
* -默认字体色
* 1 - 4： 颜色从深到浅
*/
--color-font-1: #000000;
--color-font-2: #606266;
--color-font-3: #909399;
--color-font-4: #fff;
--color-placeholder: #A8ABB2;
--color-disable: #C0C4CC;
/**
* 边框色
*/
--color-border: #EBEEF5;
/**
* -背景色
* -元素背景色
*/
--color-bg: #fff;
--color-box: #F5F7FA;
/**
* 边框阴影色
*/
--color-shadow: 0px 0.1rem 1rem rgba(0,0,0,0.1);
/**
* 字体大小
*/
--size-12: 0.75rem;
--size-14: 0.9rem;
--size-16: 1rem;
--size-18: 1.2rem;
--size-22: 1.4rem;
--size-36: 2.4rem;
--size-48: 3rem;
--size-60: 4rem;
/**
* 边框弯曲数值
*/
--radius-box: 0.4rem;
/**
* 边距
*/
--space-5: 0.5rem;
--space-10: 1rem;
--space-15: 1.5rem;
/**
* 模块上下的边距
*/
--module-space: 8rem;
/**
* 字体类型
*/
--font-family: Poppins,"Microsoft YaHei",Arial, Helvetica, sans-serif;
}dark主题
css
/*暗黑*/
html[data-theme="dark"]{
/* 网站主色 */
--app-color-1: #fff;
--app-color-2: #eee;
/**
* -默认状态色
* 1 - 4： 颜色从深到浅
*/
--color-primary-1: #337ecc;
--color-primary-2: #409eff;
--color-primary-3: #ecf5ff;
--color-success-1: #529b2e;
--color-success-2: #67c23a;
--color-success-3: #f0f9eb;
--color-warn-1: #b88230;
--color-warn-2: #e6a23c;
--color-warn-3: #fdf6ec;
--color-danger-1: #c45656;
--color-danger-2: #f56c6c;
--color-danger-3: #fef0f0;
/**
* -默认字体色
* 1 - 4： 颜色从深到浅
*/
--color-font-1: #FFFFFF;
--color-font-2: #CFD3DC;
--color-font-3: #A3A6AD;
--color-font-4: #000;
--color-placeholder: #8D9095;
--color-disable: #6C6E72;
/**
* 边框色
*/
--color-border: #363637;
/**
* -背景色
* -元素背景色
*/
--color-bg: #141414;
--color-box: #262727;
/**
* 边框阴影色
*/
--color-shadow: 0px 0.1rem 1rem rgba(255,255,255,0.1);
/**
* 字体大小
*/
--size-12: 0.75rem;
--size-14: 0.9rem;
--size-16: 1rem;
--size-18: 1.2rem;
--size-22: 1.4rem;
--size-36: 2.4rem;
--size-48: 3rem;
--size-60: 4rem;
/**
* 边框弯曲数值
*/
--radius-box: 0.4rem;
/**
* 边距
*/
--space-5: 0.5rem;
--space-10: 1rem;
--space-15: 1.5rem;
/**
* 模块上下的边距
*/
--module-space: 8rem;
/**
* 字体类型
*/
--font-family: Poppins,"Microsoft YaHei",Arial, Helvetica, sans-serif;
}/*暗黑*/
html[data-theme="dark"]{
/* 网站主色 */
--app-color-1: #fff;
--app-color-2: #eee;
/**
* -默认状态色
* 1 - 4： 颜色从深到浅
*/
--color-primary-1: #337ecc;
--color-primary-2: #409eff;
--color-primary-3: #ecf5ff;
--color-success-1: #529b2e;
--color-success-2: #67c23a;
--color-success-3: #f0f9eb;
--color-warn-1: #b88230;
--color-warn-2: #e6a23c;
--color-warn-3: #fdf6ec;
--color-danger-1: #c45656;
--color-danger-2: #f56c6c;
--color-danger-3: #fef0f0;
/**
* -默认字体色
* 1 - 4： 颜色从深到浅
*/
--color-font-1: #FFFFFF;
--color-font-2: #CFD3DC;
--color-font-3: #A3A6AD;
--color-font-4: #000;
--color-placeholder: #8D9095;
--color-disable: #6C6E72;
/**
* 边框色
*/
--color-border: #363637;
/**
* -背景色
* -元素背景色
*/
--color-bg: #141414;
--color-box: #262727;
/**
* 边框阴影色
*/
--color-shadow: 0px 0.1rem 1rem rgba(255,255,255,0.1);
/**
* 字体大小
*/
--size-12: 0.75rem;
--size-14: 0.9rem;
--size-16: 1rem;
--size-18: 1.2rem;
--size-22: 1.4rem;
--size-36: 2.4rem;
--size-48: 3rem;
--size-60: 4rem;
/**
* 边框弯曲数值
*/
--radius-box: 0.4rem;
/**
* 边距
*/
--space-5: 0.5rem;
--space-10: 1rem;
--space-15: 1.5rem;
/**
* 模块上下的边距
*/
--module-space: 8rem;
/**
* 字体类型
*/
--font-family: Poppins,"Microsoft YaHei",Arial, Helvetica, sans-serif;
}反馈信息
INFO