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

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

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