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