Darken border of main menu for consistency

`prefers-dark-mode` header. I think I have covered all the bases.

.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,7 +1,9 @@
 @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;
@@ -9,6 +11,11 @@
 @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 {

static/js/theme-solarized_dark.js

@@ -0,0 +1,11 @@
+cssText = ".ace-solarized-dark .ace_gutter {     background: #01313f;     color: #d0edf7   }      .ace-solarized-dark .ace_print-margin {     width: 1px;     background: #33555E   }      .ace-solarized-dark {     background-color: #002B36;     color: #93A1A1   }      .ace-solarized-dark .ace_entity.ace_other.ace_attribute-name,   .ace-solarized-dark .ace_storage {     color: #93A1A1   }      .ace-solarized-dark .ace_cursor,   .ace-solarized-dark .ace_string.ace_regexp {     color: #D30102   }      .ace-solarized-dark .ace_marker-layer .ace_active-line,   .ace-solarized-dark .ace_marker-layer .ace_selection {     background: rgba(255, 255, 255, 0.1)   }      .ace-solarized-dark.ace_multiselect .ace_selection.ace_start {     box-shadow: 0 0 3px 0px #002B36;   }      .ace-solarized-dark .ace_marker-layer .ace_step {     background: rgb(102, 82, 0)   }      .ace-solarized-dark .ace_marker-layer .ace_bracket {     margin: -1px 0 0 -1px;     border: 1px solid rgba(147, 161, 161, 0.50)   }      .ace-solarized-dark .ace_gutter-active-line {     background-color: #0d3440   }      .ace-solarized-dark .ace_marker-layer .ace_selected-word {     border: 1px solid #073642   }      .ace-solarized-dark .ace_invisible {     color: rgba(147, 161, 161, 0.50)   }      .ace-solarized-dark .ace_keyword,   .ace-solarized-dark .ace_meta,   .ace-solarized-dark .ace_support.ace_class,   .ace-solarized-dark .ace_support.ace_type {     color: #859900   }      .ace-solarized-dark .ace_constant.ace_character,   .ace-solarized-dark .ace_constant.ace_other {     color: #CB4B16   }      .ace-solarized-dark .ace_constant.ace_language {     color: #B58900   }      .ace-solarized-dark .ace_constant.ace_numeric {     color: #D33682   }      .ace-solarized-dark .ace_fold {     background-color: #268BD2;     border-color: #93A1A1   }      .ace-solarized-dark .ace_entity.ace_name.ace_function,   .ace-solarized-dark .ace_entity.ace_name.ace_tag,   .ace-solarized-dark .ace_support.ace_function,   .ace-solarized-dark .ace_variable,   .ace-solarized-dark .ace_variable.ace_language {     color: #268BD2   }      .ace-solarized-dark .ace_string {     color: #2AA198   }      .ace-solarized-dark .ace_comment {     font-style: italic;     color: #657B83   }      .ace-solarized-dark .ace_indent-guide {     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNg0Db1ZVCxc/sPAAd4AlUHlLenAAAAAElFTkSuQmCC) right repeat-y   }";
+
+ace.define("ace/theme/solarized_dark",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-solarized_dark",t.cssText=cssText;var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)});
+                (function() {
+                    ace.require(["ace/theme/solarized_dark"], function(m) {
+                        if (typeof module == "object" && typeof exports == "object" && module) {
+                            module.exports = m;
+                        }
+                    });
+                })();
+            

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 {
-				newTheme = 'light';
-				document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
+				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 {
+				for (var i=0; i<btns.length; i++) {
+					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);