From 414b8f97ce9a4cabaa6aa2c4d4594c41ba7a8a36 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 5 Sep 2023 00:34:35 +0800 Subject: [PATCH] refactor(ui): optimize the color scheme --- _sass/addon/commons.scss | 4 +++- _sass/colors/syntax-dark.scss | 4 ++-- _sass/colors/typography-dark.scss | 21 +++++++++++---------- _sass/colors/typography-light.scss | 19 +++++++++++-------- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index fd2dfde..2be59c7 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -696,6 +696,7 @@ $btn-mb: 0.5rem; width: $sidebar-width; z-index: 99; background: var(--sidebar-bg); + border-right: 1px solid var(--sidebar-border-color); /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { @@ -835,6 +836,7 @@ $btn-mb: 0.5rem; display: flex; align-items: center; justify-content: center; + box-shadow: var(--sidebar-border-color) 0 0 0 1px; &:hover { background-color: var(--sidebar-hover-bg); @@ -868,7 +870,7 @@ $btn-mb: 0.5rem; @extend %no-cursor; @include ml-mr(calc(($btn-gap - $btn-border-width) / 2)); - background-color: var(--sidebar-muted-color); + background-color: var(--sidebar-btn-color); content: ''; width: $btn-border-width; height: $btn-border-width; diff --git a/_sass/colors/syntax-dark.scss b/_sass/colors/syntax-dark.scss index b3a1ca5..f40c5ed 100644 --- a/_sass/colors/syntax-dark.scss +++ b/_sass/colors/syntax-dark.scss @@ -5,9 +5,9 @@ @mixin dark-syntax { --language-border-color: #2d2d2d; --highlight-bg-color: #151515; - --highlighter-rouge-color: #ff6e4e; + --highlighter-rouge-color: #c9def1; --highlight-lineno-color: #808080; - --inline-code-bg: #272822; + --inline-code-bg: #323238; --code-color: #b0b0b0; --code-header-text-color: #6a6a6a; --code-header-muted-color: #353535; diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss index 715fbd9..ff55628 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/colors/typography-dark.scss @@ -10,9 +10,9 @@ /* Common color */ --text-color: rgb(175, 176, 177); - --text-muted-color: rgb(125, 136, 146); + --text-muted-color: #868686; --heading-color: #cccccc; - --label-color: #a4a4c2; + --label-color: #a7a7a7; --blockquote-border-color: rgb(66, 66, 66); --blockquote-text-color: #868686; --link-color: rgb(138, 180, 248); @@ -22,7 +22,7 @@ --btn-backtotop-color: var(--text-color); --btn-backtotop-border-color: var(--btn-border-color); --btn-box-shadow: var(--main-bg); - --card-header-bg: rgb(48, 48, 48); + --card-header-bg: #292929; --checkbox-color: rgb(118, 120, 121); --checkbox-checked-color: var(--link-color); --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); @@ -35,12 +35,13 @@ /* Sidebar */ --site-title-color: #717070; - --site-subtitle-color: #6d6c6b; - --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); - --sidebar-muted-color: #6d6c6b; + --site-subtitle-color: #868686; + --sidebar-bg: #1e1e1e; + --sidebar-border-color: #292929; + --sidebar-muted-color: #868686; --sidebar-active-color: rgb(255, 255, 255, 0.95); - --sidebar-hover-bg: rgb(54, 54, 54, 0.33); - --sidebar-btn-bg: rgb(84, 83, 83, 0.3); + --sidebar-hover-bg: #262626; + --sidebar-btn-bg: #232328; --sidebar-btn-color: #787878; --avatar-border-color: rgb(206, 206, 206, 0.9); @@ -61,7 +62,7 @@ /* Posts */ --toc-highlight: rgb(116, 178, 243); --tag-hover: rgb(43, 56, 62); - --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */ + --tb-odd-bg: #252526; /* odd rows of the posts' table */ --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ --tb-border-color: var(--tb-odd-bg); --footnote-target-bg: rgb(63, 81, 181); @@ -87,8 +88,8 @@ /* tags */ --tag-border: rgb(59, 79, 88); --tag-shadow: rgb(32, 33, 33); - --search-tag-bg: var(--tag-bg); --dash-color: rgb(63, 65, 68); + --search-tag-bg: #292828; /* categories */ --categories-border: rgb(64, 66, 69, 0.5); diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index 07c31db..f0cd983 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -11,11 +11,11 @@ /* Common color */ --text-color: #34343c; --text-muted-color: #757575; - --heading-color: black; - --label-color: #4d4d5b; + --heading-color: #2a2a2a; + --label-color: #585858; --blockquote-border-color: #eeeeee; --blockquote-text-color: #757575; - --link-color: #0153ab; + --link-color: #0056b2; --link-underline-color: #dee2e6; --button-bg: #ffffff; --btn-border-color: #e9ecef; @@ -40,6 +40,7 @@ --site-title-color: rgb(113, 113, 113); --site-subtitle-color: #717171; --sidebar-bg: #f6f8fa; + --sidebar-border-color: #efefef; --sidebar-muted-color: #545454; --sidebar-active-color: #1d1d1d; --sidebar-hover-bg: rgb(223, 233, 241, 0.64); @@ -51,7 +52,6 @@ --topbar-bg: rgb(255, 255, 255, 0.7); --topbar-text-color: rgb(78, 78, 78); --search-wrapper-border-color: rgb(240, 240, 240); - --search-tag-bg: #f8f9fa; --search-icon-color: #c2c6cc; --input-focus-border-color: #b8b8b8; @@ -63,16 +63,13 @@ --btn-text-color: #676666; /* Posts */ - --toc-highlight: #47566c; + --toc-highlight: #0550ae; --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, rgba(211, 209, 209, 0.15) 0 0 0 1px; --footnote-target-bg: lightcyan; - --tag-border: #dee2e6; - --tag-shadow: var(--btn-border-color); - --tag-hover: rgb(222, 226, 230); --tb-odd-bg: #fbfcfd; --tb-border-color: #eaeaea; --dash-color: silver; @@ -89,6 +86,12 @@ --prompt-danger-bg: rgb(248, 215, 218, 0.56); --prompt-danger-icon-color: #df3c30; + /* Tags */ + --tag-border: #dee2e6; + --tag-shadow: var(--btn-border-color); + --tag-hover: rgb(222, 226, 230); + --search-tag-bg: #f8f9fa; + [class^='prompt-'] { --link-underline-color: rgb(219, 216, 216); }