Merge branch 'master' into theme-engine

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

.commitlintrc.js

@@ -14,13 +14,16 @@ const SCOPES = [
 
   "mobile",
   "web",
+  "vericrypt",
   "desktop",
   "crypto",
   "editor",
   "logger",
   "theme",
+  "server",
   "core",
   "fs",
+  "ui",
   "clipper",
   "config",
   "ci",

.github/workflows/android.publish.internal.yml

@@ -22,7 +22,9 @@ jobs:
 
       - name: Install node modules
         run: |
-          npm ci
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+          
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 

.github/workflows/android.publish.yml

@@ -22,7 +22,9 @@ jobs:
 
       - name: Install node modules
         run: |
-          npm ci
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=mobile
+
       - name: Make Gradlew Executable
         run: cd apps/mobile/native/android && chmod +x ./gradlew
 

.github/workflows/core.tests.yml

@@ -28,7 +28,8 @@ jobs:
 
       - name: Prepare environment
         run: |
-          npm ci --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=core
       - name: Add environment variables
         run: |
           echo "USER_EMAIL=${{ secrets.USER_EMAIL }}" >> $GITHUB_ENV

.github/workflows/desktop.publish.yml

@@ -32,8 +32,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |
@@ -108,12 +108,12 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --scope=@notesnook/desktop --scope=@notesnook/crypto --scope=@notesnook/sodium -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
 
       - name: Install provisioning profile
         run: echo "${{ secrets.MAC_PROVISIONING_PROFILE }}" | base64 --decode > embedded.provisionprofile
@@ -183,12 +183,12 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --scope=@notesnook/desktop --scope=@notesnook/crypto --scope=@notesnook/sodium -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
         run: npx nx run release --project @notesnook/desktop
@@ -233,12 +233,12 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/desktop/build
+          path: ./apps/web/build
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --scope=@notesnook/desktop --scope=@notesnook/crypto --scope=@notesnook/sodium -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=desktop
 
       - name: Build
         run: npx nx run release --project @notesnook/desktop

.github/workflows/editor.tests.yml

@@ -29,8 +29,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=editor
 
       - name: Setup environment
         run: |

.github/workflows/help.publish.yml

@@ -0,0 +1,35 @@
+name: Publish Notesnook Help
+
+on: 
+  workflow_dispatch:
+  push:
+    branches:
+      - "master"
+    paths:
+      - "docs/help/**"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+
+      - name: Install docgen
+        run: cargo install --git https://github.com/thecodrr/docgen
+
+      - name: Build site
+        run: docgen build --release
+        working-directory: docs/help
+
+      - name: Setup environment
+        run: |
+          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Publish on Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name notesnook-help ./docs/help/site/ --branch main

.github/workflows/vericrypt.publish.yml

@@ -0,0 +1,31 @@
+name: Publish @notesnook/vericrypt
+
+on: workflow_dispatch
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node-with-cache
+
+      - name: Install packages
+        run: |
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=vericrypt
+
+      - name: Setup environment
+        run: |
+          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
+          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
+
+      - name: Generate desktop build
+        run: npm run build:vericrypt
+
+      - name: Publish on Cloudflare Pages
+        run: npx --yes wrangler pages publish --project-name=vericrypt ./apps/vericrypt/build/

.github/workflows/web.publish.yml

@@ -15,8 +15,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |

.github/workflows/web.tests.yml

@@ -29,8 +29,8 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
-          npx lerna bootstrap --ignore=@notesnook/mobile -- --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
+          npm run bootstrap -- --scope=web
 
       - name: Setup environment
         run: |
@@ -66,7 +66,7 @@ jobs:
 
       - name: Install packages
         run: |
-          npm i --ignore-scripts --prefer-offline --no-audit
+          npm ci --ignore-scripts --prefer-offline --no-audit
           npm install -D @playwright/test otplib
 
       - name: Validate build extraction

.vscode/settings.json

@@ -1,13 +1,15 @@
 {
   "files.eol": "\n",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "javascript.format.enable": true,
   "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "modificationsIfAvailable",
-  "eslint.packageManager": "npm",
+  "editor.formatOnSaveMode": "file",
   "eslint.run": "onSave",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "eslint.execArgv": ["--cache"]
+  "eslint.options": {
+    "cache": true,
+    "cacheStrategy": "content"
+  },
+  "git.rebaseWhenSync": true
 }

README.md

@@ -27,7 +27,7 @@ Notesnook is built using the following technologies:
 3. React Native — For mobile apps we are using React Native
 4. Electron — For desktop app
 5. NPM — listed here because we **don't** use Yarn or PNPM or XYZ across any of our projects.
-6. Lerna & Nx — maintaining monorepos is hard but Nx makes it easier.
+6. Nx — maintaining monorepos is hard but Nx makes it easier.
 
 > **Note: Each project in the monorepo contains its own architecture details which you can refer to.**
 

apps/desktop/package-lock.json

@@ -1,38 +1,49 @@
 {
   "name": "@notesnook/desktop",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "2.5.6",
+      "version": "2.5.8",
+      "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@trpc/client": "^10.29.1",
-        "@trpc/server": "^10.29.1",
-        "diary": "^0.3.1",
-        "electron-trpc": "^0.5.2",
-        "electron-updater": "^5.3.0",
+        "@notesnook/crypto": "file:../../packages/crypto",
+        "@trpc/client": "10.31.0",
+        "@trpc/server": "10.31.0",
+        "electron-trpc": "0.5.2",
+        "electron-updater": "6.1.1",
         "icojs": "^0.17.1",
         "typed-emitter": "^2.1.0",
         "yargs": "^17.6.2",
         "zod": "^3.21.4"
       },
       "devDependencies": {
-        "@electron/rebuild": "^3.2.13",
         "@types/node": "^18.15.0",
-        "electron": "^24.4.0",
-        "electron-builder": "^23.6.0",
+        "@types/yargs": "^17.0.24",
+        "chokidar": "^3.5.3",
+        "electron": "24.5.1",
+        "electron-builder": "24.4.0",
         "electron-builder-notarize": "^1.5.1",
-        "electron-reloader": "^1.2.3",
         "esbuild": "^0.17.19",
-        "node-fetch": "^3.3.1"
+        "node-fetch": "^3.3.1",
+        "tree-kill": "^1.2.2"
       },
       "optionalDependencies": {
         "dmg-license": "^1.0.11"
       }
     },
+    "../../packages/crypto": {
+      "name": "@notesnook/crypto",
+      "version": "1.1.1",
+      "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "@notesnook/sodium": "file:../sodium"
+      },
+      "devDependencies": {}
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
@@ -161,6 +172,24 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/@electron/asar": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.4.tgz",
+      "integrity": "sha512-lykfY3TJRRWFeTxccEKdf1I6BLl2Plw81H0bbp4Fc5iEc67foDCa5pjJQULVgo0wF+Dli75f3xVcdb/67FFZ/g==",
+      "dev": true,
+      "dependencies": {
+        "chromium-pickle-js": "^0.2.0",
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "asar": "bin/asar.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
     "node_modules/@electron/get": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.2.tgz",
@@ -223,6 +252,67 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/@electron/notarize": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-1.2.4.tgz",
+      "integrity": "sha512-W5GQhJEosFNafewnS28d3bpQ37/s91CDWqxVchHfmv2dQSTWpOzNlUVQwYzC1ay5bChRV/A9BTL68yj0Pa+TSg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/osx-sign": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.0.4.tgz",
+      "integrity": "sha512-xfhdEcIOfAZg7scZ9RQPya1G1lWo8/zMCwUXAulq0SfY7ONIW+b9qGyKdMyuMctNYwllrIS+vmxfijSfjeh97g==",
+      "dev": true,
+      "dependencies": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      },
+      "bin": {
+        "electron-osx-flat": "bin/electron-osx-flat.js",
+        "electron-osx-sign": "bin/electron-osx-sign.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
     "node_modules/@electron/rebuild": {
       "version": "3.2.13",
       "resolved": "https://registry.npmjs.org/@electron/rebuild/-/rebuild-3.2.13.tgz",
@@ -251,15 +341,15 @@
       }
     },
     "node_modules/@electron/universal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.2.1.tgz",
-      "integrity": "sha512-7323HyMh7KBAl/nPDppdLsC87G6RwRU02dy5FPeGB1eS7rUePh55+WNWiDPLhFQqqVPHzh77M69uhmoT8XnwMQ==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-1.3.4.tgz",
+      "integrity": "sha512-BdhBgm2ZBnYyYRLRgOjM5VHkyFItsbggJ0MHycOjKWdFGYwK97ZFXH54dTvUWEfha81vfvwr5On6XBjt99uDcg==",
       "dev": true,
       "dependencies": {
+        "@electron/asar": "^3.2.1",
         "@malept/cross-spawn-promise": "^1.1.0",
-        "asar": "^3.1.0",
         "debug": "^4.3.1",
-        "dir-compare": "^2.4.0",
+        "dir-compare": "^3.0.0",
         "fs-extra": "^9.0.1",
         "minimatch": "^3.0.4",
         "plist": "^3.0.4"
@@ -805,6 +895,10 @@
         "node": ">=10"
       }
     },
+    "node_modules/@notesnook/crypto": {
+      "resolved": "../../packages/crypto",
+      "link": true
+    },
     "node_modules/@npmcli/fs": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
@@ -914,17 +1008,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/glob": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
-      "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz",
@@ -940,13 +1023,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/minimatch": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
-      "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/@types/ms": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
@@ -984,11 +1060,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/semver": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
-      "integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw=="
-    },
     "node_modules/@types/verror": {
       "version": "1.10.6",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz",
@@ -1138,42 +1209,66 @@
       "dev": true
     },
     "node_modules/app-builder-lib": {
-      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-23.6.0.tgz",
-      "integrity": "sha512-dQYDuqm/rmy8GSCE6Xl/3ShJg6Ab4bZJMT8KaTKGzT436gl1DN4REP3FCWfXoh75qGTJ+u+WsdnnpO9Jl8nyMA==",
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-24.4.0.tgz",
+      "integrity": "sha512-EcdqtWvg1LAApKCfyRBukcVkmsa94s2e1VKHjZLpvA9/D14QEt8rHhffYeaA+cH/pVeoNVn2ob735KnfJKEEow==",
       "dev": true,
       "dependencies": {
         "@develar/schema-utils": "~2.6.5",
-        "@electron/universal": "1.2.1",
+        "@electron/notarize": "^1.2.3",
+        "@electron/osx-sign": "^1.0.4",
+        "@electron/rebuild": "^3.2.13",
+        "@electron/universal": "1.3.4",
         "@malept/flatpak-bundler": "^0.4.0",
+        "@types/fs-extra": "9.0.13",
         "7zip-bin": "~5.1.1",
         "async-exit-hook": "^2.0.1",
         "bluebird-lst": "^1.0.9",
-        "builder-util": "23.6.0",
-        "builder-util-runtime": "9.1.1",
+        "builder-util": "24.4.0",
+        "builder-util-runtime": "9.2.1",
         "chromium-pickle-js": "^0.2.0",
         "debug": "^4.3.4",
-        "ejs": "^3.1.7",
-        "electron-osx-sign": "^0.6.0",
-        "electron-publish": "23.6.0",
+        "ejs": "^3.1.8",
+        "electron-publish": "24.4.0",
         "form-data": "^4.0.0",
         "fs-extra": "^10.1.0",
         "hosted-git-info": "^4.1.0",
         "is-ci": "^3.0.0",
-        "isbinaryfile": "^4.0.10",
+        "isbinaryfile": "^5.0.0",
         "js-yaml": "^4.1.0",
         "lazy-val": "^1.0.5",
-        "minimatch": "^3.1.2",
-        "read-config-file": "6.2.0",
+        "minimatch": "^5.1.1",
+        "read-config-file": "6.3.2",
         "sanitize-filename": "^1.6.3",
-        "semver": "^7.3.7",
-        "tar": "^6.1.11",
+        "semver": "^7.3.8",
+        "tar": "^6.1.12",
         "temp-file": "^3.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
+    "node_modules/app-builder-lib/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -1198,28 +1293,6 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
-    "node_modules/asar": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/asar/-/asar-3.2.0.tgz",
-      "integrity": "sha512-COdw2ZQvKdFGFxXwX3oYh2/sOsJWJegrdJCGxnN4MZ7IULgRBp9P6665aqj9z1v9VwP4oP1hRBojRDQ//IGgAg==",
-      "deprecated": "Please use @electron/asar moving forward.  There is no API change, just a package name change",
-      "dev": true,
-      "dependencies": {
-        "chromium-pickle-js": "^0.2.0",
-        "commander": "^5.0.0",
-        "glob": "^7.1.6",
-        "minimatch": "^3.0.4"
-      },
-      "bin": {
-        "asar": "bin/asar.js"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      },
-      "optionalDependencies": {
-        "@types/glob": "^7.1.1"
-      }
-    },
     "node_modules/assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -1387,22 +1460,6 @@
         "ieee754": "^1.1.13"
       }
     },
-    "node_modules/buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "dev": true,
-      "dependencies": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
-      }
-    },
-    "node_modules/buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
-      "dev": true
-    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -1413,20 +1470,17 @@
       }
     },
     "node_modules/buffer-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.0.tgz",
-      "integrity": "sha512-tcBWO2Dl4e7Asr9hTGcpVrCe+F7DubpmqWCTbj4FHLmjqO2hIaC383acQubWtRJhdceqs5uBHs6Es+Sk//RKiQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-1.0.1.tgz",
+      "integrity": "sha512-QoV3ptgEaQpvVwbXdSO39iqPQTCxSF7A5U99AxbHYqUdCizL/lH2Z0A2y6nbZucxMEOtNyZfG2s6gsVugGpKkg==",
       "dev": true,
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==",
-      "dev": true
-    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -1434,23 +1488,22 @@
       "dev": true
     },
     "node_modules/builder-util": {
-      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-23.6.0.tgz",
-      "integrity": "sha512-QiQHweYsh8o+U/KNCZFSvISRnvRctb8m/2rB2I1JdByzvNKxPeFLlHFRPQRXab6aYeXc18j9LpsDLJ3sGQmWTQ==",
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-24.4.0.tgz",
+      "integrity": "sha512-tONb/GIK1MKa1BcOPHE1naId3o5nj6gdka5kP7yUJh2DOfF+jMq3laiu+UOZH6A7ZtkMtnGNMYFKFTIv408n/A==",
       "dev": true,
       "dependencies": {
         "@types/debug": "^4.1.6",
-        "@types/fs-extra": "^9.0.11",
         "7zip-bin": "~5.1.1",
         "app-builder-bin": "4.0.0",
         "bluebird-lst": "^1.0.9",
-        "builder-util-runtime": "9.1.1",
-        "chalk": "^4.1.1",
+        "builder-util-runtime": "9.2.1",
+        "chalk": "^4.1.2",
         "cross-spawn": "^7.0.3",
         "debug": "^4.3.4",
-        "fs-extra": "^10.0.0",
+        "fs-extra": "^10.1.0",
         "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
         "is-ci": "^3.0.0",
         "js-yaml": "^4.1.0",
         "source-map-support": "^0.5.19",
@@ -1459,9 +1512,9 @@
       }
     },
     "node_modules/builder-util-runtime": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.1.1.tgz",
-      "integrity": "sha512-azRhYLEoDvRDR8Dhis4JatELC/jUvYjm4cVSj7n9dauGTOM2eeNn9KS0z6YA6oDsjI1xphjNbY6PZZeHPzzqaw==",
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.1.tgz",
+      "integrity": "sha512-2rLv/uQD2x+dJ0J3xtsmI12AlRyk7p45TEbE/6o/fbb633e/S3pPgm+ct+JHsoY7r39dKHnGEFk/AASRFdnXmA==",
       "dependencies": {
         "debug": "^4.3.4",
         "sax": "^1.2.4"
@@ -1756,15 +1809,6 @@
         "color-support": "bin.js"
       }
     },
-    "node_modules/colors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-      "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1801,6 +1845,16 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/config-file-ts": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.4.tgz",
+      "integrity": "sha512-cKSW0BfrSaAUnxpgvpXPLaaW/umg4bqg4k3GO1JqlRfpx+d5W0GDXznCMkWotJQek5Mmz1MJVChQnz3IVaeMZQ==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.6",
+        "typescript": "^4.0.2"
+      }
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -1845,18 +1899,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/date-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/date-time/-/date-time-3.1.0.tgz",
-      "integrity": "sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==",
-      "dev": true,
-      "dependencies": {
-        "time-zone": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2003,60 +2045,26 @@
       "dev": true,
       "optional": true
     },
-    "node_modules/diary": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/diary/-/diary-0.3.1.tgz",
-      "integrity": "sha512-efOiQYa4S0fNbXs00dDq6wGPIlTCs2TCKDglL+bPhFnmV/4aPfv2mHJ6K3BXey5Fy+4mXNob7QtJYQVIxBpxQA=="
-    },
     "node_modules/dir-compare": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-2.4.0.tgz",
-      "integrity": "sha512-l9hmu8x/rjVC9Z2zmGzkhOEowZvW7pmYws5CWHutg8u1JgvsKWMx7Q/UODeu4djLZ4FgW5besw5yvMQnBHzuCA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-3.3.0.tgz",
+      "integrity": "sha512-J7/et3WlGUCxjdnD3HAAzQ6nsnc0WL6DD7WcwJb7c39iH1+AWfg+9OqzJNaI6PkBwBvm1mhZNL9iY/nRiZXlPg==",
       "dev": true,
       "dependencies": {
-        "buffer-equal": "1.0.0",
-        "colors": "1.0.3",
-        "commander": "2.9.0",
-        "minimatch": "3.0.4"
-      },
-      "bin": {
-        "dircompare": "src/cli/dircompare.js"
-      }
-    },
-    "node_modules/dir-compare/node_modules/commander": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-      "integrity": "sha512-bmkUukX8wAOjHdN26xj5c4ctEV22TQ7dQYhSmuckKhToXrkUn0iIaolHdIxYYqD55nhpSPA9zPQ1yP57GdXP2A==",
-      "dev": true,
-      "dependencies": {
-        "graceful-readlink": ">= 1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6.x"
-      }
-    },
-    "node_modules/dir-compare/node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
+        "buffer-equal": "^1.0.0",
+        "minimatch": "^3.0.4"
       }
     },
     "node_modules/dmg-builder": {
-      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-23.6.0.tgz",
-      "integrity": "sha512-jFZvY1JohyHarIAlTbfQOk+HnceGjjAdFjVn3n8xlDWKsYNqbO4muca6qXEZTfGXeQMG7TYim6CeS5XKSfSsGA==",
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-24.4.0.tgz",
+      "integrity": "sha512-p5z9Cx539GSBYb+b09Z+hMhuBTh/BrI71VRg4rgF6f2xtIRK/YlTGVS/O08k5OojoyhZcpS7JXxDVSmQoWgiiQ==",
       "dev": true,
       "dependencies": {
-        "app-builder-lib": "23.6.0",
-        "builder-util": "23.6.0",
-        "builder-util-runtime": "9.1.1",
-        "fs-extra": "^10.0.0",
+        "app-builder-lib": "24.4.0",
+        "builder-util": "24.4.0",
+        "builder-util-runtime": "9.2.1",
+        "fs-extra": "^10.1.0",
         "iconv-lite": "^0.6.2",
         "js-yaml": "^4.1.0"
       },
@@ -2144,23 +2152,22 @@
       }
     },
     "node_modules/electron-builder": {
-      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-23.6.0.tgz",
-      "integrity": "sha512-y8D4zO+HXGCNxFBV/JlyhFnoQ0Y0K7/sFH+XwIbj47pqaW8S6PGYQbjoObolKBR1ddQFPt4rwp4CnwMJrW3HAw==",
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-24.4.0.tgz",
+      "integrity": "sha512-D5INxodxaUIJgEX6p/fqBd8wQNS8XRAToNIJ9SQC+taNS5D73ZsjLuXiRraFGCB0cVk9KeKhEkdEOH5AaVya4g==",
       "dev": true,
       "dependencies": {
-        "@types/yargs": "^17.0.1",
-        "app-builder-lib": "23.6.0",
-        "builder-util": "23.6.0",
-        "builder-util-runtime": "9.1.1",
-        "chalk": "^4.1.1",
-        "dmg-builder": "23.6.0",
-        "fs-extra": "^10.0.0",
+        "app-builder-lib": "24.4.0",
+        "builder-util": "24.4.0",
+        "builder-util-runtime": "9.2.1",
+        "chalk": "^4.1.2",
+        "dmg-builder": "24.4.0",
+        "fs-extra": "^10.1.0",
         "is-ci": "^3.0.0",
         "lazy-val": "^1.0.5",
-        "read-config-file": "6.2.0",
-        "simple-update-notifier": "^1.0.7",
-        "yargs": "^17.5.1"
+        "read-config-file": "6.3.2",
+        "simple-update-notifier": "^1.1.0",
+        "yargs": "^17.6.2"
       },
       "bin": {
         "electron-builder": "cli.js",
@@ -2216,12 +2223,6 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
-    "node_modules/electron-is-dev": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/electron-is-dev/-/electron-is-dev-1.2.0.tgz",
-      "integrity": "sha512-R1oD5gMBPS7PVU8gJwH6CtT0e6VSoD0+SzSnYpNm+dBkcijgA+K7VAMHDfnRq/lkKPZArpzplTW6jfiMYosdzw==",
-      "dev": true
-    },
     "node_modules/electron-notarize": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/electron-notarize/-/electron-notarize-1.2.2.tgz",
@@ -2251,86 +2252,21 @@
         "node": ">=10"
       }
     },
-    "node_modules/electron-osx-sign": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.6.0.tgz",
-      "integrity": "sha512-+hiIEb2Xxk6eDKJ2FFlpofCnemCbjbT5jz+BKGpVBrRNT3kWTGs4DfNX6IzGwgi33hUcXF+kFs9JW+r6Wc1LRg==",
-      "deprecated": "Please use @electron/osx-sign moving forward. Be aware the API is slightly different",
-      "dev": true,
-      "dependencies": {
-        "bluebird": "^3.5.0",
-        "compare-version": "^0.1.2",
-        "debug": "^2.6.8",
-        "isbinaryfile": "^3.0.2",
-        "minimist": "^1.2.0",
-        "plist": "^3.0.1"
-      },
-      "bin": {
-        "electron-osx-flat": "bin/electron-osx-flat.js",
-        "electron-osx-sign": "bin/electron-osx-sign.js"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/electron-osx-sign/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/electron-osx-sign/node_modules/isbinaryfile": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.3.tgz",
-      "integrity": "sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==",
-      "dev": true,
-      "dependencies": {
-        "buffer-alloc": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
-    "node_modules/electron-osx-sign/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
     "node_modules/electron-publish": {
-      "version": "23.6.0",
-      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-23.6.0.tgz",
-      "integrity": "sha512-jPj3y+eIZQJF/+t5SLvsI5eS4mazCbNYqatv5JihbqOstIM13k0d1Z3vAWntvtt13Itl61SO6seicWdioOU5dg==",
+      "version": "24.4.0",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-24.4.0.tgz",
+      "integrity": "sha512-U3mnVSxIfNrLW7ZnwiedFhcLf6ExPFXgAsx89WpfQFsV4gFAt/LG+H74p0m9NSvsLXiZuF82yXoxi7Ou8GHq4Q==",
       "dev": true,
       "dependencies": {
         "@types/fs-extra": "^9.0.11",
-        "builder-util": "23.6.0",
-        "builder-util-runtime": "9.1.1",
-        "chalk": "^4.1.1",
-        "fs-extra": "^10.0.0",
+        "builder-util": "24.4.0",
+        "builder-util-runtime": "9.2.1",
+        "chalk": "^4.1.2",
+        "fs-extra": "^10.1.0",
         "lazy-val": "^1.0.5",
         "mime": "^2.5.2"
       }
     },
-    "node_modules/electron-reloader": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/electron-reloader/-/electron-reloader-1.2.3.tgz",
-      "integrity": "sha512-aDnACAzNg0QvQhzw7LYOx/nVS10mEtbuG6M0QQvNQcLnJEwFs6is+EGRCnM+KQlQ4KcTbdwnt07nd7ZjHpY4iw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.1.0",
-        "chokidar": "^3.5.0",
-        "date-time": "^3.1.0",
-        "electron-is-dev": "^1.2.0",
-        "find-up": "^5.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/electron-trpc": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/electron-trpc/-/electron-trpc-0.5.2.tgz",
@@ -2345,18 +2281,17 @@
       }
     },
     "node_modules/electron-updater": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-5.3.0.tgz",
-      "integrity": "sha512-iKEr7yQBcvnQUPnSDYGSWC9t0eF2YbZWeYYYZzYxdl+HiRejXFENjYMnYjoOm2zxyD6Cr2JTHZhp9pqxiXuCOw==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.1.1.tgz",
+      "integrity": "sha512-IBT3zJ4yO5UZMF2gOTC9HrlmG4OYSRtOiHKzNAShJvfuicdx6UaXoa6AvhcTxdx6zf/rJyFMRBISS9jhVwTfow==",
       "dependencies": {
-        "@types/semver": "^7.3.6",
-        "builder-util-runtime": "9.1.1",
-        "fs-extra": "^10.0.0",
+        "builder-util-runtime": "9.2.1",
+        "fs-extra": "^10.1.0",
         "js-yaml": "^4.1.0",
         "lazy-val": "^1.0.5",
         "lodash.escaperegexp": "^4.1.2",
         "lodash.isequal": "^4.5.0",
-        "semver": "^7.3.5",
+        "semver": "^7.3.8",
         "typed-emitter": "^2.1.0"
       }
     },
@@ -2623,22 +2558,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -2898,12 +2817,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
-    "node_modules/graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w==",
-      "dev": true
-    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3247,12 +3160,12 @@
       }
     },
     "node_modules/isbinaryfile": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
-      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.0.tgz",
+      "integrity": "sha512-UDdnyGvMajJUWCkib7Cei/dvyJrrvo4FIrsvSFWdPpXSUorzXrDJ0S+X5Q4ZlasfPjca4yqCNNsjbCeiy8FFeg==",
       "dev": true,
       "engines": {
-        "node": ">= 8.0.0"
+        "node": ">= 14.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/gjtorikian/"
@@ -3390,21 +3303,6 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3983,36 +3881,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -4218,11 +4086,12 @@
       }
     },
     "node_modules/read-config-file": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.2.0.tgz",
-      "integrity": "sha512-gx7Pgr5I56JtYz+WuqEbQHj/xWo+5Vwua2jhb1VwM4Wid5PqYmZ4i00ZB0YEGIfkVBsCv9UrjgyqCiQfS/Oosg==",
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.3.2.tgz",
+      "integrity": "sha512-M80lpCjnE6Wt6zb98DoW8WHR09nzMSpu8XHtPkiTHrJ5Az9CybfeQhTJ8D7saeBHpGhLPIVyA8lcL6ZmdKwY6Q==",
       "dev": true,
       "dependencies": {
+        "config-file-ts": "^0.2.4",
         "dotenv": "^9.0.2",
         "dotenv-expand": "^5.1.0",
         "js-yaml": "^4.1.0",
@@ -4919,15 +4788,6 @@
         "fs-extra": "^10.0.0"
       }
     },
-    "node_modules/time-zone": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/time-zone/-/time-zone-1.0.0.tgz",
-      "integrity": "sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -4982,6 +4842,15 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/truncate-utf8-bytes": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
@@ -5014,6 +4883,19 @@
         "rxjs": "*"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unique-filename": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@@ -5229,18 +5111,6 @@
         "fd-slicer": "~1.1.0"
       }
     },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.5.6",
+  "version": "2.5.8",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -11,34 +11,34 @@
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@notesnook/crypto": "*",
-    "@trpc/client": "^10.29.1",
-    "@trpc/server": "^10.29.1",
-    "diary": "^0.3.1",
-    "electron-trpc": "^0.5.2",
-    "electron-updater": "^5.3.0",
+    "@notesnook/crypto": "file:../../packages/crypto",
+    "@trpc/client": "10.31.0",
+    "@trpc/server": "10.31.0",
+    "electron-trpc": "0.5.2",
+    "electron-updater": "6.1.1",
     "icojs": "^0.17.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@electron/rebuild": "^3.2.13",
     "@types/node": "^18.15.0",
-    "electron": "^24.4.0",
-    "electron-builder": "^23.6.0",
+    "@types/yargs": "^17.0.24",
+    "chokidar": "^3.5.3",
+    "electron": "24.5.1",
+    "electron-builder": "24.4.0",
     "electron-builder-notarize": "^1.5.1",
-    "electron-reloader": "^1.2.3",
     "esbuild": "^0.17.19",
