From e6a0cf891d346755e3e2c9d89c7db9e42178e602 Mon Sep 17 00:00:00 2001 From: Michael Demetriou Date: Wed, 2 Oct 2019 15:17:21 +0300 Subject: [PATCH] Complete dark mode that is being set up by the `prefers-dark-mode` header. I think I have covered all the bases. --- .gitignore | 1 + go.mod | 2 + less/core.less | 63 +++++++++++++++++++++++++++++-- less/pad-theme.less | 31 +++++++++++++++ less/pad.less | 7 ++++ static/js/theme-solarized_dark.js | 11 ++++++ templates/user/collection.tmpl | 5 +++ 7 files changed, 117 insertions(+), 3 deletions(-) create mode 100644 static/js/theme-solarized_dark.js diff --git a/.gitignore b/.gitignore index 847e8f0..76da739 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ tmp *.db bindata.go +*.DS_Store diff --git a/go.mod b/go.mod index 9c67aeb..d73e86e 100644 --- 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 diff --git a/less/core.less b/less/core.less index 179536e..5e0d17d 100644 --- 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; + } + } + } \ No newline at end of file diff --git a/less/pad-theme.less b/less/pad-theme.less index a8f668e..f2608f3 100644 --- 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; diff --git a/less/pad.less b/less/pad.less index a132b30..7eebcd7 100644 --- 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 { diff --git a/static/js/theme-solarized_dark.js b/static/js/theme-solarized_dark.js new file mode 100644 index 0000000..71c6522 --- /dev/null +++ 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; + } + }); + })(); + \ No newline at end of file diff --git a/templates/user/collection.tmpl b/templates/user/collection.tmpl index 8af3bda..3f40f4a 100644 --- a/templates/user/collection.tmpl +++ b/templates/user/collection.tmpl @@ -154,6 +154,8 @@