Add auto-updating between dark / light mode
This commit is contained in:
parent
2d69234e7a
commit
178cf35b58
2
.gitmodules
vendored
2
.gitmodules
vendored
|
@ -1,3 +1,3 @@
|
||||||
[submodule "themes/hugo-coder"]
|
[submodule "themes/hugo-coder"]
|
||||||
path = themes/hugo-coder
|
path = themes/hugo-coder
|
||||||
url = https://github.com/luizdepra/hugo-coder.git
|
url = https://github.com/ariejan/hugo-coder.git
|
||||||
|
|
|
@ -9,7 +9,7 @@ copyright = "© 1999-2019 Ariejan de Vroom. All rights reserved."
|
||||||
paginate = 999
|
paginate = 999
|
||||||
canonifyurls = true
|
canonifyurls = true
|
||||||
|
|
||||||
pygmentsstyle = "bw"
|
pygmentsstyle = "solarized-dark256"
|
||||||
pygmentscodefences = true
|
pygmentscodefences = true
|
||||||
pygmentscodefencesguesssyntax = true
|
pygmentscodefencesguesssyntax = true
|
||||||
|
|
||||||
|
@ -34,10 +34,13 @@ disqusShortname = ""
|
||||||
hidecredits = true
|
hidecredits = true
|
||||||
hidecopyright = true
|
hidecopyright = true
|
||||||
|
|
||||||
|
inverted = true
|
||||||
|
|
||||||
rtl = false
|
rtl = false
|
||||||
|
|
||||||
math = true
|
math = true
|
||||||
custom_css = ["css/custom.css"]
|
custom_css = ["css/custom.css"]
|
||||||
|
custom_js = ["css/custom.js"]
|
||||||
|
|
||||||
# Social links
|
# Social links
|
||||||
[[params.social]]
|
[[params.social]]
|
||||||
|
|
|
@ -0,0 +1,63 @@
|
||||||
|
body.inverted {
|
||||||
|
color: #dadada;
|
||||||
|
background-color: #212121; }
|
||||||
|
body.inverted a {
|
||||||
|
color: #36679f; }
|
||||||
|
body.inverted h1,
|
||||||
|
body.inverted h2,
|
||||||
|
body.inverted h3,
|
||||||
|
body.inverted h4,
|
||||||
|
body.inverted h5,
|
||||||
|
body.inverted h6 {
|
||||||
|
color: #dadada; }
|
||||||
|
body.inverted code {
|
||||||
|
background-color: #424242;
|
||||||
|
color: #dadada; }
|
||||||
|
body.inverted pre code {
|
||||||
|
background-color: inherit;
|
||||||
|
color: inherit; }
|
||||||
|
body.inverted blockquote {
|
||||||
|
border-left: 2px solid #424242; }
|
||||||
|
body.inverted table td, body.inverted table th {
|
||||||
|
border: 2px solid #dadada; }
|
||||||
|
|
||||||
|
body.inverted .content .list ul li .title {
|
||||||
|
color: #dadada; }
|
||||||
|
body.inverted .content .list ul li .title:hover, body.inverted .content .list ul li .title:focus {
|
||||||
|
color: #36679f; }
|
||||||
|
|
||||||
|
body.inverted .content .centered .about ul li a {
|
||||||
|
color: #dadada; }
|
||||||
|
body.inverted .content .centered .about ul li a:hover, body.inverted .content .centered .about ul li a:focus {
|
||||||
|
color: #36679f; }
|
||||||
|
|
||||||
|
body.inverted .navigation a, body.inverted .navigation span {
|
||||||
|
color: #dadada; }
|
||||||
|
|
||||||
|
body.inverted .navigation a:hover, body.inverted .navigation a:focus {
|
||||||
|
color: #36679f; }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
body.inverted .navigation .navigation-list {
|
||||||
|
background-color: #212121;
|
||||||
|
border-top: solid 2px #424242;
|
||||||
|
border-bottom: solid 2px #424242; } }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
body.inverted .navigation .navigation-list .menu-separator {
|
||||||
|
border-top: 2px solid #dadada; } }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
body.inverted .navigation #menu-toggle:checked + label {
|
||||||
|
color: #424242; } }
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
body.inverted .navigation .menu-button {
|
||||||
|
color: #dadada; }
|
||||||
|
body.inverted .navigation .menu-button:hover, body.inverted .navigation .menu-button:focus {
|
||||||
|
color: #36679f; } }
|
||||||
|
|
||||||
|
body.inverted .footer a {
|
||||||
|
color: #36679f; }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=coder-inverted.css.map */
|
|
@ -0,0 +1 @@
|
||||||
|
{"Target":"css/coder-inverted.css","MediaType":"text/css","Data":{}}
|
34
static/css/custom.js
Normal file
34
static/css/custom.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
function activateDarkMode() {
|
||||||
|
console.log("activated dark mode");
|
||||||
|
document.body.classList.add('inverted');
|
||||||
|
}
|
||||||
|
|
||||||
|
function activateLightMode() {
|
||||||
|
console.log("activated ligth mode");
|
||||||
|
document.body.classList.remove('inverted');
|
||||||
|
}
|
||||||
|
|
||||||
|
function setColorScheme() {
|
||||||
|
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
const isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches
|
||||||
|
const isNotSpecified = window.matchMedia("(prefers-color-scheme: no-preference)").matches
|
||||||
|
const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified;
|
||||||
|
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").addListener(e => e.matches && activateDarkMode())
|
||||||
|
window.matchMedia("(prefers-color-scheme: light)").addListener(e => e.matches && activateLightMode())
|
||||||
|
|
||||||
|
if(isDarkMode) activateDarkMode()
|
||||||
|
if(isLightMode) activateLightMode()
|
||||||
|
if(isNotSpecified || hasNoSupport) {
|
||||||
|
console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
|
||||||
|
now = new Date();
|
||||||
|
hour = now.getHours();
|
||||||
|
if (hour < 4 || hour >= 16) {
|
||||||
|
activateDarkMode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function(event) {
|
||||||
|
setColorScheme();
|
||||||
|
})
|
|
@ -1 +1 @@
|
||||||
Subproject commit 402160d2b19695519a43e50eb26f80c57d48b8bd
|
Subproject commit 0cc742c8abff019f8b3ec4e444ec275daa3b950b
|
Loading…
Reference in New Issue
Block a user