fix(style): dark mode for valine
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 */
|
||||
Reference in New Issue
Block a user