asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Dark mode color optimization.

Browse source
This commit is contained in:
Cotes Chung 2020-01-06 23:50:16 +08:00
parent ff9663f376
commit 8fcf1e35fc
4 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/_dark/dark-main.scss
View file

@ -20,11 +20,13 @@
/* sidebar */
--nav-cursor: rgb(183, 182, 182);
--sidebar-bg: radial-gradient(circle, #231c4c 0%, #1d1f27 100%);
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
/* common color */
--text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124);
--link-color: rgb(138, 180, 248);
--link-underline-color: rgb(99, 131, 182);
--main-border: rgb(63, 65, 68);
--button-bg: rgb(39, 40, 33);
--blockquote-border: rgb(93, 95, 82);
@ -34,6 +36,10 @@
--card-header-bg: rgb(51, 50, 50);
--relate-post-title: rgb(164, 175, 181);
/* Home page */
--btn-active-bg: #1c345e;
--btn-active-border-color: #8ab4f8;
/* posts */
--toc-highlight: rgb(116, 178, 243);
--tag-bg: rgb(41, 40, 40);

12
assets/css/home.scss
View file

@ -55,7 +55,7 @@
}
.page-item .page-link {
color: #555555;
color: var(--text-color, #555555);
width: 2.5rem;
height: 2.5rem;
padding: 0;
@ -73,7 +73,8 @@
}
.page-item.active .page-link {
background-color: #2a408e;
background-color: var(--btn-active-bg, #2a408e);
border-color: var(--btn-active-border-color, #007bff);
box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
color: var(--text-color, #f8f8f8);
}
@ -131,11 +132,4 @@
#post-list {
padding-right: 0;
}
}
@media (prefers-color-scheme: dark) {
.page-item.active .page-link {
background-color: #203a96;
border-color: #0252a9;
}
}

12
assets/css/main.scss
View file

@ -23,7 +23,7 @@ html {
body {
line-height: 1.75rem;
background: #fafafa;
background: var(--main-wrapper-bg, #fafafa);
color: var(--text-color, #212529);
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
@ -291,7 +291,7 @@ body {
}
#search-wrapper+a { /* 'Cancel' link */
color: #2a408e;
color: var(--link-color, #2a408e);
margin-left: 1rem;
display: none;
}
@ -553,7 +553,7 @@ footer .license a {
cursor: pointer;
position: fixed;
background: var(--button-bg, #fff);
color: #686868;
color: var(--text-color, #686868);
height: 2.6em;
width: 2.7em;
border-radius: 50%;
@ -662,7 +662,7 @@ a.reversefootnote {
.post-content a {
color: var(--link-color, #2a408e);
border-bottom: 1px dotted var(--link-color, #c2c6cc);
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
}
p>a, span>a,
@ -749,7 +749,7 @@ table tbody td {
.post-meta a {
color: var(--link-color, #2a408e);
border-bottom: 1px dotted var(--link-color, #c2c6cc);
border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
}
.post-meta a:not(:last-child) {
@ -821,7 +821,7 @@ table tbody td {
}
.btn-box-shadow {
box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important;
box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #eaeaea) !important;
}
.topbar-up {

4
assets/css/post.scss
View file

@ -79,7 +79,7 @@
}
.post-navigation a::before {
color: gray;
color: var(--text-muted-color, gray);
font-size: .65rem;
text-transform: uppercase;
}
@ -157,7 +157,7 @@
}
#related-posts .timeago {
color: rgba(30,55,70,.4);
color: var(--text-muted-color, rgba(30,55,70,.4));
}
#related-posts p {