allow user to choose theme during initial setup

package-lock.json

@@ -3102,9 +3102,9 @@
       "integrity": "sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q=="
     },
     "electron": {
-      "version": "6.0.0",
+      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-6.0.1.tgz",
-      "integrity": "sha512-JVHj0dYtvVFrzVk1TgvrdXJSyLpdvlWNLhtG8ItYZsyg9XbCOQ9OoPfgLm04FjMzKMzEl4YIN0PfGC02MTx3PQ==",
+      "integrity": "sha512-XY69rI5IThIxsOS2BD+1ZkHE9hqkm4xN5a3WQFSmFRr2by4q5CnIe9vXmptlouGPTLs3tb7ySX/+K9CvH3szvg==",
       "dev": true,
       "requires": {
         "@types/node": "^10.12.18",
@@ -3642,9 +3642,9 @@
       }
     },
     "electron-context-menu": {
-      "version": "0.13.0",
+      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/electron-context-menu/-/electron-context-menu-0.14.0.tgz",
-      "integrity": "sha512-a98UDykOn+tiyb2mQEz710ZNWj/L85wHv6jRUJFE9GNLSaRH5I5BR022RYoWInLTj1Mns66vh9SueyMPWc+aTQ==",
+      "integrity": "sha512-7PuDz0Z3Eebhg/OS3JfPqHrQYl5ApokT/05PPUbNELk0EHBfFZwVcVneOJ05SlaGagK1bfQIXf75WSZt/K23VA==",
       "requires": {
         "cli-truncate": "^2.0.0",
         "electron-dl": "^1.2.0",

package.json

@@ -31,7 +31,7 @@
     "dayjs": "1.8.15",
     "debug": "4.1.1",
     "ejs": "2.6.2",
-    "electron-context-menu": "0.13.0",
+    "electron-context-menu": "0.14.0",
     "electron-debug": "3.0.1",
     "electron-dl": "1.14.0",
     "electron-find": "1.0.6",
@@ -78,7 +78,7 @@
   },
   "devDependencies": {
     "devtron": "1.4.0",
-    "electron": "6.0.0",
+    "electron": "6.0.1",
     "electron-builder": "21.2.0",
     "electron-compile": "6.4.4",
     "electron-installer-debian": "2.0.0",

src/public/javascripts/setup.js

@@ -23,6 +23,19 @@ function SetupModel() {
     this.password1 = ko.observable();
     this.password2 = ko.observable();
 
+    this.theme = ko.observable("white");
+    this.theme.subscribe(function(newTheme) {
+        const $body = $("body");
+
+        for (const clazz of Array.from($body[0].classList)) { // create copy to safely iterate over while removing classes
+            if (clazz.startsWith("theme-")) {
+                $body.removeClass(clazz);
+            }
+        }
+
+        $body.addClass("theme-" + newTheme);
+    });
+
     this.syncServerHost = ko.observable();
     this.syncProxy = ko.observable();
 
@@ -45,6 +58,7 @@ function SetupModel() {
             const username = this.username();
             const password1 = this.password1();
             const password2 = this.password2();
+            const theme = this.theme();
 
             if (!username) {
                 showAlert("Username can't be empty");
@@ -64,7 +78,8 @@ function SetupModel() {
             // not using server.js because it loads too many dependencies
             $.post('/api/setup/new-document', {
                 username: username,
-                password: password1
+                password: password1,
+                theme: theme
             }).then(() => {
                 window.location.replace("/");
             });

src/public/stylesheets/style.css

@@ -8,18 +8,6 @@ body {
        on the last line of the editor. */
     position: fixed;
     width: 100%;
-    background-color: var(--main-background-color);
-    color: var(--main-text-color);
-    font-family: var(--main-font-family);
-}
-
-a, a:visited, a:hover {
-    color: var(--link-color);
-}
-
-input, select, textarea {
-    color: var(--input-text-color) !important;
-    background: var(--input-background-color) !important;
 }
 
 button.btn, button.btn-sm {
@@ -31,10 +19,6 @@ button.btn, button.btn-sm {
     color: var(--muted-text-color) !important;
 }
 
-table td, table th {
-    color: var(--main-text-color);
-}
-
 button.close {
     color: var(--main-text-color);
 }

src/public/stylesheets/themes.css

@@ -176,3 +176,22 @@ body {
 
     --ck-color-table-focused-cell-background: var(--more-accented-background-color);
 }
+
+body {
+    background-color: var(--main-background-color);
+    color: var(--main-text-color);
+    font-family: var(--main-font-family);
+}
+
+a, a:visited, a:hover {
+    color: var(--link-color);
+}
+
+input, select, textarea {
+    color: var(--input-text-color) !important;
+    background: var(--input-background-color) !important;
+}
+
+table td, table th {
+    color: var(--main-text-color);
+}

src/routes/api/setup.js

@@ -14,9 +14,9 @@ async function getStatus() {
 }
 
 async function setupNewDocument(req) {
-    const { username, password } = req.body;
+    const { username, password, theme } = req.body;
 
-    await sqlInit.createInitialDatabase(username, password);
+    await sqlInit.createInitialDatabase(username, password, theme);
 }
 
 async function setupSyncFromServer(req) {

src/services/options_init.js

@@ -28,7 +28,7 @@ async function initSyncedOptions(username, password) {
     await passwordEncryptionService.setDataKey(password, utils.randomSecureToken(16), true);
 }
 
-async function initNotSyncedOptions(initialized, startNotePath = 'root', syncServerHost = '', syncProxy = '') {
+async function initNotSyncedOptions(initialized, startNotePath = 'root', opts = {}) {
     await optionService.createOption('openTabs', JSON.stringify([
         {
             notePath: startNotePath,
@@ -45,14 +45,14 @@ async function initNotSyncedOptions(initialized, startNotePath = 'root', syncSer
     await optionService.createOption('lastSyncedPush', 0, false);
 
     await optionService.createOption('zoomFactor', 1.0, false);
-    await optionService.createOption('theme', 'white', false);
+    await optionService.createOption('theme', opts.theme || 'white', false);
 
     await optionService.createOption('leftPaneMinWidth', '350', false);
     await optionService.createOption('leftPaneWidthPercent', '20', false);
 
-    await optionService.createOption('syncServerHost', syncServerHost, false);
+    await optionService.createOption('syncServerHost', opts.syncServerHost || '', false);
     await optionService.createOption('syncServerTimeout', 5000, false);
-    await optionService.createOption('syncProxy', syncProxy, false);
+    await optionService.createOption('syncProxy', opts.syncProxy || '', false);
 
     await optionService.createOption('mainFontSize', '100', false);
     await optionService.createOption('treeFontSize', '100', false);

src/services/sql_init.js

@@ -79,7 +79,7 @@ async function initDbConnection() {
     });
 }
 
-async function createInitialDatabase(username, password) {
+async function createInitialDatabase(username, password, theme) {
     log.info("Creating initial database ...");
 
     if (await isDbInitialized()) {
@@ -123,7 +123,7 @@ async function createInitialDatabase(username, password) {
 
         await optionsInitService.initDocumentOptions();
         await optionsInitService.initSyncedOptions(username, password);
-        await optionsInitService.initNotSyncedOptions(true, startNoteId);
+        await optionsInitService.initNotSyncedOptions(true, startNoteId, { theme });
 
         await require('./sync_table').fillAllSyncRows();
     });
@@ -145,7 +145,7 @@ async function createDatabaseForSync(options, syncServerHost = '', syncProxy = '
     await sql.transactional(async () => {
         await sql.executeScript(schema);
 
-        await require('./options_init').initNotSyncedOptions(false, 'root', syncServerHost, syncProxy);
+        await require('./options_init').initNotSyncedOptions(false, 'root', { syncServerHost, syncProxy });
 
         // document options required for sync to kick off
         for (const opt of options) {

src/views/setup.ejs

@@ -49,6 +49,26 @@
                 <label for="password2">Repeat password</label>
                 <input type="password" class="form-control" data-bind="value: password2" placeholder="Password">
             </div>
+            <div class="form-group">
+                <label for="password2">Theme</label>
+
+                <div style="display: flex; justify-content: space-around;">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="theme" id="theme-white" value="white" data-bind="checked: theme" checked>
+                        <label class="form-check-label" for="theme-white">white</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="theme" id="theme-dark" value="dark" data-bind="checked: theme">
+                        <label class="form-check-label" for="theme-dark">dark</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="radio" name="theme" id="theme-black" value="black" data-bind="checked: theme">
+                        <label class="form-check-label" for="theme-black">black</label>
+                    </div>
+                </div>
+
+                <p style="font-size: smaller;margin-top: 10px;"><em>Theme can be later changed in Options -> Appearance.</em></p>
+            </div>
 
             <button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
 
@@ -137,5 +157,6 @@
 <script src="libraries/knockout.min.js"></script>
 
 <script src="javascripts/setup.js" crossorigin type="module"></script>
+<link href="stylesheets/themes.css" rel="stylesheet">
 </body>
 </html>