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 }} {{ end }}
</head> </head>
<body class="{{if eq .Kind `page` }}single{{else}}list{{ if .IsHome }} home{{ end }}{{end}}"> <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"> <header class="header">
<nav class="nav"> <nav class="nav">
{{ if .IsHome }} {{ if .IsHome }}

35
static/main.js
View file

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

44
static/style.css
View file

@ -3,10 +3,10 @@
* A simple, clean, flexible Hugo theme * A simple, clean, flexible Hugo theme
* https://github.com/nanxiaobei/hugo-paper * https://github.com/nanxiaobei/hugo-paper
* Designed by MR.LEE (https://mrlee.me/) * Designed by MR.LEE (https://mrlee.me/)
* Updated in 2019.9.15 * Updated in 2019.10.15
*/ */
/* Variables /* Theme
-------------------------------------------------- */ -------------------------------------------------- */
:root { :root {
--gap: 24px; --gap: 24px;
@ -17,6 +17,7 @@
--footer-height: 60px; --footer-height: 60px;
--radius: 8px; --radius: 8px;
--theme: #fff;
--primary: rgba(0, 0, 0, 0.88); --primary: rgba(0, 0, 0, 0.88);
--secondary: rgba(0, 0, 0, 0.56); --secondary: rgba(0, 0, 0, 0.56);
--tertiary: rgba(0, 0, 0, 0.16); --tertiary: rgba(0, 0, 0, 0.16);
@ -25,6 +26,22 @@
--code-bg: #f5f5f5; --code-bg: #f5f5f5;
--border: #eee; --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 /* Reset
-------------------------------------------------- */ -------------------------------------------------- */
*, *,
@ -43,6 +60,7 @@ body {
font-size: 18px; font-size: 18px;
line-height: 1.8; line-height: 1.8;
word-break: break-word; word-break: break-word;
background: var(--theme);
} }
article, article,
aside, aside,
@ -112,7 +130,7 @@ textarea {
} }
input:-webkit-autofill, input:-webkit-autofill,
textarea:-webkit-autofill { textarea:-webkit-autofill {
box-shadow: 0 0 0 50px #fff inset; box-shadow: 0 0 0 50px var(--theme) inset;
} }
img { img {
display: block; display: block;
@ -153,22 +171,6 @@ img {
.menu a { .menu a {
font-size: 16px; 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
-------------------------------------------------- */ -------------------------------------------------- */
.main { .main {
@ -189,7 +191,7 @@ img {
display: flex; display: flex;
} }
.pagination a { .pagination a {
color: #fff; color: var(--theme);
font-size: 13px; font-size: 13px;
line-height: 36px; line-height: 36px;
background: var(--primary); background: var(--primary);
@ -236,7 +238,7 @@ img {
position: relative; position: relative;
margin-bottom: var(--gap); margin-bottom: var(--gap);
padding: var(--gap); padding: var(--gap);
background: #fff; background: var(--theme);
border-radius: var(--radius); border-radius: var(--radius);
transition: transform 0.1s; transition: transform 0.1s;
} }