feat: dark mode toggle + Terminal as Component

7 files changed, 513 insertions, 87 deletions

diff --git a/package-lock.json b/package-lock.json
index d468a7a..dcfad24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,21 @@
       "name": "temp-term",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
         "@testing-library/jest-dom": "^5.16.2",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.1.3",
+        "fontawesome-free": "^1.0.4",
         "re-resizable": "^6.9.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-resize-observer": "^1.1.1",
         "react-scripts": "5.0.0",
+        "react-toggle-slider": "^0.4.0",
+        "reactstrap": "^9.0.1",
         "web-vitals": "^2.1.4",
         "xterm": "^4.18.0",
         "xterm-addon-attach": "^0.6.0",
@@ -2035,6 +2042,51 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2816,6 +2868,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4228,6 +4289,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/almost-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/almost-equal/-/almost-equal-1.1.0.tgz",
+      "integrity": "sha1-+FHGMROHV5lCdqou++jfowZszN0="
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -4886,6 +4952,18 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5147,6 +5225,16 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+    },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz",
@@ -5219,11 +5307,39 @@
         "color-name": "1.1.3"
       }
     },
+    "node_modules/color-interpolate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/color-interpolate/-/color-interpolate-1.0.5.tgz",
+      "integrity": "sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA==",
+      "dependencies": {
+        "clamp": "^1.0.1",
+        "color-parse": "^1.2.0",
+        "color-space": "^1.14.3",
+        "lerp": "^1.0.3"
+      }
+    },
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "node_modules/color-parse": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-1.4.2.tgz",
+      "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
+    "node_modules/color-space": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-1.16.0.tgz",
+      "integrity": "sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==",
+      "dependencies": {
+        "hsluv": "^0.0.3",
+        "mumath": "^3.3.4"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -6168,6 +6284,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -7505,6 +7630,11 @@
         }
       }
     },
+    "node_modules/fontawesome-free": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fontawesome-free/-/fontawesome-free-1.0.4.tgz",
+      "integrity": "sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",
@@ -8043,6 +8173,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/hsluv": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
+      "integrity": "sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -10754,6 +10889,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "node_modules/lerp": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lerp/-/lerp-1.0.3.tgz",
+      "integrity": "sha1-oYyJaPkXiW3hXM/MKNVaa3Med24="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -11157,6 +11297,15 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "node_modules/mumath": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/mumath/-/mumath-3.3.4.tgz",
+      "integrity": "sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=",
+      "deprecated": "Redundant dependency in your project.",
+      "dependencies": {
+        "almost-equal": "^1.1.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -13280,11 +13429,29 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13373,6 +13540,50 @@
         }
       }
     },
+    "node_modules/react-toggle-slider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-toggle-slider/-/react-toggle-slider-0.4.0.tgz",
+      "integrity": "sha512-MO2L1ED5h8AYBCmO9xnWyWaZmeDND8pPx5YCwFk7gJ/ki6rU9qSrpqt2/MV3OWcszDSnoeUOGD7/89Eot6Y7rQ==",
+      "dependencies": {
+        "color-interpolate": "^1.0.5"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/reactstrap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
+      "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -15245,6 +15456,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -17527,6 +17746,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -18086,6 +18334,11 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19150,6 +19403,11 @@
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "requires": {}
     },
+    "almost-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/almost-equal/-/almost-equal-1.1.0.tgz",
+      "integrity": "sha1-+FHGMROHV5lCdqou++jfowZszN0="
+    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -19642,6 +19900,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -19823,6 +20087,16 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+    },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz",
@@ -19881,11 +20155,39 @@
         "color-name": "1.1.3"
       }
     },
