× 598字 × 22阅

Bitcron 主题「庸」的配色方案

Bitcron 主题「庸」的特色之一便是可以自定义配色方案,这全都得益于 SCSS 的便利。我也是不久前才学会参数的写法,终于明白为什么那么多人热爱参数,实在是太一劳永逸了!在 style.scss 的头几行 Customize field 区域内,可以看到以下几个参数,调整这些颜色就能进行配色自定义了。

  • $mcolor:main color 主要颜色
  • $pcolor:point color 链接等
  • $bgcolor:background color 背景颜色
  • $scolor:second color 次于主要颜色的第二多被使用的颜色
  • $tcolor:text color 文字颜色

默认的配色被我称作 奶昔 Yellow,是手机自动切换的夜晚浏览模式给我的灵感,暖黄色很温馨的感觉。因为使用了参数,我摩拳擦掌跃跃欲试,用了一个上午搭配出了 单色 Mono夏日 Summer入夜 Night纯净 Pure 四种配色。搭配颜色特别好玩,也比想象的难好多。攻克了模板技术难题后才意识到,网页设计里最难的部分竟然是设计而不是一直以来以为的编码。

虽然这是我第一次主动进行颜色搭配,但我仍旧愿意记录下来,之后有新的方案也会更新到这里。特别鸣谢谷歌的取色器和调色盘网站 coolors

奶昔 Yellow

$mcolor: #eee;
$pcolor: #ffbb00;
$bgcolor: #fffaf2;
$scolor: #bbb;
$tcolor: #888;
奶昔 Yellow 调色盘 奶昔 Yellow 效果

单色 Mono

$mcolor: #e1e8ef;
$pcolor: #3f4851;
$bgcolor: #fafafa;
$scolor: #aab7c4;
$tcolor: #8592a0;
单色 Mono 调色盘 单色 Mono 效果

夏日 Summer

$mcolor: #cae5c5;
$pcolor: #ff8b94;
$bgcolor: #fff7f2;
$scolor: #b7a9a3;
$tcolor: #7c6e66;
夏日 Summer 调色盘 夏日 Summer 效果

入夜 Night

$mcolor: #2d3547;
$pcolor: #c5c7d6;
$bgcolor: #030c21;
$scolor: #515466;
$tcolor: #7b7d91;
入夜 Night 调色盘 入夜 Night 效果

纯净 Pure

$mcolor: #f4f4f4;
$pcolor: #e2e2e2;
$bgcolor: #fdfdfd;
$scolor: #bcbbb8;
$tcolor: #a5a4a2;
纯净 Pure 调色盘 纯净 Pure 效果
2017年7月17日 周一 多云 新加坡第三天:动物园 2017年7月18日 周二 多云 新加坡第四天:城市观光、唐人街、滨海湾花园 2017年7月19日 周三 多云 新加坡第五天(最后一天):金沙无边泳池 回日本:在飞机上观影《西游伏妖篇》,好难看。 2017年7月20日 周四 多云 休息 观影《“吃吃”的爱》:比预告片好看一些,但还是差强人意。 2017年7月21日 周五 多云 旅途回来各种整理 写完第二个 Bitcron 主题:「庸」 2017年7月22日 周六 晴 完善主题「庸」细节 写简历页面:本来想写一个「简历」主题,后来发现代码更改太复杂,不太可能泛用,就暂时给自己写一个。 2017年7月23日 周日 阴 放弃简历页面:暂时没想到必要性,就没了激情。 给主题「庸」配了四种颜色:除了默认的 奶昔 Yellow 之外,又配了四种分别为:单色 Mono、夏日 Summer、入夜 Night 和 纯净 Pure。主题浏览页用 js 做了效果切换。
点击加载Disqus评论