✨ Implemented dark theme.

Signed-off-by: Edoardo Odorico <edoubuntu@gmail.com>
2017-12-28 19:21:52 +01:00 · 2017-12-28 19:21:52 +01:00 · 6fc2c39eda
commit 6fc2c39eda
parent a8fa888317
9 changed files with 199 additions and 12 deletions
--- a/locales/en.json
+++ b/locales/en.json
@ -102,5 +102,6 @@
 	"Select From Available Snippets": "Select From Available Snippets",
 	"OR": "OR",
 	"Export to Snippet": "Export to Snippet",
-	"Select Visibility Level": "Select Visibility Level"
+	"Select Visibility Level": "Select Visibility Level",
+	"Night Theme": "Night Theme"
 }
--- a/public/css/extra.css
+++ b/public/css/extra.css
@ -179,6 +179,11 @@
    border-left: 1px solid black;
 }

+.night .ui-toc-dropdown .nav>li>a:focus, .night .ui-toc-dropdown .nav>li>a:hover{
+    color: white;
+    border-left-color: white;
+}
+
 .ui-toc-dropdown[dir='rtl'] .nav>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav>li>a:hover {
    padding-right: 19px;
    border-left: none;
@ -192,6 +197,10 @@
    background-color: transparent;
    border-left: 2px solid black;
 }
+.night .ui-toc-dropdown .nav>.active:focus>a,.night .ui-toc-dropdown .nav>.active:hover>a,.night .ui-toc-dropdown .nav>.active>a {
+    color: white;
+    border-left: 2px solid white;
+}

 .ui-toc-dropdown[dir='rtl'] .nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav>.active>a {
    padding-right: 18px;
@ -216,6 +225,10 @@
    font-weight: 400;
 }

+.night .ui-toc-dropdown .nav > li > a{
+    color: #aaa;
+}
+
 .ui-toc-dropdown[dir='rtl'] .nav .nav>li>a {
    padding-right: 30px;
 }
@ -350,13 +363,23 @@ small .dropdown a:focus, small .dropdown a:hover {
 }

 .unselectable {
-    -moz-user-select: none; 
-    -khtml-user-select: none; 
-    -webkit-user-select: none; 
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
 }

+.night .navbar{
+    background: #333;
+    border-bottom-color: #333;
+    color: #eee;
+}
+
+.night .navbar a{
+    color: #eee;
+}
+
@media print {
    div, table, img, pre, blockquote {
        page-break-inside: avoid !important;
@ -364,4 +387,4 @@ small .dropdown a:focus, small .dropdown a:hover {
    a[href]:after {
        font-size: 12px !important;
    }
-}
+}
--- a/public/css/github-extract.css
+++ b/public/css/github-extract.css
@ -68,6 +68,9 @@
    color: #777;
    border-left: 0.25em solid #ddd;
 }
+.night .markdown-body blockquote{
+    color: #bcbcbc;
+}

 .markdown-body blockquote>:first-child {
    margin-top: 0;
@ -107,6 +110,15 @@
    line-height: 1.25;
 }

+.night .markdown-body h1,
+.night .markdown-body h2,
+.night .markdown-body h3,
+.night .markdown-body h4,
+.night .markdown-body h5,
+.night .markdown-body h6 {
+    color: #ddd;
+}
+
 .markdown-body h1 .octicon-link,
 .markdown-body h2 .octicon-link,
 .markdown-body h3 .octicon-link,
@ -118,6 +130,15 @@
    visibility: hidden;
 }

+.night .markdown-body h1 .octicon-link,
+.night .markdown-body h2 .octicon-link,
+.night .markdown-body h3 .octicon-link,
+.night .markdown-body h4 .octicon-link,
+.night .markdown-body h5 .octicon-link,
+.night .markdown-body h6 .octicon-link {
+    color: #fff;
+}
+
 .markdown-body h1:hover .anchor,
 .markdown-body h2:hover .anchor,
 .markdown-body h3:hover .anchor,
@ -180,6 +201,8 @@
    color: #777
 }

+
+
 .markdown-body ul,
 .markdown-body ol {
    padding-left: 2em
@ -246,11 +269,19 @@
    background-color: #fff;
    border-top: 1px solid #ccc;
 }
