diff --git a/nullboard.html b/nullboard.html index fd164a3..07cd4a3 100644 --- a/nullboard.html +++ b/nullboard.html @@ -345,7 +345,7 @@ .board .list .note.dragging, .board .list .note.dragging.raw { background: #CED4DA; - box-shadow: 0 +1px 0 #00000010 inset, + box-shadow: 0 +1px 0 #00000010 inset, 0 -1px 0 #00000010 inset, +1px 0 0 #00000010 inset, -1px 0 0 #00000010 inset; @@ -499,7 +499,7 @@ padding: 5px 25px 5px 10px; font-size: 11px; - box-shadow: 0 +1px 0 #ACB4BC inset, + box-shadow: 0 +1px 0 #ACB4BC inset, 0 -1px 0 #ACB4BC inset, +1px 0 0 #ACB4BC inset, -1px 0 0 #ACB4BC inset, @@ -745,6 +745,71 @@ } } + /* + Dark Mode Styles + ================ */ + body.dark { + background-color: #252525; + color: #ddd; + } + + /* Board menu / upper-right menu */ + body.dark .head, body.dark .config { + background: #454545; + } + + body.dark .config a { + color: #ddd; + } + + body.dark .config a:hover { + color: #fc5555; + } + + body.dark .config .bulk div a.active { + color: #fcd62d; + } + + /* Lists and Notes */ + body.dark .list, body.dark .menu { + background: #454545; + } + + body.dark .menu a { + color: #ddd; + } + + body.dark .menu a:hover { + color: #959595; + } + + body.dark .board .list .note { + background: #656565; + box-shadow: 0 1px 2px #656565, 0 0 1px #959595; + } + + body.dark .board .list .note.raw { + background: #454545; + box-shadow: none; + } + + body.dark textarea, body.dark input { + background: #959595; + } + + /* Misc */ + body.dark .teaser, body.dark .logo a { + color: #ddd; + } + + body.dark .logo { + background: #454545; + } + + body.dark .logo a:hover { + color: #fc5555; + } + @@ -769,6 +834,7 @@ Import board... Export board... + Swap theme mode @@ -2374,6 +2440,12 @@ setupListScrolling(); + //Toggle board theme + $('.theme-swap').click(function() { + $('body').toggleClass('dark'); + return false; + }); +