feat: QoL enhancements

2026-08-24 02:24:12 -05:00 · 2025-10-02 02:02:49 +01:00
parent 0a171aa05f
commit dbc86eabb6
27 changed files with 2620 additions and 10087 deletions
@@ -1,5 +1,5 @@
 node_modules/
-out/
+dist/
 parts/
 stage/
 prime/
@@ -1,6 +1,6 @@
 runtime = electron
-target = 19.1.9
-target_arch = x64
+target = 38.2.0
+target_arch = x64,arm64
 disturl = https://electronjs.org/headers
 export npm_config_runtime=electron
 export npm_config_build_from_source=true
@@ -1,18 +1,22 @@
 {
-  "appId": "com.electron.colorpicker",
+  "appId": "com.toinane.colorpicker",
  "productName": "Colorpicker",
  "compression": "maximum",
-  "copyright": "Copyright @Toinane",
  "buildDependenciesFromSource": true,
  "directories": {
-    "output": "out"
+    "output": "dist"
  },
-  "files": ["**/*"],
+  "files": ["src/**"],
  "mac": {
    "target": [{ "target": "dmg", "arch": ["arm64", "x64"] }],
    "category": "public.app-category.graphics-design",
    "icon": "build/icon.icns",
-    "type": "distribution"
+    "type": "distribution",
+    "darkModeSupport": true,
+    "extendInfo": {
+      "NSUserNotificationAlertStyle": "alert",
+      "LSHasLocalizedDisplayName": true
+    }
  },
  "dmg": {
    "icon": "build/VolumeIcon.icns",
@@ -1,37 +0,0 @@
-{
-    "appId": "com.electron.colorpicker.nightly",
-    "productName": "ColorpickerNightly",
-    "compression": "store",
-    "copyright": "Copyright @Toinane",
-    "buildDependenciesFromSource": true,
-    "directories": {
-        "output": "out"
-    },
-    "files": ["**/*"],
-    "mac": {
-        "category": "public.app-category.graphics-design",
-        "icon": "build/icon-nightly.icns",
-        "type": "development"
-    },
-    "dmg": {
-        "icon": "build/VolumeIcon-nightly.icns",
-        "background": "build/background-nightly.png",
-        "window": {
-            "width": 540,
-            "height": 380
-        }
-    },
-    "linux": {
-        "icon": "./build",
-        "synopsis": "Colorpicker App",
-        "category": "Graphics",
-        "executableName": "colorpicker-app"
-    },
-    "win": {
-        "icon": "build/icon-nightly.ico"
-    },
-    "nsis": {
-        "oneClick": false,
-        "allowToChangeInstallationDirectory": true
-    }
-}
@@ -1,21 +1,17 @@
 {
  "name": "colorpicker",
  "productName": "colorpicker",
-  "version": "2.2.2",
+  "version": "2.3.0",
  "description": "Colorpicker is a little Electron app that can show colors with hex/rgb code, and generate shading for your color.",
  "main": "src/main.js",
  "scripts": {
    "start": "npx electron src/main.js",
-    "standard": "standard",
-    "pack": "electron-builder --dir",
    "publish": "snapcraft push --release=stable *.snap",
-    "release": "electron-builder --publish=never --config colorpicker-build.json",
-    "release-linux": "electron-builder --publish=never --config colorpicker-build.json --linux deb appImage",
+    "release": "electron-builder --publish=never --config build/colorpicker-build.json",
+    "release-linux": "electron-builder --publish=never --config build/colorpicker-build.json --linux deb appImage",
    "release-snap": "snapcraft snap",
-    "release-window": "electron-builder --publish=never --config colorpicker-build.json --win nsis portable",
-    "nightly": "electron-builder --publish=never --config colorpicker-build-nightly.json",
-    "nightly-linux": "electron-builder --publish=never --config colorpicker-build-nightly.json --linux deb appImage",
-    "rebuild": "npm rebuild --runtime=electron --target=19.1.9 --disturl=https://electronjs.org/headers --abi=106"
+    "release-window": "electron-builder --publish=never --config build/colorpicker-build.json --win nsis portable",
+    "rebuild": "npm rebuild --runtime=electron --target=38.2.0 --disturl=https://electronjs.org/headers --abi=139"
  },
  "repository": "https://github.com/toinane/colorpicker",
  "keywords": [
@@ -27,23 +23,20 @@
  ],
  "dependencies": {
    "electron-json-storage": "^4.6.0",
-    "request": "^2.88.2",
    "robotjs": "github:Toinane/robotjs",
-    "semver": "^7.6.2"
+    "semver": "^7.7.2"
  },
  "optionalDependencies": {
-    "iohook": "^0.9.3",
+    "iohook": "github:Toinane/iohook",
    "osx-mouse": "github:Toinane/osx-mouse",
    "win-mouse": "github:Toinane/win-mouse"
  },
  "devDependencies": {
-    "electron": "^19.1.9",
-    "electron-builder": "^24.13.3",
-    "standard": "^17.1.0"
+    "electron": "^38.2.0",
+    "electron-builder": "^26.0.12"
  },
  "author": {
    "name": "Toinane",
-    "email": "toinane@crea-that.fr",
    "url": "https://colorpicker.fr"
  },
  "bugs": "https://github.com/toinane/colorpicker/issues",
@@ -51,7 +44,7 @@
  "license": "GPL-3.0",
  "iohook": {
    "targets": [
-      "electron-123"
+      "electron-139"
    ],
    "platforms": [
      "linux"
@@ -1,43 +1,62 @@
 "use strict";

 const { app, dialog, shell } = require("electron");
-const request = require("request");
 const semver = require("semver");

+const storage = require("./storage");
+
 module.exports = {
-  searchNewUpdate: () => {
-    const options = {
-      url: "https://colorpicker.fr/release.json",
-      method: "GET",
-      headers: {
-        "content-type": "application/json",
-        "user-agent": `colorpicker-${app.getVersion()}`,
-      },
+  searchNewUpdate: async () => {
+    const url = "https://colorpicker.fr/release.json";
+    const headers = {
+      "content-type": "application/json",
+      "user-agent": `colorpicker-${app.getVersion()}`,
    };

-    request(options, (err, res, body) => {
-      try {
-        let update = JSON.parse(body);
-        if (semver.gt(update.release, app.getVersion())) {
-          dialog
-            .showMessageBox(null, {
-              message: "A new update of Colorpicker is available",
-              type: "info",
-              defaultId: 1,
-              buttons: ["Show Update", "Ignore"],
-            })
-            .then((result) => {
-              if (result.response === 0) {
-                shell.openExternal(
-                  "https://github.com/Toinane/colorpicker/releases"
-                );
-              }
-            });
-        }
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: headers,
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
      }
-      catch (error) {
-        console.error("Error while checking for updates", error);
+
+      const body = await response.text();
+      let update = JSON.parse(body);
+
+      if (!update || update === null || !update.release) {
+        throw new Error("Invalid update data");
      }
-    });
+
+      const ignoredVersion = storage.get("update:ignore");
+      if (ignoredVersion && semver.eq(ignoredVersion, update.release)) {
+        return; // User has chosen to ignore this version
+      }
+
+      if (semver.lt(app.getVersion(), update.release)) {
+        dialog
+          .showMessageBox(null, {
+            message: "A new update of Colorpicker is available",
+            type: "info",
+            defaultId: 1,
+            buttons: ["Show Update", "Remind me later", "Don't show again"],
+          })
+          .then((result) => {
+            if (result.response === 0) {
+              shell.openExternal(
+                "https://github.com/Toinane/colorpicker/releases"
+              );
+            }
+            else if (result.response === 2) {
+              storage.add({ "update:ignore": update.release });
+            }
+          });
+      }
+    }
+    catch (error) {
+      console.error("Error while checking for updates", error);
+    }
  },
 };
@@ -2,13 +2,11 @@

 const {
  ipcMain,
-  BrowserWindow,
  app,
  Notification,
  dialog,
  shell,
 } = require("electron");
-const request = require("request");
 const semver = require("semver");

 module.exports = (storage, browsers) => {
@@ -74,25 +72,34 @@ module.exports = (storage, browsers) => {
    }
  });

-  function updateApp(event) {
-    const options = {
-      url: "https://colorpicker.fr/release.json",
-      method: "GET",
-      headers: {
-        "content-type": "application/json",
-        "user-agent": `colorpicker-${app.getVersion()}`,
-      },
+  async function updateApp(event) {
+    const url = "https://colorpicker.fr/release.json";
+    const headers = {
+      "content-type": "application/json",
+      "user-agent": `colorpicker-${app.getVersion()}`,
    };

    let message =
      '<i class="fa fa-ban"></i> Can\'t connect to server, check manually <a href="https://github.com/Toinane/colorpicker/releases">here</a>';
-    request(options, (err, res, body) => {
-      if (err) { return event.sender.send("update", message); }
-      let update = JSON.parse(body);
-      if (update === undefined || update === null) {
+
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: headers,
+      });
+
+      if (!response.ok) {
        return event.sender.send("update", message);
      }
-      if (semver.lt(update.release, app.getVersion())) {
+
+      const body = await response.text();
+      let update = JSON.parse(body);
+
+      if (update === undefined || update === null || !update.release) {
+        return event.sender.send("update", message);
+      }
+
+      if (semver.satisfies(app.getVersion(), `>=${update.release}`)) {
        return event.sender.send(
          "update",
          '<i class="fa fa-check"></i> You\'re up to date!'
@@ -112,6 +119,8 @@ module.exports = (storage, browsers) => {
          `<i class="fa fa-exclamation-triangle"></i> New update available <a href="${update.link}">here</a>`
        );
      }
-    });
+    } catch (err) {
+      return event.sender.send("update", message);
+    }
  }
 };
@@ -1,9 +1,11 @@
 "use strict";
+const { app, Menu, shell } = require("electron");
+
+app.setAppUserModelId("com.toinane.colorpicker");

 let eventEmitter = require("events");
 eventEmitter = new eventEmitter();

-const { app, Tray, Menu, shell } = require("electron");
 const storage = require("./storage");
 const touchbar = require("./touchbar")(__dirname, eventEmitter);
 const { searchNewUpdate } = require("./checkUpdate");
@@ -13,34 +15,12 @@ const browsers = require("./browsers")(__dirname, storage, {
 });
 const { colorpicker, colorsbook, picker, settings } = browsers;

-// @TODO remove when electron@9.0.0
-app.allowRendererProcessReuse = true;
-
 require("./events")(storage, browsers, eventEmitter);

 if (process.platform === "linux") {
  app.disableHardwareAcceleration();
 }

-let tray;
-
-let createTray = () => {
-  if (tray) { return; }
-  if (process.platform === "darwin") {
-    tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`);
-  }
-  if (process.platform === "win32") {
-    tray = new Tray(`${__dirname}/ressources/tray-black@3x.png`); // color here
-  }
-  if (process.platform === "linux") {
-    tray = new Tray(`${__dirname}/ressources/tray-white@3x.png`);
-  }
-  if (process.platform === "darwin") {
-    tray.setPressedImage(`${__dirname}/ressources/tray-white@3x.png`);
-  }
-  tray.on("click", (event) => colorpicker.init());
-};
-
 /**
 * [setMenu - set new app menu]
 * @return {void}
@@ -174,7 +154,6 @@ let setMenu = () => {
 */
 app.on("ready", () => {
  storage.init().then(() => {
-    // createTray();
    setMenu();
    colorpicker.init();
    searchNewUpdate();
@@ -1,58 +1,59 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Colorpicker</title>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="css/app-buttons.css" />
-        <link rel="stylesheet" href="css/colorpicker.css" />
-        <link rel="stylesheet" href="css/fontawesome-all.min.css" />
-        <script defer src="js/color.class.js"></script>
-        <script defer src="js/colorpicker.class.js"></script>
-        <script defer src="js/colorpicker.events.js"></script>
-        <script defer src="js/util.class.js"></script>
-    </head>
-    <body>
-        <div class="toolbar">
-            <ul id="app_buttons">
-                <li id="close"><i></i></li>
-                <li id="minimize"><i></i></li>
-                <li id="maximize"><i></i></li>
-            </ul>
-            <ul id="tools"></ul>
+  <head>
+    <title>Colorpicker</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="css/app-buttons.css" />
+    <link rel="stylesheet" href="css/colorpicker.css" />
+    <link rel="stylesheet" href="css/fontawesome-all.min.css" />
+    <script defer src="js/icons.js"></script>
+    <script defer src="js/color.class.js"></script>
+    <script defer src="js/colorpicker.class.js"></script>
+    <script defer src="js/colorpicker.events.js"></script>
+    <script defer src="js/util.class.js"></script>
+  </head>
+  <body>
+    <div class="toolbar">
+      <ul id="app_buttons">
+        <li id="close"><i></i></li>
+        <li id="minimize"><i></i></li>
+        <li id="maximize"><i></i></li>
+      </ul>
+      <ul id="tools"></ul>
+    </div>
+    <header>
+      <div class="tints"></div>
+      <div class="naturals"></div>
+      <div class="shades"></div>
+    </header>
+    <section class="main">
+      <aside class="sliders">
+        <div class="red_bar">
+          <input type="range" min="0" max="255" value="0" />
+          <progress min="0" max="255" value="0" />
        </div>
-        <header>
-            <div class="tints"></div>
-            <div class="naturals"></div>
-            <div class="shades"></div>
-        </header>
-        <section class="main">
-            <aside class="sliders">
-                <div class="red_bar">
-                    <input type="range" min="0" max="255" value="0" />
-                    <progress min="0" max="255" value="0" />
-                </div>
-                <div class="green_bar">
-                    <input type="range" min="0" max="255" value="0" />
-                    <progress min="0" max="255" value="0" />
-                </div>
-                <div class="blue_bar">
-                    <input type="range" min="0" max="255" value="0" />
-                    <progress min="0" max="255" value="0" />
-                </div>
-                <div class="alpha_bar">
-                    <input type="range" min="0" max="255" value="0" />
-                    <progress min="0" max="255" value="0" />
-                </div>
-            </aside>
-            <aside class="inputs">
-                <input type="number" id="red_value" maxlength="3" />
-                <input type="number" id="green_value" maxlength="3" />
-                <input type="number" id="blue_value" maxlength="3" />
-                <input type="text" id="alpha_value" maxlength="4" />
-            </aside>
-            <aside class="value">
-                <input type="text" id="hex_value" maxlength="7" />
-            </aside>
-        </section>
-    </body>
+        <div class="green_bar">
+          <input type="range" min="0" max="255" value="0" />
+          <progress min="0" max="255" value="0" />
+        </div>
+        <div class="blue_bar">
+          <input type="range" min="0" max="255" value="0" />
+          <progress min="0" max="255" value="0" />
+        </div>
+        <div class="alpha_bar">
+          <input type="range" min="0" max="255" value="0" />
+          <progress min="0" max="255" value="0" />
+        </div>
+      </aside>
+      <aside class="inputs">
+        <input type="number" id="red_value" maxlength="3" />
+        <input type="number" id="green_value" maxlength="3" />
+        <input type="number" id="blue_value" maxlength="3" />
+        <input type="text" id="alpha_value" maxlength="4" />
+      </aside>
+      <aside class="value">
+        <input type="text" id="hex_value" maxlength="7" />
+      </aside>
+    </section>
+  </body>
 </html>
@@ -47,22 +47,32 @@ a {
  margin-bottom: 1px;
 }
 #tools p {
-  color: rgba(0, 0, 0, 0.45);
+  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
-  padding: 2px 5px 2px 5px;
-  width: 17px;
+  padding: 3px;
+  margin: 0 1px;
+  width: 20px;
  text-align: center;
  -webkit-app-region: no-drag;
  cursor: pointer;
  transition: 0.3s;
-  border-radius: 3px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#tools p svg {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  fill: rgba(0, 0, 0, 0.5);
 }
 .darkMode #tools p {
  color: rgba(255, 255, 255, 0.7);
 }
 #tools p:hover {
  background-color: rgba(0, 0, 0, 0.1);
-  color: rgba(0, 0, 0, 0.5);
+  color: rgba(0, 0, 0, 0.7);
 }
 .darkMode #tools p:hover {
  background-color: rgba(255, 255, 255, 0.2);
@@ -70,12 +80,12 @@ a {
 }

 #tools p.active {
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.6);
 }
 .darkMode #tools p.active {
+  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
 }

 #tools::selection,
@@ -185,10 +195,13 @@ progress[value]::-webkit-progress-bar {
  width: 99%;
  top: 5px;
  left: 1px;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(23, 23, 23, 0.35);
  border-radius: 6px;
  height: 10px;
 }
+.darkMode progress[value]::-webkit-progress-bar {
+  background-color: rgba(255, 255, 255, 0.6);
+}
 progress[value]::-webkit-progress-value {
  border-radius: 6px;
  height: 10px;
@@ -231,10 +244,11 @@ progress {
 input[type="text"] {
  width: 40px;
  text-align: center;
-  background: rgba(0, 0, 0, 0.08);
-  color: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.7);
  border: none;
  padding: 2px;
+  border-radius: 4px;
  font-size: 1.05em;
  font-weight: bold;
  outline: none;
@@ -243,12 +257,12 @@ input[type="text"] {
 .darkMode .inputs input[type="number"],
 .darkMode input[type="text"],
 .darkMode .value p {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
 }

 .value {
-  margin-bottom: 9px;
+  margin-bottom: 8px;
  margin-left: 10px;
  transition: opacity 0.4s;
 }
@@ -1,207 +1,210 @@
 body,
 * {
-    margin: 0;
-    font-family: "Lato", sans-serif;
+  margin: 0;
+  font-family: "Lato", sans-serif;
 }

 *::-webkit-scrollbar-track {
-    border-radius: 14px;
-    background: rgba(0, 0, 0, 0);
-    border: 3px solid #fff;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0);
+  border: 3px solid #fff;
 }

 *::-webkit-scrollbar {
-    width: 14px;
-    margin: 5px 0;
-    border-radius: 10px;
-    background: #eef2f6;
+  width: 14px;
+  margin: 5px 0;
+  border-radius: 10px;
+  background: #eef2f6;
 }

 *::-webkit-scrollbar-thumb {
-    width: 14px;
-    background-clip: padding-box;
-    border-radius: 10px;
-    background-color: #cad7e8;
-    border: 3px solid #fff;
+  width: 14px;
+  background-clip: padding-box;
+  border-radius: 10px;
+  background-color: #cad7e8;
+  border: 3px solid #fff;
 }

 html,
 body {
-    overflow: hidden;
-    height: 100%;
+  overflow: hidden;
+  height: 100%;
 }

 header {
-    display: flex;
-    justify-content: center;
-    padding-top: 10px;
-    background: #f1f4f8;
-    border-bottom: 1px solid #cfdae8;
-    box-shadow: inset 0 -3px 20px -5px #cbd7e6;
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  background: #f1f4f8;
+  border-bottom: 1px solid #cfdae8;
+  box-shadow: inset 0 -3px 20px -5px #cbd7e6;
 }
 header li {
-    width: 100px;
-    margin: 0 10px;
-    padding: 10px 0;
-    border-radius: 7px 7px 0 0;
-    list-style: none;
-    text-align: center;
-    cursor: pointer;
-    transition: 0.25s;
+  width: 100px;
+  margin: 0 10px;
+  padding: 10px 0;
+  border-radius: 7px 7px 0 0;
+  list-style: none;
+  text-align: center;
+  cursor: pointer;
+  transition: 0.25s;
 }
 header li:hover img,
 header li.active img {
-    margin-bottom: 4px;
-    margin-top: 0;
+  margin-bottom: 4px;
+  margin-top: 0;
 }
 header li.active {
-    background: white;
-    box-shadow: 0 -3px 20px -5px #cbd7e6;
+  background: white;
+  box-shadow: 0 -3px 20px -5px #cbd7e6;
 }
 header li img {
-    transition: 0.3s;
-    margin-top: 4px;
-    width: 50%;
+  transition: 0.3s;
+  margin-top: 4px;
+  width: 50%;
 }
 header li p {
-    margin: 2px 0;
-    font-size: 0.8em;
-    color: #2f3a4a;
+  margin: 2px 0;
+  font-size: 0.8em;
+  color: #2f3a4a;
 }

 .panel {
-    position: absolute;
-    width: 100%;
-    height: calc(100% - 109px);
-    bottom: 0;
-    left: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s;
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 109px);
+  bottom: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
 }
 .panel.active {
-    visibility: visible;
-    overflow-y: auto;
-    overflow-x: hidden;
-    opacity: 1;
-    transition: opacity 1.3s;
+  visibility: visible;
+  overflow-y: auto;
+  overflow-x: hidden;
+  opacity: 1;
+  transition: opacity 1.3s;
 }
 .panel h2 {
-    color: #2ba0e0;
-    padding-left: 20px;
-    margin-top: 20px;
-    margin-bottom: 2px;
-    box-sizing: border-box;
-    font-weight: normal;
-    font-size: 1.3em;
-    border-bottom: 1px solid #8ccbee;
-    margin-bottom: 20px;
+  color: #2ba0e0;
+  padding-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 2px;
+  box-sizing: border-box;
+  font-weight: normal;
+  font-size: 1.3em;
+  border-bottom: 1px solid #8ccbee;
+  margin-bottom: 20px;
 }
 .panel > p {
-    padding-left: 20px;
-    color: #627893;
+  padding-left: 20px;
+  color: #627893;
 }
 .panel > p span {
-    color: #8295ab;
+  color: #8295ab;
 }

 .panel section {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }

 p.toggle {
-    cursor: pointer;
+  cursor: pointer;
 }
 p.toggle + p {
-    margin-top: 25px;
+  margin-top: 25px;
 }
 .toggle i {
-    position: relative;
-    top: 3px;
-    font-size: 1.4em;
-    color: #a6b3c4;
-    margin: 5px;
-    transition: 0.3s;
+  position: relative;
+  top: 3px;
+  font-size: 1.4em;
+  color: #a6b3c4;
+  margin: 5px;
+  transition: 0.3s;
 }
 .toggle.active i {
-    color: #2ba0e0;
+  color: #2ba0e0;
 }
 .toggle i:before {
-    content: "\f204";
+  content: "\f204";
 }
 .toggle.active i:before {
-    content: "\f205";
+  content: "\f205";
 }

 /* GENERAL TAB */

 #toolset {
-    margin-top: 10px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 #toolset .arrow {
-    color: #69dbbb;
-    font-size: 3em;
+  color: #69dbbb;
+  font-size: 3em;
 }
 #allTools {
-    min-width: 52px;
-    max-width: 52px;
-    height: 137px;
-    margin: 0 12px 0 10px;
-    padding: 6px;
-    border-radius: 10px;
-    border: 2px dashed #00798f;
-    background: #f6fefc;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
+  min-width: 52px;
+  max-width: 52px;
+  height: 137px;
+  margin: 0 12px 0 10px;
+  padding: 6px;
+  border-radius: 10px;
+  border: 2px dashed #00798f;
+  background: #f6fefc;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
 }
 #selectedTools {
-    display: flex;
-    margin-left: 12px;
-    border-top: 2px dashed #0a9182;
-    border-left: 2px dashed #0a9182;
-    border-bottom: 2px dashed #0a9182;
-    background: url("../../ressources/toolset.png") top 28px left 0 no-repeat,
-        #90eab8;
-    background-size: contain;
-    width: 350px;
-    height: 137px;
-    border-radius: 6px 0 0 6px;
-    padding: 6px 0 6px 10px;
+  display: flex;
+  margin-left: 12px;
+  border-top: 2px dashed #0a9182;
+  border-left: 2px dashed #0a9182;
+  border-bottom: 2px dashed #0a9182;
+  background: url("../../ressources/toolset.png") top 28px left 0 no-repeat,
+    #90eab8;
+  background-size: contain;
+  width: 350px;
+  height: 137px;
+  border-radius: 6px 0 0 6px;
+  padding: 6px 0 6px 10px;
 }
 #toolset p {
-    background: #62dcad;
-    width: 17px;
-    height: 17px;
-    text-align: center;
-    cursor: move;
-    color: #0a9182;
-    padding: 2px;
-    border-radius: 3px;
-    margin: 0 4px;
+  background: #62dcad;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  cursor: move;
+  color: #0a9182;
+  padding: 2px;
+  border-radius: 3px;
+  margin: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 #toolset #allTools p {
-    background: #beeeec;
-    margin: 2px;
+  background: #beeeec;
+  margin: 2px;
 }
 #toolset .sortable-drag {
-    background: none !important;
-    opacity: 0.8;
+  background: none !important;
+  opacity: 0.8;
 }
 #reset {
-    display: inline-block;
-    text-decoration: underline;
-    margin-bottom: 20px;
-    color: #8d9cb0;
-    cursor: pointer;
-    font-size: 0.9em;
-    transition: 0.3s;
+  display: inline-block;
+  text-decoration: underline;
+  margin-bottom: 20px;
+  color: #8d9cb0;
+  cursor: pointer;
+  font-size: 0.9em;
+  transition: 0.3s;
 }
 #reset:hover {
-    color: #ff5739;
+  color: #ff5739;
 }

 /* COLORPICKER TAB */
@@ -209,65 +212,65 @@ p.toggle + p {
 #position,
 #type-icons,
 #zoom-level {
-    text-align: center;
-    display: flex;
-    justify-content: center;
+  text-align: center;
+  display: flex;
+  justify-content: center;
 }
 #position li,
 #type-icons li,
 #zoom-level li {
-    cursor: pointer;
-    list-style: none;
-    width: 200px;
-    border: 1px solid #f2f6fa;
-    box-shadow: 2px 5px 10px 0 #e9edf2;
-    color: #8991a3;
-    border-radius: 10px;
-    padding: 5px 10px;
-    margin: 10px;
-    text-align: center;
-    transition: 0.3s;
+  cursor: pointer;
+  list-style: none;
+  width: 200px;
+  border: 1px solid #f2f6fa;
+  box-shadow: 2px 5px 10px 0 #e9edf2;
+  color: #8991a3;
+  border-radius: 10px;
+  padding: 5px 10px;
+  margin: 10px;
+  text-align: center;
+  transition: 0.3s;
 }
 #position li:not(.active) img,
 #type-icons li:not(.active) img,
 #zoom-level li:not(.active) img {
-    opacity: 0.5;
-    transition: 0.3s;
+  opacity: 0.5;
+  transition: 0.3s;
 }
 #position li:not(.active):hover img,
 #type-icons li:not(.active):hover img,
 #zoom-level li:not(.active):hover img {
-    opacity: 0.7;
-    transition: 0.3s;
+  opacity: 0.7;
+  transition: 0.3s;
 }
 #position li.active,
 #type-icons li.active,
 #zoom-level li.active {
-    color: #2ba0e0;
+  color: #2ba0e0;
 }
 #position img {
-    width: 100%;
+  width: 100%;
 }
 #position li.active img {
-    filter: sepia(50%) hue-rotate(180deg) saturate(200%);
+  filter: sepia(50%) hue-rotate(180deg) saturate(200%);
 }

 #type-icons li {
-    width: 140px;
+  width: 140px;
 }

 #zoom-level {
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 #zoom-level li {
-    width: 130px;
+  width: 130px;
 }

 /* ABOUT */
 #update span {
-    color: #3b8bd5;
-    cursor: pointer;
+  color: #3b8bd5;
+  cursor: pointer;
 }
 #update i {
-    font-size: 1em;
+  font-size: 1em;
 }
@@ -63,18 +63,23 @@ function initTools(tools) {
  let html = "";
  let allTools = {
    top: { title: "Pin to Foreground", icon: "fa-map-pin" },
-    picker: { title: "Pick Color", icon: "fa-eye-dropper" },
-    tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
+    picker: { title: "Pick Color", svg: PICKER_ICON },
+    tags: { title: "Open Colorsbook", svg: COLORBOOK_ICON },
    shade: { title: "Toggle Shading", icon: "fa-tint" },
-    random: { title: "Set Random Color", icon: "fa-random" },
-    clean: { title: "Focus Mode", icon: "fa-adjust" },
+    random: { title: "Set Random Color", svg: RANDOM_ICON },
+    clean: { title: "Focus Mode", svg: CONTRAST_ICON },
    apply: { title: "Get Clipboard's Colors", icon: "fa-clone" },
    settings: { title: "Open Settings", icon: "fa-cog" },
  };

  for (let tool of tools) {
    if (allTools[tool] !== undefined) {
-      html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`;
+      if (allTools[tool].svg) {
+        html += `<p id="${tool}_button" title="${allTools[tool].title}">${allTools[tool].svg}</p>`;
+      } else {
+        html += `<p id="${tool}_button" title="${allTools[tool].title}"><i class="fas ${allTools[tool].icon}"></i></p>`;
+
+      }
    }
  }

@@ -0,0 +1,23 @@
+const PICKER_ICON = `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M183.287 34.2331C193.831 23.6892 211.075 23.8374 221.619 34.3815C232.163 44.9257 232.311 62.1695 221.766 72.7136L184.997 109.483C184.53 109.95 184.049 110.395 183.556 110.82L199.268 126.532C202.783 130.047 202.783 135.746 199.268 139.26L194.294 144.235C190.779 147.75 185.08 147.75 181.565 144.235L165.905 128.575L126.303 168.177L125.466 168.972C117.254 176.729 51.0324 238.268 34.3817 221.619C16.6216 203.859 87.8231 129.697 87.8231 129.697L127.425 90.0944L111.765 74.4343C108.25 70.9197 108.25 65.2214 111.765 61.7067L116.74 56.7311C120.255 53.2167 125.953 53.2167 129.468 56.7311L145.179 72.4421C145.604 71.9499 146.05 71.4697 146.517 71.0026L183.287 34.2331ZM99.2694 140.879C99.2505 140.898 99.2282 140.921 99.204 140.946C99.0848 141.071 98.9015 141.265 98.659 141.521C98.1736 142.035 97.4511 142.805 96.5311 143.798C94.6898 145.784 92.0613 148.656 88.9569 152.165C83.1659 158.709 75.8181 167.349 68.8397 176.489H92.8456C96.8887 173.116 100.616 169.891 103.835 167.043C107.343 163.938 110.217 161.311 112.203 159.469C113.195 158.549 113.965 157.827 114.479 157.341C114.736 157.099 114.928 156.915 115.054 156.796C115.073 156.777 115.092 156.759 115.108 156.744L152.13 119.723L136.277 103.871L99.2694 140.879Z" fill="currentColor"/>
+</svg>`;
+
+const COLORBOOK_ICON = `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M126.595 214.512C123.744 218.085 120.435 221.278 116.757 224H215C226.046 224 235 215.046 235 204V159C235 147.954 226.046 139 215 139H202.106L126.595 214.512Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.433 189.671L207.122 119.982C214.933 112.171 214.933 99.5079 207.122 91.6974L175.303 59.8776C167.492 52.0671 154.829 52.0672 147.018 59.8776L138.012 68.884V181.856C138.012 184.512 137.814 187.121 137.433 189.671Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63 32C51.9543 32 43 40.9543 43 52V181.5C43 204.972 62.0279 224 85.5 224C108.972 224 128 204.972 128 181.5V52C128 40.9543 119.046 32 108 32H63ZM85.5 195.124C93.0244 195.124 99.1241 189.024 99.1241 181.5C99.1241 173.976 93.0244 167.876 85.5 167.876C77.9756 167.876 71.8759 173.976 71.8759 181.5C71.8759 189.024 77.9756 195.124 85.5 195.124Z" fill="currentColor"/>
+</svg>
+`;
+
+const RANDOM_ICON = `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.347 107.147L160.542 75.9519C161.714 74.7804 163.613 74.7803 164.785 75.9519L181.048 92.2154C182.22 93.387 182.22 95.2865 181.048 96.458L149.853 127.654L129.347 107.147ZM114.752 103.357L120.154 97.955L151.35 66.7595C157.598 60.5111 167.729 60.5112 173.977 66.7595L190.241 83.023C196.489 89.2714 196.489 99.402 190.241 105.65L159.045 136.846L153.643 142.248L149.853 146.038L70.6504 225.24C64.402 231.489 54.2714 231.489 48.023 225.24L31.7595 208.977C25.5111 202.729 25.5111 192.598 31.7595 186.35L110.962 107.147L114.752 103.357Z" fill="currentColor"/>
+<path d="M128 55.4458C128 50.6382 112.726 34.9063 107.46 34.9063C112.726 34.9063 128 19.5077 128 14.3669C128 19.5077 143.642 34.9063 148.539 34.9063C143.713 34.9063 128 50.781 128 55.4458Z" fill="currentColor"/>
+<path d="M192.723 171.394C192.723 166.84 178.254 151.937 173.266 151.937C178.254 151.937 192.723 137.35 192.723 132.48C192.723 137.35 207.541 151.937 212.18 151.937C207.609 151.937 192.723 166.975 192.723 171.394Z" fill="currentColor"/>
+<path d="M220.395 95.6472C220.395 91.7057 207.872 78.8082 203.556 78.8082C207.872 78.8082 220.395 66.1838 220.395 61.9692C220.395 66.1838 233.218 78.8082 237.234 78.8082C233.277 78.8082 220.395 91.8228 220.395 95.6472Z" fill="currentColor"/>
+</svg>
+`;
+
+const CONTRAST_ICON = `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M199.558 128C199.558 167.52 167.52 199.558 128 199.558V56.4424C167.52 56.4424 199.558 88.4798 199.558 128ZM220.558 128C220.558 179.118 179.118 220.558 128 220.558C76.8819 220.558 35.4424 179.118 35.4424 128C35.4424 76.8818 76.8819 35.4424 128 35.4424C179.118 35.4424 220.558 76.8818 220.558 128Z" fill="currentColor"/>
+</svg>
+`
@@ -2,8 +2,6 @@

 let tabActive = "general";

-window.api.send("init-settings");
-
 /* TAB GENERAL */
 let options = {
  dragClass: "sortable-drag",
@@ -95,22 +93,30 @@ function initTools(selectedTools) {
  let htmlAll = "";
  let tools = {
    top: { title: "Pin to Foreground", icon: "fa-map-pin" },
-    picker: { title: "Pick Color", icon: "fa-eye-dropper" },
-    tags: { title: "Open Colorsbook", icon: "fa-bookmark" },
+    picker: { title: "Pick Color", svg: PICKER_ICON },
+    tags: { title: "Open Colorsbook", svg: COLORBOOK_ICON },
    shade: { title: "Toggle Shading", icon: "fa-tint" },
-    random: { title: "Set Random Color", icon: "fa-random" },
-    clean: { title: "Focus Mode", icon: "fa-adjust" },
+    random: { title: "Set Random Color", svg: RANDOM_ICON },
+    clean: { title: "Focus Mode", svg: CONTRAST_ICON },
    settings: { title: "Open Settings", icon: "fa-cog" },
  };

  for (let tool of selectedTools) {
    if (tools[tool] !== undefined && tool !== "apply") {
-      htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+      if (tools[tool].svg) {
+        htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}">${tools[tool].svg}</p>`;
+      } else {
+        htmlSelected += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+      }
    }
  }
  for (let tool in tools) {
    if (tools[tool] !== undefined && selectedTools.indexOf(tool) === -1) {
-      htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+      if (tools[tool].svg) {
+        htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}">${tools[tool].svg}</p>`;
+      } else {
+        htmlAll += `<p id="${tool}_button" class="tools" title="${tools[tool].title}"><i class="fa ${tools[tool].icon}"></i></p>`;
+      }
    }
  }

@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="./css/tippy.css" />
    <script src="./js/sortable.js"></script>
    <script src="./js/tippy.js"></script>
+    <script defer src="js/icons.js"></script>
    <script defer src="./js/settings.js"></script>
  </head>
  <body>