Dark mode

.gitignore

@@ -8,3 +8,4 @@ tmp
 *.db
 
 bindata.go
+*.DS_Store

go.mod

@@ -58,3 +58,5 @@ require (
 	gopkg.in/yaml.v1 v1.0.0-20140924161607-9f9df34309c0 // indirect
 	gopkg.in/yaml.v2 v2.2.2 // indirect
 )
+
+go 1.13

less/core.less

@@ -1,14 +1,21 @@
 @primary: rgb(114, 120, 191);
 @secondary: rgb(114, 191, 133);
 @subheaders: #444;
+@subheadersDark: #aaa;
 @headerTextColor: black;
+@headerTextColorDarkMode: #cfcfcf;
 @sansFont: 'Open Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
 @serifFont: Lora, 'Palatino Linotype', 'Book Antiqua', 'New York', 'DejaVu serif', serif;
 @monoFont: Hack, consolas, Menlo-Regular, Menlo, Monaco, 'ubuntu mono', monospace, monospace;
 @dangerCol: #e21d27;
 @errUrgentCol: #ecc63c;
 @proSelectedCol: #71D571;
 @textLinkColor: rgb(0, 0, 238);
+@textLinkColorDark: rgb(162, 162, 255);
+
+:root {
+    color-scheme: light dark;
+}
 
 body {
 	font-family: @serifFont;
@@ -1511,3 +1518,108 @@ div.row {
 pre.code-block {
 	overflow-x: auto;
 }
+
+@media (prefers-color-scheme: dark) {
+    body{
+		color: #eee;
+		background: #111;
+
+		.post-title a:link{
+			color: #ccc;
+		}
+
+		&#collection{
+			color: #eee;
+
+			pre{
+				background: #060606;
+			}
+		}
+
+		h1, header h2 {
+			a {
+				color: @headerTextColorDarkMode;
+				&:hover {
+					color: #fff;
+				}
+				&:visited {
+					color: @headerTextColorDarkMode;
+				}
+			}
+		}
+
+		#nav#manage ul a, .dropdown-nav ul a, nav#manage ul ul a, nav#manage ul a{
+			color: #ccc;
+		}
+
+		.dropdown-nav ul ul, .dropdown-nav ul li:hover, nav#manage ul ul, nav#manage ul ul li:hover, nav#manage ul li:hover{
+			background: #222;
+		}
+
+		#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4{
+			color: #ddd;
+		}
+
+		a {
+			color: @textLinkColorDark
+		}
+
+		a:visited{
+			color: rgb(201, 138, 253);
+		}
+
+		#official-writing, #wrapper {
+			h2, h3, h4 {
+				color: @subheadersDark;
+			}
+			ul {
+				&.collections {
+					li {
+						&.collection {
+							a.title {
+								&:link, &:visited {
+									color: @headerTextColorDarkMode;
+								}
+							}
+						}
+						a.create {
+							color: @subheadersDark;
+						}
+					}
+				}
+			}
+		}
+
+	}
+
+	body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited{
+		color: @textLinkColorDark
+	}
+
+	.ace_editor {
+		border: 1px solid #333;
+	}
+
+	input {
+		background: #202020;
+		color: #bbb;
+	}
+
+	nav#manage ul ul li img{
+		filter: invert(1);
+	}
+
+	.alert {
+		&.info {
+			color: #4295be;
+			background-color: #0a0b0c;
+			border-color: #181d1f;
+		}
+		&.success {
+			color: #5bb35c;
+			background-color: #282b27;
+			border-color: #21241e;
+		}
+	}
+
+}

less/pad-theme.less

@@ -4,6 +4,7 @@
 @lightNavBG: #fff;
 @lightNavHoverBG: #f6f6f6;
 @lightNavBorder: #ccc;
+@darkNavBorder: #333;
 
 @darkBG: #222222;
 @darkTextColor: #ffffff;
@@ -48,6 +49,36 @@ body#pad-sub #posts, .atoms {
 	}
 }
 
+@media (prefers-color-scheme: dark){
+	body#pad-sub #posts, .atoms {
+		h3 {
+			a {
+				color: @darkTextColor;
+				&:hover {
+					color: lighten(@darkTextColor, 10%);
+				}
+			}
+		}
+		h3, h4 {
+			a {
+				color: @darkTextColor;
+				&:hover {
+					color: lighten(@darkTextColor, 10%);
+				}
+			}
+		}
+		date, .electron {
+			color: #999;
+		}
+		a.action, a {
+			color: @darkTextColor;
+			&:hover {
+				color: lighten(@darkTextColor, 10%);
+			}
+		}
+	}
+}
+
 body#pad, body#pad-sub {
 	.pad-theme-transition;
 

less/pad.less

@@ -90,6 +90,13 @@
 		}
 	}
 }
+
+@media (prefers-color-scheme: dark){
+	.dropdown-nav ul ul {
+		border-color: @darkNavBorder;
+	}
+}
+
 nav#manage {
 	.dropdown-nav;
 	ul ul li {
@@ -98,6 +105,9 @@ nav#manage {
 			margin-top: -2px;
 		}
 	}
+	ul ul{
+		border-color: @darkNavBorder;
+	}
 }
 
 img.ic-18dp {

templates/pad.tmpl

@@ -66,26 +66,46 @@
 		<script src="/js/h.js"></script>
 		<script>
 		function toggleTheme() {
-			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
-			var newTheme = '';
 			if (document.body.classList.contains('light')) {
-				newTheme = 'dark';
-				document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);
-				for (var i=0; i<btns.length; i++) {
-					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
+				setTheme('dark');
+			} else {
+				setTheme('light');
+			}
+			H.set('padTheme', newTheme);
+			console.log('here');
+
+		}
+		function setTheme(newTheme){
+			document.body.classList.remove('light');
+			document.body.classList.remove('dark');
+			document.body.classList.add(newTheme);
+			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
+			if (newTheme == 'light'){
+				// check if current theme is dark otherwise we'll get `_dark_dark@2x.png`
+				if (H.get('padTheme', 'auto') == 'dark'){
+					for (var i=0; i<btns.length; i++) {
+						btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
+					}
 				}
 			} else {
-				newTheme = 'light';
-				document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
 				for (var i=0; i<btns.length; i++) {
-					btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
+					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
 				}
 			}
 			H.set('padTheme', newTheme);
 		}
-		if (H.get('padTheme', 'light') != 'light') {
-			toggleTheme();
+
+		if (H.get('padTheme', 'auto') == 'light') {
+			setTheme('light');
+		} else if (H.get('padTheme', 'auto') == 'dark'){
+			setTheme('dark');
+		} else {
+			const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
+			if (isDarkMode) setTheme('dark');
+			else setTheme('light');
 		}
+
+
 		var $writer = H.getEl('writer');
 		var $btnPublish = H.getEl('publish');
 		var $wc = H.getEl("wc");

templates/user/collection.tmpl

@@ -154,6 +154,8 @@
 <script src="/js/h.js"></script>
 <script src="/js/ace.js" type="text/javascript" charset="utf-8"></script>
 <script>
+// set dark mode
+const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
 // Begin shared modal code
 function showModal(id) {
 	document.getElementById('overlay').style.display = 'block';
@@ -229,6 +231,9 @@ var opt = {
 };
 var theme = "ace/theme/chrome";
 var cssEditor = ace.edit("css-editor");
+if (isDarkMode){
+	var theme = "ace/theme/solarized_dark";
+}
 cssEditor.setTheme(theme);
 cssEditor.session.setMode("ace/mode/css");
 cssEditor.setOptions(opt);