client: Allow switching theme

src/public/app/widgets/type_widgets/options/appearance/highlighting.js

@@ -18,6 +18,10 @@ export default class HighlightingOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);        
         this.$themeSelect = this.$widget.find(".theme-select");
+        this.$themeSelect.on("change", async () => {
+            const newTheme = this.$themeSelect.val();
+            await server.put(`options/highlightingTheme/${newTheme}`);
+        });
     }
 
     async optionsLoaded(options) {
@@ -27,8 +31,8 @@ export default class HighlightingOptions extends OptionsWidget {
         for (const theme of themes) {
             this.$themeSelect.append($("<option>")
                 .attr("value", theme.val)
-                .text(theme.title)
-                );
+                .text(theme.title));
         }
+        this.$themeSelect.val(options.highlightingTheme);
     }
 }

src/routes/api/options.ts

@@ -16,6 +16,7 @@ const ALLOWED_OPTIONS = new Set([
     'revisionSnapshotNumberLimit',
     'zoomFactor',
     'theme',
+    'highlightingTheme',
     'syncServerHost',
     'syncServerTimeout',
     'syncProxy',

src/services/options_init.ts

@@ -41,6 +41,7 @@ async function initNotSyncedOptions(initialized: boolean, theme: string, opts: N
     optionService.createOption('lastSyncedPush', '0', false);    
 
     optionService.createOption('theme', theme, false);
+    optionService.createOption('highlightingTheme', "default:atom-one-dark", false);
     
     optionService.createOption('syncServerHost', opts.syncServerHost || '', false);
     optionService.createOption('syncServerTimeout', '120000', false);
@@ -99,7 +100,7 @@ const defaultOptions: DefaultOption[] = [
 
     // Internationalization
     { name: 'locale', value: 'en', isSynced: true },
-    { name: 'firstDayOfWeek', value: '1', isSynced: true }
+    { name: 'firstDayOfWeek', value: '1', isSynced: true }    
 ];
 
 function initStartupOptions() {