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

Code style merge and resume some colors.

Browse source
This commit is contained in:
Cotes Chung 2020-02-10 05:46:29 +08:00
parent 7728cc4d3e
commit 7e92a32243
2 changed files with 33 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
* MIT Licensed
*/
@mixin darkScheme() {
@mixin dark-scheme {
/* framework */
--main-wrapper-bg: rgb(27, 27, 30);
--topbar-wrapper-bg: rgb(39, 40, 43);
@ -24,8 +24,8 @@
/* common color */
--text-color: rgb(175, 176, 177);
--text-muted-color: rgb(107, 116, 124);
--link-color: #3db5c2;
--link-underline-color: #3db5c2;
--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(66, 66, 66);
@ -57,59 +57,65 @@
--timeline-node-bg: rgb(150, 152, 156);
}
/* Light scheme prefered (= dark scheme not prefered)
* -> dark scheme triggered with <body class="color-scheme-dark">
* -> dark scheme triggered with <html class="dark-mode">
*/
body.color-scheme-dark{
html.dark-mode {
/* Dark scheme */
@include darkScheme();
@include dark-scheme;
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-dark-hidden {
.dark-mode-hidden {
display: none;
}
.color-scheme-light-hidden {
.light-mode-hidden {
display: initial;
}
}
body:not(.color-scheme-dark) {
/* Light scheme */
html:not(.dark-mode) {
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-light-hidden {
.light-mode-hidden {
display: none;
}
.color-scheme-dark-hidden {
.dark-mode-hidden {
display: initial;
}
}
@media (prefers-color-scheme: dark) {
/* Dark scheme prefered
* -> light scheme triggered with <body class="color-scheme-light">
* -> light scheme triggered with <html class="light-mode">
*/
body:not(.color-scheme-light) {
html:not(.light-mode) {
/* Dark scheme */
@include darkScheme();
@include dark-scheme;
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-dark-hidden {
.dark-mode-hidden {
display: none;
}
.color-scheme-light-hidden {
.light-mode-hidden {
display: initial;
}
}
body.color-scheme-light {
html.light-mode {
/* Light scheme */
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-light-hidden {
.light-mode-hidden {
display: none;
}
.color-scheme-dark-hidden {
.dark-mode-hidden {
display: initial;
}
}
}

13
assets/css/_dark/dark-syntax.scss
View file

@ -6,8 +6,7 @@
* MIT Licensed
*/
@mixin darkSchemeHighlight() {
@mixin dark-sheme {
/* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
--highlight-pre-bg: #272822;
--highlight-hll-bg: #272822;
@ -87,13 +86,13 @@
}
@media (prefers-color-scheme: dark) {
body:not(.color-scheme-light) {
@include darkSchemeHighlight();
html:not(.light-mode) {
@include dark-sheme;
}
}
@media not (prefers-color-scheme: dark) {
body.color-scheme-dark {
@include darkSchemeHighlight();
@media (prefers-color-scheme: light) {
html.dark-mode {
@include dark-sheme;
}
}