First version of night time mode in the web app.

public/styles/style.css

@@ -28,6 +28,11 @@ body {
     padding: 0;
 }
 
+.night #container {
+    color: #bbb;
+    background-color: #000;
+}
+
 .fullscreen.login #container {
     -ms-grid-rows: 66px 24px 1fr 45px;
     grid-template-rows: 66px 24px auto 45px;
@@ -266,6 +271,10 @@ body {
     min-width: unset;
 }
 
+.night #column_l {
+    background-color: #000;
+}
+
 .menu_stack.fullscreen.fulldesk #column_l {
     -ms-grid-column: 1;
     -ms-grid-row: 1;
@@ -618,6 +627,11 @@ body {
     border-spacing: 0;
 }
 
+.night #devListToolbarSpan {
+    color: black;
+    background-color: #d3d9d6;
+}
+
 #SearchInput {
     width: 120px;
 }
@@ -911,12 +925,12 @@ NoMeshesPanel img {
 }
 
 #p10html2 thead {
-    background-color: #AAAAAA;
+    background-color: #AAA;
     font-weight: bold;
 }
 
     #p10html2 thead tr {
-        background-color: #AAAAAA;
+        background-color: #AAA;
         font-weight: bold;
     }
 
@@ -1046,6 +1060,10 @@ a {
     cursor: pointer;
 }
 
