signal-styler 1.0.0

package/README.md

@@ -0,0 +1,120 @@
+# signal-styler 🎨✨
+
+Make theming Signal Desktop easy!
+
+Adds custom CSS to **Signal Desktop**.
+
+> ⚠️ This tool modifies the `app.asar` of Signal Desktop.  
+> Use at your own risk. Restart Signal after styling.
+
+---
+
+## 📦 Installation
+
+### Option 1: Install using **npm**
+
+This works for most platforms. Install Node.js and run:
+
+```bash
+npm install -g signal-styler
+```
+
+### Option 2: Install using **AUR**
+
+If you use an Arch Linux (btw) based distro, you can install it from the official [Arch User Repository](https://aur.archlinux.org/packages/signal-styler/) package.
+
+Using an AUR helper like paru, yay or trizen:
+
+```bash
+paru -S signal-styler
+```
+
+Or manually:
+
+```bash
+git clone https://aur.archlinux.org/signal-styler.git
+cd signal-styler
+makepkg -si
+```
+
+---
+
+## 🚀 Usage
+
+```bash
+signal-styler [options] custom.css
+```
+
+### Arguments
+
+- `custom.css`
+  Path to your custom stylesheet.
+
+### Options
+
+- `-a, --asar <path>`
+  Path to Signal Desktop’s `app.asar` to patch.
+  By default, the tool will try to locate it automatically.
+  Useful if Signal is installed via **Flatpak**.
+
+- `-v, --version`
+  Show the version number.
+
+---
+
+## 🔧 Examples
+
+Apply `my-theme.css` with auto-detected Signal path:
+
+```bash
+signal-styler my-theme.css
+```
+
+Specify the `asar` path explicitly, for example for Signal installed in userspace:
+
+```bash
+signal-styler -a ~/.var/app/org.signal.Signal/files/Signal/resources/app.asar my-style.css
+```
+
+If you get permission errors, run with `sudo`:
+
+```bash
+sudo signal-styler custom.css
+```
+
+---
+
+## 📝 Notes
+
+- Only tested on **Linux** for now. It could work on Windows and macOS too, but I haven't tested it.
+- File a [GitHub issue](https://github.com/m-obeid/signal-styler/issues) if you run into any issues.
+- The script expects Signal Desktop on Linux to be installed via **Flatpak**, if not you likely need to use `--asar` or `-a` to point to the right file.
+- You can safely re-run the tool with new CSS — it will overwrite the existing stylesheet.
+- Every time Signal updates, you will need to run the tool again to update the stylesheet.
+
+---
+
+## 🎨 Themes
+
+signal-styler does not include any themes by default other than purple.css from the GitHub repo, which needs to be downloaded separately.
+
+Here are some that could work (didn't test):
+
+- [Catppuccin for Signal Desktop](https://github.com/CalfMoon/signal-desktop)
+- [DDLC Yuri (wife) / Zero Two Theme](https://github.com/Foxunderground0/Signal-Themes)
+- [WhatsApp Theme (why)](https://github.com/CapnSparrow/signal-desktop-themes)
+
+To get one, you just need the CSS file, which might be named `manifest.css` or something like that.
+Do not report theme issues to me, but the original author of the theme.
+
+---
+
+## 👨‍💻 Author
+
+Made with ❤️ by [POCOGuy / m-obeid](https://github.com/m-obeid)
+
+---
+
+## 📜 License
+
+[GPL-3.0-only](LICENSE)

package/index.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+
+// signal-styler
+// Add custom CSS to Signal Desktop (Linux only for now)
+// https://github.com/m-obeid/signal-styler
+
+const { ArgumentParser } = require("argparse");
+const package = require("./package.json");
+const utils = require("./utils");
+
+const parser = new ArgumentParser({
+  description: package.description,
+});
+
+parser.add_argument("-v", "--version", {
+  action: "version",
+  version: package.version,
+});
+
+parser.add_argument("-a", "--asar", {
+  type: String,
+  help: "path to Signal Desktop asar to patch",
+});
+
+parser.add_argument("custom.css", {
+  type: String,
+  help: "path to custom stylesheet",
+});
+
+const args = parser.parse_args();
+
+utils.asarPath = args["asar"] || utils.assumeAsarPath();
+
+console.log(
+  `\x1b[34msignal-styler\x1b[0m \x1b[32mv${package.version}\x1b[0m - made by \x1b[35mPOCOGuy/m-obeid\x1b[0m`
+);
+console.log("");
+
+if (!utils.validateAsarPath()) {
+  console.error(
+    `\x1b[31mError\x1b[0m: Signal Desktop asar not found automatically.\x1b[0m`
+  );
+
+  if (!args["asar"]) {
+    if (process.platform === "win32" || process.platform === "darwin")
+      console.info(
+        "Is Signal installed in the default location? You can specify a custom asar path with the \x1b[35m-a\x1b[0m flag."
+      );
+    else
+      console.info(
+        "Is Signal installed via Flatpak? You can specify a custom asar path with the \x1b[35m-a\x1b[0m flag."
+      );
+  } else console.info("Is the path you specified correct?");
+  process.exit(1);
+}
+
+if (utils.checkNeedsSudo() && process.getuid() !== 0) {
+  console.error(
+    `\x1b[31mError\x1b[0m: You need to run signal-styler using \x1b[35msudo\x1b[0m or as root because Signal Desktop asar is installed to a protected directory.`
+  );
+  console.info(
+    "Run \x1b[35msudo signal-styler -h\x1b[0m for more information."
+  );
+  process.exit(1);
+}
+
+// create a temporary patchDir and buildDir
+utils.createTempDirs();
+
+console.log("\n1. Checking Signal Desktop asar ...");
+
+const manifest = utils.getManifest();
+
+if (!utils.isManifestModified(manifest)) {
+  console.log("\n2. \x1b[32mEnabling\x1b[0m Signal-Styler ...");
+
+  utils.patchManifest(manifest);
+} else
+  console.log("\n2. Signal-Styler already \x1b[32menabled\x1b[0m, continue ...");
+
+console.log("\n3. Installing custom CSS ...");
+
+// copy custom.css to patchDir
+utils.setStylesheet(args["custom.css"]);
+
+console.log("\n4. Building Signal Desktop asar ...");
+
+utils.build().then(() => {
+  utils.install();
+
+  // clean up
+  console.log("\n5. Cleaning up ...");
+  utils.cleanup();
+
+  console.log(
+    `\n\x1b[32mDone\x1b[0m! Restart Signal to see your beautiful new styles. \x1b[33m\u{1F3A8}\x1b[0m\x1b[33m\u{2728}\x1b[0m`
+  );
+});
+

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "signal-styler",
+  "version": "1.0.0",
+  "description": "Add custom CSS to Signal Desktop (Linux only for now)",
+  "main": "index.js",
+  "bin": {
+    "signal-styler": "./index.js"
+  },
+  "keywords": [],
+  "author": "POCOGuy",
+  "license": "GPL-3.0-only",
+  "dependencies": {
+    "@electron/asar": "^4.0.1",
+    "argparse": "^2.0.1"
+  },
+  "scripts": {
+    "start": "node ."
+  }
+}

package/purple.css

@@ -0,0 +1,334 @@
+/*
+ _   _               ____
+| \ | | __ ___   __ | __ )  __ _ _ __ ___
+|  \| |/ _` \ \ / / |  _ \ / _` | '__/ __|
+| |\  | (_| |\ V /  | |_) | (_| | |  \__ \
+|_| \_|\__,_| \_/   |____/ \__,_|_|  |___/
+*/
+
+/* left most bar */
+.NavTabs {
+  background-color: #231D33 !important;
+}
+
+.NavTabs__ItemButton:hover {
+  background-color: #3D3144 !important;
+}
+
+.NavTabs__Item[aria-selected="true"] > span > .NavTabs__ItemButton {
+  background-color: #51455A !important;
+}
+
+/* buttons in qr and link section of personal user profile */
+.UsernameLinkModalBody__actions__save,
+.UsernameLinkModalBody__actions__color {
+  background-color: #51455A !important;
+}
+
+/* second to left bar */
+.NavSidebar {
+  background-color: #231D33 !important;
+}
+
+/* view archive button when clicking on ... */
+.ContextMenu__popper--single-item {
+  background-color: #3D3144 !important;
+}
+
+.module-conversation-list__item--contact-or-conversation--is-selected {
+  background-color: #51455A !important;
+}
+
+/* no archived chat text */
+.module-left-pane__archive-helper-text {
+  background-color: #3D3144 !important;
+}
+
+.module-conversation-list__item--contact-or-conversation:hover,
+.module-conversation-list__item--contact-or-conversation:focus,
+.module-conversation-list__item--archive-button:hover,
+.module-conversation-list__item--archive-button:focus {
+  background-color: #3D3144 !important;
+}
+
+/*
+ _   _                        ____
+| | | | ___  _ __ ___   ___  |  _ \ __ _  __ _  ___
+| |_| |/ _ \| '_ ` _ \ / _ \ | |_) / _` |/ _` |/ _ \
+|  _  | (_) | | | | | |  __/ |  __/ (_| | (_| |  __/
+|_| |_|\___/|_| |_| |_|\___| |_|   \__,_|\__, |\___|
+                                         |___/
+*/
+
+.Inbox__no-conversation-open {
+  background-color: #221D32 !important;
+}
+
+/*
+ _____         _   _                  _
+|_   _|____  _| |_(_)_ __   __ _     / \   _ __ ___  __ _
+  | |/ _ \ \/ / __| | '_ \ / _` |   / _ \ | '__/ _ \/ _` |
+  | |  __/>  <| |_| | | | | (_| |  / ___ \| | |  __/ (_| |
+  |_|\___/_/\_\\__|_|_| |_|\__, | /_/   \_\_|  \___|\__,_|
+                           |___/
+*/
+
+/* the bar at the top containing your contact name */
+.module-ConversationHeader {
+  background-color: #221D33 !important;
+}
+
+/* call, search, etc button present at conversation header */
+.module-ConversationHeader__button:hover,
+.module-ConversationHeader__button:focus {
+  background-color: #3D3144 !important;
+}
+
+/* ... menu at conversation header */
+.react-contextmenu {
+  background-color: #3D3144 !important;
+}
+
+/* ... menu hover */
+.react-contextmenu-item--selected {
+  background-color: #51455A !important;
+}
+
+/* the vm player that appears at top */
+.MiniPlayer {
+  background-color: #51455A !important;
+}
+
+/* conversation area */
+.module-timeline {
+  background-color: #221D32 !important;
+}
+
+/* messages */
+.module-message__container--incoming {
+  background-color: #3D3144 !important;
+}
+
+/* replying box */
+.module-quote--incoming > .module-quote__primary,
+.module-quote--incoming > .module-quote__icon-container {
+  background-color: #51455A !important;
+  border: 0px !important;
+}
+
+/* call again button */
+.module-Button--system-message {
+  background-color: #51455A !important;
+}
+
+/* the area where you write message, attach file, send vm, etc. */
+.CompositionArea {
+  background-color: #221D33 !important;
+}
+
+/* the actual typing box */
+.module-composition-input__input {
+  background-color: #3D3144 !important;
+}
+
+/* the today or yesterday thing that appears when you scroll up */
+.TimelineDateHeader--floating {
+  background-color: #3D3144 !important;
+}
+
+.TimelineFloatingHeader__spinner-container {
+  background-color: #3D3144 !important;
+}
+
+.ScrollDownButton {
+  background-color: #3D3144 !important;
+}
+
+/*
+  ____      _ _ _                  _
+ / ___|__ _| | (_)_ __   __ _     / \   _ __ ___  __ _
+| |   / _` | | | | '_ \ / _` |   / _ \ | '__/ _ \/ _` |
+| |__| (_| | | | | | | | (_| |  / ___ \| | |  __/ (_| |
+ \____\__,_|_|_|_|_| |_|\__, | /_/   \_\_|  \___|\__,_|
+                        |___/
+*/
+
+/* background when contact isn't selected */
+.CallsTab__EmptyState {
+  background-color: #221D32 !important;
+}
+
+/* background when contact is selected */
+.CallsTab__ConversationCallDetails {
+  background-color: #221D32 !important;
+}
+
+/* contact list sidebar item */
+.CallsList__ItemTile:hover {
+  background-color: #3D3144 !important;
+}
+
+.CallsList__ItemTile[aria-selected="true"] {
+  background-color: #51455A !important;
+}
+
+.CallsNewCall_ItemActionButton {
+  background-color: #685870 !important;
+}
+
+/*
+ ____  _                        _
+/ ___|| |_ ___  _ __ _   _     / \   _ __ ___  __ _
+\___ \| __/ _ \| '__| | | |   / _ \ | '__/ _ \/ _` |
+ ___) | || (_) | |  | |_| |  / ___ \| | |  __/ (_| |
+|____/ \__\___/|_|   \__, | /_/   \_\_|  \___|\__,_|
+                     |___/
+*/
+
+.Stories__placeholder {
+  background-color: #221D32 !important;
+}
+
+/*
+ _   _                 ____             __ _ _
+| | | |___  ___ _ __  |  _ \ _ __ ___  / _(_) | ___
+| | | / __|/ _ \ '__| | |_) | '__/ _ \| |_| | |/ _ \
+| |_| \__ \  __/ |    |  __/| | | (_) |  _| | |  __/
+ \___/|___/\___|_|    |_|   |_|  \___/|_| |_|_|\___|
+*/
+
+/* background of user details panel */
+.ConversationPanel,
+.ConversationPanel__header {
+  background-color: #221D32 !important;
+}
+
+/* disappering message timer */
+.module-select > select {
+  background-color: #3D3144 !important;
+}
+
+/* nickname, chatcolor, add to group and other button */
+.ConversationDetails-panel-row__root--button:hover {
+  background-color: #3D3144 !important;
+}
+
+/* nickname edit menu*/
+.Input__container {
+  background-color: #3D3144 !important;
+  border-color: #9399b2 !important;
+}
+
+/* add to group button background color */
+.ConversationDetails-groups__add-to-group-icon {
+  background-color: #3D3144 !important;
+}
+
+/* the user profile, signal connection and safety number popup */
+.module-Modal {
+  background-color: #221D32 !important;
+}
+
+/* mark as varified or clear verification button */
+.module-SafetyNumberViewer__button > button {
+  background-color: #51455A !important;
+}
+
+/*
+           _
+ _ __ ___ (_)___  ___
+| '_ ` _ \| / __|/ __|
+| | | | | | \__ \ (__
+|_| |_| |_|_|___/\___|
+*/
+
+/* background when viewing image */
+.Lightbox__animated {
+  background-color: #221D32 !important;
+}
+
+/* many of the buttons */
+.module-Button {
+  background-color: #51455A !important;
+}
+
+.module-Button:hover {
+  background-color: #3D3144 !important;
+}
+
+/*
+ ____       _   _   _
+/ ___|  ___| |_| |_(_)_ __   __ _ ___
+\___ \ / _ \ __| __| | '_ \ / _` / __|
+ ___) |  __/ |_| |_| | | | | (_| \__ \
+|____/ \___|\__|\__|_|_| |_|\__, |___/
+                            |___/
+*/
+
+/* side pannel of settings */
+.Preferences__page-selector {
+  background-color: #221D33 !important;
+}
+
+/* main settings pannel */
+.Preferences, .Preferences__settings-pane {
+  background-color: #221D33 !important;
+}
+
+/* page selector selected background */
+.Preferences__button--selected, .Preferences__profile-chip--selected {
+  background-color: #51455A !important;
+}
+
+.Preferences__profile-chip:focus, .Preferences__button:focus {
+  background-color: #3D3144 !important;
+}
+
+.Preferences__profile-chip:hover, .Preferences__button:hover {
+  background-color: #342C3A !important;
+}
+
+/* language and chat color button */
+.Preferences__control--clickable:hover {
+  background-color: #3D3144 !important;
+}
+
+.module-Button--secondary--destructive {
+  color: #f38ba8 !important;
+}
+
+.AvatarEditor__button {
+  background-color: #51455A !important;
+}
+
+/*
+  ____      _ _
+ / ___|__ _| | |
+| |   / _` | | |
+| |__| (_| | | |
+ \____\__,_|_|_|
+*/
+
+.module-calling__container {
+  background-color: #221D32 !important;
+}
+
+/* cancel and settings button */
+.CallSettingsButton__Button {
+  background-color: #3D3144 !important;
+}
+
+/* the bar at the bottom during calls */
+.CallControls {
+  background-color: #3D3144 !important;
+}
+
+/* mike and camera button */
+.CallingButton__icon {
+  background-color: #685870 !important;
+}
+
+/* your pfp box during call */
+.module-calling__background {
+  background-color: #3D3144 !important;
+}