From 47e01ee2eb04648021fc383e265f552239adbf5d Mon Sep 17 00:00:00 2001
From: 0x726564646974 <0x726564646974@github.com>
Date: Tue, 6 Jun 2017 21:23:51 -0400
Subject: [PATCH] Adding basic theme command

---
 css/menupages.css      | 31 +++++++++++----------
 css/popupboxes.css     | 63 +++++++++++++++++++++---------------------
 css/styles.css         | 25 +++++++++++------
 css/terminal.css       | 11 ++++----
 css/workinprogress.css |  4 +--
 src/Terminal.js        | 45 +++++++++++++++++++++++++++---
 6 files changed, 114 insertions(+), 65 deletions(-)

diff --git a/css/menupages.css b/css/menupages.css
index 2284324b0..f48362ad4 100644
--- a/css/menupages.css
+++ b/css/menupages.css
@@ -26,7 +26,7 @@
 	height: 100%;
 	margin-left: 10%;
     width: 99%;
-    color: #66ff33;
+    color: var(--my-font-color);
     overflow-y: scroll;
 }
 
@@ -62,7 +62,7 @@
     margin-right: 0px;
     padding-left: 6px;
     width: 100%;
-    border: 2px solid white; 
+    border: 2px solid var(--my-highlight-color);    
 }
 
 #script-editor-filename-tag {
@@ -71,6 +71,7 @@
     padding-bottom: 0px;
     float:center;
     background-color: #555;
+    color: white;
 }
 
 #script-editor-filename {	
@@ -83,7 +84,7 @@ background-color: #555;
     
     padding:  2px;
 	
-    border: 2px solid white; 
+    border: 2px solid var(--my-highlight-color); 
     -webkit-box-shadow: 
       inset 0 0 8px  rgba(0,0,0,0.1),
             0 0 16px rgba(0,0,0,0.1); 
@@ -101,7 +102,7 @@ background-color: #555;
 }
 
 #script-editor-text {
-	color: #66ff33;
+	color: var(--my-font-color);
 	height: 80%;
     width: 100%;
     margin-left: 6px;
@@ -110,7 +111,7 @@ background-color: #555;
     padding-top: 6px;
     padding-bottom: 6px;
     
-    border: 2px solid white; 
+    border: 2px solid var(--my-highlight-color); 
     -webkit-box-shadow: 
       inset 0 0 8px  rgba(0,0,0,0.1),
             0 0 16px rgba(0,0,0,0.1); 
@@ -198,7 +199,7 @@ background-color: #555;
 
 .active-scripts-script-header {
     background-color: #555;
-    color: #66ff33;
+    color: var(--my-font-color);
     padding: 4px;
     padding-left: 10px;
     cursor: pointer;
@@ -220,7 +221,7 @@ background-color: #555;
 .active-scripts-script-header:after {
     content: '\02795'; /* "plus" sign (+) */
     font-size: 13px;
-    color: #66ff33;
+    color: var(--my-font-color);
     float: right;
     margin-left: 5px;
 }
@@ -228,7 +229,7 @@ background-color: #555;
 .active-scripts-script-header.active:after {
     content: "\2796"; /* "minus" sign (-) */
     font-size: 13px;
-    color: #66ff33;
+    color: var(--my-font-color);
     float: right;
     margin-left: 5px;
 }
@@ -291,7 +292,7 @@ background-color: #555;
     margin: 6px;
     padding: 6px;
     width: 85%;
-    border: 2px solid white; 
+    border: 2px solid var(--my-highlight-color); 
     -webkit-box-shadow: 
       inset 0 0 8px  rgba(0,0,0,0.1),
             0 0 16px rgba(0,0,0,0.1); 
@@ -375,7 +376,7 @@ background-color: #555;
     height: 100%;
     margin-left: 10%;
     width: 99%;
-    color: #66ff33;
+    color: var(--my-font-color);
     overflow-y: auto;
 }
 
