From a5d4cad5b7a2e05c24c95adc812f818242fe47e6 Mon Sep 17 00:00:00 2001 From: Chris Cavalluzzi Date: Sat, 21 May 2022 19:05:58 -0600 Subject: [PATCH] Add dark theme for main desktop client window Signed-off-by: Chris Cavalluzzi --- src/ui/ab.tis | 2 +- src/ui/common.css | 39 ++++++++++++++++++++++++++++++++++++--- src/ui/index.css | 13 +++++++------ src/ui/index.tis | 32 ++++++++++++++++++++++++-------- src/ui/msgbox.tis | 2 +- 5 files changed, 69 insertions(+), 19 deletions(-) diff --git a/src/ui/ab.tis b/src/ui/ab.tis index 2dfa87f47..716ff1ba6 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -471,7 +471,7 @@ class SessionList: Reactor.Component { } } msgbox("custom-rename", "Rename", "
\ -
\ +
\
\ ", function(res=null) { if (!res) return; diff --git a/src/ui/common.css b/src/ui/common.css index bc5f95a67..39427fc8a 100644 --- a/src/ui/common.css +++ b/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; } diff --git a/src/ui/index.css b/src/ui/index.css index 75b9f5b52..3c4dc6a47 100644 --- a/src/ui/index.css +++ b/src/ui/index.css @@ -80,8 +80,8 @@ div.sessions-tab svg { div.sessions-tab span.active { cursor: default; border-radius: 3px; - background: white; - color: black; + background: color(bg); + 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; } diff --git a/src/ui/index.tis b/src/ui/index.tis index cc4952b6c..43222eb97 100644 --- a/src/ui/index.tis +++ b/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 {
  • {translate('Login')}
    • } {handler.is_ok_change_id() && key_confirmed ?
  • {translate('Change ID')}
    • : ""}
    +
  • {svg_checkmark}{translate('Dark Theme')}
    • +
  • {translate('About')} {" "}{handler.get_app_name()}
    • ; @@ -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", "
    \ -
    " + translate("ID Server") + ":
    \ -
    " + translate("Relay Server") + ":
    \ -
    " + translate("API Server") + ":
    \ -
    " + translate("Key") + ":
    \ +
    " + translate("ID Server") + ":
    \ +
    " + translate("Relay Server") + ":
    \ +
    " + translate("API Server") + ":
    \ +
    " + translate("Key") + ":
    \
    \ ", 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",
    -
    {translate("Hostname")}:
    -
    {translate("Username")}:
    +
    {translate("Hostname")}:
    +
    {translate("Username")}:
    {translate("Password")}:
    , 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"), "
    \ + msgbox("custom-id", translate("Change ID"), "
    \
    " + translate('id_change_tip') + "
    \ -
    ID:
    \ +
    ID:
    \
    \ ", 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() { diff --git a/src/ui/msgbox.tis b/src/ui/msgbox.tis index b19c9a039..070ec6588 100644 --- a/src/ui/msgbox.tis +++ b/src/ui/msgbox.tis @@ -106,7 +106,7 @@ class MsgboxComponent: Reactor.Component { self.timer(3ms, msgboxTimerFunc); return (
    -
    +
    {translate(this.title)}