+.night a {
+    color: #369;
+}
+
 .i1 {
     background: url(../images/icons50.png) 0px 0px;
     height: 50px;
@@ -1385,7 +1403,6 @@ a {
 
 .style7 {
     font-size: large;
-    background-color: #FFFFFF;
     width: 180px;
 }
 
@@ -1398,6 +1415,10 @@ a {
     background-color: #C9C9C9;
 }
 
+.night .style10 {
+    color: #333;
+}
+
 .style11 {
     font-size: large;
     background-color: #C9C9C9;
@@ -1411,7 +1432,6 @@ a {
 
 .auto-style1 {
     text-align: right;
-    background-color: #D3D9D6;
 }
 
 #pTable .auto-style1 {
@@ -1419,6 +1439,14 @@ a {
     float: right;
 }
 
+.night .auto-style1 {
+    color: black;
+}
+
+.night #pTable {
+    color: black;
+}
+
 .icon2 {
     float: left;
     margin: 7px;
@@ -1478,7 +1506,6 @@ a {
     -o-user-select: none;
     cursor: default;
     -khtml-user-drag: element;
-    background-color: white;
     clear: both;
 }
 
@@ -1505,12 +1532,16 @@ a {
     /* fallback (Opera) */
     /* Mozilla: */
     /* Chrome, Safari:*/
-    background-image: linear-gradient(to right, #ffffff 0%, #c9c9c9 100%);
+    background-image: linear-gradient(to right, #fff 0%, #c9c9c9 100%);
     background-color: #c9c9c9;
     background-repeat: repeat;
     background-attachment: scroll;
 }
 
+.night .g1 {
+    background-image: linear-gradient(to right, #000 0%, #c9c9c9 100%);
+}
+
 #p3events .g1 {
     float: none;
 }
@@ -1521,7 +1552,11 @@ a {
 }
 
 .g1s {
-    background-image: linear-gradient(to right, #ffffff 0%, #b9b9b9 100%);
+    background-image: linear-gradient(to right, #fff 0%, #b9b9b9 100%);
+}
+
+.night .g1s {
+    background-image: linear-gradient(to right, #000 0%, #b9b9b9 100%);
 }
 
 .g2 {
@@ -1532,12 +1567,16 @@ a {
     /* fallback (Opera) */
     /* Mozilla: */
     /* Chrome, Safari:*/
-    background-image: linear-gradient(to right, #c9c9c9 0%, #ffffff 100%);
+    background-image: linear-gradient(to right, #c9c9c9 0%, #fff 100%);
     background-color: #c9c9c9;
     background-repeat: repeat;
     background-attachment: scroll;
 }
 
+.night .g2 {
+    background-image: linear-gradient(to right, #c9c9c9 0%, #000 100%);
+}
+
 #p3events .g2 {
     float: none;
 }
@@ -1548,7 +1587,11 @@ a {
 }
 
 .g2s {
-    background-image: linear-gradient(to right, #b9b9b9 0%, #ffffff 100%);
+    background-image: linear-gradient(to right, #b9b9b9 0%, #fff 100%);
+}
+
+.night .g2s {
+    background-image: linear-gradient(to right, #b9b9b9 0%, #000 100%);
 }
 
 .h1pre {
@@ -1566,12 +1609,16 @@ a {
     /* fallback (Opera) */
     /* Mozilla: */
     /* Chrome, Safari:*/
-    background-image: linear-gradient(to right, #ffffff 0%, #d3d9d6 100%);
+    background-image: linear-gradient(to right, #fff 0%, #d3d9d6 100%);
     background-color: #d3d9d6;
     background-repeat: repeat;
     background-attachment: scroll;
 }
 
+.night .h1 {
+    background-image: linear-gradient(to right, #000 0%, #d3d9d6 100%);
+}
+
 .h2end {
     height: 100%;
     width: 20px;
@@ -1586,12 +1633,16 @@ a {
     /* fallback (Opera) */
     /* Mozilla: */
     /* Chrome, Safari:*/
-    background-image: linear-gradient(to right, #d3d9d6 0%, #ffffff 100%);
+    background-image: linear-gradient(to right, #d3d9d6 0%, #fff 100%);
     background-color: #d3d9d6;
     background-repeat: repeat;
     background-attachment: scroll;
 }
 
+.night .h2 {
+    background-image: linear-gradient(to right, #d3d9d6 0%, #000 100%);
+}
+
 .e1 {
     font-size: large;
     margin-top: 4px;
@@ -1608,6 +1659,10 @@ a {
     background-color: #c9c9c9;
 }
 
+.night .e2 {
+    color: black;
+}
+
 .e2s {
     background-color: #b9b9b9;
 }
@@ -1671,6 +1726,10 @@ a {
     border-bottom-color: #DDDDDD;
 }
 
+.night .DevSt {
+    color: white;
+}
+
 .contextMenu {
     background: #F9F9F9;
     box-shadow: 0 0 12px rgba( 0, 0, 0, .3 );
@@ -2057,7 +2116,7 @@ a {
     top: 200px;
     text-align: center;
     font-size: 1600%;
-    color: #AAAAAA;
+    color: #AAA;
 }
 
 #p13bigfail {
@@ -2068,13 +2127,13 @@ a {
     top: 200px;
     text-align: center;
     font-size: 1600%;
-    color: #AAAAAA;
+    color: #AAA;
 }
 
 .fulldesk #p14title {
     margin-left: 16px;
     margin-right: 16px;
-    color: #CCCCCC;
+    color: #CCC;
 }
 
 #p14iframe {
@@ -2160,6 +2219,10 @@ a {
     overflow-y: auto;
 }
 
+.night #p16events, #p31events {
+    color: #222;
+}
+
 #p40 {
     height: calc(100vh - 191px);
 }
@@ -2280,6 +2343,13 @@ a {
     width: 28px;
 }
 
+.uiSelector4 {
+    margin: 2px;
+    background: url(../images/views.png) -280px 0px;
+    height: 28px;
+    width: 28px;
+}
+
 .backButton {
     width: 32px;
     height: 32px;

views/default.handlebars

@@ -90,6 +90,7 @@
                             <div id=uiViewButton1 class=uiSelector onclick=userInterfaceSelectMenu(1) title="Left bar interface"><div class="uiSelector1"></div></div>
                             <div id=uiViewButton2 class=uiSelector onclick=userInterfaceSelectMenu(2) title="Top bar interface"><div class="uiSelector2"></div></div>
                             <div id=uiViewButton3 class=uiSelector onclick=userInterfaceSelectMenu(3) title="Fixed width interface"><div class="uiSelector3"></div></div>
+                            <div id=uiViewButton4 class=uiSelector onclick=toggleNightMode() title="Toggle night mode"><div class="uiSelector4"></div></div>
                         </div>
                     </div>
                     <table id=MainMenuSpan cellpadding=0 cellspacing=0 class=style1>
@@ -926,6 +927,7 @@
         var uiMode = parseInt(getstore('uiMode', 1));
         var webPageStackMenu = false;
         var webPageFullScreen = true;
+        var nightMode = (getstore('uiMode', 1) == 1);
 
         function startup() {
             if ((features & 32) == 0) {
@@ -944,6 +946,7 @@
             QV('autoconnectbutton1', debugmode); // Desktop
             //QV('DeskClip', debugmode); // Clipboard feature, not completed so show in in debug mode only.
 
+            if (nightMode) { QC('body').add('night'); }
             toggleFullScreen();
 
             // Setup page visuals
@@ -1070,8 +1073,10 @@
             Q('uiViewButton1').classList.remove('uiSelectorSel');
             Q('uiViewButton2').classList.remove('uiSelectorSel');
             Q('uiViewButton3').classList.remove('uiSelectorSel');
-            try { Q('uiViewButton' + uiMode).classList.add('uiSelectorSel'); } catch (ex) {}
+            Q('uiViewButton4').classList.remove('uiSelectorSel');
+            try { Q('uiViewButton' + uiMode).classList.add('uiSelectorSel'); } catch (ex) { }
             QV('uiMenu', (QS('uiMenu').display == 'none'));
+            if (nightMode) { Q('uiViewButton4').classList.add('uiSelectorSel'); }
         }
 
         function userInterfaceSelectMenu(s) {
@@ -1082,6 +1087,12 @@
             toggleStackMenu(0);
         }
 
+        function toggleNightMode() {
+            nightMode = !nightMode;
+            if (nightMode) { QC('body').add('night'); } else { QC('body').remove('night'); }
+            putstore('nightMode', nightMode?1:0);
+        }
+
         // Toggle the web page to full screen
         function toggleFullScreen(toggle) {
             if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }