From 362745f31c2473ebdca2efc01e4811bba2a7a6fa Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Mon, 2 Aug 2021 20:44:56 +0500
Subject: [PATCH] feat: make splash screen & app window follow theme

---
 apps/web/desktop/electron.js                  |   2 +
 .../web/desktop/ipc/actions/changeAppTheme.js |  12 ++
 apps/web/desktop/package.json                 |   1 +
 apps/web/desktop/theme.js                     |  17 ++
 apps/web/desktop/yarn.lock                    |   5 +
 apps/web/public/index.html                    |  60 ++++---
 apps/web/src/assets/logo-dark.svg             | 162 ++----------------
 apps/web/src/assets/logo.svg                  |  74 ++------
 apps/web/src/commands/change-app-theme.js     |   5 +
 apps/web/src/stores/theme-store.js            |   7 +
 10 files changed, 122 insertions(+), 223 deletions(-)
 create mode 100644 apps/web/desktop/ipc/actions/changeAppTheme.js
 create mode 100644 apps/web/desktop/theme.js
 create mode 100644 apps/web/src/commands/change-app-theme.js

diff --git a/apps/web/desktop/electron.js b/apps/web/desktop/electron.js
index b86ee02f9..9f1bcea88 100644
--- a/apps/web/desktop/electron.js
+++ b/apps/web/desktop/electron.js
@@ -4,6 +4,7 @@ const os = require("os");
 const { isDevelopment } = require("./utils");
 const { registerProtocol, URL } = require("./protocol");
 const { configureAutoUpdater } = require("./autoupdate");
