Fade in on load to hide theme and button preferences being applied

src/css/main.css

@@ -17,6 +17,19 @@ html, body {
     overflow: hidden;
 }
 
+html {
+    background-image: linear-gradient(151deg, rgba(0,0,0,1) 0%, rgba(46,46,46,1) 38%, rgba(46,46,46,1) 58%, rgba(15,14,14,1) 100%);
+}
+
+body {
+    opacity: 0;
+}
+
+body.load {
+    opacity: 1;
+    transition: opacity 0.25s ease-in;
+}
+
 
 #page-canvas-container {
     position: absolute;

src/js/main.js

@@ -26,8 +26,8 @@ function openSettingsModal() {
     $("#settingsModal #notary_idnumber").val(getStorage("notary_idnumber"));
     $("#settingsModal #notary_state").val(getStorage("notary_state"));
 
-    $("#settingsModal #color_theme").val(getStorage("color_theme"));
-    $("#settingsModal #button_size").val(getStorage("button_size"));
+    $("#settingsModal #color_theme").val(inStorage("color_theme") ? getStorage("color_theme") : "purple");
+    $("#settingsModal #button_size").val(getStorage("button_size") ? getStorage("button_size") : "sm");
     // show preview of stamp
     if (inStorage("notary_state")) {
         getStampSvg(function (svg) {
@@ -207,16 +207,29 @@ $("body").on("input change paste", "#appOptionsSettings select", function () {
 });
 
 function setAppTheme(theme) {
-    $("body").removeClass().addClass("theme-" + theme);
+    if (typeof theme != "string") {
+        theme = "purple";
+    }
+    var classobj = $("body").attr("class");
+    if (classobj != undefined) {
+        var classlist = classobj.split(" ");
+        var classes = [];
+        for (var i = 0; i < classlist.length; i++) {
+            if (!classlist[i].startsWith("theme-")) {
+                classes.push(classlist[i]);
+            }
+        }
+    }
+    $("body").removeClass().addClass(classes).addClass("theme-" + theme);
 }
 
 function setButtonSize(size) {
+    if (typeof size != 'string') {
+        size = "sm";
+    }
     $(".btn").removeClass(["btn-sm", "btn-lg", "btn-"]).addClass("btn-" + size);
 }
 
-setAppTheme(getStorage("color_theme"));
-setButtonSize(getStorage("button_size"));
-
 function showToast(message) {
     $("#toastBox .toast-body").html(message);
     toastEl.show();
@@ -227,4 +240,10 @@ var toastEl = new bootstrap.Toast(document.getElementById("toastBox"));
 function showAlert(message) {
     $("#alertModal .modal-body").html(message);
     new bootstrap.Modal(document.getElementById('alertModal')).show();
-}
+}
+
+$(document).ready(function () {
+    setButtonSize(getStorage("button_size"));
+    setAppTheme(getStorage("color_theme"));
+    $("body").addClass("load");
+});