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"]
|
||||
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
|
||||
canonifyurls = true
|
||||
|
||||
pygmentsstyle = "bw"
|
||||
pygmentsstyle = "solarized-dark256"
|
||||
pygmentscodefences = true
|
||||
pygmentscodefencesguesssyntax = true
|
||||
|
||||
|
@ -34,10 +34,13 @@ disqusShortname = ""
|
|||
hidecredits = true
|
||||
hidecopyright = true
|
||||
|
||||
inverted = true
|
||||
|
||||
rtl = false
|
||||
|
||||
math = true
|
||||
custom_css = ["css/custom.css"]
|
||||
custom_js = ["css/custom.js"]
|
||||
|
||||
# Social links
|
||||
[[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