Add dark mode
This commit is contained in:
parent
072d2a8c22
commit
ba297661ff
3 changed files with 37 additions and 45 deletions
|
@ -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 }}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue