From 58af2fefce087097bf8dd6ca40540f5263d0d494 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 12 Feb 2020 00:04:59 +0800 Subject: [PATCH] Finished the rest dark mode toggle job. --- _includes/dark-mode-toggle.html | 101 ++++++++++++++++++++++++++++++ assets/css/_dark/dark-main.scss | 86 ++++++++++++------------- assets/css/_dark/dark-syntax.scss | 2 +- assets/css/archives.scss | 7 --- assets/css/categories.scss | 22 ------- assets/css/post.scss | 12 ---- assets/css/syntax.scss | 14 ++++- 7 files changed, 154 insertions(+), 90 deletions(-) create mode 100644 _includes/dark-mode-toggle.html diff --git a/_includes/dark-mode-toggle.html b/_includes/dark-mode-toggle.html new file mode 100644 index 0000000..b60cdb2 --- /dev/null +++ b/_includes/dark-mode-toggle.html @@ -0,0 +1,101 @@ + + + + + \ No newline at end of file diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss index 51dcb06..939d923 100644 --- a/assets/css/_dark/dark-main.scss +++ b/assets/css/_dark/dark-main.scss @@ -46,6 +46,38 @@ --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */ --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ + /* posts' toc */ + nav[data-toggle=toc] .nav-link.active, + nav[data-toggle=toc] .nav-link.active:focus, + nav[data-toggle=toc] .nav-link.active:hover, + nav[data-toggle=toc] .nav>li>a:focus, + nav[data-toggle=toc] .nav>li>a:hover { + /* Override BS */ + color: var(--toc-highlight)!important; + border-left-color: var(--toc-highlight)!important; + } + + /* categories */ + .categories.card, + .list-group-item { + background-color: var(--card-bg); + } + + .categories .card-header { + background-color: var(--card-header-bg); + } + + .categories .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + border-color: var(--main-border); + } + + .categories .list-group-item:last-child { + border-bottom-color: var(--card-bg); + } + /* tags */ --tag-border: rgb(59, 79, 88); --tag-shadow: rgb(32, 33, 33); @@ -55,67 +87,27 @@ /* archives */ --timeline-node-bg: rgb(150, 152, 156); + + #archives li:nth-child(odd) { + background-image: linear-gradient(to left, + rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30)); + } + } /* Light scheme prefered (= dark scheme not prefered) * -> dark scheme triggered with */ html.dark-mode { - /* Dark scheme */ @include dark-scheme; - - // Hide element in dark color scheme - // (visible in light scheme) - .dark-mode-hidden { - display: none; - } - - .light-mode-hidden { - display: initial; - } -} - -html:not(.dark-mode) { - // Hide element in dark color scheme - // (visible in light scheme) - .light-mode-hidden { - display: none; - } - - .dark-mode-hidden { - display: initial; - } } @media (prefers-color-scheme: dark) { /* Dark scheme prefered - * -> light scheme triggered with + * -> light scheme triggered with */ html:not(.light-mode) { - /* Dark scheme */ @include dark-scheme; - // Hide element in dark color scheme - // (visible in light scheme) - .dark-mode-hidden { - display: none; - } - - .light-mode-hidden { - display: initial; - } } - - html.light-mode { - /* Light scheme */ - // Hide element in dark color scheme - // (visible in light scheme) - .light-mode-hidden { - display: none; - } - .dark-mode-hidden { - display: initial; - } - } - } diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss index 621d36a..fcbbbd6 100644 --- a/assets/css/_dark/dark-syntax.scss +++ b/assets/css/_dark/dark-syntax.scss @@ -86,7 +86,7 @@ } @media (prefers-color-scheme: dark) { - html:not(.light-mode) { + html:not(.light-mode) { /* could be html.dark-mode */ @include dark-sheme; } } diff --git a/assets/css/archives.scss b/assets/css/archives.scss index 7092881..10784ff 100644 --- a/assets/css/archives.scss +++ b/assets/css/archives.scss @@ -147,10 +147,3 @@ letter-spacing: 0; } } - -@media (prefers-color-scheme: dark) { - #archives li:nth-child(odd) { - background-image: linear-gradient(to left, - rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30)); - } -} diff --git a/assets/css/categories.scss b/assets/css/categories.scss index 7c711c6..9b1804f 100644 --- a/assets/css/categories.scss +++ b/assets/css/categories.scss @@ -64,25 +64,3 @@ -webkit-transform: rotate(-90deg); /* Safari 3-8 */ transform: rotate(-90deg); } - -@media (prefers-color-scheme: dark) { - .categories.card, - .list-group-item { - background-color: var(--card-bg); - } - - .categories .card-header { - background-color: var(--card-header-bg); - } - - .categories .list-group-item { - border-left: none; - border-right: none; - padding-left: 2rem; - border-color: var(--main-border); - } - - .categories .list-group-item:last-child { - border-bottom-color: var(--card-bg); - } -} diff --git a/assets/css/post.scss b/assets/css/post.scss index 13f636a..86412e4 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -269,15 +269,3 @@ margin-right: calc((100% - 1150px) / 8 + 300px); } } - -@media (prefers-color-scheme: dark) { - nav[data-toggle=toc] .nav-link.active, - nav[data-toggle=toc] .nav-link.active:focus, - nav[data-toggle=toc] .nav-link.active:hover, - nav[data-toggle=toc] .nav>li>a:focus, - nav[data-toggle=toc] .nav>li>a:hover { - /* Override BS */ - color: var(--toc-highlight)!important; - border-left-color: var(--toc-highlight)!important; - } -} diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 9a0091a..dffca78 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -165,7 +165,7 @@ div.language-terminal.highlighter-rouge td.rouge-code { padding: .8rem 1rem; } -@media (prefers-color-scheme: light) { +@mixin light-syntax-base { .highlight { -moz-box-shadow: inset 0 0 2px #c2c6cc; -webkit-box-shadow: inset 0 0 2px #c2c6cc; @@ -180,3 +180,15 @@ div.language-terminal.highlighter-rouge td.rouge-code { border: 1px solid #e9ecef; } } + +@media (prefers-color-scheme: light) { + html:not(.dark-mode) { + @include light-syntax-base; + } +} + +@media (prefers-color-scheme: dark) { + html.light-mode { + @include light-syntax-base; + } +}