@@ -425,7 +426,7 @@ background-color: #555;
     padding: 6px;
     margin: 6px;
     display: inline-block;
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #faction-donate-amount-txt {
@@ -450,7 +451,7 @@ div.faction-clear {
     height: 100%;
     margin-left: 10%;
     width: 99%;
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #faction-augmentations-container p,
@@ -480,7 +481,7 @@ div.faction-clear {
     height: 100%;
     margin-left: 10%;
     width: 99%;
-    color: #66ff33;
+    color: var(--my-font-color);
     overflow-y: scroll;
 }
 
@@ -492,7 +493,7 @@ div.faction-clear {
 #augmentations-list h2,
 #augmentations-list p {
     margin: 4px;
-    color: #66ff33;
+    color: var(--my-font-color);
 	padding: 8px;
     width: 70%;
     background-color: #333;
@@ -522,7 +523,7 @@ div.faction-clear {
 
 /* Location */
 #location-container {
-	color: #66ff33;
+	color: var(--my-font-color);
 	position: fixed;
 	padding: 6px;
     height: 100%;
diff --git a/css/popupboxes.css b/css/popupboxes.css
index 9a6ce8843..eb2fef9e9 100644
--- a/css/popupboxes.css
+++ b/css/popupboxes.css
@@ -8,8 +8,9 @@
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
-    background-color: black; /* Fallback color */
-    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    /*background-color: black; /* Fallback color */
+    /*background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    background-color: var(--my-background-color);
 }
 
 .dialog-box-container {
@@ -23,15 +24,15 @@
     left: 50%;
     margin: -10% 0 0 -25%;
     overflow: auto;
-    background-color: black;
-    background-color: rgba(0,0,0,0.4);
-    border: 5px solid #FFFFFF;
+    background-color: var(--my-background-color);
+    border: 5px solid var(--my-highlight-color);
 }
 
 .dialog-box-content {
     z-index: 2;
-    background-color: black;
+    background-color: var(--my-background-color);
     padding: 10px;
+    border: 5px solid var(--my-highlight-color);;
 }
 
 .dialog-box-close-button {
@@ -60,12 +61,12 @@
 }
 
 #purchase-server-box-content {
-    background-color: black;
+    background-color: background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 12px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);;
     width: 80%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #purchase-server-box-input {
@@ -85,14 +86,14 @@
 
 #purchase-server-box-confirm:hover,
 #purchase-server-box-confirm:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
 
 #purchase-server-box-cancel:hover,
 #purchase-server-box-cancel:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
@@ -103,12 +104,12 @@
 }
 
 #purchase-ram-for-home-box-content {
-    background-color: black;
+    background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 12px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);
     width: 50%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #purchase-ram-for-home-box-confirm,
@@ -124,14 +125,14 @@
 
 #purchase-ram-for-home-box-confirm:hover,
 #purchase-ram-for-home-box-confirm:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
 
 #purchase-ram-for-home-box-cancel:hover,
 #purchase-ram-for-home-box-cancel:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
@@ -142,12 +143,12 @@
 }
 
 #purchase-augmentation-box-content {
-    background-color: black;
+    background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 8px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);;
     width: 80%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #purchase-augmentation-box-confirm,
@@ -163,14 +164,14 @@
 
 #purchase-augmentation-box-confirm:hover,
 #purchase-augmentation-box-confirm:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
 
 #purchase-augmentation-box-cancel:hover,
 #purchase-augmentation-box-cancel:focus {
-    color: #66ff33;
+    color: var(--my-font-color);
     text-decoration: none;
     cursor: pointer;
 }
@@ -181,12 +182,12 @@
 }
 
 #faction-invitation-box-content {
-    background-color: black;
+    background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 10px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);;
     width: 80%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #faction-invitation-box-warning {
@@ -225,12 +226,12 @@
 }
 
 #travel-box-content {
-    background-color: black;
+    background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 10px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);;
     width: 50%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #travel-box-text {
@@ -268,12 +269,12 @@
 }
 
 #game-options-content {
-    background-color: black;
+    background-color: var(--my-background-color);
     margin: 15% auto; /* 15% from the top and centered */
     padding: 10px;
-    border: 5px solid #FFFFFF;
+    border: 5px solid var(--my-highlight-color);
     width: 50%; /* Could be more or less, depending on screen size */
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 #game-options-close-button {
@@ -296,4 +297,4 @@
     color: white;
     text-decoration: none;
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/css/styles.css b/css/styles.css
index c273084e4..c26064b68 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,25 +1,34 @@
 /** This removes all padding and margins as well as 
     setting a default font size and family for the page **/
+    
+
+:root{
+    --my-font-color: #66ff33;
+    --my-background-color: #000000;
+    --my-highlight-color: #ffffff;
+}
+    
+    
 * { 
     margin: 0;
     padding: 0;
     font-size: 16px;
     font-family: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
-    background-color: #252527;
-    background-color: black;
+    /*background-color: #252527;*/
+    background-color: var(--my-background-color);
 }
 
 p {
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 h1 {
     font-size: 22px;
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 h2 {
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 ul {
@@ -151,8 +160,8 @@ tr:focus {
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 300px;
-    background-color: black;
-    border: 2px solid white;
+    background-color: var(--my-background-color);
+    border: 2px solid var(--my-highlight-color);;
     color: white;
     text-align: center;
     padding: 4px;
@@ -244,7 +253,7 @@ tr:focus {
     height: 175px; /* Full height */
     /*margin: 50% auto;*/
     padding: 5px;
-    border: 2px solid #66ff33;
+    border: 2px solid var(--my-highlight-color);
     width: 18%;
     overflow: auto; /* Enable scroll if needed */
     background-color: #444; /* Fallback color */
diff --git a/css/terminal.css b/css/terminal.css
index cfe21cef8..8a392f432 100644
--- a/css/terminal.css
+++ b/css/terminal.css
@@ -4,7 +4,7 @@
 	height: 100%;
     width: 99%;
 	overflow: auto;
-	overflow-y: scroll;
+	overflow-y: scroll;    
 }
 
 #terminal {
@@ -15,11 +15,12 @@
     font-size: 16px;
 	overflow: auto;
 	overflow-y: scroll;
+    background-color: var(--my-background-color);
 }
 
 #terminal-input {
-    background-color: black;
-    color: #66ff33;
+    background-color: var(--my-background-color);
+    color: var(--my-font-color);
     transition: height 1s;
 }
 
@@ -29,10 +30,10 @@
 	padding: 0px !important;
 	margin: 0px !important;
 	border: 0px;
-	background-color: black;
+	background-color: var(--my-background-color);
 	font-size: 16px;
 	outline: none;
-    color: #66ff33;
+    color: var(--my-font-color);
 }
 
 
diff --git a/css/workinprogress.css b/css/workinprogress.css
index 416c8aa35..5df2903de 100644
--- a/css/workinprogress.css
+++ b/css/workinprogress.css
@@ -1,5 +1,5 @@
 #work-in-progress-container {
-    color: #66ff33;
+    color: var(--my-font-color);
     position: fixed;
 	padding-top: 10px;
 	padding-left: 10px;
@@ -8,7 +8,7 @@
 }
 
 #work-in-progress-text {
-    color: #66ff33;
+    color: var(--my-font-color);
     width: 70%;
 }
 
diff --git a/src/Terminal.js b/src/Terminal.js
index e9367f6cd..9017b1883 100644
--- a/src/Terminal.js
+++ b/src/Terminal.js
@@ -2,18 +2,18 @@
 
 /* Write text to terminal */
 var post = function(input) {
-    $("#terminal-input").before('<tr class="posted"><td style="color: #66ff33;">' + input.replace( / /g, "&nbsp;" ) + '</td></tr>');
+    $("#terminal-input").before('<tr class="posted"><td style="color: var(--my-font-color); background-color: var(--my-background-color);">' + input.replace( / /g, "&nbsp;" ) + '</td></tr>');
 	updateTerminalScroll();
 }
 
 //Same thing as post but the td cells have ids so they can be animated for the hack progress bar
 var hackProgressBarPost = function(input) {
-    $("#terminal-input").before('<tr class="posted"><td id="hack-progress-bar" style="color: #66ff33;">' + input + '</td></tr>');
+    $("#terminal-input").before('<tr class="posted"><td id="hack-progress-bar" style="color: var(--my-font-color); background-color: var(--my-background-color);">' + input + '</td></tr>');
 	updateTerminalScroll();
 }
 
 var hackProgressPost = function(input) {
-    $("#terminal-input").before('<tr class="posted"><td id="hack-progress" style="color: #66ff33;">' + input + '</td></tr>');
+    $("#terminal-input").before('<tr class="posted"><td id="hack-progress" style="color: var(--my-font-color); background-color: var(--my-background-color);">' + input + '</td></tr>');
 	updateTerminalScroll();    
 }
 
@@ -238,7 +238,7 @@ function determineAllPossibilitiesForTabCompletion(input, index=0) {
         return ["alias", "analyze", "cat", "clear", "cls", "connect", "free", 
                 "hack", "help", "home", "hostname", "ifconfig", "kill", "killall",
                 "ls", "mem", "nano", "ps", "rm", "run", "scan", "scan-analyze", 
-                "scp", "sudov", "tail", "top"];
+                "scp", "sudov", "tail", "theme", "top"];
     }
     
     if (input.startsWith("scp ") && index == 1) {
@@ -935,6 +935,43 @@ var Terminal = {
                     post("Error: No such script exists");
                 }
 				break;
+            case "theme":
+                //todo support theme saving                
+                var args = commandArray[1] ? commandArray[1].split(" ") : [];
+                if(args.length != 1 && args.length != 3) {
+                    post("Incorrect number of arguments. Usage: theme [default|muted|solarized] | [background color hex] [text color hex] [highlight color hex]");
+                }else if(args.length == 1){
+                    var themeName = args[0];
+                    if(themeName == "default"){
+                        document.body.style.setProperty('--my-highlight-color',"#ffffff");
+                        document.body.style.setProperty('--my-font-color',"#66ff33");
+                        document.body.style.setProperty('--my-background-color',"#000000");
+                    }else if(themeName == "muted"){
+                        document.body.style.setProperty('--my-highlight-color',"#ffffff");
+                        document.body.style.setProperty('--my-font-color',"#66ff33");
+                        document.body.style.setProperty('--my-background-color',"#252527");
+                    }else if(themeName == "solarized"){
+                        document.body.style.setProperty('--my-highlight-color',"#6c71c4");
+                        document.body.style.setProperty('--my-font-color',"#839496");
+                        document.body.style.setProperty('--my-background-color',"#002b36");
+                    }else{
+                        post("Theme not found");
+                    }                    
+                }else{
+                    inputBackgroundHex = args[0];
+                    inputTextHex = args[1];
+                    inputHighlightHex = args[2];
+                    if(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputBackgroundHex) &&
+                       /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputTextHex) &&
+                       /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(inputHighlightHex)){
+                        document.body.style.setProperty('--my-highlight-color',inputHighlightHex);
+                        document.body.style.setProperty('--my-font-color',inputTextHex);
+                        document.body.style.setProperty('--my-background-color',inputBackgroundHex);
+                    }else{
+                        post("Invalid Hex Input for theme");
+                    }                    
+                }
+                break;
 			case "top":
 				//TODO List each's script RAM usage
                 post("Not yet implemented");