Themes \o/

Author: GitSquared

package-lock.json

@@ -15,23 +15,48 @@ const Terminal = require("./classes/terminal.class.js").Terminal;
 
 var win, tty;
 const settingsFile = path.join(electron.app.getPath("userData"), "settings.json");
+const themesDir = path.join(electron.app.getPath("userData"), "themes");
+const inner_themesDir = path.join(__dirname, "assets/themes");
+const kblayoutsDir = path.join(electron.app.getPath("userData"), "keyboards");
+const inner_kblayoutsDir = path.join(__dirname, "assets/kb_layouts");
 
+// Create default settings file
 if (!fs.existsSync(settingsFile)) {
     fs.writeFileSync(settingsFile, JSON.stringify({
         shell: (process.platform === "win32") ? "powershell.exe" : "bash",
+        cwd: electron.app.getPath("userData"),
         keyboard: "en-US",
-        cwd: electron.app.getPath("userData")
+        theme: "tron"
     }));
 }
 
-app.on('ready', () => {
+// Copy default themes & keyboard layouts
+try {
+    fs.mkdirSync(themesDir);
+} catch(e) {
+    // Folder already exists
+}
+fs.readdirSync(inner_themesDir).forEach((e) => {
+    fs.writeFileSync(path.join(themesDir, e), fs.readFileSync(path.join(inner_themesDir, e), {encoding:"utf-8"}))
+});
+try {
+    fs.mkdirSync(kblayoutsDir);
+} catch(e) {
+    // Folder already exists
+}
+fs.readdirSync(inner_kblayoutsDir).forEach((e) => {
+    fs.writeFileSync(path.join(kblayoutsDir, e), fs.readFileSync(path.join(inner_kblayoutsDir, e), {encoding:"utf-8"}))
+});
 
+app.on('ready', () => {
     let settings = require(settingsFile);
 
+    // Initialize terminal server
     tty = new Terminal({
         role: "server",
         shell: settings.shell,
-        cwd: settings.cwd
+        cwd: settings.cwd,
+        port: settings.port || 3000
     });
     tty.onclosed = (code, signal) => {
         console.log("=> Terminal exited - "+code+", "+signal);
@@ -64,7 +89,7 @@ app.on('ready', () => {
         // focusable: false,
         // skipTaskbar: true,
         autoHideMenuBar: true,
-        frame: true,
+        frame: false,
         backgroundColor: '#000000'
     });
 

src/_boot.js

@@ -1,9 +1,43 @@
+const path = require("path");
+const fs = require("fs");
+const electron = require("electron");
+
+const themesDir = path.join(electron.remote.app.getPath("userData"), "themes");
+const keyboardsDir = path.join(electron.remote.app.getPath("userData"), "keyboards");
+const settingsFile = path.join(electron.remote.app.getPath("userData"), "settings.json");
+
 // Load config
-let settings = require(require('path').join(require('electron').remote.app.getPath("userData"), "settings.json"));
+const settings = require(settingsFile);
+
+// Load theme
+let theme = require(path.join(themesDir, settings.theme+".json"));
+document.querySelector("head").innerHTML += `<style id="theme_${settings.theme}_cssvars">
+:root {
+    --font_main: "${theme.cssvars.font_main}";
+    --font_main_light: "${theme.cssvars.font_main_light}";
+    --font_console: "${theme.cssvars.font_console}";
+    --color_r: ${theme.colors.red};
+    --color_g: ${theme.colors.green};
+    --color_b: ${theme.colors.blue};
+    --color_black: ${theme.colors.black};
+    --color_light_black: ${theme.colors.light_black};
+    --color_grey: ${theme.colors.grey};
+}
+</style>
+<style id="theme_${settings.theme}_xtermcss">
+${theme.xtermcss}
+</style>`;
+
+window.theme = {
+    r: theme.colors.red,
+    g: theme.colors.green,
+    b: theme.colors.blue
+};
 
+// Startup boot log
 let resumeInit, initUI, initMods;
 let bootScreen = document.getElementById("boot_screen");
-let log = require('fs').readFileSync(require('path').join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
+let log = fs.readFileSync(path.join(__dirname, 'assets/misc/boot_log.txt')).toString().split('\n');
 let i = 0;
 
 let displayLine = () => {
@@ -39,14 +73,15 @@ let displayLine = () => {
 };
 displayLine();
 
+// Show "logo" and background grid
 resumeInit = () => {
     bootScreen.innerHTML = "";
     setTimeout(() => {
-        document.body.setAttribute("style", "background: linear-gradient(90deg, #090B0A 20px, transparent 1%) center, linear-gradient(#090B0A 20px, transparent 1%) center, #262827;background-size: 22px 22px;");
+        document.body.setAttribute("class", "");
         setTimeout(() => {
-            document.body.setAttribute("style", "background: #090b0a;");
+            document.body.setAttribute("class", "solidBackground");
             setTimeout(() => {
-                document.body.setAttribute("style", "background: linear-gradient(90deg, #090B0A 20px, transparent 1%) center, linear-gradient(#090B0A 20px, transparent 1%) center, #262827;background-size: 22px 22px;");
+                document.body.setAttribute("class", "");
             }, 400);
         }, 200);
 
@@ -55,9 +90,9 @@ resumeInit = () => {
         let title = document.querySelector("section > h1");
 
         setTimeout(() => {
-            title.setAttribute("style", "background-color: rgba(190, 230, 193, 1);border-bottom: 5px solid rgba(190, 230, 193, 1);");
+            title.setAttribute("style", `background-color: rgb(${window.theme.r}, ${window.theme.g}, ${window.theme.b});border-bottom: 5px solid rgb(${window.theme.r}, ${window.theme.g}, ${window.theme.b});`);
             setTimeout(() => {
-                title.setAttribute("style", "border: 5px solid rgba(190, 230, 193, 1);");
+                title.setAttribute("style", `border: 5px solid rgb(${window.theme.r}, ${window.theme.g}, ${window.theme.b});`);
                 setTimeout(() => {
                     document.getElementById("boot_screen").remove();
                     initUI();
@@ -67,6 +102,7 @@ resumeInit = () => {
     }, 400);
 };
 
+// Create the UI's html structure and initialize the terminal client and the keyboard
 initUI = () => {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
@@ -82,7 +118,7 @@ initUI = () => {
     </section>`;
 
     window.keyboard = new Keyboard({
-        layout: require("path").join(__dirname, "assets/kb_layouts/"+settings.keyboard+".json"),
+        layout: path.join(keyboardsDir, settings.keyboard+".json"),
         container: "keyboard"
     });
     setTimeout(() => {
@@ -114,6 +150,7 @@ initUI = () => {
     }, 10);
 };
 
+// Create the "mods" in each column
 initMods = () => {
     window.mods = {};
 

src/_renderer.js

@@ -25,7 +25,7 @@ section#boot_screen h1 {
     font-family: var(--font_main);
     font-size: 10vh;
     text-align: center;
-    border-bottom: 5px solid #bee6c1;
+    border-bottom: 5px solid rgb(var(--color_r), var(--color_g), var(--color_b));
     padding-top: 2vh;
     padding-right: 2vh;
     padding-left: 1.5vh;

src/assets/css/boot_screen.css

@@ -1,24 +1,18 @@
-/*      Import Variables      */
-@import url("variables.css");
-
-/*      Import Fonts      */
-/*  Fira Mono  */
 @font-face {
     font-family: "Fira Mono";
     src: url("../fonts/fira_mono.woff2") format("woff2");
 }
-/*  United Sans Medium  */
+
 @font-face {
     font-family: "United Sans Medium";
     src: url("../fonts/united_sans.woff2") format("woff2");
 }
-/*  United Sans Light  */
+
 @font-face {
     font-family: "United Sans Light";
     src: url("../fonts/united_sans_light.woff2") format("woff2");
 }
 
-/*      Apply Fonts      */
 body {
     font-family: var(--font_main), sans-serif;
 }

src/assets/css/fonts.css

@@ -55,8 +55,8 @@ div.keyboard_key {
     min-width: 53px;
     overflow: hidden;
     border-radius: 5px;
-    background-color: rgba(190, 230, 193, 0.0);
-    border: 2px solid rgba(190, 230, 193, 0.0);
+    background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
+    border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
     margin: 0px 5px;
     display: flex;
     align-items: center;
@@ -65,8 +65,8 @@ div.keyboard_key {
 }
 
 div.keyboard_key:active, div.keyboard_key.active {
-    border: 2px solid rgba(190, 230, 193, 0.0);
-    background-color: rgba(190, 230, 193, 1);
+    border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
+    background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);
 }
 
 div.keyboard_key.blink {
@@ -77,9 +77,9 @@ div.keyboard_key.blink {
 }
 
 @keyframes blink {
-    0% {background-color: rgba(190, 230, 193, 0.0);}
-    50% {background-color: rgba(190, 230, 193, 1);}
-    100% {background-color: rgba(190, 230, 193, 0.0);}
+    0% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
+    50% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);}
+    100% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
 }
 
 div.keyboard_key > * {
@@ -130,7 +130,7 @@ div.keyboard_row:not(:nth-child(4)):not(:last-child) > .keyboard_key:last-child,
 }
 
 div.keyboard_key#keyboard_spacebar, div.keyboard_enter {
-    border: 2px solid rgba(190, 230, 193, 0.5);
+    border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
 }
 
 div.keyboard_row#row_1 > div.keyboard_enter {
@@ -147,7 +147,7 @@ div.keyboard_row#row_1 > div.keyboard_enter > h1 {
 div.keyboard_row#row_2 > div.keyboard_enter {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
-    border-top: 2px solid #090b0a;
+    border-top: 2px solid var(--color_light_black);
     width: 84px;
     min-width: 84px;
     margin-top: 0px;
@@ -157,7 +157,7 @@ div.keyboard_row#row_2 > div.keyboard_enter {
 }
 
 div.keyboard_row#row_2 > div.keyboard_enter:active, div.keyboard_row#row_2 > div.keyboard_enter.active {
-    border-top: 2px solid rgb(190, 230, 193);
+    border-top: 2px solid rgb(var(--color_r), var(--color_g), var(--color_b));
 }
 
 div.keyboard_key#keyboard_spacebar {
@@ -178,8 +178,8 @@ div.keyboard_row:last-child > div.keyboard_key:nth-last-child(-n+3) {
 }
 
 section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- CAPSLCK: ON"] {
-    background-color: rgb(190, 230, 193);
-    color: black;
+    background-color: rgb(var(--color_r), var(--color_g), var(--color_b));
+    color: var(--color_black);
 }
 
 section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty), section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) {
@@ -208,8 +208,8 @@ section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.k
 
 
 section#keyboard[data-is-fn-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- FN: ON"] {
-    background-color: rgb(190, 230, 193);
-    color: black;
+    background-color: rgb(var(--color_r), var(--color_g), var(--color_b));
+    color: var(--color_black);
 }
 
 section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) {

src/assets/css/keyboard.css

@@ -9,22 +9,25 @@ body {
     /*cursor: none !important;*/
     user-select: none !important;
     padding-top: 20px;
-    color: #bee6c1;
+    color: rgb(var(--color_r), var(--color_g), var(--color_b));
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    background: linear-gradient(90deg, #090B0A 20px, transparent 1%) center, linear-gradient(#090B0A 20px, transparent 1%) center, #262827;
+    background: linear-gradient(90deg, var(--color_light_black) 20px, transparent 1%) center, linear-gradient(var(--color_light_black) 20px, transparent 1%) center, var(--color_grey);
     background-size: 22px 22px;
 }
+body.solidBackground {
+    background: var(--color_light_black);
+}
 
 h3.title {
     position: fixed;
     margin: 0px;
     padding: 0px 10px;
     font-size: 11px;
-    border-bottom: 1px solid rgba(190, 230, 193, 0.3);
+    border-bottom: 1px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
 }
 h3.title > p {
     display: inline-block;
@@ -36,15 +39,15 @@ h3.title > p:last-child {
 }
 h3.title::before {
     content: "";
-    border-left: 1px solid rgba(190, 230, 193, 0.3);
+    border-left: 1px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     position: relative;
     left: -10px;
     bottom: -6px;
     height: 5px;
 }
 h3.title::after {
     content: "";
-    border-right: 1px solid rgba(190, 230, 193, 0.3);
+    border-right: 1px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3);
     position: relative;
     right: -10px;
     bottom: -6px;