Add dark theme for main desktop client window

Signed-off-by: Chris Cavalluzzi <chriscavalluzzi@gmail.com>

src/ui/ab.tis

@@ -471,7 +471,7 @@ class SessionList: Reactor.Component {
                 }
             }
             msgbox("custom-rename", "Rename", "<div .form> \
-                <div><input name='name' .outline-focus style='width: *; height: 23px', value='" + old_name + "' /></div> \
+                <div><input|text name='name' .outline-focus style='width: *; height: 23px', value='" + old_name + "' /></div> \
                 </div> \
                 ", function(res=null) {
                     if (!res) return;

src/ui/common.css

@@ -9,6 +9,7 @@ html {
     var(placeholder): #aaa;
     var(lighter-text): #888;
     var(light-text): #666;
+    var(menu-hover): #D7E4F2;
     var(dark-red): #A72145;
     var(dark-yellow): #FBC732;
     var(dark-blue): #2E2459;
@@ -20,6 +21,18 @@ html {
     var(blood-red): #F82600;
 }
 
+html.darktheme {
+    var(bg): #252525;
+    var(gray-bg): #141414;
+    var(menu-hover): #2D3033;
+    var(border): #555;
+
+    var(text): white;
+    var(light-text): #999;
+    var(lighter-text): #777;
+    var(placeholder): #555;
+}
+
 body {
     margin: 0;
     color: color(text);
@@ -62,8 +75,9 @@ input[type=text], input[type=password], input[type=number] {
     font-size: 1.5em;
     border-color: color(border);
     border-radius: 0;
-    color: black;
+    color: color(text);
     padding-left: 0.5em;
+    background: color(bg);
 }
 
 input:empty {
@@ -74,6 +88,15 @@ input.outline-focus:focus {
     outline: color(button) solid 3px;
 }
 
+textarea {
+    background: color(bg);
+    color: color(text);
+}
+
+textarea:empty {
+    color: color(placeholder);
+}
+
 @set my-scrollbar
 {
   .prev { display:none; }
@@ -287,6 +310,10 @@ progress {
     background: transparent;
 }
 
+menu {
+  background: color(bg);
+}
+
 menu div.separator {
   height: 1px;
   width: *;
@@ -296,6 +323,7 @@ menu div.separator {
 }
 
 menu li {
+  color: color(text);
   position: relative;
 }
 
@@ -319,7 +347,12 @@ menu li.selected span:nth-child(1) {
   opacity: 0.5;
 }
 
-menu li.line-through {
+menu li:hover {
+  background: color(menu-hover);
+  color: color(text);
+}
+
+menu li.line-through, menu li.line-through :hover {
   text-decoration-line: line-through;
   color: red;
 }
@@ -366,7 +399,7 @@ div#msgbox .caption {
   height: 2em;
   line-height: 2em;
   text-align: center;
-  color: white; 
+  color: color(bg);
   font-weight: bold;
 }
 

src/ui/index.css

@@ -80,8 +80,8 @@ div.sessions-tab svg {
 div.sessions-tab span.active {
     cursor: default;
     border-radius: 3px;
-    background: white;
+    background: color(bg);
-    color: black;
+    color: color(text);
 }
 
 div.search-id {
@@ -256,7 +256,7 @@ div.remote-session .platform svg {
 }
 
 div.remote-session-list {
-    background: white;
+    background: color(bg);
     width: 220px;
     flow: horizontal;
 }
@@ -290,7 +290,7 @@ div.remote-session-list .name .username {
 }
 
 div.remote-session .text {
-    background: white;
+    background: color(bg);
     position: absolute;
     height: 3em;
     width: 100%;
@@ -318,13 +318,13 @@ svg#menu {
 }
 
 svg#menu:hover {
-    color: black;
+    color: color(text);
     border-radius: 1em;
     background: color(gray-bg);
 }
 
 svg#edit:hover {
-    color: black;
+    color: color(text);
 }
 
 svg#edit {
@@ -401,4 +401,5 @@ div.remote-session svg#menu {
     border-color: white;
     border: 1px;
     background: none;
+    color: white;
 }

src/ui/index.tis

@@ -172,6 +172,17 @@ function getUserName() {
     return '';
 }
 
+function updateTheme() {
+    var root_element = self;
+    if (handler.get_option("allow-darktheme") == "Y") {
+        // enable dark theme
+        root_element.attributes.toggleClass("darktheme", true);
+    } else {
+        // disable dark theme
+        root_element.attributes.toggleClass("darktheme", false);
+    }
+}
+
 class MyIdMenu: Reactor.Component {
     function this() {
         myIdMenu = this;
@@ -210,6 +221,8 @@ class MyIdMenu: Reactor.Component {
                 <li #login>{translate('Login')}</li>}
                 {handler.is_ok_change_id() && key_confirmed ? <li #change-id>{translate('Change ID')}</li> : ""}
                 <div .separator />
+                <li #allow-darktheme><span>{svg_checkmark}</span>{translate('Dark Theme')}</li>
+                <div .separator />
                 <li #about>{translate('About')} {" "}{handler.get_app_name()}</li>
             </menu>
         </popup>;
@@ -303,10 +316,10 @@ class MyIdMenu: Reactor.Component {
             var old_id = configOptions["custom-rendezvous-server"] || "";
             var old_key = configOptions["key"] || "";
             msgbox("custom-server", "ID/Relay Server", "<div .form .set-password> \
-            <div><span>" + translate("ID Server") + ": </span><input .outline-focus name='id' value='" + old_id + "' /></div> \
+            <div><span>" + translate("ID Server") + ": </span><input|text .outline-focus name='id' value='" + old_id + "' /></div> \
-            <div><span>" + translate("Relay Server") + ": </span><input name='relay' value='" + old_relay + "' /></div> \
+            <div><span>" + translate("Relay Server") + ": </span><input|text name='relay' value='" + old_relay + "' /></div> \
-            <div><span>" + translate("API Server") + ": </span><input name='api' value='" + old_api + "' /></div> \
+            <div><span>" + translate("API Server") + ": </span><input|text name='api' value='" + old_api + "' /></div> \
-            <div><span>" + translate("Key") + ": </span><input name='key' value='" + old_key + "' /></div> \
+            <div><span>" + translate("Key") + ": </span><input|text name='key' value='" + old_key + "' /></div> \
             </div> \
             ", function(res=null) {
                 if (!res) return;
@@ -340,8 +353,8 @@ class MyIdMenu: Reactor.Component {
             var old_username = socks5[1] || "";
             var old_password = socks5[2] || "";
             msgbox("custom-server", "Socks5 Proxy", <div .form .set-password> 
-            <div><span>{translate("Hostname")}:</span><input .outline-focus name='proxy' value={old_proxy} /></div>
+            <div><span>{translate("Hostname")}:</span><input|text .outline-focus name='proxy' value={old_proxy} /></div>
-            <div><span>{translate("Username")}:</span><input name='username' value={old_username} /></div>
+            <div><span>{translate("Username")}:</span><input|text name='username' value={old_username} /></div>
             <div><span>{translate("Password")}:</span><PasswordComponent value={old_password} /></div>
             </div>
             , function(res=null) {
@@ -361,9 +374,9 @@ class MyIdMenu: Reactor.Component {
         } else if (me.id == "stop-rendezvous-service") {
             handler.set_option("stop-rendezvous-service",  rendezvous_service_stopped ? "" : "Y");
         } else if (me.id == "change-id") {
-            msgbox("custom-id", translate("Change ID"), "<div .form> \
+            msgbox("custom-id", translate("Change ID"), "<div .form .set-password> \
             <div>" + translate('id_change_tip') + " </div> \
-            <div><span style='width: 100px; display:inline-block'>ID: </span><input .outline-focus style='width: 250px' name='id' /></div> \
+            <div><span style='width: 100px; display:inline-block'>ID: </span><input|text .outline-focus style='width: 250px' name='id' /></div> \
             </div> \
             ", function(res=null, show_progress) {
                 if (!res) return;
@@ -383,6 +396,8 @@ class MyIdMenu: Reactor.Component {
                 check_status();
                 return " ";
             });
+        } else if (me.id == "allow-darktheme") {
+            updateTheme();
         } else if (me.id == "about") {
             this.showAbout()
         }
@@ -867,6 +882,7 @@ function self.ready() {
         view.focus = $(#remote_id);
     }
     refreshCurrentUser();
+    updateTheme();
 }
 
 function showAbout() {

src/ui/msgbox.tis

@@ -106,7 +106,7 @@ class MsgboxComponent: Reactor.Component {
         self.timer(3ms, msgboxTimerFunc);
         return (<div><div style="position: absolute; size:*; background:black; opacity:0.5;" />
         <div style="size: *; position: absolute;">
-            <div style={"border: " + color + " solid 1px; background: white; margin: *; width:" + (this.width) + "px; min-height:" + (this.height) + "px"}>
+            <div style={"border: " + color + " solid 1px; background: color(bg); margin: *; width:" + (this.width) + "px; min-height:" + (this.height) + "px"}>
             <div .caption style={"background: " + color}>
                 {translate(this.title)}
             </div>