From 7e92a3224340d3610c71f992260bc61e11fa169d Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 10 Feb 2020 05:46:29 +0800 Subject: [PATCH] Code style merge and resume some colors. --- assets/css/_dark/dark-main.scss | 48 +++++++++++++++++-------------- assets/css/_dark/dark-syntax.scss | 13 ++++----- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss index f57f4bf..51dcb06 100644 --- a/assets/css/_dark/dark-main.scss +++ b/assets/css/_dark/dark-main.scss @@ -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 + * -> dark scheme triggered with */ -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 + * -> light scheme triggered with */ - 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; } } + } diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss index 4217d36..621d36a 100644 --- a/assets/css/_dark/dark-syntax.scss +++ b/assets/css/_dark/dark-syntax.scss @@ -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; } }