+const { getTheme, getBackgroundColor } = require("./theme");
 require("./ipc/index.js");
 try {
   require("electron-reloader")(module);
@@ -13,6 +14,7 @@ let mainWindow;
 
 async function createWindow() {
   mainWindow = new BrowserWindow({
+    backgroundColor: getBackgroundColor(),
     autoHideMenuBar: true,
     icon: path.join(
       __dirname,
diff --git a/apps/web/desktop/ipc/actions/changeAppTheme.js b/apps/web/desktop/ipc/actions/changeAppTheme.js
new file mode 100644
index 000000000..b90dbb67d
--- /dev/null
+++ b/apps/web/desktop/ipc/actions/changeAppTheme.js
@@ -0,0 +1,12 @@
+const { setTheme, getBackgroundColor } = require("../../theme");
+
+module.exports = {
+  type: "changeAppTheme",
+  action: async (args) => {
+    console.log("args", args);
+    if (!global.win) return;
+    const { theme } = args;
+    await setTheme(theme);
+    global.win.setBackgroundColor(getBackgroundColor());
+  },
+};
diff --git a/apps/web/desktop/package.json b/apps/web/desktop/package.json
index 10a6ca27a..56ffd9379 100644
--- a/apps/web/desktop/package.json
+++ b/apps/web/desktop/package.json
@@ -8,6 +8,7 @@
   "homepage": "https://notesnook.com/",
   "repository": "https://github.com/streetwriters/notesnook",
   "dependencies": {
+    "electron-data-storage": "^1.0.7",
     "electron-serve": "^1.1.0",
     "electron-updater": "^4.3.8",
     "node-fetch": "^2.6.1"
diff --git a/apps/web/desktop/theme.js b/apps/web/desktop/theme.js
new file mode 100644
index 000000000..fcb341b6d
--- /dev/null
+++ b/apps/web/desktop/theme.js
@@ -0,0 +1,17 @@
+const storage = require("electron-data-storage").default;
+
+function getTheme() {
+  return storage.getSync("theme") || "light";
+}
+
+function setTheme(theme) {
+  return storage.set("theme", theme);
+}
+
+function getBackgroundColor() {
+  const theme = getTheme();
+  console.log("THEME", theme);
+  return theme === "dark" ? "#0f0f0f" : "#fff";
+}
+
+module.exports = { getTheme, setTheme, getBackgroundColor };
diff --git a/apps/web/desktop/yarn.lock b/apps/web/desktop/yarn.lock
index 830473156..799be521c 100644
--- a/apps/web/desktop/yarn.lock
+++ b/apps/web/desktop/yarn.lock
@@ -803,6 +803,11 @@ electron-builder@^22.11.7:
     update-notifier "^5.1.0"
     yargs "^17.0.1"
 
+electron-data-storage@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/electron-data-storage/-/electron-data-storage-1.0.7.tgz#983322d44f9af0bb6f5c9cb66eccc291e14ff486"
+  integrity sha512-dTT1l2DlEk2DqUVgOpaftJLMjRt0AkOGHR9tA2VUUFfs6ORRL+O0JJR93zjQngZCA9U9g/N0VBbsINdZDiVQGg==
+
 electron-is-dev@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/electron-is-dev/-/electron-is-dev-1.2.0.tgz#2e5cea0a1b3ccf1c86f577cee77363ef55deb05e"
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
index bbb3b7f1f..9a9470cd3 100644
--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -69,11 +69,34 @@
     <meta name="twitter:card" content="summary_large_image" />
     <title>Notesnook - Your private note taking space</title>
 
+    <script>
+      const theme = JSON.parse(
+        window.localStorage.getItem("theme") || '"light"'
+      );
+      const root = document.querySelector("html");
+      root.setAttribute("data-theme", theme);
+    </script>
     <style>
+      html[data-theme="dark"] {
+        --bg: #1b1b1b;
+        --fg: #fff;
+        --three-bars-bg: #494949;
+        --gradient-stop-color: #111111;
+        --n-letter-color: #e1e1e1;
+      }
+
+      html[data-theme="light"] {
+        --bg: #fff;
+        --three-bars-bg: #bebebe;
+        --gradient-stop-color: #fff9f9;
+        --n-letter-color: #000;
+      }
+
       #splash svg {
         transform: scale(1);
         animation: pulse 2s infinite;
       }
+
       @keyframes pulse {
         0% {
           transform: scale(0.95);
@@ -87,15 +110,6 @@
           transform: scale(0.95);
         }
       }
-      code.key {
-        display: inline-block;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        padding: 0.1em 0.5em;
-        margin: 0 0.2em;
-        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-        background-color: #f7f7f7;
-      }
     </style>
     <link rel="stylesheet" href="/fonts.css" />
   </head>
@@ -107,7 +121,7 @@
     <div
       id="splash"
       style="
-        background-color: #f0f0f0;
+        background-color: var(--bg);
         height: 100%;
         width: 100%;
         position: absolute;
@@ -134,7 +148,11 @@
           />
           <linearGradient id="a">
             <stop offset="0" />
-            <stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
+            <stop
+              offset="1"
+              stop-color="var(--gradient-stop-color)"
+              stop-opacity="0"
+            />
           </linearGradient>
           <linearGradient
             id="c"
@@ -155,33 +173,25 @@
             stroke-width="1.2"
             d="M160 205V-35m0 240L18 249m142-44l154 41"
           />
-          <path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
+          <path
+            fill="var(--n-letter-color)"
+            d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
+          />
           <rect
             width="86.1"
             height="12.6"
             x="185"
             y="97"
-            fill="#bebebe"
+            fill="var(--three-bars-bg)"
             ry="2.3"
             transform="skewY(15) scale(.9669 1)"
           />
           <path
-            fill="#bebebe"
+            fill="var(--three-bars-bg)"
             d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
           />
         </g>
       </svg>
-      <p align="center" style="font-size: 14px; margin-top: 25px">
-        Taking too long?
-        <br />
-        <span
-          >Reload the app by pressing <code class="key">Shift</code> +
-          <code class="key">F5</code></span
-        >
-        <br />
-        <br />
-        <em>If it still takes too long, please reload your browser.</em>
-      </p>
     </div>
     <div id="dialogContainer"></div>
     <!--
diff --git a/apps/web/src/assets/logo-dark.svg b/apps/web/src/assets/logo-dark.svg
index 3f0903994..644e02bb1 100644
--- a/apps/web/src/assets/logo-dark.svg
+++ b/apps/web/src/assets/logo-dark.svg
@@ -1,144 +1,20 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 339 339"
-   version="1.1"
-   id="svg36"
-   sodipodi:docname="logo-dark.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata40">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#1f1f1f"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="980"
-     id="namedview38"
-     showgrid="false"
-     inkscape:zoom="1.3923304"
-     inkscape:cx="181.58784"
-     inkscape:cy="157.12775"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g34" />
-  <defs
-     id="defs2" />
-  <defs
-     id="defs16">
-    <linearGradient
-       id="b">
-      <stop
-         offset="0"
-         stop-color="#fff"
-         id="stop4" />
-      <stop
-         offset="1"
-         stop-opacity="0"
-         id="stop6"
-         style="stop-color:#1f1f1f;stop-opacity:0" />
-    </linearGradient>
-    <linearGradient
-       id="c"
-       x1="193.9"
-       x2="198.7"
-       y1="166.8"
-       y2="223.3"
-       gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
-       gradientUnits="userSpaceOnUse"
-       xlink:href="#a" />
-    <linearGradient
-       id="a">
-      <stop
-         offset="0"
-         stop-color="#fff"
-         id="stop10" />
-      <stop
-         offset="1"
-         stop-opacity="0"
-         id="stop12"
-         style="stop-color:#1f1f1f;stop-opacity:0" />
-    </linearGradient>
-    <linearGradient
-       id="d"
-       x1="167.8"
-       x2="281.9"
-       y1="76.9"
-       y2="63.2"
-       gradientTransform="scale(1.50082) rotate(5 310 -1366)"
-       gradientUnits="userSpaceOnUse"
-       xlink:href="#b" />
-  </defs>
-  <g
-     transform="translate(0 42)"
-     id="g34">
-    <path
-       fill="url(#c)"
-       d="M160 205l154 42-141 44-155-42z"
-       id="path18" />
-    <path
-       fill="url(#d)"
-       d="M160-35v240l154 42 1-253z"
-       id="path20" />
-    <g
-       fill="none"
-       stroke-width="1.2"
-       id="g24">
-      <path
-         d="M160 205V-35M160 205L18 249M160 205l154 41"
-         id="path22" />
-    </g>
-    <g
-       style="line-height:1.25;-inkscape-font-specification:'Noto Sans'"
-       id="g28">
-      <path
-         fill="#b3b3b3"
-         stroke-width=".7"
-         d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
-         aria-label="N"
-         font-family="Atkinson Hyperlegible"
-         font-size="136.5"
-         font-weight="700"
-         letter-spacing="0"
-         style="-inkscape-font-specification:'Atkinson Hyperlegible Bold';fill:#eeeeee;fill-opacity:1"
-         word-spacing="0"
-         id="path26" />
-    </g>
-    <rect
-       width="86.1"
-       height="12.6"
-       x="185"
-       y="97"
-       fill="#1a1a1a"
-       ry="2.3"
-       transform="skewY(15) scale(.9669 1)"
-       id="rect30" />
-    <path
-       fill="#1a1a1a"
-       d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zM181 122l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
-       id="path32" />
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
+   <defs />
+   <defs>
+      <linearGradient id="b" x1="193.9" x2="198.7" y1="166.8" y2="223.3" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
+      <linearGradient id="a">
+         <stop offset="0" />
+         <stop offset="1" stop-color="#111111" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
+   </defs>
+   <g transform="translate(0 42)">
+      <path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
+      <path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
+      <path fill="none" stroke-width="1.2" d="M160 205V-35m0 240L18 249m142-44l154 41" />
+      <path fill="#e1e1e1" d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
+      <rect width="86.1" height="12.6" x="185" y="97" fill="#494949" ry="2.3" transform="skewY(15) scale(.9669 1)" />
+      <path fill="#494949" d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z" />
+   </g>
 </svg>
diff --git a/apps/web/src/assets/logo.svg b/apps/web/src/assets/logo.svg
index 5860b4fae..e37a18a41 100644
--- a/apps/web/src/assets/logo.svg
+++ b/apps/web/src/assets/logo.svg
@@ -1,56 +1,20 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  viewBox="0 0 339 339"
->
- <defs />
-        <defs>
-          <linearGradient
-            id="b"
-            x1="193.9"
-            x2="198.7"
-            y1="166.8"
-            y2="223.3"
-            gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
-            gradientUnits="userSpaceOnUse"
-            xlink:href="#a"
-          />
-          <linearGradient id="a">
-            <stop offset="0" />
-            <stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
-          </linearGradient>
-          <linearGradient
-            id="c"
-            x1="167.8"
-            x2="270.6"
-            y1="76.9"
-            y2="64.2"
-            gradientTransform="rotate(5 465 -2050) scale(1.50082)"
-            gradientUnits="userSpaceOnUse"
-            xlink:href="#a"
-          />
-        </defs>
-        <g transform="translate(0 42)">
-          <path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
-          <path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
-          <path
-            fill="none"
-            stroke-width="1.2"
-            d="M160 205V-35m0 240L18 249m142-44l154 41"
-          />
-          <path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
-          <rect
-            width="86.1"
-            height="12.6"
-            x="185"
-            y="97"
-            fill="#bebebe"
-            ry="2.3"
-            transform="skewY(15) scale(.9669 1)"
-          />
-          <path
-            fill="#bebebe"
-            d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
-          />
-        </g>
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 339 339">
+  <defs />
+  <defs>
+    <linearGradient id="b" x1="193.9" x2="198.7" y1="166.8" y2="223.3" gradientTransform="rotate(5 4448 -4204) scale(2.93671)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
+    <linearGradient id="a">
+      <stop offset="0" />
+      <stop offset="1" stop-color="#fff9f9" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="c" x1="167.8" x2="270.6" y1="76.9" y2="64.2" gradientTransform="rotate(5 465 -2050) scale(1.50082)" gradientUnits="userSpaceOnUse" xlink:href="#a" />
+  </defs>
+  <g transform="translate(0 42)">
+    <path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
+    <path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
+    <path fill="none" stroke-width="1.2" d="M160 205V-35m0 240L18 249m142-44l154 41" />
+    <path d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z" />
+    <rect width="86.1" height="12.6" x="185" y="97" fill="#bebebe" ry="2.3" transform="skewY(15) scale(.9669 1)" />
+    <path fill="#bebebe" d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z" />
+  </g>
 </svg>
diff --git a/apps/web/src/commands/change-app-theme.js b/apps/web/src/commands/change-app-theme.js
new file mode 100644
index 000000000..f8620153c
--- /dev/null
+++ b/apps/web/src/commands/change-app-theme.js
@@ -0,0 +1,5 @@
+import { invokeCommand } from "./index";
+
+export default function changeAppTheme(theme) {
+  invokeCommand("changeAppTheme", { theme });
+}
diff --git a/apps/web/src/stores/theme-store.js b/apps/web/src/stores/theme-store.js
index 01ee06ba2..b4a9cda0a 100644
--- a/apps/web/src/stores/theme-store.js
+++ b/apps/web/src/stores/theme-store.js
@@ -2,13 +2,20 @@ import createStore from "../common/store";
 import BaseStore from "./index";
 import Config from "../utils/config";
 import { getDefaultAccentColor } from "../theme/accents";
+import changeAppTheme from "../commands/change-app-theme";
 
 class ThemeStore extends BaseStore {
   theme = Config.get("theme", "light");
   accent = Config.get("accent", getDefaultAccentColor());
   followSystemTheme = Config.get("followSystemTheme", false);
 
+  constructor(set, get) {
+    super(set, get);
+    changeAppTheme(Config.get("theme", "light"));
+  }
+
   setTheme = (theme) => {
+    changeAppTheme(theme);
     this.set((state) => (state.theme = theme));
     Config.set("theme", theme);
   };