Added functionality to add background image and background size

src/js/config.js

@@ -113,6 +113,8 @@ let defaultConfig = {
   monkey: false,
   repeatQuotes: "off",
   oppositeShiftMode: "off",
+  customBackground: "https://i.imgur.com/OWbWz6i.jpg",
+  customBackgroundSize: "cover",
 };
 
 function isConfigKeyValid(name) {
@@ -1343,6 +1345,24 @@ export function setFontSize(fontSize, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setCustomBackground(value, nosave) {
+  if (value == null || value == undefined) {
+    value = "";
+  }
+  config.customBackground = value;
+  ThemeController.applyCustomBackground();
+  if (!nosave) saveToCookie();
+}
+
+export function setCustomBackgroundSize(value, nosave) {
+  if (value != "cover" && value != "contain"){
+    value = "cover";
+  }
+  config.customBackgroundSize = value;
+  ThemeController.applyCustomBackgroundSize();
+  if (!nosave) saveToCookie();
+}
+
 export function apply(configObj) {
   if (configObj == null || configObj == undefined) {
     Notifications.add("Could not apply config", -1, 3);
@@ -1357,6 +1377,8 @@ export function apply(configObj) {
     setTheme(configObj.theme, true);
     setCustomThemeColors(configObj.customThemeColors, true);
     setCustomTheme(configObj.customTheme, true, true);
+    setCustomBackground(configObj.customBackground, true);
+    setCustomBackgroundSize(configObj.customBackgroundSize, true);
     setQuickTabMode(configObj.quickTab, true);
     setKeyTips(configObj.showKeyTips, true);
     setTimeConfig(configObj.time, true);

src/js/theme-controller.js

@@ -4,6 +4,7 @@ import * as Misc from "./misc";
 import * as Notifications from "./notifications";
 import Config from "./config";
 import * as UI from "./ui";
+import config from "./config";
 
 let isPreviewingTheme = false;
 let randomTheme = null;
@@ -149,3 +150,22 @@ export function randomiseTheme() {
 export function clearRandom() {
   randomTheme = null;
 }
+
+export function applyCustomBackground(){
+  if (Config.customBackground != ""){
+    $("body").css({
+      backgroundImage: `url(${Config.customBackground})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center center",
+      backgroundAttachment: "fixed",
+    })
+  }
+}
+
+export function applyCustomBackgroundSize(){
+  if (Config.customBackgroundSize != ""){
+    $("body").css({
+      backgroundSize: Config.customBackgroundSize,
+    })
+  }
+}

src/sass/style.scss

@@ -107,10 +107,10 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  background: var(--bg-color);
   font-family: var(--font);
   color: var(--main-color);
   overflow-x: hidden;
+  background: var(--bg-color);
 }
 
 html {