awesome-next
awesome-next copied to clipboard
theme-next
Any recommended colorful color scheme
This is not an issue of bug report or theme feature problem. NexT does allow us to change the color theme by what we like, I know well how to make such a custom beautify。 I am looking for something other than the default black-gray-white color scheme, however, I am not a man with good sense of color harmony and art intuition. Does anyone has any color scheme recommended?
【Chinese Translation】 感觉主题挺好用的，就是个人审美觉得【黑白灰】配色太单调了，虽然说改配置文件可以实现自定义主题色彩，但我的艺术审美能力低下，配色严重违和。如果有配色大佬还望不吝啬把你们的自定义配置文件或者站点地址展示出来，围观围观。
@korepwx 以前我用的就是indigo（https://imys.net/ ）主题，Material的配色，感觉挺好看的，后来转了NexT,尝试自己调了下，感觉不太好办。
@L1H0n9Jun nice color! And how you make custom scrollbar?
CSS code as below. Only works in browsers based on webkit or blink kernel like chrome...
Still couldn't find a beautiful and general method for other browsers like firefox (my main browser ╯︿╰).
// scrollbar
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
// track
::-webkit-scrollbar-track {
}
// Handle style
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
// inactive style
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.1);
}
// hover style
::-webkit-scrollbar-thumb:hover{
background-color: rgba(0,0,0,0.3);
}
// active style
::-webkit-scrollbar-thumb:active{
background-color: rgba(0,0,0,0.4);
}
@L1H0n9Jun 挺漂亮的，可以分享配置吗？
基本上算是重写所有元素的配色了，折腾了好久，这个是 next/source/css/_custom/custom.styl :
// Custom styles.
// post margin 响应式布局
@media (max-width:991px) {
.posts-expand .post-meta {
margin-bottom: 0.5em !important;
}
.post-button {
margin-top: 1em !important;
}
}
@media (min-width:992px) and (max-width:1199px) {
.posts-expand .post-meta {
margin-bottom: 1em !important;
}
.post-button {
margin-top: 1.4em !important;
}
}
@media (min-width:1200px){
.posts-expand .post-meta {
margin-bottom: 1.8em;
}
.post-button {
margin-top: 2em;
}
}
// IE自动隐藏滚动条
html {
-ms-overflow-style: -ms-autohiding-scrollbar;
}
// Chrome 取消滚动条占位
html {
overflow: overlay;
}
// webkit内核浏览器如Chrome等的自定义滚动条样式代码
// 滚动条宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
// 轨道样式
::-webkit-scrollbar-track {
}
// Handle样式
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0,0,0,0.2);
}
// 当前窗口未激活的情况下
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.1);
}
// hover到滚动条上
::-webkit-scrollbar-thumb:hover{
background-color: rgba(0,0,0,0.3);
}
// 滚动条按下
::-webkit-scrollbar-thumb:active{
background-color: rgba(0,0,0,0.4);
}
// RSS logo颜色
.feed-link a i {
color: #148285;
}
.feed-link a:hover i {
color: #2aa0a0;
}
// RSS 文字鼠标掠过颜色
.feed-link a:hover {
color: #2aa0a0;
}
// copyright 竖线颜色
.post-copyright {
border-left: 3px solid #148285;
border-radius: 3px;
}
// 所有超链接下划线颜色
a {
border-bottom: 1px solid #cccccc;
}
// 正文超链接掠过显示为主题颜色
.post-body p a{
&:hover {
color: #148285;
}
}
// 日期去掉下划虚线
.posts-expand .post-meta time {
border-bottom: 1px #999;
cursor: auto;
}
// 友链默认下划线颜色 #cccccc
.sidebar a, .sidebar .exturl {
border-bottom-color: #cccccc;
}
// 友链下划线鼠标停留颜色
.sidebar a:hover, .sidebar .exturl:hover {
// color: #148285;
border-bottom-color: #148285;
}
// toc 菜单鼠标停留变色
.post-toc ol a:hover {
color: #148285;
border-bottom-color: #148285;
}
// 副标题字体大小及颜色
.site-subtitle {
font-size: 14px;
color: #fff;
}
// gitalk样式
.gt-container .gt-link {
border-bottom: 1px dotted #148285 !important;
}
.gt-container a {
color: #148285 !important;
}
.gt-container a:hover {
color: #2aa0a0 !important;
border-color: #2aa0a0 !important;
}
.gt-container .gt-svg svg {
fill: #148285 !important;
}
.gt-container .gt-ico-github svg {
fill: inherit !important;
}
.gt-container .gt-btn {
border: 1px solid #148285 !important;
background-color: #148285 !important;
}
.gt-container .gt-btn:hover {
background-color: #2aa0a0 !important;
border: 1px solid #2aa0a0 !important;
}
.gt-container .gt-btn-preview {
background-color: #fff !important;
color: #148285 !important;
}
.gt-container .gt-btn-preview:hover {
background-color: #f2f2f2 !important;
border-color: #148285 !important;
}
.gt-container .gt-popup .gt-action.is--active::before {
background: #fff !important;
}
.gt-container a.is--active {
color: #333 !important;
}
.gt-container .gt-header-textarea {
background-color: #eee0 !important;
}
.gt-container .gt-header-textarea:hover {
background-color: #fbfbfb !important;
}
.gt-container.gt-input-focused:after {
opacity: 0 !important;
}
.gt-container.gt-input-focused .gt-header-textarea {
background-color: #fbfbfb !important;
}
其中包括gitalk的重新定义样式，然后修改一下颜色映射：
next/source/css/_variables/base.styl 中
$black-deep = #148285 //#222 //修改主颜色
可能还有其他改动在源文件直接改的没有一一记录了。供参考。
