malte70/hugo-paper
1
0
Fork 0
Code Activity

Add dark mode

Browse source
This commit is contained in:
nanxiaobei 2019-10-15 01:31:07 +08:00
parent 072d2a8c22
commit ba297661ff
3 changed files with 37 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
layouts/partials/header.html
View file

@ -38,9 +38,6 @@
{{ end }}
</head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}">
{{if ne .Kind `page` }}
<div class="list-bg"></div>
{{end}}
<header class="header">
<nav class="nav">
{{ if .IsHome }}

35
static/main.js
View file

@ -1,24 +1,17 @@
// Highlight
hljs.initHighlightingOnLoad();
const listBg = document.querySelector('.list-bg');
if (listBg) {
const halfAnHour = 1000 * 60 * 30;
function setListBgStyle() {
const now = new Date();
const time = now.getHours() + now.getMinutes() / 60;
let opacity = Math.abs(time - 14);
opacity = opacity > 12 ? 10 + Math.abs(opacity - 14) : opacity;
opacity = Number((opacity / 12).toFixed(2));
listBg.setAttribute('style', `opacity: ${opacity}`);
// SunriseSunset
const getSunrise = SunriseSunsetJS.getSunrise;
const getSunset = SunriseSunsetJS.getSunset;
navigator.geolocation.getCurrentPosition((position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const sunrise = getSunrise(latitude, longitude).getTime();
const sunset = getSunset(latitude, longitude).getTime();
const now = Date.now();
if (now < sunrise || now < sunset) {
const body = document.querySelector('body');
body.classList.add('dark');
}
requestAnimationFrame(setListBgStyle);
setInterval(() => {
requestAnimationFrame(setListBgStyle);
}, halfAnHour);
}
});

44
static/style.css
View file

@ -3,10 +3,10 @@
* A simple, clean, flexible Hugo theme
* https://github.com/nanxiaobei/hugo-paper
* Designed by MR.LEE (https://mrlee.me/)
* Updated in 2019.9.15
* Updated in 2019.10.15
*/
/* Variables
/* Theme
-------------------------------------------------- */
:root {
--gap: 24px;
@ -17,6 +17,7 @@
--footer-height: 60px;
--radius: 8px;
--theme: #fff;
--primary: rgba(0, 0, 0, 0.88);
--secondary: rgba(0, 0, 0, 0.56);
--tertiary: rgba(0, 0, 0, 0.16);
@ -25,6 +26,22 @@
--code-bg: #f5f5f5;
--border: #eee;
}
.dark {
--theme: #3c3c3c;
--primary: rgba(255, 255, 255, 0.88);
--secondary: rgba(255, 255, 255, 0.56);
--tertiary: rgba(255, 255, 255, 0.16);
--hljs-bg: #2a2a2a;
--code-bg: #4f4f4f;
--border: #5f5f5f;
}
.list {
background: linear-gradient(135deg, #e2e2e2, #f8f8f8, #ddd);
}
.dark.list {
background: linear-gradient(135deg, #1c1c1c, #2a2a2a, #000);
}
/* Reset
-------------------------------------------------- */
*,
@ -43,6 +60,7 @@ body {
font-size: 18px;
line-height: 1.8;
word-break: break-word;
background: var(--theme);
}
article,
aside,
@ -112,7 +130,7 @@ textarea {
}
input:-webkit-autofill,
textarea:-webkit-autofill {
box-shadow: 0 0 0 50px #fff inset;
box-shadow: 0 0 0 50px var(--theme) inset;
}
img {
display: block;
@ -153,22 +171,6 @@ img {
.menu a {
font-size: 16px;
}
/* Body
-------------------------------------------------- */
.list {
position: relative;
background: linear-gradient(135deg, #e2e2e2, #f8f8f8, #ddd);
}
.list-bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.24);
opacity: 0;
}
/* Main
-------------------------------------------------- */
.main {
@ -189,7 +191,7 @@ img {
display: flex;
}
.pagination a {
color: #fff;
color: var(--theme);
font-size: 13px;
line-height: 36px;
background: var(--primary);
@ -236,7 +238,7 @@ img {
position: relative;
margin-bottom: var(--gap);
padding: var(--gap);
background: #fff;
background: var(--theme);
border-radius: var(--radius);
transition: transform 0.1s;
}