fix(style): dark mode for valine

This commit is contained in:
Dillon
2020-03-16 12:15:21 +08:00
parent e4f81f9e7f
commit 371150ceef
2 changed files with 43 additions and 12 deletions

View File

@@ -1,36 +1,67 @@
// Color of the background
$global-background-color: #fff !default;
$global-background-color-dark: #292a2d !default;
// Color of the text
$global-font-color: #161209 !default;
$global-font-color-dark: #a9a9b3 !default;
// Color of the border
$global-border-color: #dcdcdc !default;
$global-border-color-dark: #4a4b50 !default;
// Color of the single link
$single-link-color: #2d96bd !default;
$single-link-color-dark: #55bde2 !default;
// Color of the code background
$code-background-color: #f5f5f5 !default;
$code-background-color-dark: #272C34 !default;
.dark-theme {
// copied from https://github.com/xCss/Valine/issues/221
.v *,
.v .vwrap .vheader .vinput,
.v .vlist .vcard .vh,
.v .vlist .vcard .vquote {
border-color: $global-border-color-dark;
}
.v blockquote {
border-left: .25rem solid #00bfa5;
}
.v *,
.v .vwrap input,
.v .vwrap input::placeholder,
.v .veditor,
.v .veditor::placeholder,
.v a,
.v a:hover {
color: hsla(0,0%,100%,.75);
opacity: 1;
color: $global-font-color-dark;
}
.v .vbtn {
color: hsla(0,0%,100%,.75);
background: #333;
border: none;
color: $global-font-color-dark;
background: darken($global-background-color-dark, 3%);
border-color: $global-background-color-dark;
}
.v .vbtn:hover {
color: #3090e4;
border-color: #3090e4;
color: $single-link-color-dark;
border-color: $single-link-color-dark;
}
.v .vlist .vcard .vhead .vsys {
background: #333;
background: darken($code-background-color-dark, 3%);
}
.v code, .v pre {
background: #272C34;
background: $code-background-color-dark;
}
.v .vmark .vinput {
color: #0e0f10;
color: darken($global-background-color-dark, 3%);
}
}
.v blockquote {
border-left: .25rem solid #00bfa5;
}
.v code, .v pre {
text-align: left;
}

View File

@@ -1,3 +1,3 @@
.dark-theme .v *,.dark-theme .v .vwrap input,.dark-theme .v .vwrap input::placeholder,.dark-theme .v .veditor,.dark-theme .v .veditor::placeholder,.dark-theme .v a,.dark-theme .v a:hover{color:rgba(255,255,255,0.75);opacity:1}.dark-theme .v .vbtn{color:rgba(255,255,255,0.75);background:#333;border:none}.dark-theme .v .vbtn:hover{color:#3090e4;border-color:#3090e4}.dark-theme .v .vlist .vcard .vhead .vsys{background:#333}.dark-theme .v code,.dark-theme .v pre{background:#272C34}.dark-theme .v .vmark .vinput{color:#0e0f10}.v code,.v pre{text-align:left}
.dark-theme .v *,.dark-theme .v .vwrap .vheader .vinput,.dark-theme .v .vlist .vcard .vh,.dark-theme .v .vlist .vcard .vquote{border-color:#4a4b50}.dark-theme .v blockquote{border-left:.25rem solid #00bfa5}.dark-theme .v *,.dark-theme .v .vwrap input,.dark-theme .v .vwrap input::placeholder,.dark-theme .v .veditor,.dark-theme .v .veditor::placeholder,.dark-theme .v a,.dark-theme .v a:hover{color:#a9a9b3}.dark-theme .v .vbtn{color:#a9a9b3;background:#222325;border-color:#292a2d}.dark-theme .v .vbtn:hover{color:#55bde2;border-color:#55bde2}.dark-theme .v .vlist .vcard .vhead .vsys{background:#20252b}.dark-theme .v code,.dark-theme .v pre{background:#272C34}.dark-theme .v .vmark .vinput{color:#222325}.v blockquote{border-left:.25rem solid #00bfa5}.v code,.v pre{text-align:left}
/*# sourceMappingURL=valine.css.map */