-    "node-fetch": "^3.3.1"
+    "node-fetch": "^3.3.1",
+    "tree-kill": "^1.2.2"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
   },
   "scripts": {
-    "start": "turbowatch scripts/dev.ts",
-    "staging": "zx scripts/build.mjs --run",
-    "release": "zx scripts/build.mjs",
+    "start": "node scripts/dev.mjs",
+    "staging": "node scripts/build.mjs --run",
+    "release": "node scripts/build.mjs",
     "build": "tsc",
     "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
@@ -55,11 +55,15 @@
     "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
     "artifactName": "notesnook_${os}_${arch}.${ext}",
     "npmRebuild": false,
+    "asar": false,
     "files": [
       "!*.chunk.js.map",
       "!*.chunk.js.LICENSE.txt",
       "build/",
       "!build/screenshots${/*}",
+      "!build/banner.jpg",
+      "!build/*.ico",
+      "!build/*.png",
       "!node_modules${/*}"
     ],
     "afterSign": "electron-builder-notarize",

apps/desktop/patches/app-builder-lib+24.4.0.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index ffcc8bd..7e57c9e 100644
+index 3ba5d6a..cf8e147 100644
 --- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 +++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 @@ -105,6 +105,7 @@ class LinuxTargetHelper {
@@ -9,12 +9,12 @@ index ffcc8bd..7e57c9e 100644
 +            actions: undefined
          };
          const description = this.getDescription(targetSpecificOptions);
-         if (!builder_util_1.isEmptyOrSpaces(description)) {
+         if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
 @@ -148,6 +149,23 @@ class LinuxTargetHelper {
              data += `\n${name}=${desktopMeta[name]}`;
          }
          data += "\n";
-+       
++               
 +        if (targetSpecificOptions.desktop.actions) {
 +            let actionsData = "";
 +            const validActions = [];

apps/desktop/scripts/build.mjs

@@ -20,9 +20,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import path from "path";
 import fs from "fs/promises";
 import { existsSync } from "fs";
-import { argv, os } from "zx";
+import yargs from "yargs-parser";
+import os from "os";
 import * as childProcess from "child_process";
+import { fileURLToPath } from "url";
 
+const args = yargs(process.argv);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const sodiumNativePrebuildPath = (arch) =>
   path.join(
     `node_modules`,
@@ -37,18 +42,19 @@ const sodiumNativePrebuildPath = (arch) =>
     `${os.platform()}-${arch}`
   );
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
-if (argv.rebuild) {
-  await fs.rm("./build/", { force: true, recursive: true });
 
+await fs.rm("./build/", { force: true, recursive: true });
+
+if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   await exec(`cd ${webAppPath} && npm run build:desktop`);
-
-  await fs.cp(path.join(webAppPath, "build"), "build", {
-    recursive: true,
-    force: true
-  });
 }
 
-if (argv.variant === "mas") {
+await fs.cp(path.join(webAppPath, "build"), "build", {
+  recursive: true,
+  force: true
+});
+
+if (args.variant === "mas") {
   await exec(`npm run bundle:mas`);
 } else {
   await exec(`npm run bundle`);
@@ -92,13 +98,14 @@ if (existsSync(sodiumNativePrebuildPath("arm64"))) {
   );
 }
 
-if (argv.run) {
+if (args.run) {
+  await exec(`npx electron-builder --dir --x64`);
   if (process.platform === "win32") {
-    await exec(`npx electron-builder --win --x64`);
-    // await exec(`.\\output\\notesnook_win_x64_portable.exe`);
+    await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
+  } else if (process.platform === "darwin") {
+    await exec(`./output/darwin-unpacked/Notesnook`);
   } else {
-    await exec(`npx electron-builder --linux AppImage:x64`);
-    await exec(`./output/notesnook_linux_x86_64.AppImage`);
+    await exec(`./output/linux-unpacked/Notesnook`);
   }
 }
 

apps/desktop/scripts/dev.mjs

@@ -0,0 +1,197 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import path from "path";
+import fs from "fs/promises";
+import chokidar from "chokidar";
+import { execSync, spawn } from "child_process";
+import { fileURLToPath } from "url";
+import treekill from "tree-kill";
+import crypto from "crypto";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const sodiumNativePrebuildPath = path.join(
+  `node_modules`,
+  `@notesnook`,
+  `crypto`,
+  `node_modules`,
+  `@notesnook`,
+  `sodium`,
+  `node_modules`,
+  `sodium-native`,
+  `prebuilds`
+);
+const RUNNING_PROCESSES = [];
+const RESTARTABLE_PROCESSES = [];
+let lastBundleHash = null;
+
+await onChange(true);
+
+console.log("Watching...");
+
+const watcher = chokidar.watch("src/", { ignoreInitial: true });
+watcher.on("all", () => {
+  onChange(false);
+});
+
+process.on("SIGINT", async (s) => {
+  await cleanup();
+});
+
+async function onChange(first) {
+  if (first) {
+    await fs.rm("./build/", { force: true, recursive: true });
+  }
+
+  await exec(`npm run bundle`);
+  execAsync(`npx`, [`tsc`]);
+
+  if (await isBundleSame()) {
+    console.log("Bundle is same. Doing nothing.");
+    return;
+  }
+
+  if (first) {
+    await fs.cp(sodiumNativePrebuildPath, "build/prebuilds", {
+      recursive: true,
+      force: true
+    });
+  }
+
+  if (first) {
+    await spawnAndWaitUntil(
+      ["npx", "nx", "start:desktop", "@notesnook/web"],
+      path.join(__dirname, "..", "..", ".."),
+      (data) => data.includes("Network: use --host to expose")
+    );
+  }
+
+  if (!first) {
+    console.log("Restarting...", RESTARTABLE_PROCESSES.length);
+    await killProcesses(RESTARTABLE_PROCESSES);
+  }
+
+  execAsync(
+    "npx",
+    ["electron", path.join("build", "electron.js")],
+    true,
+    cleanup
+  );
+}
+
+function spawnAndWaitUntil(cmd, cwd, predicate) {
+  return new Promise((resolve) => {
+    console.log(">", ...cmd);
+
+    const s = spawn(cmd[0], cmd.slice(1), {
+      cwd,
+      env: { ...process.env, NO_COLOR: "true" },
+      shell: false
+    });
+
+    RUNNING_PROCESSES.push(s);
+
+    s.stderr.pipe(process.stderr);
+    s.stdout.on("data", (data) => {
+      process.stdout.write(data);
+      if (predicate(data)) resolve(undefined); //
+    });
+  });
+}
+
+async function exec(cmd) {
+  try {
+    console.log(">", cmd);
+
+    return execSync(cmd, {
+      env: process.env,
+      stdio: "inherit",
+      shell: false
+    });
+  } catch {
+    //ignore
+  }
+}
+
+function execAsync(cmd, args, restartable, onExit) {
+  try {
+    console.log(">", cmd, ...args);
+
+    const proc = spawn(cmd, args, {
+      stdio: "inherit",
+      env: process.env,
+      shell: false
+    });
+
+    const array = restartable ? RESTARTABLE_PROCESSES : RUNNING_PROCESSES;
+    array.push(proc);
+    proc.on("exit", (code, signal) => {
+      console.log(cmd, ...args, "closed with code", code);
+      if (code === 0 && !signal) {
+        array.splice(array.indexOf(proc), 1);
+        onExit && onExit();
+      }
+    });
+  } catch {
+    //ignore
+  }
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function killProcesses(processes) {
+  for (const process of processes.slice()) {
+    processes.splice(processes.indexOf(process), 1);
+    await new Promise((resolve, reject) =>
+      treekill(process.pid, (err) => (err ? reject(err) : resolve()))
+    );
+  }
+}
+
+async function cleanup() {
+  console.log("Cleaning up");
+
+  await killProcesses(RESTARTABLE_PROCESSES);
+  await killProcesses(RUNNING_PROCESSES);
+  await sleep(1000);
+
+  await fs.rm("./build/", { force: true, recursive: true });
+  process.exit();
+}
+
+async function isBundleSame() {
+  const bundle = await fs.readFile(
+    path.join(__dirname, "..", "build", "electron.js")
+  );
+
+  const hashSum = crypto.createHash("sha256");
+  hashSum.update(bundle);
+  const hex = hashSum.digest("hex");
+
+  if (!lastBundleHash) {
+    lastBundleHash = hex;
+    return false;
+  }
+  if (hex === lastBundleHash) return true;
+  lastBundleHash = hex;
+  return false;
+}

apps/desktop/scripts/dev.ts

@@ -1,118 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import path from "path";
-import fs from "fs/promises";
-import { watch } from "turbowatch";
-import { execSync, spawn } from "child_process";
-
-const sodiumNativePrebuildPath = path.join(
-  `node_modules`,
-  `@notesnook`,
-  `crypto`,
-  `node_modules`,
-  `@notesnook`,
-  `sodium`,
-  `node_modules`,
-  `sodium-native`,
-  `prebuilds`
-);
-let isServerRunning = false;
-
-async function main() {
-  const { shutdown } = await watch({
-    project: path.join(__dirname, ".."),
-    cwd: path.join(__dirname, ".."),
-    triggers: [
-      {
-        expression: [
-          "allof",
-          ["not", ["dirname", "node_modules"]],
-          ["match", "*.ts", "basename"]
-        ],
-        name: "dev",
-        // retry: { retries: 0 },
-        onTeardown: async () => {
-          await fs.rm("./build/", { force: true, recursive: true });
-        },
-        onChange: async ({ first }) => {
-          if (first) {
-            await fs.rm("./build/", { force: true, recursive: true });
-          }
-
-          await exec(`npm run bundle`);
-          await exec(`npx tsc`);
-
-          if (first) {
-            await fs.cp(sodiumNativePrebuildPath, "build/prebuilds", {
-              recursive: true,
-              force: true
-            });
-          }
-
-          if (!isServerRunning) {
-            await spawnAndWaitUntil(
-              ["npm", "run", "start:desktop"],
-              path.join(__dirname, "..", "..", "web"),
-              (data) => data.includes("Network: use --host to expose")
-            );
-            isServerRunning = true;
-          }
-
-          await exec(`npx electron ${path.join("build", "electron.js")}`);
-        }
-      }
-    ]
-  });
-
-  // SIGINT is the signal sent when we press Ctrl+C
-  process.once("SIGINT", () => {
-    void shutdown();
-  });
-}
-
-main();
-
-function spawnAndWaitUntil(
-  cmd: string[],
-  cwd: string,
-  predicate: (data: string) => boolean
-) {
-  return new Promise((resolve) => {
-    const s = spawn(cmd[0], cmd.slice(1), {
-      cwd,
-      env: { ...process.env, NO_COLOR: "true" }
-    });
-
-    process.once("beforeExit", () => {
-      s.kill(-1);
-    });
-
-    s.stdout.on("data", (data) => {
-      if (predicate(data)) resolve(undefined); //
-    });
-  });
-}
-
-async function exec(cmd) {
-  return execSync(cmd, {
-    env: process.env,
-    stdio: "inherit"
-  });
-}

apps/desktop/src/api/os-integration.ts

@@ -25,10 +25,10 @@ import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
 import { getTheme, setTheme, Theme } from "../utils/theme";
 import { mkdirSync, writeFileSync } from "fs";
-import { dirname, join } from "path";
-import { platform } from "os";
+import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
+import { AssetManager } from "../utils/asset-manager";
 
 const t = initTRPC.create();
 
@@ -122,10 +122,10 @@ export const osIntegrationRouter = t.router({
     .query(({ input }) => {
       const notification = new Notification({
         ...input,
-        icon: join(
-          __dirname,
-          platform() === "win32" ? "app.ico" : "favicon-72x72.png"
-        )
+        icon: AssetManager.appIcon({
+          size: 64,
+          format: process.platform === "win32" ? "ico" : "png"
+        })
       });
       notification.show();
       if (input.urgency === "critical") {

apps/desktop/src/api/updater.ts

@@ -21,6 +21,8 @@ import { initTRPC } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
 import { CancellationToken, autoUpdater } from "electron-updater";
 import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
+import { z } from "zod";
+import { config } from "../utils/config";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -28,6 +30,7 @@ type Progress = { percent: number };
 const t = initTRPC.create();
 
 export const updaterRouter = t.router({
+  autoUpdates: t.procedure.query(() => config.automaticUpdates),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
     const cancellationToken = new CancellationToken();
@@ -37,6 +40,13 @@ export const updaterRouter = t.router({
     await autoUpdater.checkForUpdates();
   }),
 
+  toggleAutoUpdates: t.procedure
+    .input(z.boolean().optional())
+    .mutation(({ input }) => {
+      config.automaticUpdates =
+        input === undefined ? !config.automaticUpdates : input;
+    }),
+
   onChecking: createSubscription("checking-for-update"),
   onDownloaded: createSubscription<"update-downloaded", UpdateInfo>(
     "update-downloaded"

apps/desktop/src/main.ts

@@ -16,9 +16,8 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-/* global MAC_APP_STORE, RELEASE */
 
-import { app, BrowserWindow, nativeTheme, shell } from "electron";
+import { app, BrowserWindow, nativeTheme, session, shell } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
@@ -35,10 +34,6 @@ import { router, api } from "./api";
 import { config } from "./utils/config";
 import path from "path";
 
-if (!RELEASE) {
-  require("electron-reloader")(module);
-}
-
 if (process.platform == "win32" && process.env.PORTABLE_EXECUTABLE_DIR) {
   console.log("Portable app: true");
   const root = path.join(process.env.PORTABLE_EXECUTABLE_DIR, "Notesnook");
@@ -46,8 +41,8 @@ if (process.platform == "win32" && process.env.PORTABLE_EXECUTABLE_DIR) {
   app.setPath("documents", path.join(root, "Documents"));
   app.setPath("userData", path.join(root, "UserData"));
 }
-// only run a single instance
 
+// only run a single instance
 if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
   app.exit();
 }
@@ -56,22 +51,22 @@ if (process.platform === "win32") {
   app.setAppUserModelId(app.name);
 }
 
-async function createWindow() {
-  await AssetManager.loadIcons();
-  const cliOptions = await parseArguments();
+app.commandLine.appendSwitch("lang", "en-US");
 
-  const mainWindowState = new WindowState({});
+async function createWindow() {
+  const cliOptions = await parseArguments();
   setTheme(getTheme());
 
+  const mainWindowState = new WindowState({});
   const mainWindow = new BrowserWindow({
-    show: false,
+    show: !cliOptions.hidden,
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
     height: mainWindowState.height,
     darkTheme: getTheme() === "dark",
     backgroundColor: getBackgroundColor(),
-
+    opacity: 0,
     autoHideMenuBar: true,
     icon: AssetManager.appIcon({
       size: 512,
@@ -79,44 +74,44 @@ async function createWindow() {
     }),
     webPreferences: {
       zoomFactor: config.zoomFactor,
-      devTools: true, // isDev,
-      nodeIntegration: true, //true,
+      nodeIntegration: true,
       contextIsolation: false,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }
   });
 
-  mainWindow.on("show", async () => {
-    if (config.privacyMode) {
-      await api.integration.setPrivacyMode(config.privacyMode);
-    }
-  });
-
-  mainWindowState.manage(mainWindow);
   globalThis.window = mainWindow;
-  setupMenu();
-  setupJumplist();
-  setupDesktopIntegration(cliOptions.hidden);
+  mainWindowState.manage(mainWindow);
+
+  if (cliOptions.hidden && !config.desktopSettings.minimizeToSystemTray)
+    mainWindow.minimize();
+
+  await mainWindow.webContents.loadURL(`${createURL(cliOptions, "/")}`);
+  mainWindow.setOpacity(1);
+
+  if (config.privacyMode) {
+    await api.integration.setPrivacyMode(config.privacyMode);
+  }
+
+  await AssetManager.loadIcons();
+  setupDesktopIntegration();
   createIPCHandler({ router, windows: [mainWindow] });
 
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );
 
-  if (isDevelopment())
-    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
-
-  try {
-    await mainWindow.loadURL(`${createURL(cliOptions)}`);
-  } catch (e) {
-    if (e instanceof Error) console.error(e);
-  }
-
-  mainWindow.on("closed", () => {
+  mainWindow.once("closed", () => {
     globalThis.window = null;
   });
 
+  setupMenu();
+  setupJumplist();
+
+  if (isDevelopment())
+    mainWindow.webContents.openDevTools({ mode: "right", activate: true });
+
   mainWindow.webContents.setWindowOpenHandler((details) => {
     shell.openExternal(details.url);
     return { action: "deny" };
@@ -128,8 +123,7 @@ async function createWindow() {
   });
 }
 
-app.commandLine.appendSwitch("lang", "en-US");
-app.on("ready", async () => {
+app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
   if (!isDevelopment()) registerProtocol();
@@ -137,7 +131,7 @@ app.on("ready", async () => {
   configureAutoUpdater();
 });
 
-app.on("window-all-closed", () => {
+app.once("window-all-closed", () => {
   if (process.platform !== "darwin" || MAC_APP_STORE) {
     app.quit();
   }
@@ -149,9 +143,10 @@ app.on("activate", () => {
   }
 });
 
-function createURL(options: CLIOptions) {
+function createURL(options: CLIOptions, path = "/") {
   const url = new URL(isDevelopment() ? "http://localhost:3000" : PROTOCOL_URL);
 
+  url.pathname = path;
   if (options.note === true) url.hash = "/notes/create/1";
   else if (options.notebook === true) url.hash = "/notebooks/create";
   else if (options.reminder === true) url.hash = "/reminders/create";
@@ -163,7 +158,7 @@ function createURL(options: CLIOptions) {
   return url;
 }
 
-function setupDesktopIntegration(hidden: boolean) {
+function setupDesktopIntegration() {
   const desktopIntegration = config.desktopSettings;
 
   if (
@@ -173,24 +168,13 @@ function setupDesktopIntegration(hidden: boolean) {
     setupTray();
   }
 
-  globalThis.window?.on("ready-to-show", () => {
-    if (!hidden) {
-      globalThis.window?.show();
-    }
-
-    if (hidden && !desktopIntegration.minimizeToSystemTray) {
-      globalThis.window?.show();
-      globalThis.window?.minimize();
-    }
-  });
-
   // when close to system tray is enabled, it becomes nigh impossible
   // to "quit" the app. This is necessary in order to fix that.
   if (desktopIntegration.closeToSystemTray) {
     app.on("before-quit", () => app.exit(0));
   }
 
-  globalThis.window?.on("close", (e) => {
+  globalThis.window?.once("close", (e) => {
     if (config.desktopSettings.closeToSystemTray) {
       e.preventDefault();
       if (process.platform == "darwin") {

apps/desktop/src/utils/asset-manager.ts

@@ -21,8 +21,8 @@ import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./index";
 import { parse, ParsedImage } from "icojs";
-import { readFileSync } from "fs";
 import { getSystemTheme } from "./theme";
+import { readFile } from "fs/promises";
 
 type Formats = "ico" | "png" | "icns";
 type IconOptions<TFormat extends Formats> = {
@@ -70,7 +70,7 @@ export class AssetManager {
           "icons",
           `${icon}${prefix}.ico`
         );
-        const icoBuffer = readFileSync(icoPath);
+        const icoBuffer = await readFile(icoPath);
         const images = await parse(icoBuffer, "image/png");
         ALL_ICONS.push({ id: icon, images, prefix });
       }
@@ -80,10 +80,10 @@ export class AssetManager {
   static appIcon(options: IconOptions<Formats>) {
     const { size = 32, format = "png" } = options;
 
-    if (format === "ico") return path.join("assets", "icons", "app.ico");
-    if (format === "icns") return path.join("assets", "icons", "app.icns");
+    if (format === "ico") return "assets\\icons\\app.ico";
+    if (format === "icns") return "assets/icons/app.icns";
 
-    return path.join("assets", "icons", `${size}x${size}.png`);
+    return `assets/icons/${size}x${size}.png`;
   }
 
   static icon<TFormat extends Formats>(

apps/desktop/src/utils/autoupdater.ts

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { autoUpdater } from "electron-updater";
+import { config } from "./config";
 
 async function configureAutoUpdater() {
   autoUpdater.setFeedURL({
@@ -26,7 +27,7 @@ async function configureAutoUpdater() {
     useMultipleRangeRequest: false
   });
 
-  autoUpdater.autoDownload = false;
+  autoUpdater.autoDownload = config.automaticUpdates;
   autoUpdater.allowDowngrade = false;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;

apps/desktop/src/utils/config.ts

@@ -40,7 +40,8 @@ export const config = {
   privacyMode: false,
   isSpellCheckerEnabled: false,
   zoomFactor: 0,
-  theme: nativeTheme.themeSource
+  theme: nativeTheme.themeSource,
+  automaticUpdates: true
 };
 
 type ConfigKey = keyof typeof config;

apps/desktop/src/utils/index.ts

@@ -18,14 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { app } from "electron";
-import { join } from "path";
 import { existsSync } from "fs";
 
-export const APP_ICON_PATH = join(
-  __dirname,
-  process.platform === "win32" ? "app.ico" : "favicon-72x72.png"
-);
-
 export function isDevelopment() {
   return process.env.ELECTRON_IS_DEV
     ? Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1

apps/desktop/src/utils/menu.ts

@@ -101,6 +101,26 @@ function setupMenu() {
         })
       );
 
+    if (params.linkURL?.length) {
+      menu.append(
+        new MenuItem({
+          label: "Copy link",
+          click() {
+            clipboard.writeText(params.linkURL);
+          }
+        })
+      );
+
+      menu.append(
+        new MenuItem({
+          label: "Copy link text",
+          click() {
+            clipboard.writeText(params.linkText);
+          }
+        })
+      );
+    }
+
     if (params.selectionText.length) {
       menu.append(
         new MenuItem({

apps/desktop/src/utils/protocol.ts

@@ -19,8 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { protocol, ProtocolRequest } from "electron";
 import { isDevelopment } from "./index";
-import { createReadStream, statSync } from "fs";
-import { extname, join, normalize } from "path";
+import { createReadStream } from "fs";
+import { extname, normalize } from "path";
 import { URL } from "url";
 import fetch, { Response } from "node-fetch";
 
@@ -46,14 +46,13 @@ function registerProtocol() {
         console.info("Intercepting request:", request.url);
 
         const loadIndex = !extname(url.pathname);
-        const absoluteFilePath = normalize(
+        const filePath = normalize(
           `${__dirname}${
             loadIndex
               ? `${BASE_PATH}/index.html`
               : `${BASE_PATH}/${url.pathname}`
           }`
         );
-        const filePath = getPath(absoluteFilePath);
         if (!filePath) {
           console.error("Local asset file not found at", filePath);
           callback({ error: FILE_NOT_FOUND });
@@ -159,18 +158,3 @@ async function getBody(request: ProtocolRequest) {
   return blob;
 }
 
-function getPath(filePath: string): string | undefined {
-  try {
-    const result = statSync(filePath);
-
-    if (result.isFile()) {
-      return filePath;
-    }
-
-    if (result.isDirectory()) {
-      return getPath(join(filePath, "index.html"));
-    }
-  } catch (_) {
-    // ignore
-  }
-}

apps/mobile/app/app.js

@@ -16,6 +16,10 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import {
+  THEME_COMPATIBILITY_VERSION,
+  useThemeEngineStore
+} from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import "react-native-gesture-handler";
@@ -29,7 +33,9 @@ import { ApplicationHolder } from "./navigation";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
+import { useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
+import { themeTrpcClient } from "./screens/settings/theme-selector";
 
 SettingsService.init();
 SettingsService.checkOrientation();
@@ -87,4 +93,43 @@ const App = () => {
   );
 };
 
-export default withErrorBoundry(App, "App");
+export const withTheme = (Element) => {
+  return function AppWithThemeProvider() {
+    const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
+      state.colorScheme,
+      state.darkTheme,
+      state.lightTheme
+    ]);
+
+    useEffect(() => {
+      const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+      if (!currentTheme) return;
+      themeTrpcClient.updateTheme
+        .query({
+          version: currentTheme.version,
+          compatibilityVersion: THEME_COMPATIBILITY_VERSION,
+          id: currentTheme.id
+        })
+        .then((theme) => {
+          if (theme) {
+            console.log(theme.version, "theme updated");
+            theme.colorScheme === "dark"
+              ? useThemeStore.getState().setDarkTheme(theme)
+              : useThemeStore.getState().setLightTheme(theme);
+          }
+        })
+        .catch(console.log);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      useThemeEngineStore
+        .getState()
+        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+    }, [colorScheme, darkTheme, lightTheme]);
+
+    return <Element />;
+  };
+};
+
+export default withTheme(withErrorBoundry(App, "App"));

apps/mobile/app/common/database/index.js

@@ -30,38 +30,41 @@ const LoggerStorage = new MMKVLoader()
   .withInstanceID("notesnook_logs")
   .initialize();
 
-database.setup(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
-    compress: Gzip.deflate,
-    decompress: Gzip.inflate
-  }
-);
+  
+  database.host(
+    __DEV__
+      ? {
+          API_HOST: "https://api.notesnook.com",
+          AUTH_HOST: "https://auth.streetwriters.co",
+          SSE_HOST: "https://events.streetwriters.co",
+          SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+          ISSUES_HOST: "https://issues.streetwriters.co"
+          // API_HOST: "http://192.168.8.101:5264",
+          // AUTH_HOST: "http://192.168.8.101:8264",
+          // SSE_HOST: "http://192.168.8.101:7264",
+          // SUBSCRIPTIONS_HOST: "http://192.168.8.101:9264",
+          // ISSUES_HOST: "http://192.168.8.101:2624"
+        }
+      : {
+          API_HOST: "https://api.notesnook.com",
+          AUTH_HOST: "https://auth.streetwriters.co",
+          SSE_HOST: "https://events.streetwriters.co",
+          SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+          ISSUES_HOST: "https://issues.streetwriters.co"
+        }
+  );
+
+  database.setup(
+    Storage,
+    Platform.OS === "ios" ? EventSource : AndroidEventSource,
+    filesystem,
+    {
+      compress: Gzip.deflate,
+      decompress: Gzip.inflate
+    }
+  );
+
 
-database.host(
-  __DEV__
-    ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.8.101:5264",
-        // AUTH_HOST: "http://192.168.8.101:8264",
-        // SSE_HOST: "http://192.168.8.101:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.8.101:9264",
-        // ISSUES_HOST: "http://192.168.8.101:2624"
-      }
-    : {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-      }
-);
 
 initalize(new KV(LoggerStorage), true);
 

apps/mobile/app/common/filesystem/upload.js

@@ -51,6 +51,7 @@ export async function uploadFile(filename, data, cancelToken) {
       uploadFilePath = appGroupPath;
     }
     DatabaseLogger.info(`Starting upload: ${filename}`);
+
     let request = RNFetchBlob.config({
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
@@ -66,8 +67,11 @@ export async function uploadFile(filename, data, cancelToken) {
         useAttachmentStore
           .getState()
           .setProgress(sent, total, filename, 0, "upload");
-        DatabaseLogger.info(`uploading file: ${sent}/${total}`);
+        DatabaseLogger.info(
+          `File upload progress: ${filename}, ${sent}/${total}`
+        );
       });
+
     cancelToken.cancel = request.cancel;
     let response = await request;
 
@@ -76,6 +80,9 @@ export async function uploadFile(filename, data, cancelToken) {
     let result = status >= 200 && status < 300 && text.length === 0;
     useAttachmentStore.getState().remove(filename);
     if (result) {
+      DatabaseLogger.info(
+        `File upload status: ${filename}, ${status}, ${text}`
+      );
       let attachment = db.attachments.attachment(filename);
       if (!attachment) return result;
       if (
@@ -84,8 +91,15 @@ export async function uploadFile(filename, data, cancelToken) {
       ) {
         RNFetchBlob.fs.unlink(`${cacheDir}/${filename}`).catch(console.log);
       }
+    } else {
+      const fileInfo = await RNFetchBlob.fs.stat(uploadFilePath);
+      throw new Error(
+        `${status}, ${text}, name: ${fileInfo.filename}, length: ${
+          fileInfo.size
+        }, info: ${JSON.stringify(response.info())}`
+      );
     }
-    DatabaseLogger.info(`File uploaded: ${filename}`);
+
     return result;
   } catch (e) {
     useAttachmentStore.getState().remove(filename);

apps/mobile/app/components/announcements/announcement.js

@@ -21,18 +21,18 @@ import React from "react";
 import { FlatList, View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { allowedOnPlatform, renderItem } from "./functions";
 
 export const Announcement = ({ color }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   return !announcement || selectionMode ? null : (
     <View
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         width: "100%",
         paddingHorizontal: 12,
         paddingTop: 12,
@@ -44,28 +44,26 @@ export const Announcement = ({ color }) => {
           width: "100%",
           borderRadius: 10,
           overflow: "hidden",
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           paddingBottom: 12
         }}
       >
-        <View>
-          <FlatList
-            style={{
-              width: "100%",
-              marginTop: 12
-            }}
-            data={announcement?.body.filter((item) =>
-              allowedOnPlatform(item.platforms)
-            )}
-            renderItem={({ item, index }) =>
+        <View
+          style={{
+            width: "100%",
+            marginTop: 12
+          }}
+        >
+          {announcement?.body
+            .filter((item) => allowedOnPlatform(item.platforms))
+            .map((item, index) =>
               renderItem({
                 item: item,
                 index: index,
                 color: colors[color],
                 inline: true
               })
-            }
-          />
+            )}
         </View>
       </View>
     </View>

apps/mobile/app/components/announcements/cta.js

@@ -22,7 +22,7 @@ import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -33,7 +33,7 @@ import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   let buttons =
     actions.filter((item) => allowedOnPlatform(item.platforms)) || [];
 
@@ -92,8 +92,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   height: 30,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0,
-                  marginTop: -6
+                  paddingHorizontal: 0
                 }}
               />
             ))}
@@ -111,7 +110,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   alignSelf: "flex-start",
                   paddingHorizontal: 0,
-                  marginTop: -6,
                   marginLeft: 12
                 }}
                 textStyle={{
@@ -129,9 +127,9 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 title={item.title}
                 fontSize={SIZE.md}
                 buttonType={{
-                  color: color ? color : colors.accent,
-                  text: colors.light,
-                  selected: color ? color : colors.accent,
+                  color: color ? color : colors.primary.accent,
+                  text: colors.static.white,
+                  selected: color ? color : colors.primary.accent,
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}

apps/mobile/app/components/announcements/index.js

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import {
   eCloseAnnouncementDialog,
   eOpenAnnouncementDialog
@@ -35,7 +35,7 @@ import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
 
 export const AnnouncementDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [info, setInfo] = useState(null);
   const remove = useMessageStore((state) => state.remove);
@@ -73,7 +73,7 @@ export const AnnouncementDialog = () => {
       <View
         style={{
           width: DDS.isTab ? 600 : "100%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",

apps/mobile/app/components/app-lock-overlay/index.js

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { useAppState } from "../../hooks/use-app-state";
 import BiometricService from "../../services/biometrics";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
 import { SIZE } from "../../utils/size";
@@ -36,7 +36,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 const AppLockedOverlay = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const user = useUserStore((state) => state.user);
   const appLocked = useUserStore((state) => state.appLocked);
   const lockApp = useUserStore((state) => state.lockApp);
@@ -134,10 +134,10 @@ const AppLockedOverlay = () => {
               marginTop: user ? 0 : 50
             }}
             onPress={onUnlockAppRequested}
-            color={colors.border}
+            color={colors.primary.border}
           />
           <Heading
-            color={colors.heading}
+            color={colors.primary.heading}
             style={{
               alignSelf: "center",
               textAlign: "center"

apps/mobile/app/components/attachments/actions.js

@@ -33,7 +33,7 @@ import {
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -49,7 +49,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { formatBytes } from "@notesnook/common";
 
 const Actions = ({ attachment, setAttachments, fwdRef }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const contextId = attachment.metadata.hash;
   const [filename, setFilename] = useState(attachment.metadata.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
@@ -194,7 +194,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.nav,
+          borderBottomColor: colors.secondary.background,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -219,7 +219,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
             style={{
               marginRight: 10
             }}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {attachment.metadata.type}
           </Paragraph>
@@ -228,7 +228,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               marginRight: 10
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {formatBytes(attachment.length)}
           </Paragraph>
@@ -239,7 +239,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
                 marginRight: 10
               }}
               size={SIZE.xs}
-              color={colors.icon}
+              color={colors.secondary.paragraph}
             >
               {attachment.noteIds.length} note
               {attachment.noteIds.length > 1 ? "s" : ""}
@@ -255,7 +255,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
               });
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             {attachment.metadata.hash}
           </Paragraph>
@@ -268,7 +268,7 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.nav,
+            borderBottomColor: colors.secondary.background,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -322,10 +322,10 @@ const Actions = ({ attachment, setAttachments, fwdRef }) => {
           key={item.name}
           buttonType={{
             text: item.on
-              ? colors.accent
+              ? colors.primary.accent
               : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.errorText
-              : colors.pri
+              ? colors.error.paragraph
+              : colors.primary.paragraph
           }}
           onPress={item.onPress}
           title={item.name}

apps/mobile/app/components/attachments/attachment-item.js

@@ -17,15 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { formatBytes } from "@notesnook/common";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { formatBytes } from "@notesnook/common";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
-import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
@@ -41,17 +40,17 @@ export const AttachmentItem = ({
   encryption,
   setAttachments,
   pressable = true,
-  hideWhenNotDownloading
+  hideWhenNotDownloading,
+  context
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
     encryption
   );
-
   const onPress = () => {
     if (!pressable) return;
-    Actions.present(attachment, setAttachments, attachment.metadata.hash);
+    Actions.present(attachment, setAttachments, context);
   };
 
   return hideWhenNotDownloading &&
@@ -66,11 +65,10 @@ export const AttachmentItem = ({
         padding: 12,
         paddingVertical: 6,
         borderRadius: 5,
-        backgroundColor: colors.nav
+        backgroundColor: colors.secondary.background
       }}
       type="grayBg"
     >
-      <SheetProvider context={attachment.metadata.hash} />
       <View
         style={{
           flexShrink: 1,
@@ -85,12 +83,12 @@ export const AttachmentItem = ({
             marginLeft: -5
           }}
         >
-          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
+          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
 
           <Paragraph
             adjustsFontSizeToFit
             size={6}
-            color={colors.light}
+            color={colors.static.white}
             style={{
               position: "absolute"
             }}
@@ -113,13 +111,13 @@ export const AttachmentItem = ({
             }}
             numberOfLines={1}
             lineBreakMode="middle"
-            color={colors.pri}
+            color={colors.primary.paragraph}
           >
             {attachment.metadata.filename}
           </Paragraph>
 
           {!hideWhenNotDownloading ? (
-            <Paragraph color={colors.icon} size={SIZE.xs}>
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
               {formatBytes(attachment.length)}{" "}
               {currentProgress?.type
                 ? "(" + currentProgress.type + "ing - tap to cancel)"
@@ -151,7 +149,7 @@ export const AttachmentItem = ({
             textStyle={{
               fontSize: 10
             }}
-            color={colors.accent}
+            color={colors.primary.accent}
             formatText={(progress) => (progress * 100).toFixed(0)}
             borderWidth={0}
             thickness={2}
@@ -163,7 +161,7 @@ export const AttachmentItem = ({
             <IconButton
               onPress={onPress}
               name="alert-circle-outline"
-              color={colors.errorText}
+              color={colors.error.paragraph}
             />
           ) : null}
         </>

apps/mobile/app/components/attachments/download-attachments.js

@@ -26,12 +26,12 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { FlatList } from "react-native-actions-sheet";
 import { AttachmentItem } from "./attachment-item";
 
 const DownloadAttachments = ({ close, attachments, isNote, update }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [downloading, setDownloading] = useState(false);
   const [progress, setProgress] = useState({
     value: 0,
@@ -158,8 +158,8 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             animated={true}
             useNativeDriver
             progress={progress.value ? progress.value / attachments.length : 0}
-            unfilledColor={colors.nav}
-            color={colors.accent}
+            unfilledColor={colors.secondary.background}
+            color={colors.primary.accent}
             borderWidth={0}
           />
         </View>
@@ -170,7 +170,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
           maxHeight: 300,
           width: "100%",
           minHeight: 60,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5,
           marginVertical: 12
         }}
@@ -184,7 +184,9 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
               height: 60
             }}
           >
-            <Paragraph color={colors.icon}>No downloads in progress.</Paragraph>
+            <Paragraph color={colors.secondary.paragraph}>
+              No downloads in progress.
+            </Paragraph>
           </View>
         }
         keyExtractor={(item) => item.id}

apps/mobile/app/components/attachments/index.js

@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
@@ -45,7 +45,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 
 export const AttachmentDialog = ({ note }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const { height } = useSettingStore((state) => state.dimensions);
   const [attachments, setAttachments] = useState(
     note
@@ -82,7 +82,11 @@ export const AttachmentDialog = ({ note }) => {
   };
 
   const renderItem = ({ item }) => (
-    <AttachmentItem setAttachments={setAttachments} attachment={item} />
+    <AttachmentItem
+      setAttachments={setAttachments}
+      attachment={item}
+      context="attachments-list"
+    />
   );
 
   const onCheck = async () => {
@@ -197,7 +201,7 @@ export const AttachmentDialog = ({ note }) => {
                 width: 40,
                 marginRight: 10
               }}
-              color={colors.pri}
+              color={colors.primary.paragraph}
               size={SIZE.lg}
               onPress={onCheck}
             />
@@ -209,7 +213,7 @@ export const AttachmentDialog = ({ note }) => {
               height: 40,
               width: 40
             }}
-            color={colors.pri}
+            color={colors.primary.paragraph}
             onPress={() => {
               DownloadAttachments.present(
                 "attachments-list",
@@ -260,7 +264,7 @@ export const AttachmentDialog = ({ note }) => {
                 borderBottomColor:
                   currentFilter !== item.filterBy
                     ? "transparent"
-                    : colors.accent
+                    : colors.primary.accent
               }}
               onPress={() => {
                 setCurrentFilter(item.filterBy);
@@ -281,7 +285,7 @@ export const AttachmentDialog = ({ note }) => {
               alignItems: "center"
             }}
           >
-            <Icon name="attachment" size={60} color={colors.icon} />
+            <Icon name="attachment" size={60} color={colors.secondary.icon} />
             <Paragraph>
               {note ? "No attachments on this note" : "No attachments"}
             </Paragraph>
@@ -300,14 +304,18 @@ export const AttachmentDialog = ({ note }) => {
       />
 
       <Paragraph
-        color={colors.icon}
+        color={colors.secondary.paragraph}
         size={SIZE.xs}
         style={{
           textAlign: "center",
           marginTop: 10
         }}
       >
-        <Icon name="shield-key-outline" size={SIZE.xs} color={colors.icon} />
+        <Icon
+          name="shield-key-outline"
+          size={SIZE.xs}
+          color={colors.primary.icon}
+        />
         {"  "}All attachments are end-to-end encrypted.
       </Paragraph>
     </View>

apps/mobile/app/components/auth/auth-modal.js

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
@@ -44,7 +44,7 @@ export const AuthMode = {
 };
 
 const AuthModal = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
@@ -82,7 +82,7 @@ const AuthModal = () => {
       onClose={close}
       useSafeArea={false}
       bounce={false}
-      background={colors.bg}
+      background={colors.primary.background}
       transparent={false}
       animated={false}
     >
@@ -90,11 +90,7 @@ const AuthModal = () => {
         style={{
           width: "100%"
         }}
-        contentContainerStyle={{
-          height: Platform.OS === "android" ? "100%" : "100%"
-        }}
         keyboardShouldPersistTaps="handled"
-        bounces={false}
       >
         {currentAuthMode !== AuthMode.login ? (
           <Signup
@@ -116,7 +112,7 @@ const AuthModal = () => {
           paddingTop: Platform.OS === "android" ? 0 : insets.top,
           top: 0,
           zIndex: 999,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           width: "100%"
         }}
       >
@@ -139,7 +135,7 @@ const AuthModal = () => {
               onPress={() => {
                 hideAuth();
               }}
-              color={colors.pri}
+              color={colors.primary.paragraph}
             />
           )}
 

apps/mobile/app/components/auth/forgot-password.js

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -34,7 +34,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 export const ForgotPassword = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors("sheet");
   const email = useRef();
   const emailInputRef = useRef();
   const [error, setError] = useState(false);
@@ -117,7 +117,7 @@ export const ForgotPassword = () => {
                 width: null,
                 height: null
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
               name="email"
               size={50}
             />
@@ -134,7 +134,7 @@ export const ForgotPassword = () => {
           <View
             style={{
               borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.bg,
+              backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
               padding: 12

apps/mobile/app/components/auth/index.js

@@ -65,7 +65,7 @@ const Auth = ({ navigation, route }) => {
           onPress={() => {
             hideAuth();
           }}
-          color={colors.pri}
+          color={colors.primary.paragraph}
           customStyle={{
             position: 'absolute',
             zIndex: 999,

apps/mobile/app/components/auth/login.js

@@ -18,11 +18,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useEffect, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -46,7 +46,7 @@ const LoginSteps = {
 };
 
 export const Login = ({ changeMode }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [focused, setFocused] = useState(false);
   const {
     step,
@@ -71,7 +71,7 @@ export const Login = ({ changeMode }) => {
     }, 5000);
   });
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -92,29 +92,27 @@ export const Login = ({ changeMode }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%",
-          minHeight: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 0.8,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderBottomWidth: 1,
             marginBottom: 12,
-            borderBottomColor: colors.border,
+            borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -126,7 +124,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.accent,
+                backgroundColor: colors.primary.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -136,7 +134,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 2
               }}
             />
@@ -162,10 +160,9 @@ export const Login = ({ changeMode }) => {
               : focused
               ? "100%"
               : "99.9%",
-            backgroundColor: colors.bg,
+            backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: 20,
-            flexGrow: 1
+            paddingHorizontal: 20
           }}
         >
           <Input
@@ -284,11 +281,14 @@ export const Login = ({ changeMode }) => {
                   paddingVertical: 12
                 }}
               >
-                <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+                <Paragraph
+                  size={SIZE.xs + 1}
+                  color={colors.secondary.paragraph}
+                >
                   Don't have an account?{" "}
                   <Paragraph
                     size={SIZE.xs + 1}
-                    style={{ color: colors.accent }}
+                    style={{ color: colors.primary.accent }}
                   >
                     Sign up
                   </Paragraph>

apps/mobile/app/components/auth/session-expired.js

@@ -28,7 +28,7 @@ import {
 } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -56,7 +56,7 @@ function getObfuscatedEmail(email) {
 }
 
 export const SessionExpired = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
   const { step, password, email, passwordInputRef, loading, login } = useLogin(
@@ -138,7 +138,7 @@ export const SessionExpired = () => {
             padding: 12,
             justifyContent: "center",
             flex: 1,
-            backgroundColor: colors.bg
+            backgroundColor: colors.primary.background
           }}
         >
           <View
@@ -157,10 +157,10 @@ export const SessionExpired = () => {
                 height: 60
               }}
               name="alert"
-              color={colors.errorText}
+              color={colors.error.icon}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.heading}>
+            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
               Session expired
             </Heading>
             <Paragraph

apps/mobile/app/components/auth/signup.js

@@ -18,13 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useRef, useState } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
@@ -37,7 +37,7 @@ import { hideAuth } from "./common";
 import { useSettingStore } from "../../stores/use-setting-store";
 
 export const Signup = ({ changeMode, trial }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const email = useRef();
   const emailInputRef = useRef();
   const passwordInputRef = useRef();
@@ -49,7 +49,7 @@ export const Signup = ({ changeMode, trial }) => {
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const { width, height } = useWindowDimensions();
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastEvent.show({
@@ -98,28 +98,27 @@ export const Signup = ({ changeMode, trial }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          alignSelf: "center",
-          height: "100%"
+          alignSelf: "center"
         }}
       >
         <View
           style={{
-            flexGrow: 1,
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             marginBottom: 20,
             borderBottomWidth: 1,
-            borderBottomColor: colors.border,
+            borderBottomColor: colors.primary.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
-            width: deviceMode === "mobile" ? null : "50%"
+            width: deviceMode === "mobile" ? null : "50%",
+            minHeight: height * 0.4
           }}
         >
           <View
@@ -131,7 +130,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.accent,
+                backgroundColor: colors.primary.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -141,7 +140,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 2
               }}
             />
@@ -162,9 +161,8 @@ export const Signup = ({ changeMode, trial }) => {
           style={{
             width: DDS.isTab ? "50%" : "100%",
             paddingHorizontal: 20,
-            backgroundColor: colors.bg,
-            alignSelf: "center",
-            flexGrow: 0.5
+            backgroundColor: colors.primary.background,
+            alignSelf: "center"
           }}
         >
           <Input
@@ -232,7 +230,7 @@ export const Signup = ({ changeMode, trial }) => {
               marginBottom: 25
             }}
             size={SIZE.xs}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
           >
             By signing up, you agree to our{" "}
             <Paragraph
@@ -243,7 +241,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
             >
               Terms of Service{" "}
             </Paragraph>
@@ -256,7 +254,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.accent}
+              color={colors.primary.accent}
             >
               Privacy Policy.
             </Paragraph>{" "}
@@ -289,9 +287,12 @@ export const Signup = ({ changeMode, trial }) => {
               paddingVertical: 12
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.icon}>
+            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
               Already have an account?{" "}
-              <Paragraph size={SIZE.xs + 1} style={{ color: colors.accent }}>
+              <Paragraph
+                size={SIZE.xs + 1}
+                style={{ color: colors.primary.accent }}
+              >
                 Login
               </Paragraph>
             </Paragraph>

apps/mobile/app/components/auth/two-factor.js

@@ -26,7 +26,7 @@ import {
   presentSheet,
   ToastEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
@@ -39,7 +39,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const code = useRef();
   const [currentMethod, setCurrentMethod] = useState({
     method: mfaInfo?.primaryMethod,
@@ -157,7 +157,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           }}
           size={50}
           name="key"
-          color={colors.accent}
+          color={colors.primary.accent}
         />
         <Heading
           style={{
@@ -281,7 +281,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     marginRight: 10
                   }}
                   size={15}
-                  color={colors.accent}
+                  color={colors.primary.accent}
                   name={item.icon}
                 />
                 <View

apps/mobile/app/components/container/container-header.js

@@ -20,16 +20,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 
 export const ContainerHeader = ({ children }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !selectionMode ? (
     <View
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         width: "100%",
         overflow: "hidden"
       }}

apps/mobile/app/components/container/floating-button.js

@@ -34,13 +34,15 @@ import { getElevationStyle } from "../../utils/elevation";
 import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
 import { PressableButton } from "../ui/pressable";
+import { useThemeColors } from "@notesnook/theme";
 
 export const FloatingButton = ({
   title,
   onPress,
-  color = "accent",
+  color,
   shouldShow = false
 }) => {
+  const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
@@ -113,8 +115,10 @@ export const FloatingButton = ({
       <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={color || "accent"}
-        accentText="light"
+        buttonType={{
+          color: colors.static[color],
+          text: colors.static.white
+        }}
         customStyle={{
           ...getElevationStyle(5),
           borderRadius: 100

apps/mobile/app/components/delay-layout/default-placeholder.tsx

@@ -20,21 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { COLORS_NOTE } from "../../utils/color-scheme";
-import { hexToRGBA } from "../../utils/color-scheme/utils";
+import { useThemeColors } from "@notesnook/theme";
+import { ColorValues } from "../../utils/colors";
+import { hexToRGBA } from "../../utils/colors";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const message = useMessageStore((state) => state.message);
   const annoucements = useMessageStore((state) => state.announcements);
   const hasAnnoucements = annoucements.length > 0;
   const shadeColor = color
     ? hexToRGBA(
-        COLORS_NOTE[color?.toLowerCase() as keyof typeof COLORS_NOTE],
+        ColorValues[color?.toLowerCase() as keyof typeof ColorValues],
         0.15
       )
-    : colors.shade;
+    : colors.primary.shade;
 
   return (
     <View
@@ -50,7 +50,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             height: 100,
             borderRadius: 10,
             marginBottom: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             padding: 12
           }}
         >
@@ -58,7 +58,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 150,
               height: 20,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -67,7 +67,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 250,
               height: 14,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 5
             }}
           />
@@ -110,7 +110,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 150,
                 height: 12,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 5,
                 marginBottom: 10
               }}
@@ -119,7 +119,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 250,
                 height: 16,
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 borderRadius: 5
               }}
             />
@@ -131,7 +131,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "100%",
           height: 30,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
           padding: 5,
@@ -158,7 +158,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 100,
               marginRight: 10
             }}
@@ -167,7 +167,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 60,
               height: 15,
-              backgroundColor: colors.transGray,
+              backgroundColor: colors.primary.hover,
               borderRadius: 3
             }}
           />
@@ -178,7 +178,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: 200,
           height: 16,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5
         }}
       />
@@ -186,7 +186,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "85%",
           height: 13,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           borderRadius: 5,
           marginTop: 10
         }}
@@ -202,7 +202,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 50,
             height: 10,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 5
           }}
         />
@@ -210,7 +210,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 60,
             height: 10,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 5,
             marginLeft: 10
           }}

apps/mobile/app/components/delay-layout/index.tsx

@@ -21,7 +21,7 @@ import React from "react";
 import { ViewProps } from "react-native";
 import Animated, { FadeOutUp } from "react-native-reanimated";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -42,7 +42,7 @@ export default function DelayLayout({
   animated = true,
   ...props
 }: IDelayLayoutProps) {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const loading = useDelayLayout(
     !props.delay || props.delay < 300 ? 300 : props.delay
   );
@@ -52,12 +52,12 @@ export default function DelayLayout({
     <Animated.View
       exiting={animated ? FadeOutUp : undefined}
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         flex: 1,
         paddingTop: 20
       }}
     >
-      <Placeholder color={props.color || colors.accent} />
+      <Placeholder color={props.color || colors.primary.accent} />
     </Animated.View>
   ) : (
     <>{props.children}</>

apps/mobile/app/components/delay-layout/settings-placeholder.tsx

@@ -19,10 +19,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 
 export const SettingsPlaceholder = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View>
@@ -30,7 +30,7 @@ export const SettingsPlaceholder = () => {
         style={{
           width: 100,
           height: 12,
-          backgroundColor: colors.shade,
+          backgroundColor: colors.primary.shade,
           borderRadius: 5,
           marginLeft: 12,
           marginBottom: 12
@@ -51,7 +51,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.transGray,
+            backgroundColor: colors.primary.hover,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -61,7 +61,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -70,7 +70,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5
             }}
           />
@@ -93,7 +93,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.shade,
+            backgroundColor: colors.primary.shade,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -103,7 +103,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -112,7 +112,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 5
             }}
           />
@@ -122,7 +122,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 20,
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             borderRadius: 100,
             marginLeft: 15,
             alignItems: "flex-end",
@@ -134,7 +134,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.shade,
+              backgroundColor: colors.primary.shade,
               borderRadius: 100,
               marginLeft: 15
             }}

apps/mobile/app/components/dialog-provider/index.js

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { useNoteStore } from "../../stores/use-notes-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
@@ -39,7 +39,7 @@ import RestoreDataSheet from "../sheets/restore-data";
 import PDFPreview from "../dialogs/pdf-preview";
 
 const DialogProvider = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const loading = useNoteStore((state) => state.loading);
 
   return (

apps/mobile/app/components/dialog/base-dialog.js

@@ -30,6 +30,7 @@ import {
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
+import { ScopedThemeProvider } from "@notesnook/theme";
 
 const BaseDialog = ({
   visible,
@@ -60,69 +61,71 @@ const BaseDialog = ({
   const Wrapper = useSafeArea ? SafeAreaView : View;
 
   return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animated
-      statusBarTranslucent={statusBarTranslucent}
-      supportedOrientations={[
-        "portrait",
-        "portrait-upside-down",
-        "landscape",
-        "landscape-left",
-        "landscape-right"
-      ]}
-      onShow={() => {
-        if (onShow) {
-          onShow();
-          useSettingStore.getState().setSheetKeyboardHandler(false);
-        }
-      }}
-      animationType={animation}
-      onRequestClose={() => {
-        if (!closeOnTouch) return null;
-        useSettingStore.getState().setSheetKeyboardHandler(true);
-        onRequestClose && onRequestClose();
-      }}
-    >
-      <Wrapper
-        style={{
-          backgroundColor: background
-            ? background
-            : transparent
-            ? "transparent"
-            : "rgba(0,0,0,0.3)"
+    <ScopedThemeProvider value="dialog">
+      <Modal
+        visible={visible}
+        transparent={true}
+        animated
+        statusBarTranslucent={statusBarTranslucent}
+        supportedOrientations={[
+          "portrait",
+          "portrait-upside-down",
+          "landscape",
+          "landscape-left",
+          "landscape-right"
+        ]}
+        onShow={() => {
+          if (onShow) {
+            onShow();
+            useSettingStore.getState().setSheetKeyboardHandler(false);
+          }
+        }}
+        animationType={animation}
+        onRequestClose={() => {
+          if (!closeOnTouch) return null;
+          useSettingStore.getState().setSheetKeyboardHandler(true);
+          onRequestClose && onRequestClose();
         }}
       >
-        <KeyboardAvoidingView
-          enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
-          behavior="padding"
+        <Wrapper
+          style={{
+            backgroundColor: background
+              ? background
+              : transparent
+              ? "transparent"
+              : "rgba(0,0,0,0.3)"
+          }}
         >
-          <BouncingView
-            duration={400}
-            animated={animated}
-            initialScale={bounce ? 0.9 : 1}
-            style={[
-              styles.backdrop,
-              {
-                justifyContent: centered
-                  ? "center"
-                  : bottom
-                  ? "flex-end"
-                  : "flex-start"
-              }
-            ]}
+          <KeyboardAvoidingView
+            enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
+            behavior="padding"
           >
-            <TouchableOpacity
-              onPress={closeOnTouch ? onRequestClose : null}
-              style={styles.overlayButton}
-            />
-            {premium}
-            {children}
-          </BouncingView>
-        </KeyboardAvoidingView>
-      </Wrapper>
-    </Modal>
+            <BouncingView
+              duration={400}
+              animated={animated}
+              initialScale={bounce ? 0.9 : 1}
+              style={[
+                styles.backdrop,
+                {
+                  justifyContent: centered
+                    ? "center"
+                    : bottom
+                    ? "flex-end"
+                    : "flex-start"
+                }
+              ]}
+            >
+              <TouchableOpacity
+                onPress={closeOnTouch ? onRequestClose : null}
+                style={styles.overlayButton}
+              />
+              {premium}
+              {children}
+            </BouncingView>
+          </KeyboardAvoidingView>
+        </Wrapper>
+      </Modal>
+    </ScopedThemeProvider>
   );
 };
 

apps/mobile/app/components/dialog/dialog-buttons.js

@@ -21,7 +21,7 @@ import React from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
@@ -35,14 +35,14 @@ const DialogButtons = ({
   doneText,
   positiveType
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
       style={[
         styles.container,
         {
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           height: 60,
           borderBottomRightRadius: 10,
           borderBottomLeftRadius: 10,
@@ -51,7 +51,7 @@ const DialogButtons = ({
       ]}
     >
       {loading ? (
-        <ActivityIndicator color={colors.accent} size={SIZE.lg} />
+        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
       ) : doneText ? (
         <View
           style={{
@@ -60,11 +60,11 @@ const DialogButtons = ({
           }}
         >
           <Icon
-            color={colors.accent}
+            color={colors.primary.accent}
             name="check-circle-outline"
             size={SIZE.md}
           />
-          <Paragraph color={colors.accent}>{" " + doneText}</Paragraph>
+          <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
       ) : (
         <View />

apps/mobile/app/components/dialog/dialog-container.js

@@ -20,11 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
 
 const DialogContainer = ({ width, height, ...restProps }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
@@ -34,7 +34,7 @@ const DialogContainer = ({ width, height, ...restProps }) => {
         width: width || DDS.isTab ? 500 : "85%",
         maxHeight: height || 450,
         borderRadius: 10,
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         paddingTop: 12
       }}
     />

apps/mobile/app/components/dialog/dialog-header.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButtonProps } from "../ui/pressable";
@@ -54,7 +54,7 @@ const DialogHeader = ({
   titlePart,
   style
 }: DialogHeaderProps) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <>
@@ -86,7 +86,7 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.accent }}>{titlePart}</Text>
+                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
               ) : null}
             </Heading>
 
@@ -114,7 +114,7 @@ const DialogHeader = ({
                 maxWidth: centered ? "90%" : "100%",
                 alignSelf: centered ? "center" : "flex-start"
               }}
-              color={paragraphColor || colors.icon}
+              color={paragraphColor || colors.secondary.paragraph}
             >
               {paragraph}
             </Paragraph>

apps/mobile/app/components/dialog/index.js

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
@@ -38,7 +38,7 @@ import { useCallback } from "react";
 import { Button } from "../ui/button";
 
 export const Dialog = ({ context = "global" }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [inputValue, setInputValue] = useState(null);
   const inputRef = useRef();
@@ -51,7 +51,7 @@ export const Dialog = ({ context = "global" }) => {
     onClose: () => {},
     positiveType: "transparent",
     icon: null,
-    paragraphColor: colors.pri,
+    paragraphColor: colors.primary.paragraph,
     input: false,
     inputPlaceholder: "Enter some text",
     defaultValue: "",
@@ -115,7 +115,7 @@ export const Dialog = ({ context = "global" }) => {
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
     borderRadius: 5,
-    backgroundColor: colors.bg,
+    backgroundColor: colors.primary.background,
     paddingTop: 12
   };
 

apps/mobile/app/components/dialogs/jump-to-section/index.js

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseJumpToDialog,
@@ -41,10 +41,10 @@ import { useCallback } from "react";
 const offsets = [];
 let timeout = null;
 const JumpToSectionDialog = ({ scrollRef, data, type }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const notes = data;
   const [visible, setVisible] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
 
   const onPress = (item) => {
     let ind = notes.findIndex(
@@ -77,7 +77,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
     }
     timeout = setTimeout(() => {
       let index = offsets.findIndex((o, i) => o <= y && offsets[i + 1] > y);
-      setCurrentIndex(index);
+      setCurrentIndex(index || 0);
     }, 200);
   };
 
@@ -113,7 +113,6 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
         offsets.push(offset);
       });
   }, [notes]);
-
   return !visible ? null : (
     <BaseDialog
       onShow={() => {
@@ -126,7 +125,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
         style={{
           ...getElevationStyle(5),
           width: DDS.isTab ? 500 : "85%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           zIndex: 100,
           bottom: 20,
           maxHeight: "65%",
@@ -157,7 +156,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                   <PressableButton
                     key={item.title}
                     onPress={() => onPress(item, index)}
-                    type={currentIndex === index ? "accent" : "transparent"}
+                    type={currentIndex === index ? "selected" : "transparent"}
                     customStyle={{
                       minWidth: "20%",
                       width: null,
@@ -171,7 +170,9 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                     <Paragraph
                       size={SIZE.sm}
                       color={
-                        currentIndex === index ? colors.light : colors.accent
+                        currentIndex === index
+                          ? colors.selected.accent
+                          : colors.primary.accent
                       }
                       style={{
                         textAlign: "center"

apps/mobile/app/components/dialogs/loading/index.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import BaseDialog from "../../dialog/base-dialog";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import { useEffect } from "react";
@@ -30,7 +30,7 @@ import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
 
 export const LoadingDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -58,7 +58,7 @@ export const LoadingDialog = () => {
         style={{
           width: "100%",
           height: "100%",
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           justifyContent: "center",
           alignItems: "center"
         }}
@@ -77,8 +77,8 @@ export const LoadingDialog = () => {
             useNativeDriver
             indeterminate
             indeterminateAnimationDuration={2000}
-            unfilledColor={colors.nav}
-            color={colors.accent}
+            unfilledColor={colors.secondary.background}
+            color={colors.primary.accent}
             borderWidth={0}
           />
         </View>

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -33,7 +33,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
@@ -64,7 +64,7 @@ const usePDFSnapshot = (attachment) => {
 };
 
 const PDFPreview = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [pdfSource, setPDFSource] = useState();
   const [loading, setLoading] = useState(false);
@@ -172,7 +172,7 @@ const PDFPreview = () => {
             >
               <ProgressBarComponent
                 indeterminate={!progress}
-                color={colors.accent}
+                color={colors.primary.accent}
                 borderColor="transparent"
                 progress={parseInt(progress?.value || "100") / 100}
               />
@@ -180,7 +180,7 @@ const PDFPreview = () => {
                 style={{
                   marginTop: 10
                 }}
-                color={colors.light}
+                color={colors.static.white}
               >
                 Loading {`${progress?.percent ? `(${progress?.percent})` : ""}`}
                 ... Please wait
@@ -205,7 +205,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.light}
+                    color={colors.static.white}
                     name="arrow-left"
                     onPress={close}
                     customStyle={{
@@ -226,7 +226,7 @@ const PDFPreview = () => {
                     ref={inputRef}
                     defaultValue={currentPage + ""}
                     style={{
-                      color: colors.pri,
+                      color: colors.primary.paragraph,
                       padding: 0,
                       paddingTop: 0,
                       paddingBottom: 0,
@@ -234,7 +234,7 @@ const PDFPreview = () => {
                       marginBottom: 0,
                       paddingVertical: 0,
                       height: 25,
-                      backgroundColor: colors.nav,
+                      backgroundColor: colors.secondary.background,
                       width: 40,
                       textAlign: "center",
                       marginRight: 4,
@@ -249,7 +249,7 @@ const PDFPreview = () => {
                     }}
                     blurOnSubmit
                   />
-                  <Paragraph color={colors.light}>/{numPages}</Paragraph>
+                  <Paragraph color={colors.static.white}>/{numPages}</Paragraph>
                 </View>
 
                 <View
@@ -258,7 +258,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.light}
+                    color={colors.static.white}
                     name="download"
                     onPress={() => {
                       downloadAttachment(attachment.metadata.hash, false);

apps/mobile/app/components/dialogs/result/index.js

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
@@ -36,7 +36,7 @@ import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
 
 const ResultDialog = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [dialogData, setDialogData] = useState({
     title: "Thank you for signing up!",
@@ -72,7 +72,7 @@ const ResultDialog = () => {
           width: DDS.isTab ? 350 : "85%",
           maxHeight: 500,
           borderRadius: 10,
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           paddingTop: 20,
           justifyContent: "center",
           alignItems: "center"
@@ -94,7 +94,7 @@ const ResultDialog = () => {
         </Heading>
 
         <Paragraph
-          color={colors.icon}
+          color={colors.secondary.paragraph}
           size={SIZE.md}
           style={{
             alignSelf: "center",
@@ -121,7 +121,7 @@ const ResultDialog = () => {
         <Seperator />
         <View
           style={{
-            backgroundColor: colors.nav,
+            backgroundColor: colors.secondary.background,
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,

apps/mobile/app/components/dialogs/result/pro-features.js

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { eSendEvent } from "../../../services/event-manager";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import {
   eCloseSheet,
   eCloseResultDialog,
@@ -31,7 +31,7 @@ import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
 export const ProFeatures = ({ count = 6 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <>
@@ -73,7 +73,7 @@ export const ProFeatures = ({ count = 6 }) => {
               justifyContent: "flex-start"
             }}
           >
-            <Icon size={SIZE.lg} color={colors.accent} name="check" />
+            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -89,7 +89,7 @@ export const ProFeatures = ({ count = 6 }) => {
         size={SIZE.xs}
         style={{
           textDecorationLine: "underline",
-          color: colors.icon
+          color: colors.secondary.paragraph
         }}
       >
         See all features included in Notesnook Pro

apps/mobile/app/components/dialogs/vault/index.js

@@ -682,7 +682,7 @@ export class VaultDialog extends Component {
             ...getElevationStyle(5),
             width: DDS.isTab ? 350 : "85%",
             borderRadius: 10,
-            backgroundColor: colors.bg,
+            backgroundColor: colors.primary.background,
             paddingTop: 12
           }}
         >
@@ -867,7 +867,12 @@ export class VaultDialog extends Component {
                 icon="fingerprint"
                 width="100%"
                 title="Biometric unlocking"
-                type={this.state.biometricUnlock ? "transparent" : "gray"}
+                iconColor={
+                  this.state.biometricUnlock
+                    ? colors.selected.icon
+                    : colors.primary.icon
+                }
+                type={this.state.biometricUnlock ? "transparent" : "selected"}
               />
             ) : null}
           </View>

apps/mobile/app/components/header/index.js

@@ -27,14 +27,14 @@ import {
 } from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
 
 const _Header = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const [hide, setHide] = useState(true);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
@@ -69,10 +69,12 @@ const _Header = () => {
           styles.container,
           {
             marginTop: Platform.OS === "android" ? insets.top : null,
-            backgroundColor: colors.bg,
+            backgroundColor: colors.primary.background,
             overflow: "hidden",
             borderBottomWidth: 1,
-            borderBottomColor: hide ? "transparent" : colors.nav,
+            borderBottomColor: hide
+              ? "transparent"
+              : colors.secondary.background,
             justifyContent: "space-between"
           }
         ]}

apps/mobile/app/components/header/left-menus.js

@@ -23,12 +23,12 @@ import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { tabBarRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
 export const LeftMenus = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const canGoBack = useNavigationStore((state) => state.canGoBack);
   const isTablet = deviceMode === "tablet";
@@ -61,17 +61,17 @@ export const LeftMenus = () => {
         width: 40,
         borderRadius: 100,
         marginLeft: -5,
-        marginRight: DDS.isLargeTablet() ? 10 : 25
+        marginRight: DDS.isLargeTablet() ? 10 : 7
       }}
       left={40}
       top={40}
-      right={DDS.isLargeTablet() ? 10 : 25}
+      right={DDS.isLargeTablet() ? 10 : 10}
       onPress={onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
-      color={colors.pri}
+      color={colors.primary.paragraph}
       iconStyle={{
         marginLeft: canGoBack ? -5 : 0
       }}

apps/mobile/app/components/header/right-menus.js

@@ -25,14 +25,15 @@ import Navigation from "../../services/navigation";
 import SearchService from "../../services/search";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 
 export const RightMenus = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
+  const { contextMenuColors } = useThemeColors("contextMenu");
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const rightButtons = useNavigationStore((state) => state.headerRightButtons);
   const currentScreen = useNavigationStore((state) => state.currentScreen.name);
@@ -51,7 +52,7 @@ export const RightMenus = () => {
           }}
           testID="icon-search"
           name="magnify"
-          color={colors.pri}
+          color={colors.primary.paragraph}
           customStyle={styles.rightBtn}
         />
       ) : null}
@@ -76,7 +77,7 @@ export const RightMenus = () => {
             borderRadius: 5,
             paddingHorizontal: 0,
             borderWidth: 1,
-            borderColor: colors.accent
+            borderColor: colors.primary.accent
           }}
         />
       ) : null}
@@ -87,7 +88,7 @@ export const RightMenus = () => {
           animationDuration={200}
           style={{
             borderRadius: 5,
-            backgroundColor: colors.bg
+            backgroundColor: contextMenuColors.primary.background
           }}
           onRequestClose={() => {
             menuRef.current?.hide();
@@ -98,7 +99,7 @@ export const RightMenus = () => {
                 menuRef.current?.show();
               }}
               name="dots-vertical"
-              color={colors.pri}
+              color={colors.primary.paragraph}
               customStyle={styles.rightBtn}
             />
           }
@@ -112,7 +113,7 @@ export const RightMenus = () => {
               }}
               type="gray"
               buttonType={{
-                text: colors.pri
+                text: colors.primary.paragraph
               }}
               key={item.title}
               title={item.title}

apps/mobile/app/components/header/title.js

@@ -26,7 +26,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eScrollEvent } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
@@ -36,7 +36,7 @@ import Tag from "../ui/tag";
 const titleState = {};
 
 export const Title = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const currentScreen = useNavigationStore((state) => state.currentScreen);
   const isNotebook = currentScreen.name === "Notebook";
   const isTopic = currentScreen?.name === "TopicNotes";
@@ -110,15 +110,15 @@ export const Title = () => {
         <Heading
           onPress={navigateToNotebook}
           numberOfLines={1}
-          size={SIZE.xl}
+          size={SIZE.lg}
           style={{
             flexWrap: "wrap",
             marginTop: Platform.OS === "ios" ? -1 : 0
           }}
-          color={currentScreen.color || colors.heading}
+          color={currentScreen.color || colors.primary.heading}
         >
           {isTag ? (
-            <Heading size={SIZE.xl} color={colors.accent}>
+            <Heading size={SIZE.xl} color={colors.primary.accent}>
               #
             </Heading>
           ) : null}

apps/mobile/app/components/image-preview/index.js

@@ -17,6 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import Sodium from "@ammarahmed/react-native-sodium";
+import dataurl from "@notesnook/core/utils/dataurl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { Platform, View } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
@@ -26,15 +29,13 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
 import BaseDialog from "../dialog/base-dialog";
 import { IconButton } from "../ui/icon-button";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-import Sodium from "@ammarahmed/react-native-sodium";
-import dataurl from "@notesnook/core/utils/dataurl";
 
 const ImagePreview = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors("dialog");
+
   const [visible, setVisible] = useState(false);
   const [image, setImage] = useState("");
   const [loading, setLoading] = useState(false);
@@ -97,7 +98,7 @@ const ImagePreview = () => {
             >
               <ProgressBarComponent
                 indeterminate
-                color={colors.accent}
+                color={colors.primary.accent}
                 borderColor="transparent"
               />
             </View>

apps/mobile/app/components/intro/index.js

@@ -17,32 +17,34 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import {
   Linking,
+  ScrollView,
   TouchableOpacity,
   useWindowDimensions,
   View
 } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { getElevationStyle } from "../../utils/elevation";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { getElevationStyle } from "../../utils/elevation";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 const Intro = ({ navigation }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const isTelemetryEnabled = useSettingStore(
     (state) => state.settings.telemetry
   );
-  const { width } = useWindowDimensions();
+  const { width, height } = useWindowDimensions();
   const deviceMode = useSettingStore((state) => state.deviceMode);
-
+  const insets = useGlobalSafeAreaInsets();
   const renderItem = React.useCallback(
     ({ item }) => (
       <View
@@ -62,7 +64,7 @@ const Intro = ({ navigation }) => {
             style={{
               width: 100,
               height: 5,
-              backgroundColor: colors.accent,
+              backgroundColor: colors.primary.accent,
               borderRadius: 2,
               marginRight: 7
             }}
@@ -72,7 +74,7 @@ const Intro = ({ navigation }) => {
             style={{
               width: 20,
               height: 5,
-              backgroundColor: colors.nav,
+              backgroundColor: colors.secondary.background,
               borderRadius: 2
             }}
           />
@@ -80,7 +82,6 @@ const Intro = ({ navigation }) => {
         <View
           style={{
             marginTop: 10,
-            marginBottom: 20,
             maxWidth: "90%",
             width: "100%"
           }}
@@ -116,30 +117,31 @@ const Intro = ({ navigation }) => {
         </View>
       </View>
     ),
-    [colors.accent, colors.nav, deviceMode, width]
+    [colors.primary.accent, colors.secondary.background, deviceMode, width]
   );
 
   return (
-    <View
+    <ScrollView
       testID="notesnook.splashscreen"
       style={{
-        width: "100%",
-        height: "100%"
+        width: "100%"
       }}
     >
       <View
         style={{
-          flex: 0.65,
           width: deviceMode !== "mobile" ? width / 2 : "100%",
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           marginBottom: 20,
           borderBottomWidth: 1,
-          borderBottomColor: colors.border,
+          borderBottomColor: colors.primary.border,
           alignSelf: deviceMode !== "mobile" ? "center" : undefined,
           borderWidth: deviceMode !== "mobile" ? 1 : null,
-          borderColor: deviceMode !== "mobile" ? colors.border : null,
+          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
           borderRadius: deviceMode !== "mobile" ? 20 : null,
-          marginTop: deviceMode !== "mobile" ? 50 : null
+          marginTop: deviceMode !== "mobile" ? 50 : null,
+          paddingTop: insets.top + 10,
+          paddingBottom: insets.top + 10,
+          minHeight: height * 0.7
         }}
       >
         <SwiperFlatList
@@ -169,14 +171,14 @@ const Intro = ({ navigation }) => {
               user: "@andrewsayer on Twitter"
             }
           ]}
-          paginationActiveColor={colors.accent}
+          paginationActiveColor={colors.primary.accent}
           paginationStyleItem={{
             width: 10,
             height: 5,
             marginRight: 4,
             marginLeft: 4
           }}
-          paginationDefaultColor={colors.border}
+          paginationDefaultColor={colors.primary.border}
           renderItem={renderItem}
         />
       </View>
@@ -184,8 +186,8 @@ const Intro = ({ navigation }) => {
       <View
         style={{
           width: "100%",
-          flex: 0.3,
-          justifyContent: "center"
+          justifyContent: "center",
+          minHeight: height * 0.3
         }}
       >
         <Button
@@ -227,7 +229,9 @@ const Intro = ({ navigation }) => {
             name={
               isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
             }
-            color={isTelemetryEnabled ? colors.accent : colors.icon}
+            color={
+              isTelemetryEnabled ? colors.primary.accent : colors.primary.icon
+            }
           />
 
           <Paragraph
@@ -242,7 +246,7 @@ const Intro = ({ navigation }) => {
           </Paragraph>
         </TouchableOpacity>
       </View>
-    </View>
+    </ScrollView>
   );
 };
 

apps/mobile/app/components/list-items/headers/header.js

@@ -19,9 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { COLORS_NOTE } from "../../../utils/color-scheme";
+import { ColorValues } from "../../../utils/colors";
 import { Announcement } from "../../announcements/announcement";
 import { Card } from "../../list/card";
 import Paragraph from "../../ui/typography/paragraph";
@@ -37,7 +37,7 @@ export const Header = React.memo(
     noAnnouncement,
     warning
   }) => {
-    const colors = useThemeStore((state) => state.colors);
+    const { colors } = useThemeColors();
     const announcements = useMessageStore((state) => state.announcements);
     const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -47,7 +47,7 @@ export const Header = React.memo(
           <View
             style={{
               padding: 12,
-              backgroundColor: colors.errorBg,
+              backgroundColor: colors.error.background,
               width: "95%",
               alignSelf: "center",
               borderRadius: 5,
@@ -55,13 +55,18 @@ export const Header = React.memo(
               alignItems: "center"
             }}
           >
-            <Icon name="sync-alert" size={SIZE.md} color={colors.red} f />
-            <Paragraph style={{ marginLeft: 5 }} color={colors.red}>
+            <Icon
+              name="sync-alert"
+              size={SIZE.md}
+              color={colors.error.icon}
+              f
+            />
+            <Paragraph style={{ marginLeft: 5 }} color={colors.error.icon}>
               {warning.title}
             </Paragraph>
           </View>
         ) : announcements.length !== 0 && !noAnnouncement ? (
-          <Announcement color={color || colors.accent} />
+          <Announcement color={color || colors.primary.accent} />
         ) : type === "search" ? null : !shouldShow ? (
           <View
             style={{
@@ -74,7 +79,9 @@ export const Header = React.memo(
           >
             {messageCard ? (
               <Card
-                color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
+                color={
+                  ColorValues[color?.toLowerCase()] || colors.primary.accent
+                }
               />
             ) : null}
           </View>

apps/mobile/app/components/list-items/headers/notebook-header.js

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useRef, useState } from "react";
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useMenuStore } from "../../../stores/use-menu-store";
 import { ToastEvent } from "../../../services/event-manager";
 import { getTotalNotes } from "@notesnook/common";
@@ -31,7 +31,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 
 export const NotebookHeader = ({ notebook, onEditNotebook }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(
     db.shortcuts.exists(notebook.id)
   );
@@ -75,7 +75,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
         paddingTop: 25
       }}
     >
-      <Paragraph color={colors.icon} size={SIZE.xs}>
+      <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
         {new Date(notebook.dateEdited).toLocaleString()}
       </Paragraph>
       <View
@@ -110,7 +110,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
               height: 40
             }}
             type={isPinnedToMenu ? "grayBg" : "grayBg"}
-            color={isPinnedToMenu ? colors.accent : colors.icon}
+            color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
             size={SIZE.lg}
           />
           <IconButton
@@ -119,7 +119,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             tooltipText="Edit this notebook"
             name="pencil"
             type="grayBg"
-            color={colors.icon}
+            color={colors.primary.icon}
             customStyle={{
               width: 40,
               height: 40
@@ -129,7 +129,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
       </View>
 
       {notebook.description ? (
-        <Paragraph size={SIZE.md} color={colors.pri}>
+        <Paragraph size={SIZE.md} color={colors.primary.paragraph}>
           {notebook.description}
         </Paragraph>
       ) : null}
@@ -141,7 +141,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
           fontFamily: null
         }}
         size={SIZE.xs}
-        color={colors.icon}
+        color={colors.secondary.paragraph}
       >
         {notebook.topics.length === 1
           ? "1 topic"

apps/mobile/app/components/list-items/headers/section-header.js

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef, useState } from "react";
 import { TouchableOpacity, useWindowDimensions, View } from "react-native";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useSettingStore } from "../../../stores/use-setting-store";
 import {
   eSendEvent,
@@ -29,7 +29,7 @@ import {
 } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { GROUP } from "../../../utils/constants";
-import { COLORS_NOTE } from "../../../utils/color-scheme";
+import { ColorValues } from "../../../utils/colors";
 import { db } from "../../../common/database";
 import { eOpenJumpToDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
@@ -41,7 +41,7 @@ import { useCallback } from "react";
 
 export const SectionHeader = React.memo(
   function SectionHeader({ item, index, type, color, screen }) {
-    const colors = useThemeStore((state) => state.colors);
+    const { colors } = useThemeColors();
     const { fontScale } = useWindowDimensions();
     const [groupOptions, setGroupOptions] = useState(
       db.settings?.getGroupOptions(type)
@@ -85,7 +85,7 @@ export const SectionHeader = React.memo(
           justifyContent: "space-between",
           paddingHorizontal: 12,
           height: 35 * fontScale,
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           alignSelf: "center",
           borderRadius: 5,
           marginVertical: 5
@@ -104,7 +104,7 @@ export const SectionHeader = React.memo(
           }}
         >
           <Heading
-            color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
+            color={ColorValues[color?.toLowerCase()] || colors.primary.accent}
             size={SIZE.sm}
             style={{
               minWidth: 60,
@@ -168,7 +168,7 @@ export const SectionHeader = React.memo(
                     : "Switch to compact mode"
                 }
                 fwdRef={compactModeRef}
-                color={colors.icon}
+                color={colors.secondary.icon}
                 name={listMode == "compact" ? "view-list" : "view-list-outline"}
                 onPress={() => {
                   let settings = {};

apps/mobile/app/components/list-items/note/index.js

@@ -29,9 +29,8 @@ import { TaggedNotes } from "../../../screens/notes/tagged";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { COLORS_NOTE } from "../../../utils/color-scheme";
+import { useThemeColors } from "@notesnook/theme";
+import { ColorValues } from "../../../utils/colors";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
@@ -40,6 +39,7 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 
 function navigateToTag(item) {
   const tag = db.tags.tag(item.id);
@@ -98,18 +98,15 @@ const NoteItem = ({
   dateBy = "dateCreated",
   noOpen = false
 }) => {
-  const colors = useThemeStore((state) => state.colors);
-  const notesListMode = useSettingStore(
-    (state) => state.settings.notesListMode
-  );
-  const compactMode = notesListMode === "compact";
+  const { colors } = useThemeColors();
+  const compactMode = useIsCompactModeEnabled(item);
   const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
   const _update = useRelationStore((state) => state.updater);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const notebooks = React.useMemo(() => getNotebook(item), [item, _update]);
   const reminders = db.relations.from(item, "reminder");
   const reminder = getUpcomingReminder(reminders);
-  const noteColor = COLORS_NOTE[item.color?.toLowerCase()];
+  const noteColor = ColorValues[item.color?.toLowerCase()];
   const tags = getTags(item);
   return (
     <>
@@ -151,7 +148,7 @@ const NoteItem = ({
                   borderRadius: 5,
                   marginRight: 5,
                   borderWidth: 0.5,
-                  borderColor: colors.icon,
+                  borderColor: colors.primary.border,
                   paddingHorizontal: 6,
                   marginBottom: 5
                 }}
@@ -181,7 +178,9 @@ const NoteItem = ({
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
-            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            color={
+              ColorValues[item.color?.toLowerCase()] || colors.primary.heading
+            }
             style={{
               flexWrap: "wrap"
             }}
@@ -192,7 +191,9 @@ const NoteItem = ({
         ) : (
           <Heading
             numberOfLines={1}
-            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+            color={
+              ColorValues[item.color?.toLowerCase()] || colors.primary.heading
+            }
             style={{
               flexWrap: "wrap"
             }}
@@ -235,13 +236,13 @@ const NoteItem = ({
                       marginRight: 6
                     }}
                     size={SIZE.sm}
-                    color={colors.red}
+                    color={colors.error.accent}
                   />
                 ) : null}
                 <TimeSince
                   style={{
                     fontSize: SIZE.xs,
-                    color: colors.icon,
+                    color: colors.secondary.paragraph,
                     marginRight: 6
                   }}
                   time={item[dateBy]}
@@ -261,9 +262,12 @@ const NoteItem = ({
                     <Icon
                       name="attachment"
                       size={SIZE.md}
-                      color={colors.icon}
+                      color={colors.primary.icon}
                     />
-                    <Paragraph color={colors.icon} size={SIZE.xs}>
+                    <Paragraph
+                      color={colors.secondary.paragraph}
+                      size={SIZE.xs}
+                    >
                       {attachmentCount}
                     </Paragraph>
                   </View>
@@ -278,7 +282,8 @@ const NoteItem = ({
                       marginRight: 6
                     }}
                     color={
-                      COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
+                      ColorValues[item.color?.toLowerCase()] ||
+                      colors.primary.accent
                     }
                   />
                 ) : null}
@@ -291,7 +296,7 @@ const NoteItem = ({
                     style={{
                       marginRight: 6
                     }}
-                    color={colors.icon}
+                    color={colors.primary.icon}
                   />
                 ) : null}
 
@@ -336,7 +341,7 @@ const NoteItem = ({
             ) : (
               <>
                 <Paragraph
-                  color={colors.icon}
+                  color={colors.secondary.paragraph}
                   size={SIZE.xs}
                   style={{
                     marginRight: 6
@@ -349,7 +354,7 @@ const NoteItem = ({
                 </Paragraph>
 
                 <Paragraph
-                  color={colors.accent}
+                  color={colors.primary.accent}
                   size={SIZE.xs}
                   style={{
                     marginRight: 6
@@ -377,7 +382,7 @@ const NoteItem = ({
                   marginRight: 6
                 }}
                 size={SIZE.sm}
-                color={colors.red}
+                color={colors.error.accent}
               />
             ) : null}
 
@@ -389,7 +394,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                color={colors.icon}
+                color={colors.secondary.background}
               />
             ) : null}
 
@@ -408,7 +413,7 @@ const NoteItem = ({
             <TimeSince
               style={{
                 fontSize: SIZE.xs,
-                color: colors.icon,
+                color: colors.secondary.paragraph,
                 marginRight: 6
               }}
               time={item[dateBy]}
@@ -419,7 +424,7 @@ const NoteItem = ({
 
         <IconButton
           testID={notesnook.listitem.menu}
-          color={colors.pri}
+          color={colors.primary.paragraph}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => !noOpen && showActionSheet(item, isTrash)}

apps/mobile/app/components/list-items/notebook/index.js

@@ -23,8 +23,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
@@ -32,6 +31,7 @@ import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 
 const showActionSheet = (item) => {
   Properties.present(item);
@@ -49,11 +49,8 @@ export const NotebookItem = ({
   dateBy,
   totalNotes
 }) => {
-  const colors = useThemeStore((state) => state.colors);
-  const notebooksListMode = useSettingStore(
-    (state) => state.settings.notebooksListMode
-  );
-  const compactMode = notebooksListMode === "compact";
+  const { colors } = useThemeColors();
+  const compactMode = useIsCompactModeEnabled(item);
   const topics = item.topics?.slice(0, 3) || [];
 
   return (
@@ -112,8 +109,6 @@ export const NotebookItem = ({
                 key={topic.id}
                 height={null}
                 textStyle={{
-                  fontWeight: "normal",
-                  fontFamily: null,
                   marginRight: 0
                 }}
                 type="grayBg"
@@ -125,7 +120,7 @@ export const NotebookItem = ({
                   maxWidth: 120,
                   borderWidth: 0.5,
                   paddingVertical: 2.5,
-                  borderColor: colors.icon,
+                  borderColor: colors.primary.border,
                   paddingHorizontal: 6,
                   marginVertical: 5,
                   marginRight: 5
@@ -149,7 +144,7 @@ export const NotebookItem = ({
             {isTrash ? (
               <>
                 <Paragraph
-                  color={colors.icon}
+                  color={colors.secondary.paragraph}
                   size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
@@ -160,7 +155,7 @@ export const NotebookItem = ({
                     new Date(item.dateDeleted).toISOString().slice(0, 10)}
                 </Paragraph>
                 <Paragraph
-                  color={colors.accent}
+                  color={colors.primary.accent}
                   size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
@@ -172,7 +167,7 @@ export const NotebookItem = ({
               </>
             ) : (
               <Paragraph
-                color={colors.icon}
+                color={colors.secondary.paragraph}
                 size={SIZE.xs}
                 style={{
                   marginRight: 6
@@ -182,7 +177,7 @@ export const NotebookItem = ({
               </Paragraph>
             )}
             <Paragraph
-              color={colors.icon}
+              color={colors.secondary.paragraph}
               size={SIZE.xs}
               style={{
                 marginRight: 6
@@ -203,7 +198,7 @@ export const NotebookItem = ({
                   marginRight: 10,
                   marginTop: 2
                 }}
-                color={colors.accent}
+                color={colors.primary.accent}
               />
             ) : null}
           </View>
@@ -218,7 +213,7 @@ export const NotebookItem = ({
         {compactMode ? (
           <>
             <Paragraph
-              color={colors.icon}
+              color={colors.primary.icon}
               size={SIZE.xs}
               style={{
                 marginRight: 6
@@ -234,7 +229,7 @@ export const NotebookItem = ({
         ) : null}
 
         <IconButton
-          color={colors.heading}
+          color={colors.primary.heading}
           name="dots-horizontal"
           testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -20,7 +20,7 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import type { Reminder } from "../../../services/notifications";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
@@ -41,7 +41,7 @@ const ReminderItem = React.memo(
     index: number;
     isSheet: boolean;
   }) => {
-    const colors = useThemeStore((state) => state.colors);
+    const { colors } = useThemeColors();
     const openReminder = () => {
       ReminderSheet.present(item, undefined, isSheet);
     };
@@ -90,7 +90,7 @@ const ReminderItem = React.memo(
             {item.disabled ? (
               <View
                 style={{
-                  backgroundColor: colors.nav,
+                  backgroundColor: colors.secondary.background,
                   borderRadius: 5,
                   flexDirection: "row",
                   paddingHorizontal: 6,
@@ -105,11 +105,11 @@ const ReminderItem = React.memo(
                 <Icon
                   name="bell-off-outline"
                   size={SIZE.md}
-                  color={colors.errorText}
+                  color={colors.error.icon}
                 />
                 <Paragraph
                   size={SIZE.xs}
-                  color={colors.icon}
+                  color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
                   Disabled
@@ -119,7 +119,7 @@ const ReminderItem = React.memo(
             {item.mode === "repeat" && item.recurringMode ? (
               <View
                 style={{
-                  backgroundColor: colors.nav,
+                  backgroundColor: colors.secondary.background,
                   borderRadius: 5,
                   flexDirection: "row",
                   paddingHorizontal: 6,
@@ -131,10 +131,10 @@ const ReminderItem = React.memo(
                   height: 30
                 }}
               >
-                <Icon name="reload" size={SIZE.md} color={colors.accent} />
+                <Icon name="reload" size={SIZE.md} color={colors.primary.accent} />
                 <Paragraph
                   size={SIZE.xs}
-                  color={colors.icon}
+                  color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
                   {item.recurringMode.slice(0, 1).toUpperCase() +
@@ -160,7 +160,7 @@ const ReminderItem = React.memo(
         </View>
         <IconButton
           testID={notesnook.listitem.menu}
-          color={colors.pri}
+          color={colors.primary.paragraph}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => Properties.present(item, [], isSheet)}

apps/mobile/app/components/list-items/selection-wrapper/back-fill.js

@@ -17,37 +17,36 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
+import useIsSelected from "../../../hooks/use-selected";
 import { useEditorStore } from "../../../stores/use-editor-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
-import { hexToRGBA } from "../../../utils/color-scheme/utils";
 
 export const Filler = ({ item }) => {
-  const colors = useThemeStore((state) => state.colors);
-
+  const { colors } = useThemeColors();
   const currentEditingNote = useEditorStore(
     (state) => state.currentEditingNote
   );
 
-  const color = "gray";
+  const [selected] = useIsSelected(item);
 
-  return currentEditingNote === item.id ? (
+  return currentEditingNote === item.id || selected ? (
     <View
       style={{
         position: "absolute",
         width: "110%",
         height: "150%",
-        backgroundColor:
-          currentEditingNote === item.id
-            ? hexToRGBA(colors[color], 0.12)
-            : null,
+        backgroundColor: colors.selected.background,
         borderLeftWidth: 5,
         borderLeftColor:
           currentEditingNote === item.id
-            ? colors[item.color || "accent"]
+            ? item.color
+              ? colors.static[item.color]
+              : colors.selected.accent
             : "transparent"
       }}
-    ></View>
+      collapsable={false}
+    />
   ) : null;
 };

apps/mobile/app/components/list-items/selection-wrapper/index.js

@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useRef } from "react";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
 import { PressableButton } from "../../ui/pressable";
 import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
@@ -29,51 +29,33 @@ const SelectionWrapper = ({
   children,
   item,
   background,
-  onLongPress,
   onPress,
   testID,
   isSheet
 }) => {
   const itemId = useRef(item.id);
-  const colors = useThemeStore((state) => state.colors);
-  const notebooksListMode = useSettingStore(
-    (state) => state.settings.notebooksListMode
-  );
-  const notesListMode = useSettingStore(
-    (state) => state.settings.notesListMode
-  );
-  const listMode =
-    item.type === "notebook" || item.itemType === "notebook"
-      ? notebooksListMode
-      : notesListMode;
-  const compactMode =
-    (item.type === "notebook" ||
-      item.itemType === "notebook" ||
-      item.itemType === "note" ||
-      item.type === "note") &&
-    listMode === "compact";
+  const { colors, isDark } = useThemeColors();
+  const compactMode = useIsCompactModeEnabled(item);
+
   if (item.id !== itemId.current) {
     itemId.current = item.id;
   }
 
-  const _onLongPress = () => {
+  const onLongPress = () => {
     if (!useSelectionStore.getState().selectionMode) {
       useSelectionStore.getState().setSelectionMode(true);
     }
     useSelectionStore.getState().setSelectedItem(item);
   };
 
-  const _onPress = async () => {
-    await onPress();
-  };
   return (
     <PressableButton
-      customColor={isSheet ? colors.transGray : "transparent"}
+      customColor={isSheet ? colors.primary.hover : "transparent"}
       testID={testID}
-      onLongPress={_onLongPress}
-      onPress={_onPress}
-      customSelectedColor={colors.transGray}
-      customAlpha={!colors.night ? -0.02 : 0.02}
+      onLongPress={onLongPress}
+      onPress={onPress}
+      customSelectedColor={colors.primary.hover}
+      customAlpha={!isDark ? -0.02 : 0.02}
       customOpacity={1}
       customStyle={{
         flexDirection: "row",

apps/mobile/app/components/list-items/selection-wrapper/selection.js

@@ -17,51 +17,21 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import React, { useEffect, useState } from "react";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
-import { useSettingStore } from "../../../stores/use-setting-store";
 
 export const SelectionIcon = ({ item }) => {
-  const colors = useThemeStore((state) => state.colors);
-
+  const { colors } = useThemeColors();
   const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const selectedItemsList = useSelectionStore(
-    (state) => state.selectedItemsList
-  );
-  const [selected, setSelected] = useState(false);
-  const notebooksListMode = useSettingStore(
-    (state) => state.settings.notebooksListMode
-  );
-  const notesListMode = useSettingStore(
-    (state) => state.settings.notesListMode
-  );
-  const listMode = item.type === "notebook" ? notebooksListMode : notesListMode;
+  const [selected] = useIsSelected(item);
 
-  const compactMode =
-    (item.type === "notebook" || item.type === "note") &&
-    listMode === "compact";
-
-  useEffect(() => {
-    if (selectionMode) {
-      let exists = selectedItemsList.filter(
-        (o) => o.dateCreated === item.dateCreated
-      );
-
-      if (exists[0]) {
-        if (!selected) {
-          setSelected(true);
-        }
-      } else {
-        if (selected) {
-          setSelected(false);
-        }
-      }
-    }
-  }, [selectedItemsList, item.id, selectionMode, item.dateCreated, selected]);
+  const compactMode = useIsCompactModeEnabled(item);
 
   return selectionMode ? (
     <View
@@ -73,14 +43,14 @@ export const SelectionIcon = ({ item }) => {
         marginRight: 10,
         borderWidth: 1,
         borderRadius: 100,
-        borderColor: colors.border
+        borderColor: colors.primary.border
       }}
       pointerEvents="none"
     >
       {selected ? (
         <Icon
           size={compactMode ? SIZE.xl - 2 : SIZE.xl}
-          color={selected ? colors.accent : colors.icon}
+          color={selected ? colors.selected.accent : colors.primary.icon}
           name={"check"}
         />
       ) : null}

apps/mobile/app/components/list-items/tag/index.js

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useThemeStore } from "../../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
@@ -31,7 +31,7 @@ import Paragraph from "../../ui/typography/paragraph";
 
 const TagItem = React.memo(
   ({ item, index }) => {
-    const colors = useThemeStore((state) => state.colors);
+    const { colors, isDark } = useThemeColors();
     const onPress = () => {
       TaggedNotes.navigate(item, true);
     };
@@ -39,9 +39,9 @@ const TagItem = React.memo(
     return (
       <PressableButton
         onPress={onPress}
-        selectedColor={colors.nav}
+        selectedColor={colors.secondary.background}
         testID={notesnook.ids.tag.get(index)}
-        alpha={!colors.night ? -0.02 : 0.02}
+        alpha={!isDark ? -0.02 : 0.02}
         opacity={1}
         customStyle={{
           paddingHorizontal: 12,
@@ -61,7 +61,7 @@ const TagItem = React.memo(
             <Heading
               size={SIZE.md}
               style={{
-                color: colors.accent
+                color: colors.primary.accent
               }}
             >
               #
@@ -69,7 +69,7 @@ const TagItem = React.memo(
             {item.alias}
           </Heading>
           <Paragraph
-            color={colors.icon}
+            color={colors.secondary.paragraph}
             size={SIZE.xs}
             style={{
               marginTop: 5
@@ -84,7 +84,7 @@ const TagItem = React.memo(
         </View>
 
         <IconButton
-          color={colors.heading}
+          color={colors.primary.heading}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => {

apps/mobile/app/components/list/card.js

@@ -21,15 +21,15 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { hexToRGBA } from "../../utils/color-scheme/utils";
+import { useThemeColors } from "@notesnook/theme";
+import { hexToRGBA } from "../../utils/colors";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
 export const Card = ({ color, warning }) => {
-  const colors = useThemeStore((state) => state.colors);
-  color = color ? color : colors.accent;
+  const { colors } = useThemeColors();
+  color = color ? color : colors.primary.accent;
   const messageBoardState = useMessageStore((state) => state.message);
   const announcement = useMessageStore((state) => state.announcement);
 
@@ -62,7 +62,7 @@ export const Card = ({ color, warning }) => {
               width: 40,
               backgroundColor:
                 messageBoardState.type === "error"
-                  ? hexToRGBA(colors.red, 0.15)
+                  ? hexToRGBA(colors.static.red, 0.15)
                   : hexToRGBA(color, 0.15),
               height: 40,
               borderRadius: 100,
@@ -73,7 +73,7 @@ export const Card = ({ color, warning }) => {
             <Icon
               size={SIZE.lg}
               color={
-                messageBoardState.type === "error" ? colors.errorText : color
+                messageBoardState.type === "error" ? colors.error.icon : color
               }
               name={messageBoardState.icon}
             />
@@ -86,7 +86,7 @@ export const Card = ({ color, warning }) => {
               marginRight: 10
             }}
           >
-            <Paragraph color={colors.icon} size={SIZE.xs}>
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
               {messageBoardState.message}
             </Paragraph>
             <Paragraph
@@ -94,7 +94,7 @@ export const Card = ({ color, warning }) => {
                 flexWrap: "wrap",
                 flexShrink: 1
               }}
-              color={colors.heading}
+              color={colors.primary.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
@@ -111,7 +111,9 @@ export const Card = ({ color, warning }) => {
         >
           <Icon
             name="chevron-right"
-            color={messageBoardState.type === "error" ? colors.red : color}
+            color={
+              messageBoardState.type === "error" ? colors.error.icon : color
+            }
             size={SIZE.lg}
           />
         </View>

apps/mobile/app/components/list/empty.js

@@ -23,8 +23,8 @@ import { notesnook } from "../../../e2e/test.ids";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useTip } from "../../services/tip-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { COLORS_NOTE } from "../../utils/color-scheme";
+import { useThemeColors } from "@notesnook/theme";
+import { ColorValues } from "../../utils/colors";
 import { SIZE } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
@@ -40,7 +40,7 @@ export const Empty = React.memo(
     type,
     screen
   }) {
-    const colors = useThemeStore((state) => state.colors);
+    const { colors } = useThemeColors();
     const insets = useGlobalSafeAreaInsets();
     const { height } = useWindowDimensions();
     const introCompleted = useSettingStore(
@@ -69,7 +69,7 @@ export const Empty = React.memo(
           <>
             <Tip
               color={
-                COLORS_NOTE[headerProps.color?.toLowerCase()]
+                ColorValues[headerProps.color?.toLowerCase()]
                   ? headerProps.color
                   : "accent"
               }
@@ -87,12 +87,10 @@ export const Empty = React.memo(
                 iconPosition="right"
                 icon="arrow-right"
                 onPress={placeholderData.action}
-                accentColor={
-                  COLORS_NOTE[headerProps.color?.toLowerCase()]
-                    ? headerProps.color
-                    : "accent"
-                }
-                accentText="light"
+                buttonType={{
+                  text:
+                    colors.static[headerProps.color] || colors.primary.accent
+                }}
                 style={{
                   alignSelf: "flex-start",
                   borderRadius: 5,
@@ -118,7 +116,8 @@ export const Empty = React.memo(
               <ActivityIndicator
                 size={SIZE.lg}
                 color={
-                  COLORS_NOTE[headerProps.color?.toLowerCase()] || colors.accent
+                  ColorValues[headerProps.color?.toLowerCase()] ||
+                  colors.primary.accent
                 }
               />
             </View>

apps/mobile/app/components/list/index.js

@@ -24,7 +24,7 @@ import Animated, { FadeInDown } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { db } from "../../common/database";
 import { eScrollEvent } from "../../utils/events";
 import { tabBarRef } from "../../utils/global-refs";
@@ -93,7 +93,7 @@ const List = ({
   handlers,
   ScrollComponent
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const scrollRef = useRef();
   const [notesListMode, notebooksListMode] = useSettingStore((state) => [
     state.settings.notesListMode,
@@ -111,7 +111,13 @@ const List = ({
         index={index}
         color={headerProps?.color}
         title={headerProps?.heading}
-        type={screen === "Notes" ? "home" : type}
+        type={
+          screen === "Notes"
+            ? "home"
+            : screen === "Favorites"
+            ? "favorites"
+            : type
+        }
         screen={screen}
         isSheet={isSheet}
       />
@@ -182,9 +188,9 @@ const List = ({
           keyboardDismissMode="interactive"
           refreshControl={
             <RefreshControl
-              tintColor={colors.accent}
-              colors={[colors.accent]}
-              progressBackgroundColor={colors.nav}
+              tintColor={colors.primary.accent}
+              colors={[colors.primary.accent]}
+              progressBackgroundColor={colors.secondary.background}
               onRefresh={_onRefresh}
               refreshing={false}
             />

apps/mobile/app/components/merge-conflicts/index.js

@@ -33,7 +33,7 @@ import {
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -49,7 +49,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getFormattedDate } from "@notesnook/common";
 
 const MergeConflicts = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [keep, setKeep] = useState(null);
   const [copy, setCopy] = useState(null);
@@ -152,16 +152,20 @@ const MergeConflicts = () => {
           }}
         >
           {back && (
-            <IconButton onPress={close} color={colors.pri} name="arrow-left" />
+            <IconButton
+              onPress={close}
+              color={colors.primary.paragraph}
+              name="arrow-left"
+            />
           )}
           <Paragraph
             style={{ flexWrap: "wrap" }}
-            color={colors.icon}
+            color={colors.secondary.paragraph}
             size={SIZE.xs}
           >
             <Text
               style={{
-                color: isCurrent ? colors.accent : colors.red,
+                color: isCurrent ? colors.primary.accent : colors.static.red,
                 fontWeight: "bold"
               }}
             >
@@ -200,15 +204,17 @@ const MergeConflicts = () => {
             <Button
               title="Discard"
               type="accent"
-              accentColor="red"
+              buttonType={{
+                color: colors.static.red,
+                text: colors.static.white
+              }}
               height={30}
               style={{
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
               fontSize={SIZE.xs}
-              accentText="light"
-              color={colors.errorText}
+              color={colors.error.paragraph}
               onPress={() => {
                 setDialogVisible(true);
               }}
@@ -257,7 +263,7 @@ const MergeConflicts = () => {
     >
       <SafeAreaView
         style={{
-          backgroundColor: colors.bg,
+          backgroundColor: colors.primary.background,
           paddingTop: insets.top
         }}
       >
@@ -299,9 +305,9 @@ const MergeConflicts = () => {
           <Animated.View
             style={{
               height: height / 2 - (50 + insets.top / 2),
-              backgroundColor: colors.bg,
+              backgroundColor: colors.primary.background,
               borderBottomWidth: 1,
-              borderBottomColor: colors.nav
+              borderBottomColor: colors.secondary.background
             }}
           >
             <Editor
@@ -335,7 +341,7 @@ const MergeConflicts = () => {
           <Animated.View
             style={{
               height: height / 2 - (50 + insets.top / 2),
-              backgroundColor: colors.bg,
+              backgroundColor: colors.primary.background,
               borderRadius: 10
             }}
           >

apps/mobile/app/components/note-history/index.js

@@ -23,7 +23,7 @@ import { FlatList } from "react-native-gesture-handler";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { presentSheet } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
 import DialogHeader from "../dialog/dialog-header";
@@ -37,7 +37,7 @@ import { getFormattedDate, getTimeAgo } from "@notesnook/common";
 export default function NoteHistory({ note, fwdRef }) {
   const [history, setHistory] = useState([]);
   const [_loading, setLoading] = useState(true);
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   useEffect(() => {
     (async () => {
@@ -89,12 +89,12 @@ export default function NoteHistory({ note, fwdRef }) {
         }}
       >
         <Paragraph>{getDate(item.dateCreated, item.dateModified)}</Paragraph>
-        <Paragraph color={colors.icon} size={SIZE.xs}>
+        <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
           {getTimeAgo(item.dateModified)}
         </Paragraph>
       </PressableButton>
     ),
-    [colors.icon, preview]
+    [colors.secondary.paragraph, preview]
   );
 
   return (
@@ -128,8 +128,8 @@ export default function NoteHistory({ note, fwdRef }) {
               height: 200
             }}
           >
-            <Icon name="history" size={60} color={colors.icon} />
-            <Paragraph color={colors.icon}>
+            <Icon name="history" size={60} color={colors.primary.icon} />
+            <Paragraph color={colors.secondary.paragraph}>
               No note history found on this device.
             </Paragraph>
           </View>
@@ -138,7 +138,7 @@ export default function NoteHistory({ note, fwdRef }) {
       />
       <Paragraph
         size={SIZE.xs}
-        color={colors.icon}
+        color={colors.secondary.paragraph}
         style={{
           alignSelf: "center"
         }}
@@ -151,7 +151,10 @@ export default function NoteHistory({ note, fwdRef }) {
               colors
             );
           }}
-          style={{ color: colors.accent, textDecorationLine: "underline" }}
+          style={{
+            color: colors.primary.accent,
+            textDecorationLine: "underline"
+          }}
         >
           Learn how this works.
         </Text>

apps/mobile/app/components/note-history/preview.js

@@ -27,7 +27,7 @@ import { eSendEvent, ToastEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useEditorStore } from "../../stores/use-editor-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useTrashStore } from "../../stores/use-trash-store";
 import { eCloseSheet, eOnLoadNote } from "../../utils/events";
 import { sleep } from "../../utils/time";
@@ -38,7 +38,7 @@ import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
 
 export default function NotePreview({ session, content, note }) {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const editorId = ":noteHistory";
 
   async function restore() {
@@ -137,7 +137,7 @@ export default function NotePreview({ session, content, note }) {
             alignItems: "center"
           }}
         >
-          <Paragraph color={colors.icon}>
+          <Paragraph color={colors.secondary.paragraph}>
             Preview not available, content is encrypted.
           </Paragraph>
         </View>

apps/mobile/app/components/premium/component.js

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { usePricing } from "../../hooks/use-pricing";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { getElevationStyle } from "../../utils/elevation";
 import {
@@ -49,7 +49,7 @@ import { Group } from "./group";
 import { PricingPlans } from "./pricing-plans";
 
 export const Component = ({ close, promo }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const user = useUserStore((state) => state.user);
   const userCanRequestTrial =
     user && (!user.subscription || !user.subscription.expiry) ? true : false;
@@ -87,7 +87,7 @@ export const Component = ({ close, promo }) => {
     <View
       style={{
         width: "100%",
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         justifyContent: "space-between",
         borderRadius: 10,
         maxHeight: "100%"
@@ -106,7 +106,7 @@ export const Component = ({ close, promo }) => {
           width: 50,
           height: 50
         }}
-        color={colors.pri}
+        color={colors.primary.paragraph}
         name="close"
       />
 
@@ -131,7 +131,7 @@ export const Component = ({ close, promo }) => {
           <SvgView
             width={350}
             height={350}
-            src={LAUNCH_ROCKET(colors.accent)}
+            src={LAUNCH_ROCKET(colors.primary.accent)}
           />
         </View>
 
@@ -144,7 +144,7 @@ export const Component = ({ close, promo }) => {
           }}
         >
           Notesnook{" "}
-          <Heading size={SIZE.lg} color={colors.accent}>
+          <Heading size={SIZE.lg} color={colors.primary.accent}>
             Pro
           </Heading>
         </Heading>
@@ -155,7 +155,7 @@ export const Component = ({ close, promo }) => {
               marginBottom: 20
             }}
             size={SIZE.md}
-            color={colors.accent}
+            color={colors.primary.accent}
           />
         ) : (
           <Paragraph
@@ -225,7 +225,7 @@ export const Component = ({ close, promo }) => {
 
         {!user || userCanRequestTrial ? (
           <Paragraph
-            color={colors.icon}
+            color={colors.secondary.paragraph}
             size={SIZE.xs}
             style={{
               alignSelf: "center",

apps/mobile/app/components/premium/expiring.js

@@ -26,7 +26,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import {
   eOpenPremiumDialog,
   eOpenResultDialog,
@@ -44,7 +44,7 @@ import { CompactFeatures } from "./compact-features";
 import { Offer } from "./offer";
 
 export const Expiring = () => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [status, setStatus] = useState({
     title: "Your trial is ending soon",
@@ -146,7 +146,7 @@ export const Expiring = () => {
                   size={SIZE.xs}
                   style={{
                     textDecorationLine: "underline",
-                    color: colors.icon,
+                    color: colors.secondary.paragraph,
                     marginTop: 10
                   }}
                 >
@@ -159,7 +159,7 @@ export const Expiring = () => {
 
             <View
               style={{
-                backgroundColor: colors.nav,
+                backgroundColor: colors.secondary.background,
                 width: "100%",
                 borderBottomRightRadius: 10,
                 borderBottomLeftRadius: 10

apps/mobile/app/components/premium/feature.js

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { ProTag } from "./pro-tag";
@@ -33,7 +33,7 @@ export const FeatureBlock = ({
   pro,
   proTagBg
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return vertical ? (
     <View
@@ -42,7 +42,7 @@ export const FeatureBlock = ({
         alignItems: "center",
         paddingHorizontal: 12,
         marginBottom: 10,
-        backgroundColor: colors.nav,
+        backgroundColor: colors.secondary.background,
         borderRadius: 10,
         paddingVertical: 12
       }}
@@ -69,9 +69,9 @@ export const FeatureBlock = ({
         minWidth: 100
       }}
     >
-      <Icon color={colors.icon} name={icon} size={SIZE.xl} />
+      <Icon color={colors.primary.icon} name={icon} size={SIZE.xl} />
       <Paragraph size={SIZE.md}>
-        <Text style={{ color: colors.accent }}>{highlight}</Text>
+        <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
         {content ? "\n" + content : null}
       </Paragraph>
 
@@ -87,7 +87,7 @@ export const FeatureBlock = ({
             height: 3,
             marginTop: 10,
             borderRadius: 100,
-            backgroundColor: colors.accent
+            backgroundColor: colors.primary.accent
           }}
         />
       )}

apps/mobile/app/components/premium/group.js

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { ScrollView, View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -27,20 +27,20 @@ import { FeatureBlock } from "./feature";
 import { ProTag } from "./pro-tag";
 
 export const Group = ({ item, index }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
       style={{
         paddingHorizontal: 12,
-        backgroundColor: index % 2 !== 0 ? colors.bg : colors.nav,
+        backgroundColor: index % 2 !== 0 ? colors.primary.background : colors.secondary.background,
         paddingVertical: 40
       }}
     >
       {item?.pro ? (
         <ProTag
           size={SIZE.sm}
-          background={index % 2 === 0 ? colors.bg : colors.nav}
+          background={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
         />
       ) : null}
       <Heading>{item.title}</Heading>
@@ -60,7 +60,7 @@ export const Group = ({ item, index }) => {
               {...item}
               detail={item.detail}
               pro={item.pro}
-              proTagBg={index % 2 === 0 ? colors.bg : colors.nav}
+              proTagBg={index % 2 === 0 ? colors.primary.background : colors.secondary.background}
             />
           ))}
         </ScrollView>
@@ -71,7 +71,7 @@ export const Group = ({ item, index }) => {
             marginTop: 10
           }}
           size={SIZE.xs}
-          color={colors.icon}
+          color={colors.secondary.paragraph}
         >
           {item.info}
         </Paragraph>

apps/mobile/app/components/premium/index.js

@@ -71,7 +71,7 @@ class PremiumDialog extends React.Component {
       <BaseDialog
         animation="slide"
         bounce={false}
-        background={this.props.colors.bg}
+        background={this.props.colors.primary.background}
         onRequestClose={this.onClose}
       >
         <Component

apps/mobile/app/components/premium/offer.js

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Text } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 
@@ -28,7 +28,7 @@ export const Offer = ({
   text = "on yearly plan, offer ends soon",
   padding = 0
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <Paragraph
@@ -39,8 +39,8 @@ export const Offer = ({
       size={SIZE.xxxl}
     >
       GET {off}
-      <Text style={{ color: colors.accent }}>%</Text> OFF!{"\n"}
-      <Paragraph color={colors.icon}>{text}</Paragraph>
+      <Text style={{ color: colors.primary.accent }}>%</Text> OFF!{"\n"}
+      <Paragraph color={colors.secondary.paragraph}>{text}</Paragraph>
     </Paragraph>
   );
 };

apps/mobile/app/components/premium/premium-toast.js

@@ -27,7 +27,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
 import {
   eCloseActionSheet,
@@ -42,7 +42,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 export const PremiumToast = ({ context = "global", offset = 0 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const [msg, setMsg] = useState(null);
   const timer = useRef();
   const keyboard = useKeyboard();
@@ -92,7 +92,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
         exiting={FadeOutUp}
         style={{
           position: "absolute",
-          backgroundColor: colors.nav,
+          backgroundColor: colors.secondary.background,
           zIndex: 999,
           ...getElevationStyle(20),
           padding: 12,
@@ -119,7 +119,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
             style={{
               flexWrap: "wrap"
             }}
-            color={colors.accent}
+            color={colors.primary.accent}
             size={SIZE.md}
           >
             {msg.title}
@@ -130,7 +130,7 @@ export const PremiumToast = ({ context = "global", offset = 0 }) => {
               flexWrap: "wrap"
             }}
             size={SIZE.sm}
-            color={colors.pri}
+            color={colors.primary.paragraph}
           >
             {msg.desc}
           </Paragraph>

apps/mobile/app/components/premium/pricing-plans.js

@@ -28,7 +28,7 @@ import {
   ToastEvent
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import {
   eClosePremiumDialog,
@@ -66,7 +66,7 @@ export const PricingPlans = ({
   heading = true,
   compact = false
 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const user = useUserStore((state) => state.user);
   const [product, setProduct] = useState(null);
   const [buying, setBuying] = useState(false);
@@ -176,7 +176,7 @@ export const PricingPlans = ({
         height: 100
       }}
     >
-      <ActivityIndicator color={colors.accent} size={25} />
+      <ActivityIndicator color={colors.primary.accent} size={25} />
     </View>
   ) : (
     <View
@@ -251,7 +251,7 @@ export const PricingPlans = ({
               <Paragraph
                 style={{
                   textDecorationLine: "line-through",
-                  color: colors.icon
+                  color: colors.secondary.paragraph
                 }}
                 size={SIZE.sm}
               >
@@ -273,7 +273,7 @@ export const PricingPlans = ({
                         marginBottom: 20
                       }}
                     >
-                      <Heading color={colors.accent}>
+                      <Heading color={colors.primary.accent}>
                         Get {monthlyPlan?.info?.discount}% off in{" "}
                         {monthlyPlan?.info?.country}
                       </Heading>
@@ -455,7 +455,7 @@ export const PricingPlans = ({
 
       {!user || !upgrade ? (
         <Paragraph
-          color={colors.icon}
+          color={colors.secondary.paragraph}
           size={SIZE.xs}
           style={{
             alignSelf: "center",
@@ -479,7 +479,7 @@ export const PricingPlans = ({
             <Paragraph
               textBreakStrategy="balanced"
               size={SIZE.xs}
-              color={colors.icon}
+              color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
                 marginTop: 10,
@@ -493,7 +493,7 @@ export const PricingPlans = ({
           ) : (
             <Paragraph
               size={SIZE.xs}
-              color={colors.icon}
+              color={colors.secondary.paragraph}
               style={{
                 alignSelf: "center",
                 marginTop: 10,
@@ -513,7 +513,7 @@ export const PricingPlans = ({
           >
             <Paragraph
               size={SIZE.xs}
-              color={colors.icon}
+              color={colors.secondary.paragraph}
               style={{
                 maxWidth: "100%",
                 textAlign: "center"
@@ -530,7 +530,7 @@ export const PricingPlans = ({
                 style={{
                   textDecorationLine: "underline"
                 }}
-                color={colors.accent}
+                color={colors.primary.accent}
               >
                 Terms of Service{" "}
               </Paragraph>
@@ -545,7 +545,7 @@ export const PricingPlans = ({
                 style={{
                   textDecorationLine: "underline"
                 }}
-                color={colors.accent}
+                color={colors.primary.accent}
               >
                 Privacy Policy.
               </Paragraph>

apps/mobile/app/components/premium/pro-tag.js

@@ -20,16 +20,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import Paragraph from "../ui/typography/paragraph";
 
 export const ProTag = ({ width, size, background }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   return (
     <View
       style={{
-        backgroundColor: background || colors.bg,
+        backgroundColor: background || colors.primary.background,
         borderRadius: 100,
         width: width || 60,
         justifyContent: "center",
@@ -43,10 +43,10 @@ export const ProTag = ({ width, size, background }) => {
           marginRight: 3
         }}
         size={size}
-        color={colors.accent}
+        color={colors.primary.accent}
         name="crown"
       />
-      <Paragraph size={size - 1.5} color={colors.accent}>
+      <Paragraph size={size - 1.5} color={colors.primary.accent}>
         PRO
       </Paragraph>
     </View>

apps/mobile/app/components/properties/color-tags.js

@@ -26,11 +26,14 @@ import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { COLORS_NOTE } from "../../utils/color-scheme";
+import { ColorValues } from "../../utils/colors";
 import { refreshNotesPage } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
+import { useThemeColors } from "@notesnook/theme";
+
 export const ColorTags = ({ item }) => {
+  const { colors } = useThemeColors();
   const [note, setNote] = useState(item);
   const setColorNotes = useMenuStore((state) => state.setColorNotes);
   const isTablet = useSettingStore((state) => state.deviceMode) !== "mobile";
@@ -50,13 +53,14 @@ export const ColorTags = ({ item }) => {
   const _renderColor = (c) => {
     const color = {
       name: c,
-      value: COLORS_NOTE[c?.toLowerCase()]
+      value: ColorValues[c?.toLowerCase()]
     };
 
     return (
       <PressableButton
         type="accent"
-        accentColor={color.name.toLowerCase()}
+        accentColor={colors.static[color.name?.toLowerCase()]}
+        accentText={colors.static.white}
         testID={notesnook.ids.dialogs.actionsheet.color(c)}
         key={color.value}
         onPress={() => changeColor(color)}
@@ -88,7 +92,7 @@ export const ColorTags = ({ item }) => {
         justifyContent: isTablet ? "center" : "space-between"
       }}
     >
-      {Object.keys(COLORS_NOTE).map(_renderColor)}
+      {Object.keys(ColorValues).map(_renderColor)}
     </View>
   );
 };

apps/mobile/app/components/properties/date-meta.js

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
 export const DateMeta = ({ item }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
 
   const getNameFromKey = (key) => {
     switch (key) {
@@ -62,10 +62,10 @@ export const DateMeta = ({ item }) => {
         paddingVertical: 3
       }}
     >
-      <Paragraph size={SIZE.xs} color={colors.icon}>
+      <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
         {getNameFromKey(key)}
       </Paragraph>
-      <Paragraph size={SIZE.xs} color={colors.icon}>
+      <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
         {getFormattedDate(item[key], "date-time")}
       </Paragraph>
     </View>
@@ -74,6 +74,10 @@ export const DateMeta = ({ item }) => {
   return (
     <View
       style={{
+        paddingVertical: 5,
+        marginTop: 5,
+        borderTopWidth: 1,
+        borderTopColor: colors.secondary.background,
         paddingHorizontal: 12
       }}
     >

apps/mobile/app/components/properties/dev-mode.js

@@ -1,71 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import Clipboard from "@react-native-clipboard/clipboard";
-import React from "react";
-import { View } from "react-native";
-import { db } from "../../common/database";
-import { ToastEvent } from "../../services/event-manager";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { SIZE } from "../../utils/size";
-import { Button } from "../ui/button";
-export const DevMode = ({ item }) => {
-  const devMode = useSettingStore((state) => state.settings.devMode);
-
-  return devMode ? (
-    <View
-      style={{
-        width: "100%",
-        paddingHorizontal: 12,
-        marginTop: 10
-      }}
-    >
-      <Button
-        onPress={async () => {
-          let additionalData = {};
-          if (item.type === "note") {
-            let content = await db.content.raw(item.contentId);
-            if (content) {
-              content = db.debug.strip(content);
-              additionalData.content = content;
-            }
-          }
-          additionalData.lastSynced = await db.lastSynced();
-          let _note = { ...item };
-          _note.additionalData = additionalData;
-          Clipboard.setString(db.debug.strip(_note));
-
-          ToastEvent.show({
-            heading: "Debug data copied!",
-            type: "success",
-            context: "local"
-          });
-        }}
-        fontSize={SIZE.sm}
-        title="Copy debug data"
-        icon="clipboard"
-        height={30}
-        type="warn"
-        style={{
-          alignSelf: "flex-end"
-        }}
-      />
-    </View>
-  ) : null;
-};

apps/mobile/app/components/properties/index.js

@@ -23,26 +23,25 @@ import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { presentSheet } from "../../services/event-manager";
 import SearchService from "../../services/search";
-import { useThemeStore } from "../../stores/use-theme-store";
-import { COLORS_NOTE } from "../../utils/color-scheme";
+import { useThemeColors } from "@notesnook/theme";
+import { ColorValues } from "../../utils/colors";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { ReminderTime } from "../ui/reminder-time";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { DateMeta } from "./date-meta";
-import { DevMode } from "./dev-mode";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { Tags, TagStrip } from "./tags";
 const Line = ({ top = 6, bottom = 6 }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   return (
     <View
       style={{
         height: 1,
-        backgroundColor: colors.nav,
+        backgroundColor: colors.primary.border,
         width: "100%",
         marginTop: top,
         marginBottom: bottom
@@ -52,9 +51,9 @@ const Line = ({ top = 6, bottom = 6 }) => {
 };
 
 export const Properties = ({ close = () => {}, item, buttons = [] }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const alias = item.alias || item.title;
-  const isColor = !!COLORS_NOTE[item.title];
+  const isColor = !!ColorValues[item.title];
 
   if (!item || !item.id) {
     return (
@@ -68,7 +67,7 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
       keyboardShouldPersistTaps="always"
       keyboardDismissMode="none"
       style={{
-        backgroundColor: colors.bg,
+        backgroundColor: colors.primary.background,
         borderBottomRightRadius: DDS.isLargeTablet() ? 10 : 1,
         borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
         maxHeight: "100%"
@@ -81,12 +80,13 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             style={{
               paddingHorizontal: 12,
               marginTop: 5,
-              zIndex: 10
+              zIndex: 10,
+              marginBottom: 6
             }}
           >
             <Heading size={SIZE.lg}>
               {item.type === "tag" && !isColor ? (
-                <Heading size={SIZE.xl} color={colors.accent}>
+                <Heading size={SIZE.xl} color={colors.primary.accent}>
                   #
                 </Heading>
               ) : null}
@@ -112,7 +112,6 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
               />
             ) : null}
           </View>
-          <Line top={12} />
 
           <DateMeta item={item} />
           <Line bottom={0} />
@@ -137,7 +136,6 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
             }}
           />
           <Synced item={item} close={close} />
-          <DevMode item={item} />
 
           {DDS.isTab ? (
             <View

apps/mobile/app/components/properties/items.js

@@ -23,13 +23,13 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useActions } from "../../hooks/use-actions";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButton } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 export const Items = ({ item, buttons, close }) => {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const dimensions = useSettingStore((state) => state.dimensions);
   const actions = useActions({ item, close });
   const data = actions.filter((i) => buttons.indexOf(i.id) > -1 && !i.hidden);
@@ -70,10 +70,10 @@ export const Items = ({ item, buttons, close }) => {
           size={DDS.isTab ? SIZE.xxl : SIZE.lg}
           color={
             item.on
-              ? colors.accent
+              ? colors.primary.accent
               : item.id.match(/(delete|trash)/g)
-              ? colors.errorText
-              : colors.icon
+              ? colors.error.icon
+              : colors.secondary.icon
           }
         />
       </PressableButton>
@@ -89,10 +89,10 @@ export const Items = ({ item, buttons, close }) => {
       key={item.name + item.title}
       buttonType={{
         text: item.on
-          ? colors.accent
+          ? colors.primary.accent
           : item.name === "Delete" || item.name === "PermDelete"
-          ? colors.errorText
-          : colors.pri
+          ? colors.error.paragraph
+          : colors.primary.paragraph
       }}
       onPress={item.func}
       title={item.title}
@@ -142,10 +142,10 @@ export const Items = ({ item, buttons, close }) => {
             size={DDS.isTab ? SIZE.xxl : SIZE.md + 4}
             color={
               item.on
-                ? colors.accent
+                ? colors.primary.accent
                 : item.name === "Delete" || item.name === "PermDelete"
-                ? colors.errorText
-                : colors.icon
+                ? colors.error.icon
+                : colors.secondary.icon
             }
           />
         </PressableButton>

apps/mobile/app/components/properties/notebooks.js

@@ -30,14 +30,14 @@ import {
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useNotebookStore } from "../../stores/use-notebook-store";
-import { useThemeStore } from "../../stores/use-theme-store";
+import { useThemeColors } from "@notesnook/theme";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { eClearEditor } from "../../utils/events";
 
 export default function Notebooks({ note, close, full }) {
-  const colors = useThemeStore((state) => state.colors);
+  const { colors } = useThemeColors();
   const notebooks = useNotebookStore((state) => state.notebooks);
   function getNotebooks(item) {
     let filteredNotebooks = [];
@@ -95,15 +95,15 @@ export default function Notebooks({ note, close, full }) {
         flexGrow: 1,
         padding: 6,
         borderWidth: full ? 0 : 1,
-        borderColor: colors.nav,
+        borderColor: colors.primary.background,
         borderRadius: 10,
-        backgroundColor: full ? "transparent" : colors.nav,
+        backgroundColor: full ? "transparent" : colors.secondary.background,
         minHeight: 42
       }}
     >
       <Icon
         name="book-outline"
-        color={colors.accent}
+        color={colors.primary.accent}
         size={SIZE.sm}
         style={{
           marginRight: 5
@@ -130,7 +130,7 @@ export default function Notebooks({ note, close, full }) {
         style={{
           flexDirection: "row",
           marginLeft: 8,
-          borderLeftColor: colors.nav,
+          borderLeftColor: colors.primary.hover,
           borderLeftWidth: 1,
           paddingLeft: 8
         }}