added too options new tab appearance with possibility to change theme (white, black, dark) and zoom factor

db/migrations/0099__add_theme_option.sql

@@ -0,0 +1,2 @@
+INSERT INTO options (optionId, name, value, dateCreated, dateModified, isSynced)
+VALUES ('theme_key', 'theme', 'white', '2018-06-01T03:35:55.041Z', '2018-06-01T03:35:55.041Z', 0);

src/public/javascripts/dialogs/options.js

@@ -1,9 +1,9 @@
 "use strict";
 
 import protectedSessionHolder from '../services/protected_session_holder.js';
-import utils from '../services/utils.js';
 import server from '../services/server.js';
 import infoService from "../services/info.js";
+import zoomService from "../services/zoom.js";
 
 const $dialog = $("#options-dialog");
 const $tabs = $("#options-tabs");
@@ -44,6 +44,35 @@ export default {
     saveOptions
 };
 
+addTabHandler((function() {
+    const $themeSelect = $("#theme-select");
+    const $zoomFactorSelect = $("#zoom-factor-select");
+    const $html = $("html");
+
+    function optionsLoaded(options) {
+        $zoomFactorSelect.val(options.zoomFactor);
+        $themeSelect.val(options.theme);
+    }
+
+    $themeSelect.change(function() {
+        const newTheme = $(this).val();
+
+        $html.attr("class", "theme-" + newTheme);
+
+        server.put('options/theme/' + newTheme);
+    });
+
+    $zoomFactorSelect.change(function() {
+        const newZoomFactor = $(this).val();
+
+        zoomService.setZoomFactorAndSave(newZoomFactor);
+    });
+
+    return {
+        optionsLoaded
+    };
+})());
+
 addTabHandler((function() {
     const $form = $("#change-password-form");
     const $oldPassword = $("#old-password");

src/public/javascripts/services/zoom.js

@@ -31,6 +31,12 @@ function setZoomFactor(zoomFactor) {
     webFrame.setZoomFactor(zoomFactor);
 }
 
+async function setZoomFactorAndSave(zoomFactor) {
+    setZoomFactor(zoomFactor);
+
+    await server.put('options/zoomFactor/' + zoomFactor);
+}
+
 if (utils.isElectron()) {
     optionsInitService.optionsReady.then(options => setZoomFactor(options.zoomFactor))
 }
@@ -38,5 +44,6 @@ if (utils.isElectron()) {
 export default {
     decreaseZoomFactor,
     increaseZoomFactor,
-    setZoomFactor
+    setZoomFactor,
+    setZoomFactorAndSave
 }

src/public/stylesheets/style.css

@@ -386,4 +386,26 @@ div.ui-tooltip {
 
 button.icon-button {
     padding: 4px;
+}
+
+/* Themes */
+
+html.theme-black, html.theme-black img, html.theme-black video {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
+html.theme-black body {
+    background: black;
+}
+
+html.theme-dark {
+    filter: invert(90%) hue-rotate(180deg);
+}
+
+html.theme-dark img, html.theme-dark video {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
+html.theme-dark body {
+    background: #191819;
 }

src/routes/api/options.js

@@ -5,7 +5,7 @@ const optionService = require('../../services/options');
 const log = require('../../services/log');
 
 // options allowed to be updated directly in options dialog
-const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval', 'zoomFactor'];
+const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval', 'zoomFactor', 'theme'];
 
 async function getOptions() {
     const options = await sql.getMap("SELECT name, value FROM options WHERE name IN ("

src/routes/index.js

@@ -4,9 +4,11 @@ const sourceIdService = require('../services/source_id');
 const sql = require('../services/sql');
 const labelService = require('../services/labels');
 const config = require('../services/config');
+const optionService = require('../services/options');
 
 async function index(req, res) {
     res.render('index', {
+        theme: await optionService.getOption('theme'),
         sourceId: await sourceIdService.generateSourceId(),
         maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
         instanceName: config.General ? config.General.instanceName : null,

src/services/app_info.js

@@ -3,7 +3,7 @@
 const build = require('./build');
 const packageJson = require('../../package');
 
-const APP_DB_VERSION = 98;
+const APP_DB_VERSION = 99;
 
 module.exports = {
     appVersion: packageJson.version,

src/services/options.js

@@ -55,6 +55,7 @@ async function initOptions(startNotePath) {
     await createOption('lastSyncedPush', 0, false);
 
     await createOption('zoomFactor', 1.0, false);
+    await createOption('theme', 'white', false);
 }
 
 module.exports = {

src/views/index.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="theme-<%= theme %>">
   <head>
     <meta charset="utf-8">
     <title>Trilium Notes</title>
@@ -343,12 +343,49 @@
     <div id="options-dialog" title="Options" style="display: none;">
       <div id="options-tabs">
         <ul>
+          <li><a href="#appearance">Apperance</a></li>
           <li><a href="#change-password">Change password</a></li>
           <li><a href="#protected-session-timeout">Protected session</a></li>
           <li><a href="#note-revision-snapshot-time-interval">Note revisions</a></li>
           <li><a href="#advanced">Advanced</a></li>
           <li><a href="#about">About Trilium</a></li>
         </ul>
+        <div id="appearance">
+          <form>
+            <div class="form-group">
+              <label for="theme-select">Theme</label>
+              <select class="form-control" id="theme-select">
+                <option value="white">White</option>
+                <option value="dark">Dark</option>
+                <option value="black">Black</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="zoom-factor-select">Zoom factor (CTRL-+ and CTRL-= work anywhere as well)</label>
+              <select class="form-control" id="zoom-factor-select">
+                <option value="0.5">0.5</option>
+                <option value="0.6">0.6</option>
+                <option value="0.7">0.7</option>
+                <option value="0.8">0.8</option>
+                <option value="0.9">0.9</option>
+                <option value="1.0">1.0</option>
+                <option value="1.1">1.1</option>
+                <option value="1.2">1.2</option>
+                <option value="1.3">1.3</option>
+                <option value="1.4">1.4</option>
+                <option value="1.5">1.5</option>
+                <option value="1.6">1.6</option>
+                <option value="1.7">1.7</option>
+                <option value="1.8">1.8</option>
+                <option value="1.9">1.9</option>
+                <option value="2.0">2.0</option>
+              </select>
+            </div>
+
+            <p>Settings on this options tab are saved automatically after each change.</p>
+          </form>
+        </div>
         <div id="change-password">
           <form id="change-password-form">
             <div class="form-group">