+    "color-interpolate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/color-interpolate/-/color-interpolate-1.0.5.tgz",
+      "integrity": "sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA==",
+      "requires": {
+        "clamp": "^1.0.1",
+        "color-parse": "^1.2.0",
+        "color-space": "^1.14.3",
+        "lerp": "^1.0.3"
+      }
+    },
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "color-parse": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-1.4.2.tgz",
+      "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
+    "color-space": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-1.16.0.tgz",
+      "integrity": "sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==",
+      "requires": {
+        "hsluv": "^0.0.3",
+        "mumath": "^3.3.4"
+      }
+    },
     "colord": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
@@ -20575,6 +20877,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -21552,6 +21863,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
+    "fontawesome-free": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fontawesome-free/-/fontawesome-free-1.0.4.tgz",
+      "integrity": "sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw=="
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",
@@ -21931,6 +22247,11 @@
         }
       }
     },
+    "hsluv": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
+      "integrity": "sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw="
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -23862,6 +24183,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "lerp": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lerp/-/lerp-1.0.3.tgz",
+      "integrity": "sha1-oYyJaPkXiW3hXM/MKNVaa3Med24="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -24164,6 +24490,14 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "mumath": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/mumath/-/mumath-3.3.4.tgz",
+      "integrity": "sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=",
+      "requires": {
+        "almost-equal": "^1.1.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -25566,11 +25900,25 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -25637,6 +25985,38 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-toggle-slider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/react-toggle-slider/-/react-toggle-slider-0.4.0.tgz",
+      "integrity": "sha512-MO2L1ED5h8AYBCmO9xnWyWaZmeDND8pPx5YCwFk7gJ/ki6rU9qSrpqt2/MV3OWcszDSnoeUOGD7/89Eot6Y7rQ==",
+      "requires": {
+        "color-interpolate": "^1.0.5"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "reactstrap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
+      "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -27025,6 +27405,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index c46b018..fee99b6 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
+    "fontawesome-free": "^1.0.4",
     "re-resizable": "^6.9.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-resize-observer": "^1.1.1",
     "react-scripts": "5.0.0",
+    "react-toggle-slider": "^0.4.0",
+    "reactstrap": "^9.0.1",
     "web-vitals": "^2.1.4",
     "xterm": "^4.18.0",
     "xterm-addon-attach": "^0.6.0",
diff --git a/src/App.css b/src/App.css
index 74b5e05..d4cd6e6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,32 @@
-.App {
-  text-align: center;
+.terminalContainer {
+  height: 75%;
+  width: 60%;
+  position: fixed;
+  z-index: 1;
+  top: 10%;
+  left: 8%;
+  /* color: #FFFFFF; */
+  /* background-color: #111; */
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+  /*background-color: #333333;*/
+  /*border: 2px solid #BB86fc;*/
+  padding: 20px;
+  margin: 20px;
+  border-radius: 5px;
+  overflow: auto;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+#xterm {
+  height: 100%;
+  width: 100%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.white-content {
+  background: #e4e4e4;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.toggle-slider {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
diff --git a/src/App.js b/src/App.js
index b671044..a51cad9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,45 @@
-import logo from './logo.svg';
-import './App.css';
-import { Terminal } from 'xterm';
-import './xterm.css';
-import { FitAddon } from 'xterm-addon-fit';
 import React from 'react';
-import { Resizable } from "re-resizable";
+import { InputGroup } from 'reactstrap';
 import ResizeObserver from "react-resize-observer";
+import { ToggleSlider } from 'react-toggle-slider';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { ThemeContext, themes } from './theme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+import './App.css';
+import './xterm.css';
+
+function App() {
+  const [darkMode, setDarkMode] = React.useState(true);
 
-export default class App extends React.Component {
+  return (
+    <div className='App'>
+      <header className='App-header'>
+        <InputGroup>
+          <ThemeContext.Consumer>
+            {({ changeTheme }) => (
+              <div className='toggle-slider'>
+                <FontAwesomeIcon icon={faSun} size='xl' />
+                <ToggleSlider
+                  onToggle={() => {
+                    setDarkMode(!darkMode);
+                    changeTheme(darkMode ? themes.light : themes.dark);
+                  }}
+                />
+                <FontAwesomeIcon icon={faMoon} size='xl' />
+              </div>
+            )}
+
+          </ThemeContext.Consumer>
+        </InputGroup>
+        <TerminalComponent />
+      </header>
+    </div>
+  );
+}
+
+class TerminalComponent extends React.Component {
   constructor(props) {
     super(props);
     this.fitAddon = new FitAddon();
@@ -29,7 +61,6 @@ export default class App extends React.Component {
   }
 
   componentDidMount() {
-
     this.encoder = new TextEncoder();
     this.decoder = new TextDecoder();
     this.socket = new WebSocket('ws://localhost:8000/ws');
@@ -39,11 +70,7 @@ export default class App extends React.Component {
       return String.fromCharCode.apply(null, new Uint8Array(buf));
     }
 
-    // this.attachAddon = new AttachAddon(this.socket, false);
-
     this.term.loadAddon(this.fitAddon);
-    // this.term.loadAddon(this.attachAddon);
-
     this.term.open(document.getElementById("xterm"));
     this.fitAddon.fit();
 
@@ -70,7 +97,6 @@ export default class App extends React.Component {
     }
     this.socket.onclose = (evt) => {
       this.term.write("Session terminated");
-      this.term.destroy();
     }
 
     this.socket.onerror = (evt) => {
@@ -82,25 +108,18 @@ export default class App extends React.Component {
     this.fitAddon.fit();
   }
 
-
   render() {
     return (
-      <div className='App'>
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <div className="terminalContainer">
-            <div id="xterm" style={{ height: "100%", width: "100%" }} />
-            <ResizeObserver
-              onResize={() => {
-                this.fitAddon.fit();
-              }}
-            />
-          </div>
-        </header>
+      <div className="terminalContainer">
+        <div id="xterm" style={{ height: "100%", width: "100%" }} />
+        <ResizeObserver
+          onResize={() => {
+            this.fitAddon.fit();
+          }}
+        />
       </div>
     );
   }
 }
+
+export default App;
diff --git a/src/index.css b/src/index.css
index 9ed8698..ec2585e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,28 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-
-.terminalContainer {
-  height: 75%;
-  width: 60%;
-  position: fixed;
-  z-index: 1;
-  top: 10%;
-  left: 8%;
-  color: #FFFFFF;
-  background-color: #111;
-  overflow-x: hidden;
-  transition: 0.5s;
-  padding-top: 60px;
-  background-color: #333333;
-  border: 2px solid #BB86fc;
-  padding: 20px;
-  margin: 20px;
-  border-radius: 5px;
-  overflow: auto;
-}
-
-#xterm {
-  height: 100%;
-  width: 100%;
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ef2edf8..8026e8e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import ThemeContextWrapper from './theme';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <ThemeContextWrapper>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </ThemeContextWrapper>,
   document.getElementById('root')
 );
 
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 0000000..7c2b9a9
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,40 @@
+import React, { createContext, useEffect, useState } from "react";
+
+export const themes = {
+    dark: '',
+    light: 'white-context',
+};
+
+export const ThemeContext = createContext({
+    theme: themes.dark,
+    changeTheme: () => { },
+});
+
+export default function ThemeContextWrapper(props) {
+    const [theme, setTheme] = useState(themes.dark);
+
+    function changeTheme(theme) {
+        setTheme(theme);
+    }
+
+    useEffect(() => {
+        switch (theme) {
+            case themes.light:
+                document.body.classList.add('white-content');
+                break;
+            case themes.dark:
+            default:
+                document.body.classList.remove('white-content');
+                break;
+        }
+    }, [theme]);
+
+    return (
+        <ThemeContext.Provider value={{
+            theme: theme,
+            changeTheme: changeTheme,
+        }}>
+            {props.children}
+        </ThemeContext.Provider>
+    );
+}