f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

Optimized the dark-mode toggle

Browse Source
This commit is contained in:
Cotes Chung
2020-02-14 23:36:38 +08:00
parent a53afb912f
commit 65040ddd90
5 changed files with 78 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/_dark/dark-main.scss
View File

@@ -100,19 +100,43 @@
}
/* Light scheme prefered (= dark scheme not prefered)
* -> dark scheme triggered with <html class="dark-mode">
*/
html.dark-mode {
@include dark-scheme;
@mixin light-mode-invisible {
*[light-mode-invisible] {
display: none;
}
}
@mixin dark-mode-invisible {
*[dark-mode-invisible] {
display: none;
}
}
@media (prefers-color-scheme: light) {
html:not([mode]), html[mode=light] {
@include light-mode-invisible;
}
html[mode=dark] {
@include dark-scheme;
@include dark-mode-invisible;
}
} // light prefers
@media (prefers-color-scheme: dark) {
/* Dark scheme prefered
* -> light scheme triggered with <html class="light-mode">
*/
html:not(.light-mode) {
html:not([mode]), html[mode=dark] {
@include dark-scheme;
@include dark-mode-invisible;
}
}
html[mode=light] {
@include light-mode-invisible;
}
} // dark prefers

10
assets/css/_dark/dark-syntax.scss
View File

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

4
assets/css/syntax.scss
View File

@@ -182,13 +182,13 @@ div.language-terminal.highlighter-rouge td.rouge-code {
}
@media (prefers-color-scheme: light) {
html:not(.dark-mode) {
html:not([mode=dark]) {
@include light-syntax-base;
}
}
@media (prefers-color-scheme: dark) {
html.light-mode {
html[mode=light] {
@include light-syntax-base;
}
}