Complete dark mode that is being set up by the

`prefers-dark-mode` header. I think I have covered all the bases.
5 years ago · e6a0cf891d
parent aaab517839
commit e6a0cf891d
7 changed files with 117 additions and 3 deletions
--- a/.gitignore
+++ b/.gitignore
@ -8,3 +8,4 @@ tmp
 *.db

 bindata.go
+*.DS_Store
--- a/go.mod
+++ b/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
--- a/less/core.less
+++ b/less/core.less
@ -1,8 +1,9 @@
@primary: rgb(114, 120, 191);
@secondary: rgb(114, 191, 133);
@subheaders: #444;
+@subheadersDark: #aaa;
@headerTextColor: black;
-@headerTextColorDarkMode: white;
+@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;
@ -10,6 +11,7 @@
@errUrgentCol: #ecc63c;
@proSelectedCol: #71D571;
@textLinkColor: rgb(0, 0, 238);
+@textLinkColorDark: rgb(162, 162, 255);

 :root {
    color-scheme: light dark;
@ -1538,7 +1540,10 @@ pre.code-block {
 			a {
 				color: @headerTextColorDarkMode;
 				&:hover {
-					color: #cfcfcf;
+					color: #fff;
+				}
+				&:visited {
+					color: @headerTextColorDarkMode;
 				}
 			}
 		}
@ -1556,13 +1561,65 @@ pre.code-block {
 		}

 		a {
-			color: rgb(162, 162, 255);
+			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;
+		}
+	}
+	
 }
--- a/less/pad-theme.less
+++ b/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;

--- a/less/pad.less
+++ b/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 {
--- a/static/js/theme-solarized_dark.js
+++ b/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;
+                        }
+                    });
+                })();
+            
--- a/templates/user/collection.tmpl
+++ b/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);