`prefers-dark-mode` header. I think I have covered all the bases.dark-mode
@@ -8,3 +8,4 @@ tmp | |||
*.db | |||
bindata.go | |||
*.DS_Store |
@@ -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 |
@@ -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; | |||
} | |||
} | |||
} |
@@ -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; | |||
@@ -90,6 +90,13 @@ | |||
} | |||
} | |||
} | |||
@media (prefers-color-scheme: dark){ | |||
.dropdown-nav ul ul { | |||
border-color: @darkNavBorder; | |||
} | |||
} | |||
nav#manage { | |||
.dropdown-nav; | |||
ul ul li { | |||
@@ -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; | |||
} | |||
}); | |||
})(); | |||
@@ -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); | |||