dark theme & theme diy tools

README.md

@@ -1,6 +1,6 @@
 # **Guacamole 1.5.3 VDI/Jump Server Appliance Build Script**
 
-A menu based source build & install script for Guacamole 1.5.3 with support for TLS reverse proxy, AD integration, multi-factor authentication and further security hardening.
+A menu based source build & install script for Guacamole 1.5.3 with optional TLS reverse proxy, AD integration, multi-factor authentication, further security hardening and dark mode support.
 
 ### **Automatic build, install & config script**
 
@@ -94,4 +94,4 @@ The autorun link above downloads the following items into the `$DOWNLOAD_DIR/gua
 - `add-fail2ban.sh`: Adds a fail2ban policy (with local subnet override) to secure Guacamole against external brute force attacks
 - `add-smtp-relay-o365.sh`: Sets up an SMTP auth relay with O365 for monitoring & alerts (BYO app password)
 - `backup-guacamole.sh`: A simple MySQL Guacamole backup script
-- `branding.jar`: An example template for a customised Guacamole login screen. Much further UI customisation is possible inside this extension via additional CSS. Delete this file to keep the default Guacmole UI. 
+- `branding.jar`: An example template for a custom (dark mode!) Guacamole theme. Delete this file to keep the default Guacamole UI. This extension's source is also included for easier study and customisation.

custom-theme-builder/META-INF/MANIFEST.MF

@@ -0,0 +1,8 @@
+Manifest-Version: 1.0
+Name: branding
+Specification-Title: Custom Guacamole Theme CSS
+Specification-Version: 1.0
+Implementation-Title: Custom Guacamole Theme CSS
+Implementation-Version: 1.0
+
+

custom-theme-builder/README.MD

@@ -0,0 +1,23 @@
+
+## Custom branding & theme instructions ##
+
+1. Install Java JDK: `sudo apt update && sudo apt -y install default-jdk`
+3. Modify `custom-theme.css` ,`guac-manifest.json`, `en.json` & `META-INF` as desired & add your logo .png files to the images directory.
+4. To commit your changes, run the below commands from within the custom-theme-builder directory, then refresh your browser to re-login to Guacamole:
+```
+# Run within the custom-theme-builder directory 
+jar cfmv branding.jar META-INF/MANIFEST.MF guac-manifest.json css images translations META-INF
+sudo mv branding.jar /etc/guacamole/extensions 
+sudo chmod 664 /etc/guacamole/extensions/branding.jar 
+TOMCAT=$(ls /etc/ | grep tomcat)
+sudo systemctl restart guacd && sudo systemctl restart ${TOMCAT}
+```
+
+## Theme customisation hints: ##
+  - Do not change any of the theme's directory structure or file names. File contents can be carefully edited according to the following constraints:
+      - `MANIFEST.MF`: All values in here can be updated. Be aware that the "Name:" value MUST use same value in front of the the .jar creation command shown above in the 1st line e.g. `Name: branding` expects branding.jar
+      - `guac-manifest.json`: The "name:" value in here can be changed to anything. The "namespace:" value MUST match the namespace image path line found in `custom-theme.css`, eg.`background-image: url('app/ext/custom-namespace/images/logo.png');`
+  - It is preferable to give css a range of logo sizes as shown in the template. The "smallIcon" value in `guac-manifest.json` is used for browser tab favicons. As such this file can be kept to < 80x80 pixels. The example used is 64x64 pixels.
+  - Within `custom-theme.css`, you may need to experiment with the the height and width values under `.login-ui .login-dialog .logo` to scale your particular logo neatly within the dialog box. Another option is to make the login dialog box larger. Under `.login-ui .login-dialog`, experiment with adding a `max-width: 4in;` or similar. There's a ton of css options available and this template is just starting point, Google is your friend!
+  - An easy way to debug and preview potential style changes is to tweak various values by setting your browser to developer mode. 
+  - Your changes may occasionally appear not to update, if so clear your browser cache before doing any further debugging.

custom-theme-builder/css/custom-theme.css

@@ -0,0 +1,245 @@
+/* Colour codes used */
+/*    Guacamole grassy green: #88bf5b */
+/*    Warning red #ff2233 */
+/*    Main background charcoal #3f3f3f */
+/*    Input fields dark charcoal #2b2b2b */
+/*    Login dialog background black #000000 */
+/*    All text: #ececec */
+
+
+/* General Style */
+body {
+    color: #ececec;
+    background-color: #3f3f3f;
+}
+pre {
+    color: #ececec;
+    background-color: #2b2b2b;
+    border: 1px solid #000000;
+}
+
+a[href]:visited {
+    color: #88bf5b;
+}
+a[href] {
+    color: #88bf5b;
+}
+
+div.location,
+input[type=text],
+input[type=email],
+input[type=number],
+input[type=password],
+textarea {
+    background-color: #2b2b2b;
+    color: #ececec;
+}
+
+
+/* Login */
+div.login-ui {
+    color: #ececec;
+    background-color: #3f3f3f;
+}
+.login-ui .login-fields .labeled-field input:focus {
+    background-color: #3f3f3f;
+    color: #ececec;
+}
+
+.login-ui .login-fields .labeled-field {
+    background-color: #3f3f3f;
+    color: #ececec;
+}
+
+.login-ui .login-dialog .logo {
+    background-image: url('app/ext/custom-namespace/images/logo.png');
+    width: 7em;
+    height:	7em;
+    -webkit-background-size: 7em auto;
+
+}
+
+.login-ui .login-dialog {
+    background-color: #000000;
+    color: #ececec;
+}
+
+.login-ui .login-dialog .version .app-name {
+    font-weight: 300;
+    text-transform: none;
+    text-align: center;
+    font-size: 2.25em;
+    color: #ececec;
+    font-family: arial black, sans-serif;
+}
+
+div.logged-out-modal .ng-scope {
+    color: #ececec;
+    background-color: #000000;
+}
+
+div.logged-out-modal .ng-scope button {
+    color: #ececec;
+    background-color: #3f3f3f;
+    border: 1px solid #ececec;
+}
+
+div.modal-contents {
+    color: #ececec;
+    background-color: #3f3f3f;
+}
+
+.logged-out-modal guac-modal {
+    color: #ececec;
+    background-color: #3f3f3f;
+}
+
+div.notification.ng.scope {
+    border: 1px solid #ececec;
+}
+
+.notification.error {
+    background-color: #ff2233;
+}
+
+.client-status-modal .notification.error {
+    background-color: #ff2233;
+}
+
+button.danger {
+    background: #ff2233;
+ }
+
+.login-ui.error p.login-error {
+    color: #ececec;
+    background-color: #ff2233;
+}
+
+
+/* Home */
+.recent-connections .connection:hover {
+    background-color: #88bf5b;
+}
+
+.menu-dropdown .menu-contents {
+    background-color: #2b2b2b;
+}
+.menu-dropdown .menu-contents li a {
+    color: #ececec;
+}
+.menu-dropdown .menu-contents li a:hover {
+    background-color: #88bf5b;
+}
+
+.list-item.selected {
+    background: #88bf5b
+}
+.list-item:not(.selected) .caption:hover {
+    background-color: #88bf5b;
+}
+.list-item .name {
+    color: #ececec;
+}
+
+.settings.connections .connection-list .new-sharing-profile {
+    opacity: .6;
+}
+
+.notification {
+    color: #ececec;
+    background-color: #2b2b2b;
+}
+
+
+/* Menus */
+.menu {
+    color: #ececec;
+    background-color: #3f3f3f;
+}
+
+.clipboard,
+.clipboard-service-target {
+    background-color: #2b2b2b;
+    color: #88bf5b;
+}
+
+.menu-dropdown .menu-contents li a.danger {
+    color: #ececec;
+    font-weight: 700;
+    background-color: #ff2233;
+}
+
+/* Connections */
+#connection-warning {
+    background-color: #3f3f3f;
+}
+
+.transfer-manager {
+    background-color: #2b2b2b;
+}
+.transfer.error {
+    background-color: #ff2233;
+}
+
+
+/* Settings */
+.page-tabs .page-list li a[href],
+.section-tabs li a {
+    color: #ececec;
+}
+.page-tabs .page-list li a[href]:hover,
+.section-tabs li a:hover {
+    background-color: #88bf5b;
+}
+.page-tabs .page-list li a[href]:visited {
+    color: #ececec;
+}
+
+.settings table.session-list tr.session:hover {
+    background-color: #88bf5b;
+}
+
+.location-chooser .dropdown {
+    background-color: #2b2b2b;
+}
+
+.settings.connectionHistory a.history-session-recording {
+    color: #88bf5b;
+}
+
+.settings.connectionHistory a.history-session-recording:after {
+    opacity: .0;
+}
+
+.user a,
+.user-group a,
+.connection a,
+.connection-group a {
+    color: #ececec;
+}
+.user a:hover,
+.user-group a:hover,
+.connection a:hover,
+.connection-group a:hover {
+    color: #ececec;
+}
+.user a:visited,
+.user-group a:visited,
+.connection a:visited,
+.connection-group a:visited {
+    color: #ececec;
+}
+
+.manage-user .notice.read-only {
+    color: #ececec;
+    background-color: #2b2b2b;
+}
+
+#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
+    background-color: #88bf5b;
+}
+
+#guac-menu #zoom-out:hover,
+#guac-menu #zoom-in:hover {
+    background-color: #88bf5b;
+}

custom-theme-builder/guac-manifest.json

@@ -0,0 +1,22 @@
+{
+
+        "guacamoleVersion" : "*",
+        "name" : "Custom Guacamole Theme",
+        "namespace" : "custom-namespace",
+        "smallIcon" : "images/logo-64.png",
+        "largeIcon" : "images/logo-144.png",
+        "translations" : [ 
+        "translations/en.json"
+     ],
+
+     "css" : [
+                "css/custom-theme.css"
+         ],
+
+     "resources" : {
+                "images/logo.png" : "image/png",
+                "images/logo-64.png" : "image/png",
+                "images/logo-144.png" : "image/png"
+         }
+}
+

custom-theme-builder/translations/en.json

@@ -0,0 +1,8 @@
+{
+    "NAME" : "English",
+		
+    "APP":{
+	
+	"NAME" : "Itiligent" 
+	  }
+}