0%

黑化 Next 主题

Next 主题太亮了,整一个深色版的,晚上看不刺眼。
方法是使用 Next 的自定义样式文件。通过修改./themes/custom.styl文件,对全站样式进行改动,同时调整一下代码高亮的配色,在 Next 配置文件中将 highlight_theme 参数改为 night eighties。
下面贴出暗黑模式的css,配色参考油管 Dark mode。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
// Stylus
$dark-bg = rgba(18, 18, 18,1);
$dark-fg = rgba(26, 26, 26,1);
$dark-potrait = rgba(39, 39, 39,1);
$dark-potrait-text = rgba(144, 144, 144,1);
$dark-plain-text = rgba(255, 255, 255,1);
$dark-link-text = rgba(62, 166, 255,1);
$dark-hover = rgba(72, 72, 72, 1);
$dark-active = rgba(75, 75, 75, 1);
$dark-accent = rgba(91, 192, 190, 1);

$dark-md-h1-h3 = #dbdbdb
$dark-md-h4-h6 = #bebebe
$dark-md-link = #5584aa

@media (prefers-color-scheme: dark)
$text-color = $dark-link-text

// Global link color.
$link-color = $dark-link-text
$link-hover-color = $dark-link-text
$link-decoration-color = $dark-link-text
$link-decoration-hover-color = $dark-link-text

// Global border color.
$border-color = white

// Background color for <body>
$body-bg-color = $dark-bg

// Selection
$selection-bg = $dark-plain-text
$selection-color = $dark-link-text

$sidebar-nav-color = $dark-fg
// $sidebar-nav-hover-color = $whitesmoke
// $sidebar-highlight = $blue-bright

a
color: $link-color

h1,h2,h3
color $dark-md-h1-h3

h4,h5,h6
color $dark-md-h4-h6

body
background-color $dark-bg

.site-brand-wrapper
background-color $dark-potrait

.site-meta
color $dark-potrait-text

.brand,.site-author-name
color #ffffff

.header-inner
background-color $dark-fg

.sidebar,.sidebar-inner,.menu,.content-wrap
background-color $dark-fg

.menu .menu-item a
color $dark-potrait-text

.menu .menu-item-active a
background-color $dark-active
color white

.menu .menu-item a:hover
background-color $dark-hover
color white

.menu-item-active a, .menu .menu-item a:hover, .menu .menu-item span.exturl:hover
border-bottom-color: $dark-hover

.post-block p,
.post-title .post-title-link,
table
color $dark-plain-text

.post-body a
color $dark-md-link

.post-title .post-title-link a:hover
border-bottom-color $dark-plain-text!important

table > tbody > tr:nth-of-type(odd)
background-color $dark-potrait

.tag-cloud .tag-cloud-tags a
color $dark-plain-text!important

.pagination, .post-nav
border-top 1px solid $dark-potrait

.pagination .page-number.current
background-color $dark-potrait!important


.pagination .prev, .pagination .next, .pagination .page-number
border-top-color $dark-potrait

.pagination .prev:hover, .pagination .next:hover, .pagination .page-number:hover
border-top-color $dark-hover
color $dark-hover

.btn
background-color $dark-potrait

ul,ol
color $dark-plain-text

实现按浏览器配色自动切换颜色模式,参考Chrome 76 新特性。效果图即本站。
缺点:由于改了 Next 主题原有的文件,Upstream 的时候可能会有点麻烦。

To do:

  • 添加切换配色按钮
  • 尝试使用媒体查询针对不同浏览器配色模式进行自动适配
  • 将custom.styl加入.gitignore