From fc36f8b66de7ebe2c190a4a69bdb5eb167da875d Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 27 Jan 2022 04:41:19 +0800 Subject: [PATCH] Improve the color of prompts --- _sass/addon/commons.scss | 49 ++++++++++++++---------------- _sass/addon/module.scss | 1 - _sass/addon/syntax.scss | 37 +++++++++++----------- _sass/colors/dark-syntax.scss | 4 --- _sass/colors/dark-typography.scss | 2 +- _sass/colors/light-syntax.scss | 7 +++-- _sass/colors/light-typography.scss | 12 +++++--- 7 files changed, 53 insertions(+), 59 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e78a44a..033865e 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -3,35 +3,29 @@ */ @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap'); -@mixin mode-toggle($dark-mode: false) { - @if $dark-mode { - @include dark-scheme; - } @else { - @include light-scheme; - } -} +html { + @media (prefers-color-scheme: light) { + &:not([data-mode]), + [data-mode=light] { + @include light-scheme; + } -html:not([data-mode]), -html[data-mode=light] { - @include mode-toggle(); -} - -html[data-mode=dark] { - @include mode-toggle(true); -} - -@media (prefers-color-scheme: dark) { - html:not([data-mode]), - html[data-mode=dark] { - @include mode-toggle(true); + &[data-mode=dark] { + @include dark-scheme; + } } - html[data-mode=light] { - @include mode-toggle(); - } -} + @media (prefers-color-scheme: dark) { + &:not([data-mode]), + &[data-mode=dark] { + @include dark-scheme; + } + + &[data-mode=light] { + @include light-scheme; + } + } -:root { font-size: 16px; } @@ -109,10 +103,11 @@ blockquote { display: flex; border-left: 0; border-radius: 6px; - padding: 0.75rem 1rem; + padding: 0.75rem 1.2rem; + color: var(--prompt-text-color); &::before { - margin-right: 0.8rem; + margin-right: 1rem; font-family: "Font Awesome 5 Free"; text-align: center; width: 1.25rem; diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index b7f775a..3cd8223 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -146,7 +146,6 @@ @mixin prompt($type, $fw-icon, $icon-weight: 900) { &.prompt-#{$type} { background-color: var(--prompt-#{$type}-bg); - color: var(--prompt-text-color); &::before { content: $fw-icon; diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index dd7a000..ff8795f 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -5,23 +5,27 @@ @import "colors/light-syntax"; @import "colors/dark-syntax"; -html:not([data-mode]), -html[data-mode=light] { - @include light-syntax; -} +html { + @media (prefers-color-scheme: light) { + &:not([data-mode]), + [data-mode=light] { + @include light-syntax; + } -html[data-mode=dark] { - @include dark-syntax; -} - -@media (prefers-color-scheme: dark) { - html:not([data-mode]), - html[data-mode=dark] { - @include dark-syntax; + &[data-mode=dark] { + @include dark-syntax; + } } - html[data-mode=light] { - @include light-syntax; + @media (prefers-color-scheme: dark) { + &:not([data-mode]), + &[data-mode=dark] { + @include dark-syntax; + } + + &[data-mode=light] { + @include light-syntax; + } } } @@ -110,11 +114,6 @@ code { background-color: var(--inline-code-bg); } - [class^="prompt-"] & { - background-color: var(--prompt-code-bg); - color: var(--prompt-code-text-color); - } - &.filepath { background-color: inherit; color: var(--filepath-text-color); diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index d988ed5..8030487 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_sass/colors/dark-syntax.scss @@ -80,10 +80,6 @@ --clipboard-checked-color: #2bcc2b; --filepath-text-color: #bdbdbd; - /* the code of prompts */ - --prompt-code-bg: rgb(38 38 38 / 47%); - --prompt-code-text-color: var(--highlighter-rouge-color); - .highlight { .gp { color: #818c96; } } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index e7d6e2a..f4eb5f2 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -75,7 +75,7 @@ --prompt-warning-bg: rgb(90 69 3 / 95%); --prompt-warning-icon-color: rgb(255 165 0 / 80%); --prompt-danger-bg: rgb(86 28 8 / 80%); - --prompt-danger-icon-color: rgb(255 0 0 / 60%); + --prompt-danger-icon-color: #cd0202; /* tags */ --tag-border: rgb(59, 79, 88); diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index df5b24d..236e568 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -76,8 +76,9 @@ --code-header-icon-color: #d1d1d1; --clipboard-checked-color: #43c743; - /* the code of prompts */ - --prompt-code-bg: rgb(219 217 217 / 35%); - --prompt-code-text-color: rgb(78 78 84); + [class^=prompt-] { + --inline-code-bg: #fbfafa; + --highlighter-rouge-color: rgb(82 82 82); + } } /* light-syntax */ diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 1031ab5..8475368 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -68,13 +68,17 @@ --kbd-wrap-color: #bdbdbd; --kbd-text-color: var(--text-color); --kbd-bg-color: white; - --prompt-text-color: rgb(70 70 70 / 90%); + --prompt-text-color: rgb(46 46 46 / 77%); --prompt-note-bg: rgb(123 247 144 / 20%); - --prompt-note-icon-color: green; + --prompt-note-icon-color: #03b303; --prompt-warning-bg: rgb(255 243 205); - --prompt-warning-icon-color: rgb(215 138 24); + --prompt-warning-icon-color: #ef9c03; --prompt-danger-bg: rgb(248 215 218 / 56%); - --prompt-danger-icon-color: #b31d1d; + --prompt-danger-icon-color: #df3c30; + + [class^=prompt-] { + --link-underline-color: rgb(219 216 216); + } /* Categories */ --categories-hover-bg: var(--btn-border-color);