asandikci.com/web
1
0
Fork 0
Code Issues 10 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 */ /* sidebar */
--nav-cursor: rgb(183, 182, 182); --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 */ /* common color */
--text-color: rgb(175, 176, 177); --text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124);
--link-color: rgb(138, 180, 248); --link-color: rgb(138, 180, 248);
--link-underline-color: rgb(99, 131, 182);
--main-border: rgb(63, 65, 68); --main-border: rgb(63, 65, 68);
--button-bg: rgb(39, 40, 33); --button-bg: rgb(39, 40, 33);
--blockquote-border: rgb(93, 95, 82); --blockquote-border: rgb(93, 95, 82);
@ -34,6 +36,10 @@
--card-header-bg: rgb(51, 50, 50); --card-header-bg: rgb(51, 50, 50);
--relate-post-title: rgb(164, 175, 181); --relate-post-title: rgb(164, 175, 181);
/* Home page */
--btn-active-bg: #1c345e;
--btn-active-border-color: #8ab4f8;
/* posts */ /* posts */
--toc-highlight: rgb(116, 178, 243); --toc-highlight: rgb(116, 178, 243);
--tag-bg: rgb(41, 40, 40); --tag-bg: rgb(41, 40, 40);

12
assets/css/home.scss
View file

@ -55,7 +55,7 @@
} }
.page-item .page-link { .page-item .page-link {
color: #555555; color: var(--text-color, #555555);
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
padding: 0; padding: 0;
@ -73,7 +73,8 @@
} }
.page-item.active .page-link { .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; box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
color: var(--text-color, #f8f8f8); color: var(--text-color, #f8f8f8);
} }
@ -131,11 +132,4 @@
#post-list { #post-list {
padding-right: 0; 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 { body {
line-height: 1.75rem; line-height: 1.75rem;
background: #fafafa; background: var(--main-wrapper-bg, #fafafa);
color: var(--text-color, #212529); color: var(--text-color, #212529);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
@ -291,7 +291,7 @@ body {
} }
#search-wrapper+a { /* 'Cancel' link */ #search-wrapper+a { /* 'Cancel' link */
color: #2a408e; color: var(--link-color, #2a408e);
margin-left: 1rem; margin-left: 1rem;
display: none; display: none;
} }
@ -553,7 +553,7 @@ footer .license a {
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
background: var(--button-bg, #fff); background: var(--button-bg, #fff);
color: #686868; color: var(--text-color, #686868);
height: 2.6em; height: 2.6em;
width: 2.7em; width: 2.7em;
border-radius: 50%; border-radius: 50%;
@ -662,7 +662,7 @@ a.reversefootnote {
.post-content a { .post-content a {
color: var(--link-color, #2a408e); 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, p>a, span>a,
@ -749,7 +749,7 @@ table tbody td {
.post-meta a { .post-meta a {
color: var(--link-color, #2a408e); 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) { .post-meta a:not(:last-child) {
@ -821,7 +821,7 @@ table tbody td {
} }
.btn-box-shadow { .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 { .topbar-up {

4
assets/css/post.scss
View file

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