zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: support auto dark mode

Browse source
This commit is contained in:
Sivan 2020-05-04 23:29:03 +08:00
parent 6de2d2c98d
commit 47a681d986
18 changed files with 895 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

18
lib/_base.scss
View file

@ -29,8 +29,12 @@
padding-block-end: $std-block-unit / 2;
padding-inline-start: $std-inline-unit;
padding-inline-end: $std-inline-unit;
background-color: rgba(0, 0, 0, 0.054);
//border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.054);
@media (prefers-color-scheme: dark) {
background-color: hsla(0, 0%, 100%, 0.054);
}
}
figure {
@ -52,7 +56,11 @@
margin-inline-start: auto;
margin-inline-end: auto;
border: 0;
background-color: #ddd;
background-color: hsl(0, 0%, 80%);
@media (prefers-color-scheme: dark) {
background-color: hsl(0, 0%, 25%);
}
}
p {
@ -78,8 +86,12 @@
font-family: $font-family-mono;
white-space: pre;
word-wrap: normal;
background-color: rgba(0, 0, 0, 0.054);
border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.054);
@media (prefers-color-scheme: dark) {
background-color: hsla(0, 0%, 100%, 0.054);
}
code {
margin: 0;

19
lib/_inline.scss
View file

@ -72,7 +72,12 @@
padding-inline-end: 1px;
margin-inline-start: 1px;
margin-inline-end: 1px;
background-color: rgba(255, 247, 0, 0.88);
background-color: hsla(58, 100%, 50%, 0.88);
color: inherit;
@media (prefers-color-scheme: dark) {
background-color: hsla(58, 100%, 15%, 0.88);
}
}
// 设置引用文本为中文引号
@ -125,7 +130,11 @@
&:target,
a:target {
background-color: #def;
background-color: hsl(210, 100%, 93%);
@media (prefers-color-scheme: dark) {
background-color: hsl(210, 40%, 38%);
}
}
}
@ -142,9 +151,13 @@
u[title] {
cursor: help;
border-block-end-color: rgba(0, 0, 0, 0.54);
border-block-end-width: 3px;
border-block-end-style: double;
border-block-end-color: hsla(0, 0%, 0%, 0.54);
@media (prefers-color-scheme: dark) {
border-block-end-color: hsla(0, 0%, 100%, 0.54);
}
}
// 默认禁用中文斜体 https://www.zhihu.com/question/20120243

18
lib/_table.scss
View file

@ -6,22 +6,34 @@
table {
box-sizing: border-box;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #ccc;
margin-block-start: $std-block-unit / 2;
margin-block-end: $std-block-unit;
margin-inline-start: auto;
margin-inline-end: auto;
border-collapse: collapse;
border-width: 1px;
border-style: solid;
border-color: hsl(0, 0%, 80%);
word-break: break-word;
@media (prefers-color-scheme: dark) {
border-color: hsl(0, 0%, 25%);
}
}
th,
td {
border: 1px solid #ccc;
padding-block-start: $std-block-unit / 4;
padding-block-end: $std-block-unit / 4;
padding-inline-start: $std-inline-unit / 2;
padding-inline-end: $std-inline-unit / 2;
border-width: 1px;
border-style: solid;
border-color: hsl(0, 0%, 80%);
@media (prefers-color-scheme: dark) {
border-color: hsl(0, 0%, 25%);
}
}
caption {

13
lib/helpers/_block.scss
View file

@ -70,11 +70,16 @@
// 页脚
#{$root-selector}-fn {
margin-block-start: 59px;
border-block-start: 1px solid #ccc;
border-block-start: 1px solid;
border-block-start-color: hsl(0, 0%, 80%);
font-size: $font-size-small;
font-family: $font-family-hei;
line-height: $line-height-size-normal;
@media (prefers-color-scheme: dark) {
border-block-start-color: hsl(0, 0%, 25%);
}
ol {
margin-block-start: $std-block-unit / 2;
margin-block-end: 0;
@ -82,7 +87,11 @@
li {
&:target {
background-color: #def;
background-color: hsl(210, 100%, 93%);
@media (prefers-color-scheme: dark) {
background-color: hsl(210, 40%, 38%);
}
}
}
}