options now allow selecting user theme

src/public/javascripts/dialogs/options.js

@@ -5,6 +5,7 @@ import server from '../services/server.js';
 import infoService from "../services/info.js";
 import zoomService from "../services/zoom.js";
 import utils from "../services/utils.js";
+import cssLoader from "../services/css_loader.js";
 
 const $dialog = $("#options-dialog");
 
@@ -50,7 +51,22 @@ addTabHandler((function() {
     const $body = $("body");
     const $container = $("#container");
 
-    function optionsLoaded(options) {
+    async function optionsLoaded(options) {
+        const themes = [
+            { val: 'white', title: 'White' },
+            { val: 'dark', title: 'Dark' },
+            { val: 'black', title: 'Black' }
+        ].concat(await server.get('options/user-themes'));
+
+        $themeSelect.empty();
+
+        for (const theme of themes) {
+            $themeSelect.append($("<option>")
+                .attr("value", theme.val)
+                .attr("data-note-id", theme.noteId)
+                .html(theme.title));
+        }
+
         $themeSelect.val(options.theme);
 
         if (utils.isElectron()) {
@@ -77,6 +93,14 @@ addTabHandler((function() {
             }
         }
 
+        const noteId = $(this).find(":selected").attr("data-note-id");
+
+        if (noteId) {
+            // make sure the CSS is loaded
+            // if the CSS has been loaded and then updated then the changes won't take effect though
+            cssLoader.requireCss(`/api/notes/${noteId}/download`);
+        }
+
         $body.addClass("theme-" + newTheme);
 
         server.put('options/theme/' + newTheme);

src/routes/api/options.js

@@ -1,8 +1,8 @@
 "use strict";
 
-const sql = require('../../services/sql');
 const optionService = require('../../services/options');
 const log = require('../../services/log');
+const attributes = require('../../services/attributes');
 
 // options allowed to be updated directly in options dialog
 const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval',
@@ -42,8 +42,20 @@ async function update(name, value) {
     return true;
 }
 
+async function getUserThemes() {
+    return (await attributes.getNotesWithLabel('appTheme'))
+        .map(note => {
+            return {
+                val: note.title,
+                title: note.title,
+                noteId: note.noteId
+            };
+        });
+}
+
 module.exports = {
     getOptions,
     updateOption,
-    updateOptions
+    updateOptions,
+    getUserThemes
 };

src/routes/routes.js

@@ -153,6 +153,7 @@ function register(app) {
     apiRoute(GET, '/api/options', optionsApiRoute.getOptions);
     apiRoute(PUT, '/api/options/:name/:value*', optionsApiRoute.updateOption);
     apiRoute(PUT, '/api/options', optionsApiRoute.updateOptions);
+    apiRoute(GET, '/api/options/user-themes', optionsApiRoute.getUserThemes);
 
     apiRoute(POST, '/api/password/change', passwordApiRoute.changePassword);
 

src/services/attributes.js

@@ -15,6 +15,7 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'label', name: 'manualTransactionHandling' },
     { type: 'label', name: 'disableInclusion' },
     { type: 'label', name: 'appCss' },
+    { type: 'label', name: 'appTheme' },
     { type: 'label', name: 'hideChildrenOverview' },
     { type: 'label', name: 'hidePromotedAttributes' },
     { type: 'label', name: 'readOnly' },

src/views/dialogs/options.ejs

@@ -40,11 +40,7 @@
                             <form>
                                 <div class="form-group">
                                     <label for="theme-select">Theme</label>
-                                    <select class="form-control" id="theme-select">
+                                    <select class="form-control" id="theme-select"></select>
-                                        <option value="white">White</option>
-                                        <option value="dark">Dark</option>
-                                        <option value="black">Black</option>
-                                    </select>
                                 </div>
 
                                 <div class="form-group">