Finished the rest dark mode toggle job.
This commit is contained in:
parent
7e92a32243
commit
58af2fefce
7 changed files with 154 additions and 90 deletions
101
_includes/dark-mode-toggle.html
Normal file
101
_includes/dark-mode-toggle.html
Normal file
|
@ -0,0 +1,101 @@
|
|||
<!--
|
||||
Switch the mode between dark and light.
|
||||
|
||||
v2.1
|
||||
https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
© 2020 Cotes Chung
|
||||
MIT License
|
||||
-->
|
||||
|
||||
<i id="mode-toggle"></i>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
class ModeToggle {
|
||||
static get MODE_KEY() { return "mode"; }
|
||||
static get DARK_MODE() { return "dark"; }
|
||||
static get LIGHT_MODE() { return "light"; }
|
||||
|
||||
constructor() {
|
||||
if (this.isSysDarkMode) {
|
||||
ModeToggle.setLightIcon();
|
||||
} else {
|
||||
ModeToggle.setDarkIcon();
|
||||
}
|
||||
|
||||
if (this.mode != null) {
|
||||
if (this.mode == ModeToggle.DARK_MODE) {
|
||||
ModeToggle.setDark();
|
||||
} else if (this.mode == ModeToggle.LIGHT_MODE) {
|
||||
ModeToggle.setLight();
|
||||
}
|
||||
}
|
||||
|
||||
var self = this;
|
||||
|
||||
/* always follow system prefers */
|
||||
this.sysDarkPrefers.addListener(function() {
|
||||
if (self.isSysDarkMode) {
|
||||
ModeToggle.setDark();
|
||||
} else {
|
||||
ModeToggle.setLight();
|
||||
}
|
||||
ModeToggle.clearMode();
|
||||
});
|
||||
|
||||
} /* constructor() */
|
||||
|
||||
static setDarkIcon() {
|
||||
$("#mode-toggle").removeClass("fas fa-sun").addClass("fas fa-moon");
|
||||
}
|
||||
|
||||
static setLightIcon() {
|
||||
$("#mode-toggle").removeClass("fas fa-moon").addClass("fas fa-sun");
|
||||
}
|
||||
|
||||
static setDark() {
|
||||
ModeToggle.setLightIcon();
|
||||
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
|
||||
$('html').removeClass('light-mode').addClass('dark-mode');
|
||||
}
|
||||
|
||||
static setLight() {
|
||||
ModeToggle.setDarkIcon();
|
||||
sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
|
||||
$('html').removeClass('dark-mode').addClass('light-mode');
|
||||
}
|
||||
|
||||
static clearMode() {
|
||||
sessionStorage.removeItem(ModeToggle.MODE_KEY);
|
||||
}
|
||||
|
||||
get sysDarkPrefers() {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)");
|
||||
}
|
||||
|
||||
get isSysDarkMode() {
|
||||
return this.sysDarkPrefers.matches;
|
||||
}
|
||||
|
||||
get mode() {
|
||||
return sessionStorage.getItem(ModeToggle.MODE_KEY);
|
||||
}
|
||||
|
||||
flipMode() {
|
||||
if ((this.mode == null && this.isSysDarkMode) ||
|
||||
this.mode == ModeToggle.DARK_MODE) {
|
||||
ModeToggle.setLight();
|
||||
} else { /* light mode or default-light */
|
||||
ModeToggle.setDark();
|
||||
}
|
||||
}
|
||||
|
||||
} /* ModeToggle */
|
||||
|
||||
let toggle = new ModeToggle();
|
||||
|
||||
$("#mode-toggle").click(function() {
|
||||
toggle.flipMode();
|
||||
});
|
||||
|
||||
</script>
|
|
@ -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 class="dark-mode">
|
||||
*/
|
||||
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 <html class="light-mode">
|
||||
* -> light scheme triggered with <html class="light-mode">
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue