Hexo暗色主题优化

前言

优化Hexo暗色主题，是在matery.css和其他文件(指TOC目录的配色居然在post-detail-toc.ejs中)中更改配色。

如果你不想自己配的话，可以直接下载我的css.zip替换至 \themes\hexo-theme-matery\source\css\matery.css和themes\hexo-theme-matery\layout\_partial\post-detail-toc.ejs 。
而且最新版本我发现了可以更改about页面等不能直接设置css样式的改色方式。

本文会不定期解析博客中各个元素的类名及其配色思路( 真的不定期 ) 。

如果你不知道某个元素的css怎么修改，可以使用开发者工具F12，逐一寻找需要修改的元素，找到它的类。

思路

我将从主页开始自上而下分析需要修改哪些元素，以下都是在我的matery.css基础下编辑的。
通过几天里修改配色的经验，页面中元素的样式基本都可以在css文件中搞定，但还是有些是因为个人知识的不足而没能修改。比如card元素有hover效果(在js文件中)但移除没有效果，就很难受。

1.主页

1.1.导航栏

1.1.1.背景颜色更换

.bg-color {
    background-image: linear-gradient(to right, #000000 0%, #000000 100%);
    opacity: 1.0;
}

1.1.2.文字颜色更换

/待更新/

1.2.文章卡片

样式代码不再赘述，直接套用我的代码即可。
想要实现hover图片放大效果只需要给图片加一个hover效果和给父层div设置一个 overflow:hidden; 即可

注意
更改文章卡片后，在文章名右侧会有一个突兀的方框，只需要做如下改动即可
在 .block-with-text:after 和 .block-with-text:before 中注释掉 content: "...";

1.3.右侧滑动条

等待更新

2.文章页

2.1.文章封面

在路径 blog\themes\hexo-theme-matery\layout\_partial\post-cover.ejs 中第在30行附近。

<div class="bg-cover pd-header post-cover" style="这里可以换成你的壁纸路径，或者直接留空">

2.2.文章页面

文章页面的样式大多都是上方修改card样式后套用card样式。
但在页面中会出现一些没被改色的元素，可以通过F12找到相关类并修改。

2.2.1.文章发布详情栏

#artDetail .post-info .post-date {
    color: rgba(255, 255, 255, 0.8);
}

/* 文章发布详情栏 */
#artDetail .post-info {
    color: rgba(255, 255, 255, 0.8);
}

2.2.2.文章内特殊样式

有一些样式是需要你手动写入CSS中的。
例如code块

code {
    padding: 1px 5px;
    top: 13px !important;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    font-size: 0.91rem;
    color: #000;
    background-color: rgba(255,255,255,0.8);
    border-radius: 2px;
}

2.3.TOC导航页

/待更新/

3.分类，归档，关于等细致美化

3.1.分类

众所周知，这个页面和其他的页面的一些配色不能直接更改。

在看了一天源代码后，我发现这个配色是在ejs文件中被设置的。

ejs文件位于 themes\主题名\layout\_widget\category-radar.ejs

let option = {
    title: {
        left: 'center',
        text: '<%= __("categoryRadarTitle")  %>',
        textStyle: {
            fontWeight: 500,
            fontSize: 22,
------------color: 'rgba(255,255,255,0.8)'-----------(这是标题颜色)
        }
    },
    tooltip: {},
    radar: {
        name: {
            textStyle: {
----------------color: 'rgba(255,255,255,0.8)'-------(这是雷达图四周文字的颜色)
            }
        },
        indicator: <%- indicatorData %>,
        nameGap: 5,
        center: ['50%','55%'],
        radius: '66%'
    },

3.2.归档

与上面类似
ejs文件位于themes\主题名\layout\_widget\post-calendar.ejs

let option = {
    title: {
        top: 0,
        text: '<%- titleText %>',
        left: 'center',
        textStyle: {
            color: 'rgba(255,255,255,0.8)'
        }
    },

visualMap: {
    show: true,
    showLabel: true,
    categories: [0, 1, 2, 3, 4],
    calculable: true,
    inRange: {
        symbol: 'rect',
        color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
    },
    itemWidth: 12,
    itemHeight: 12,
    orient: 'horizontal',
    left: 'center',
    bottom: 0,
    textStyle: {color: 'rgba(255,255,255,0.8)'}
},

    calendar: [{
        left: 'center',
        range: <%- rangeArr %>,
        cellSize: [13, 13],
        splitLine: {
            show: false
        },
        itemStyle: {
            color: '#196127',
            borderColor: '#fff',
            borderWidth: 2
        },
        yearLabel: {
            show: false
        },
        monthLabel: {
            nameMap: '<%- nameMap %>',
            fontSize: 11,
            textStyle: {color: 'rgba(255,255,255,0.8)'}
        },
        dayLabel: {
            formatter: '{start}  1st',
            nameMap: '<%- nameMap %>',
            fontSize: 11,
            textStyle: {color: 'rgba(255,255,255,0.8)'}
        }
    }],
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 0,
        data: <%- datePosts %>
    }]

};

3.3.about

与以上类似，但在修改图表的xy轴颜色时需要用到axisLabel:{color:'rgba(255,255,255,0.8)'}