+.night .markdown-body table tr {
+    background-color: #5f5f5f;
+}

 .markdown-body table tr:nth-child(2n) {
    background-color: #f8f8f8;
 }

+.night .markdown-body table tr:nth-child(2n){
+
+    background-color: #4f4f4f;
+}
+
 .markdown-body img {
    max-width: 100%;
    box-sizing: content-box;
@ -370,6 +401,14 @@
    border-radius: 3px;
 }

+.night .markdown-body code,
+.night .markdown-body tt {
+
+    color: #eee;
+    background-color: rgba(230, 230, 230, 0.36);
+
+}
+
 .markdown-body code::before,
 .markdown-body code::after,
 .markdown-body tt::before,
@ -512,4 +551,4 @@
    margin: 0.31em 0 0.2em -1.3em !important;
    vertical-align: middle;
    cursor: default !important;
-}
+}
--- a/public/css/index.css
+++ b/public/css/index.css
@ -10,6 +10,16 @@ body {
    padding-top: 51px;
    /*overflow: hidden;*/
 }
+
+.night a,
+.night .open-files-container li.selected a {
+    color: #5EB7E0;
+}
+
+body.night{
+    background: #333 !important;
+}
+
 .CodeMirror {
    font-family: "Source Code Pro", Consolas, monaco, monospace;
    letter-spacing: 0.025em;
@ -117,6 +127,11 @@ body {
    margin-left: 0;
    margin-right: 0;
 }
+
+.night .ui-content{
+    background-color: #333;
+}
+
 .ui-edit-area {
    height: 100%;
    /*padding-left: 15px;*/
@ -144,6 +159,12 @@ body {
 .ui-edit-area .ui-sync-toggle:active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125), 2px 0px 2px #e7e7e7;
 }
+
+.night .ui-edit-area .ui-resizable-handle.ui-resizable-e{
+   background: #3c3c3c;
+   box-shadow: 3px 0px 6px #353535;
+}
+
 .ui-view-area {
    /*overflow-y: scroll;*/
    -webkit-overflow-scrolling: touch;
@ -154,6 +175,13 @@ body {
        padding-right: 15px;
    }
 }
+
+.night .ui-view-area{
+    background: #333;
+    color: #ededed;
+}
+
+
 .ui-scrollable {
    height: 100%;
    overflow-x: hidden;
@ -238,12 +266,32 @@ body {
 .navbar-nav > li > a {
    cursor: pointer;
 }
+
+.night .navbar-default .navbar-nav > li > a:focus,
+.night .navbar-default .navbar-nav > li > a:hover,
+.night .navbar-default .navbar-brand:focus,
+.night .navbar-default .navbar-brand:hover{
+    color: #fff;
+}
+
+.night .navbar-default .navbar-nav > .open > a,
+.night .navbar-default .navbar-nav > .open > a:focus,
+.night .navbar-default .navbar-nav > .open > a:hover {
+    color: white;
+    background: #000;
+
+}
 .dropdown-menu > li > a {
    cursor: pointer;
    text-overflow: ellipsis;
    max-width: calc(100vw - 30px);
    overflow: hidden;
 }
+
+.night .dropdown-menu{
+    background: #222;
+}
+
 .dropdown-menu.CodeMirror-other-cursor {
    transition: none;
 }
@ -276,8 +324,8 @@ div[contenteditable]:empty:not(:focus):before{
    max-height: 40vh;
    overflow: auto;
 }
-.dropdown-menu.list::-webkit-scrollbar { 
-    display: none; 
+.dropdown-menu.list::-webkit-scrollbar {
+    display: none;
 }
 .dropdown-menu .emoji {
    margin-bottom: 0 !important;
@ -292,6 +340,16 @@ div[contenteditable]:empty:not(:focus):before{
    background: inherit;
 }

+.night .navbar .btn-default{
+    background-color: #333;
+    border-color: #565656;
+    color: #eee;
+}
+
+.night .btn.btn-default.ui-view.active{
+    background: #202020;
+}
+
 .btn-file {
    position: relative;
    overflow: hidden;
@ -312,6 +370,12 @@ div[contenteditable]:empty:not(:focus):before{
    display: block;
 }

+.night .btn.focus,
+.night .btn:focus,
+.night .btn:hover{
+    color: #fff;
+}
+
 .info-label {
 	width: 36%;
 	text-align: right;
@ -481,8 +545,8 @@ div[contenteditable]:empty:not(:focus):before{
    border: 1px solid #2893ef;
 }

-.status-bar .indent-width-input::-webkit-inner-spin-button, 
-.status-bar .indent-width-input::-webkit-outer-spin-button { 
+.status-bar .indent-width-input::-webkit-inner-spin-button,
+.status-bar .indent-width-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
 }
@ -524,4 +588,4 @@ div[contenteditable]:empty:not(:focus):before{
    .CodeMirror {
        height: auto !important;
    }
-}
+}
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@ -69,6 +69,12 @@
    border-collapse: inherit !important;
 }

+.night .markdown-body .gist table tr:nth-child(2n){
+
+    background-color: #ddd;
+
+}
+
 .markdown-body code[data-gist-id] {
    background: none;
    padding: 0;
@ -93,6 +99,7 @@

 .markdown-body code[data-gist-id] table tr {
    background: unset;
+
 }

 /*fixed style for rtl in pre and code*/
@ -121,6 +128,16 @@
    white-space: inherit;
 }

+.night .markdown-body pre.graphviz .graph > polygon{
+    fill: #333;
+}
+
+.night .markdown-body pre.mermaid .titleText,
+.night .markdown-body pre.mermaid text,
+.night .markdown-body pre.mermaid .sectionTitle{
+    fill: white;
+}
+
 .markdown-body pre.flow-chart > code,
 .markdown-body pre.sequence-diagram > code,
 .markdown-body pre.graphviz > code,
@ -138,6 +155,27 @@
    height: 100%;
 }

+.night .markdown-body .abc path{
+    fill: #eee;
+}
+
+.night .markdown-body .abc path.note_selected{
+    fill: ##4DD0E1;
+}
+
+.night tspan{
+    fill: #fefefe;
+}
+
+.night pre rect{
+    fill: transparent;
+}
+
+.night pre.flow-chart rect,
+.night pre.flow-chart path{
+    stroke: white;
+}
+
 .markdown-body pre > code.wrap {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
--- a/public/js/index.js
+++ b/public/js/index.js
@ -1633,6 +1633,10 @@ ui.toolbar.view.click(function () {
 ui.toolbar.both.click(function () {
  changeMode(modeType.both)
 })
+
+ui.toolbar.night.click(function () {
+  toggleNightMode()
+})
 // permission
 // freely
 ui.infobar.permission.freely.click(function () {
@ -1666,6 +1670,17 @@ $('.ui-delete-modal-confirm').click(function () {
  socket.emit('delete')
 })

+function toggleNightMode () {
+  var $body = $('body')
+  var isActive = ui.toolbar.night.hasClass('active')
+  if (isActive) {
+    $body.removeClass('night')
+    appState.nightMode = false
+  } else {
+    $body.addClass('night')
+    appState.nightMode = true
+  }
+}
 function emitPermission (_permission) {
  if (_permission !== permission) {
    socket.emit('permission', _permission)
--- a/public/js/lib/appState.js
+++ b/public/js/lib/appState.js
@ -2,7 +2,8 @@ import modeType from './modeType'

 let state = {
  syncscroll: true,
-  currentMode: modeType.view
+  currentMode: modeType.view,
+  nightMode: false
 }

 export default state
--- a/public/js/lib/editor/ui-elements.js
+++ b/public/js/lib/editor/ui-elements.js
@ -37,6 +37,7 @@ export const getUIElements = () => ({
    edit: $('.ui-edit'),
    view: $('.ui-view'),
    both: $('.ui-both'),
+    night: $('.ui-night'),
    uploadImage: $('.ui-upload-image')
  },
  infobar: {
--- a/public/views/hackmd/header.ejs
+++ b/public/views/hackmd/header.ejs
@ -96,6 +96,11 @@
                    <input type="radio" name="mode" autocomplete="off"><i class="fa fa-pencil"></i>
                </label>
            </div>
+            <div class="btn-group" data-toggle="buttons">
+                <label class="btn ui-night" title="<%= __('Night Theme') %>">
+                    <input type="checkbox" name="night"><i class="fa fa-moon-o"></i>
+                </label>
+            </div>
            <span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal">
                <i class="fa fa-question-circle"></i>
            </span>