Add darkmode

2020-06-09 19:40:38 +00:00
parent 5abcd6f672
commit b8f02d92da
7 changed files with 62 additions and 29 deletions
--- a/themes/theme/templates/article.html
+++ b/themes/theme/templates/article.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}

 {% block content %}
+<p><a href="/">← Return to Home</a></p>
 <header>
 	<h1>{{ article.title }}</h1>
 	<div class="summary">
--- a/themes/theme/templates/base.html
+++ b/themes/theme/templates/base.html
@@ -16,7 +16,7 @@
 	<body>
 		<div class="container">
 			<div class="sidebar">
-				<img src="/theme/me.jpg" />
+				<img src="/theme/me.jpg" alt="A picture of me smiling" />
 				<p>
 					Tanner Collin
 				</p>
@@ -24,14 +24,25 @@
 			<div class="content">
 				<div class="topbar">
 					<p>
-						<img src="/theme/logo.png" />
+						<img src="/theme/logo.png" alt="My name in handwriting" />
 					</p>
 				</div>
 				{% block content %}
 				{% endblock %}
 			</div>
 		</div>
-	</body>

+		<script src="/theme/darkmode-js.min.js"></script>
+		<script>
+			const options = {
+				bottom: '16px',
+				right: '16px',
+				buttonColorDark: '#666',
+				buttonColorLight: '#aaa',
+				label: '🌙',
+			};
+			new Darkmode(options).showWidget();
+		</script>
+	</body>
 </html>
 		
--- a/themes/theme/templates/style.css
+++ b/themes/theme/templates/style.css
@@ -49,6 +49,7 @@ pre {
 }

 .content .topbar img {
+	filter: invert(100%);
 	width: 14rem;
 	height: auto;
 }
@@ -90,8 +91,7 @@ pre {
 }

 .content ul {
-	padding-left: 0;
-	list-style-position: inside;
+	padding-left: 1.1rem;
 }

 .content li {
@@ -127,3 +127,15 @@ pre {
 		display: none;
 	}
 }
+
+.darkmode-toggle {
+	z-index: 500;
+}
+
+.darkmode--activated .content img {
+	filter: brightness(75%);
+}
+
+.darkmode--activated video {
+	mix-blend-mode: difference;
+}