signal-styler 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +56 -0
  2. package/index.js +16 -3
  3. package/package.json +7 -6
  4. package/purple.css +547 -219
  5. package/utils.js +52 -6
package/README.md CHANGED
@@ -57,6 +57,62 @@ signal-styler [options] custom.css
57
57
  By default, the tool will try to locate it automatically.
58
58
  Useful if Signal is installed via **Flatpak**.
59
59
 
60
+ - `-t, --tray-icons <path>`
61
+ Path to the custom tray icons folder.
62
+ Useful if you want to override the default tray icons with your own.
63
+
64
+ The tray icons folder should have the following structure:
65
+
66
+ ```bash
67
+ tray-icons
68
+ ├── alert
69
+ │   ├── signal-tray-icon-16x16-alert-1.png
70
+ │   ├── signal-tray-icon-16x16-alert-2.png
71
+ │   ├── signal-tray-icon-16x16-alert-3.png
72
+ │   ├── signal-tray-icon-16x16-alert-4.png
73
+ │   ├── signal-tray-icon-16x16-alert-5.png
74
+ │   ├── signal-tray-icon-16x16-alert-6.png
75
+ │   ├── signal-tray-icon-16x16-alert-7.png
76
+ │   ├── signal-tray-icon-16x16-alert-8.png
77
+ │   ├── signal-tray-icon-16x16-alert-9.png
78
+ │   ├── signal-tray-icon-16x16-alert-9+.png
79
+ │   ├── signal-tray-icon-256x256-alert-1.png
80
+ │   ├── signal-tray-icon-256x256-alert-2.png
81
+ │   ├── signal-tray-icon-256x256-alert-3.png
82
+ │   ├── signal-tray-icon-256x256-alert-4.png
83
+ │   ├── signal-tray-icon-256x256-alert-5.png
84
+ │   ├── signal-tray-icon-256x256-alert-6.png
85
+ │   ├── signal-tray-icon-256x256-alert-7.png
86
+ │   ├── signal-tray-icon-256x256-alert-8.png
87
+ │   ├── signal-tray-icon-256x256-alert-9.png
88
+ │   ├── signal-tray-icon-256x256-alert-9+.png
89
+ │   ├── signal-tray-icon-32x32-alert-1.png
90
+ │   ├── signal-tray-icon-32x32-alert-2.png
91
+ │   ├── signal-tray-icon-32x32-alert-3.png
92
+ │   ├── signal-tray-icon-32x32-alert-4.png
93
+ │   ├── signal-tray-icon-32x32-alert-5.png
94
+ │   ├── signal-tray-icon-32x32-alert-6.png
95
+ │   ├── signal-tray-icon-32x32-alert-7.png
96
+ │   ├── signal-tray-icon-32x32-alert-8.png
97
+ │   ├── signal-tray-icon-32x32-alert-9.png
98
+ │   ├── signal-tray-icon-32x32-alert-9+.png
99
+ │   ├── signal-tray-icon-48x48-alert-1.png
100
+ │   ├── signal-tray-icon-48x48-alert-2.png
101
+ │   ├── signal-tray-icon-48x48-alert-3.png
102
+ │   ├── signal-tray-icon-48x48-alert-4.png
103
+ │   ├── signal-tray-icon-48x48-alert-5.png
104
+ │   ├── signal-tray-icon-48x48-alert-6.png
105
+ │   ├── signal-tray-icon-48x48-alert-7.png
106
+ │   ├── signal-tray-icon-48x48-alert-8.png
107
+ │   ├── signal-tray-icon-48x48-alert-9.png
108
+ │   └── signal-tray-icon-48x48-alert-9+.png
109
+ └── base
110
+ ├── signal-tray-icon-16x16-base.png
111
+ ├── signal-tray-icon-256x256-base.png
112
+ ├── signal-tray-icon-32x32-base.png
113
+ └── signal-tray-icon-48x48-base.png
114
+ ```
115
+
60
116
  - `-v, --version`
61
117
  Show the version number.
62
118
 
package/index.js CHANGED
@@ -22,6 +22,11 @@ parser.add_argument("-a", "--asar", {
22
22
  help: "path to Signal Desktop asar to patch",
23
23
  });
24
24
 
25
+ parser.add_argument("-t", "--tray-icons", {
26
+ type: String,
27
+ help: "path to custom tray icons folder",
28
+ });
29
+
25
30
  parser.add_argument("custom.css", {
26
31
  type: String,
27
32
  help: "path to custom stylesheet",
@@ -76,13 +81,22 @@ if (!utils.isManifestModified(manifest)) {
76
81
 
77
82
  utils.patchManifest(manifest);
78
83
  } else
79
- console.log("\n2. Signal-Styler already \x1b[32menabled\x1b[0m, continue ...");
84
+ console.log(
85
+ "\n2. Signal-Styler already \x1b[32menabled\x1b[0m, continue ..."
86
+ );
80
87
 
81
- console.log("\n3. Installing custom CSS ...");
88
+ console.log(
89
+ "\n3. Installing custom CSS " +
90
+ (args["tray-icons"] ? " and tray icons " : "") +
91
+ "..."
92
+ );
82
93
 
83
94
  // copy custom.css to patchDir
84
95
  utils.setStylesheet(args["custom.css"]);
85
96
 
97
+ if (args["tray-icons"])
98
+ utils.setTrayIcons(args["tray-icons"]);
99
+
86
100
  console.log("\n4. Building Signal Desktop asar ...");
87
101
 
88
102
  utils.build().then(() => {
@@ -96,4 +110,3 @@ utils.build().then(() => {
96
110
  `\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`
97
111
  );
98
112
  });
99
-
package/package.json CHANGED
@@ -1,19 +1,20 @@
1
1
  {
2
2
  "name": "signal-styler",
3
- "version": "1.0.0",
4
- "description": "Add custom CSS to Signal Desktop (Linux only for now)",
3
+ "version": "1.1.0",
4
+ "description": "Add custom CSS to Signal Desktop",
5
5
  "main": "index.js",
6
6
  "bin": {
7
7
  "signal-styler": "./index.js"
8
8
  },
9
+ "scripts": {
10
+ "start": "node ."
11
+ },
9
12
  "keywords": [],
10
13
  "author": "POCOGuy",
11
14
  "license": "GPL-3.0-only",
15
+ "packageManager": "pnpm@10.15.0",
12
16
  "dependencies": {
13
17
  "@electron/asar": "^4.0.1",
14
18
  "argparse": "^2.0.1"
15
- },
16
- "scripts": {
17
- "start": "node ."
18
19
  }
19
- }
20
+ }
package/purple.css CHANGED
@@ -1,334 +1,662 @@
1
- /*
2
- _ _ ____
3
- | \ | | __ ___ __ | __ ) __ _ _ __ ___
4
- | \| |/ _` \ \ / / | _ \ / _` | '__/ __|
5
- | |\ | (_| |\ V / | |_) | (_| | | \__ \
6
- |_| \_|\__,_| \_/ |____/ \__,_|_| |___/
7
- */
1
+ .dark-theme .module-ConversationHeader {
2
+ background-color: #1E132B !important;
3
+ }
4
+
5
+ .dark-theme .ConversationView__pane {
6
+ background-color: #191023 !important;
7
+ }
8
8
 
9
- /* left most bar */
10
- .NavTabs {
11
- background-color: #231D33 !important;
9
+ .dark-theme .NavTabs__Item:active .NavTabs__ItemButton, .dark-theme .NavTabs__Item[aria-selected="true"] .NavTabs__ItemButton {
10
+ background-color: #342A40 !important;
12
11
  }
13
12
 
14
- .NavTabs__ItemButton:hover {
15
- background-color: #3D3144 !important;
13
+ .dark-theme .NavSidebar {
14
+ background-color: #1E132B !important;
15
+ border-inline-end: none !important;
16
16
  }
17
17
 
18
- .NavTabs__Item[aria-selected="true"] > span > .NavTabs__ItemButton {
19
- background-color: #51455A !important;
18
+ .dark-theme .NavTabs {
19
+ background-color: #1E132B !important;
20
+ border-inline-end: none !important;
20
21
  }
21
22
 
22
- /* buttons in qr and link section of personal user profile */
23
- .UsernameLinkModalBody__actions__save,
24
- .UsernameLinkModalBody__actions__color {
25
- background-color: #51455A !important;
23
+ .dark-theme .module-composition-input__input {
24
+ background-color: #342A40 !important;
25
+ color: #fff !important;
26
26
  }
27
27
 
28
- /* second to left bar */
29
- .NavSidebar {
30
- background-color: #231D33 !important;
28
+ .FunPopover__Dialog {
29
+ border-radius: 8px;
30
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
31
+ background: light-dark(#ffffff, #342A40) !important;
32
+ user-select: none;
33
+ overflow: clip;
34
+ -webkit-app-region: no-drag;
31
35
  }
32
36
 
33
- /* view archive button when clicking on ... */
34
- .ContextMenu__popper--single-item {
35
- background-color: #3D3144 !important;
37
+ .LeftPaneSearchInput__FilterButton--pressed {
38
+ border-radius: 9999px;
39
+ background: #893EA3 !important;
36
40
  }
37
41
 
38
- .module-conversation-list__item--contact-or-conversation--is-selected {
39
- background-color: #51455A !important;
42
+ .ContactModal__official-badge::after {
43
+ -webkit-mask: url("../images/icons/v3/official/official-fill-compact.svg") no-repeat center;
44
+ -webkit-mask-size: 100%;
45
+ background-color: #893EA3 !important;
40
46
  }
41
47
 
42
- /* no archived chat text */
43
- .module-left-pane__archive-helper-text {
44
- background-color: #3D3144 !important;
48
+ .FunTabs__Tab:hover .FunTabs__TabButton, .FunTabs__Tab:focus .FunTabs__TabButton {
49
+ background: light-dark(#f6f6f6, #393045) !important;
45
50
  }
46
51
 
47
- .module-conversation-list__item--contact-or-conversation:hover,
48
- .module-conversation-list__item--contact-or-conversation:focus,
49
- .module-conversation-list__item--archive-button:hover,
50
- .module-conversation-list__item--archive-button:focus {
51
- background-color: #3D3144 !important;
52
+ #LeftPane > div > div.NavSidebar__Content > nav > div.module-left-pane__list--measure > div > button {
53
+ --color-fill-floating: #342A40 !important;
54
+ --color-fill-floating-pressed: #3f334d !important;
52
55
  }
53
56
 
54
- /*
55
- _ _ ____
56
- | | | | ___ _ __ ___ ___ | _ \ __ _ __ _ ___
57
- | |_| |/ _ \| '_ ` _ \ / _ \ | |_) / _` |/ _` |/ _ \
58
- | _ | (_) | | | | | | __/ | __/ (_| | (_| | __/
59
- |_| |_|\___/|_| |_| |_|\___| |_| \__,_|\__, |\___|
60
- |___/
61
- */
57
+ .dark-theme .ContextMenu__option:hover {
58
+ background-color: #393045 !important;
59
+ }
60
+ .dark-theme .ContextMenu__popper {
61
+ background: #342A40 !important;
62
+ }
63
+ .FunTabs__TabButtonIndicator {
64
+ position: absolute;
65
+ z-index: 1;
66
+ border-radius: 9999px;
67
+ top: 0;
68
+ inset-inline-start: 0;
69
+ width: 100%;
70
+ height: 100%;
71
+ cursor: pointer;
72
+ pointer-events: none;
73
+ background: light-dark(#e9e9e9, #483F53) !important;
74
+ }
62
75
 
63
- .Inbox__no-conversation-open {
64
- background-color: #221D32 !important;
76
+ .FunTooltip {
77
+ position: relative;
78
+ z-index: 100000;
79
+ max-width: calc(32ch + 16px);
80
+ padding-block: 4px;
81
+ padding-inline: 8px;
82
+ background: light-dark(#ffffff, #393045) !important;
83
+ color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
84
+ border-radius: 6px;
85
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3), 0px 0px 4px rgba(0, 0, 0, 0.05);
86
+ overflow: hidden;
87
+ text-overflow: ellipsis;
88
+ white-space: nowrap;
89
+ pointer-events: none;
90
+ user-select: none;
91
+ font-size: 13px;
92
+ line-height: 18px;
93
+ letter-spacing: -0.03px;
65
94
  }
66
95
 
67
- /*
68
- _____ _ _ _
69
- |_ _|____ _| |_(_)_ __ __ _ / \ _ __ ___ __ _
70
- | |/ _ \ \/ / __| | '_ \ / _` | / _ \ | '__/ _ \/ _` |
71
- | | __/> <| |_| | | | | (_| | / ___ \| | | __/ (_| |
72
- |_|\___/_/\_\\__|_|_| |_|\__, | /_/ \_\_| \___|\__,_|
73
- |___/
74
- */
75
96
 
76
- /* the bar at the top containing your contact name */
77
- .module-ConversationHeader {
78
- background-color: #221D33 !important;
97
+ .FunItem__Button {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ width: 100%;
102
+ height: 100%;
103
+ vertical-align: top;
104
+ padding: 2px;
105
+ border-radius: 10px;
106
+ border: 1px solid light-dark(#ffffff, #00000000) !important;
107
+ }
108
+ .FunItem__Button:hover, .FunItem__Button:focus {
109
+ background: light-dark(#f6f6f6, #393045) !important;
110
+ }
111
+
112
+ .FunSearch__Input {
113
+ appearance: none;
114
+ width: 100%;
115
+ border-radius: 8px;
116
+ border: none;
117
+ padding-block: 6px;
118
+ padding-inline-end: 12px;
119
+ padding-inline-start: 42px;
120
+ font-size: 14px;
121
+ line-height: 20px;
122
+ letter-spacing: -0.08px;
123
+ color: light-dark(#000000, #ffffff);
124
+ background: light-dark(#e9e9e9, #483F53) !important;
125
+ }
126
+
127
+ .FunTabs__TabPanelInner {
128
+ background: light-dark(#ffffff, #342A40) !important;
129
+ }
130
+
131
+ .FunSubNav__ListBoxItem:hover .FunSubNav__ListBoxItem__Button {
132
+ background: light-dark(#f6f6f6, #393045) !important;
133
+ }
134
+
135
+ .FunSubNav__ListBoxItem__ButtonIndicator {
136
+ z-index: 0;
137
+ position: absolute;
138
+ border-radius: 10px;
139
+ top: 0;
140
+ inset-inline-start: 0;
141
+ width: 100%;
142
+ height: 100%;
143
+ background: light-dark(#e9e9e9, #483F53) !important;
79
144
  }
80
145
 
81
- /* call, search, etc button present at conversation header */
82
- .module-ConversationHeader__button:hover,
83
- .module-ConversationHeader__button:focus {
84
- background-color: #3D3144 !important;
146
+ .FunSubNav__Scroller::before {
147
+ /* stylelint-disable-next-line liberty/use-logical-spec */
148
+ left: 0;
149
+ background: linear-gradient(to right, light-dark(#ffffff, #342A40) 20%, transparent) !important;
85
150
  }
151
+ .FunSubNav__Scroller::after {
152
+ /* stylelint-disable-next-line liberty/use-logical-spec */
153
+ right: 0;
154
+ background: linear-gradient(to left, light-dark(#ffffff, #342A40) 20%, transparent) !important;
155
+ }
156
+
86
157
 
87
- /* ... menu at conversation header */
88
- .react-contextmenu {
89
- background-color: #3D3144 !important;
158
+ .FunSubNav__ScrollerMask--Left {
159
+ /* stylelint-disable-next-line liberty/use-logical-spec */
160
+ left: 0;
161
+ background: linear-gradient(to right, light-dark(#ffffff, #342a40) 20%, transparent) !important;
90
162
  }
91
163
 
92
- /* ... menu hover */
93
- .react-contextmenu-item--selected {
94
- background-color: #51455A !important;
164
+ .FunSubNav__ScrollerMask--Right {
165
+ /* stylelint-disable-next-line liberty/use-logical-spec */
166
+ right: 0;
167
+ background: linear-gradient(to left, light-dark(#ffffff, #342a40) 20%, transparent) !important;
95
168
  }
96
169
 
97
- /* the vm player that appears at top */
98
- .MiniPlayer {
99
- background-color: #51455A !important;
170
+
171
+ .FunSubNav__Button:hover {
172
+ background: light-dark(#f6f6f6, #393045) !important;
100
173
  }
101
174
 
102
- /* conversation area */
103
- .module-timeline {
104
- background-color: #221D32 !important;
175
+
176
+ .FunButton[aria-expanded=true] {
177
+ background: light-dark(#e9e9e9, #393045) !important;
105
178
  }
106
179
 
107
- /* messages */
108
- .module-message__container--incoming {
109
- background-color: #3D3144 !important;
180
+
181
+ .CompositionArea__send-button::after {
182
+ -webkit-mask: url("../images/icons/v3/send/send-fill.svg") no-repeat center;
183
+ -webkit-mask-size: 100%;
184
+ background-color: #fff !important;
110
185
  }
111
186
 
112
- /* replying box */
113
- .module-quote--incoming > .module-quote__primary,
114
- .module-quote--incoming > .module-quote__icon-container {
115
- background-color: #51455A !important;
116
- border: 0px !important;
187
+
188
+ .dark-theme .module-conversation-list__item--contact-or-conversation--is-selected {
189
+ background-color: #393045 !important;
117
190
  }
118
191
 
119
- /* call again button */
120
- .module-Button--system-message {
121
- background-color: #51455A !important;
192
+ .module-conversation-list__item--contact-or-conversation:hover:not(:disabled, .module-conversation-list__item--contact-or-conversation--disabled, .module-conversation-list__item--contact-or-conversation--is-selected), .module-conversation-list__item--contact-or-conversation[data-axo-contextmenu-state=open] {
193
+ background-color: light-dark(#e9e9e9, #2B2137) !important;
194
+ }
195
+ .module-conversation-list__item--contact-or-conversation:hover:not(:disabled, .module-conversation-list__item--contact-or-conversation--disabled, .module-conversation-list__item--contact-or-conversation--is-selected) .module-conversation-list__item--contact-or-conversation__unread-indicator, .module-conversation-list__item--contact-or-conversation[data-axo-contextmenu-state=open] .module-conversation-list__item--contact-or-conversation__unread-indicator {
196
+ border-color: light-dark(#e9e9e9, #2B2137) !important;
197
+ }
198
+ .keyboard-mode .module-conversation-list__item--contact-or-conversation:focus:not(:disabled, .keyboard-mode .module-conversation-list__item--contact-or-conversation--disabled, .keyboard-mode .module-conversation-list__item--contact-or-conversation--is-selected) {
199
+ background-color: light-dark(#e9e9e9, #2B2137) !important;
122
200
  }
201
+ .keyboard-mode .module-conversation-list__item--contact-or-conversation:focus:not(:disabled, .keyboard-mode .module-conversation-list__item--contact-or-conversation--disabled, .keyboard-mode .module-conversation-list__item--contact-or-conversation--is-selected) .module-conversation-list__item--contact-or-conversation__unread-indicator {
202
+ border-color: light-dark(#e9e9e9, #2B2137) !important;
203
+ }
204
+
123
205
 
124
- /* the area where you write message, attach file, send vm, etc. */
125
- .CompositionArea {
126
- background-color: #221D33 !important;
206
+ .dark-theme .module-message__container--incoming {
207
+ background-color: #342A40 !important;
208
+ color: #e9e9e9;
127
209
  }
128
210
 
129
- /* the actual typing box */
130
- .module-composition-input__input {
131
- background-color: #3D3144 !important;
211
+ .ConversationDetails-membership-list__add-members-icon, .ConversationDetails-membership-list__add-to-group-icon, .ConversationDetails-groups__add-members-icon, .ConversationDetails-groups__add-to-group-icon {
212
+ align-items: center;
213
+ border-radius: 100%;
214
+ display: flex;
215
+ height: 32px;
216
+ justify-content: center;
217
+ width: 32px;
218
+ background: light-dark(#f6f6f6, #342A40) !important;
132
219
  }
133
220
 
134
- /* the today or yesterday thing that appears when you scroll up */
135
- .TimelineDateHeader--floating {
136
- background-color: #3D3144 !important;
221
+
222
+ .module-Modal__close-button:hover, .module-Modal__close-button:focus {
223
+ box-shadow: 0 0 0 2px #8d2ced !important;
137
224
  }
138
225
 
139
- .TimelineFloatingHeader__spinner-container {
140
- background-color: #3D3144 !important;
226
+ .dark-theme .module-Modal {
227
+ background: #1E132B !important;
228
+ color: #e9e9e9;
141
229
  }
142
230
 
143
- .ScrollDownButton {
144
- background-color: #3D3144 !important;
231
+
232
+ .keyboard-mode .CircleCheckbox__checkbox input:focus::before {
233
+ border-color: #893EA3 !important;
145
234
  }
146
235
 
147
- /*
148
- ____ _ _ _ _
149
- / ___|__ _| | (_)_ __ __ _ / \ _ __ ___ __ _
150
- | | / _` | | | | '_ \ / _` | / _ \ | '__/ _ \/ _` |
151
- | |__| (_| | | | | | | | (_| | / ___ \| | | __/ (_| |
152
- \____\__,_|_|_|_|_| |_|\__, | /_/ \_\_| \___|\__,_|
153
- |___/
154
- */
155
236
 
156
- /* background when contact isn't selected */
157
- .CallsTab__EmptyState {
158
- background-color: #221D32 !important;
237
+ .CircleCheckbox__checkbox input[type=checkbox]:checked:not([disabled])::before {
238
+ background: #893EA3 !important;
239
+ border: 1.5px solid #893EA3 !important;
159
240
  }
160
241
 
161
- /* background when contact is selected */
162
- .CallsTab__ConversationCallDetails {
163
- background-color: #221D32 !important;
242
+ .dark-theme .RecordingComposer__content {
243
+ background: #342A40 !important;
164
244
  }
165
245
 
166
- /* contact list sidebar item */
167
- .CallsList__ItemTile:hover {
168
- background-color: #3D3144 !important;
246
+ .MediaEditor__close:hover, .MediaEditor__close:focus {
247
+ box-shadow: 0 0 0 2px #8d2ced !important;
169
248
  }
170
249
 
171
- .CallsList__ItemTile[aria-selected="true"] {
172
- background-color: #51455A !important;
250
+ .ConversationDetails-panel-row__root--button:hover:not(:disabled) {
251
+ background-color: light-dark(#f6f6f6, #2B2137) !important;
173
252
  }
174
253
 
175
- .CallsNewCall_ItemActionButton {
176
- background-color: #685870 !important;
254
+ .module-Modal__close-button:hover, .module-Modal__close-button:focus {
255
+ box-shadow: 0 0 0 2px #8d2ced !important;
177
256
  }
178
257
 
179
- /*
180
- ____ _ _
181
- / ___|| |_ ___ _ __ _ _ / \ _ __ ___ __ _
182
- \___ \| __/ _ \| '__| | | | / _ \ | '__/ _ \/ _` |
183
- ___) | || (_) | | | |_| | / ___ \| | | __/ (_| |
184
- |____/ \__\___/|_| \__, | /_/ \_\_| \___|\__,_|
185
- |___/
186
- */
258
+ .dark-theme .StoryListItem__button:hover, .dark-theme .StoryListItem__button--active {
259
+ background: #2B2137 !important;
260
+ }
261
+
262
+ .CallsTab__EmptyState, .CallsTab__ConversationCallDetails {
263
+ background: #1E132B !important;
264
+ }
265
+
266
+ .dark-theme.keyboard-mode .StoryListItem__button:focus {
267
+ background: #2B2137 !important;
268
+ }
269
+
270
+ .dark-theme .Stories {
271
+ background: #1E132B !important;
272
+ }
273
+
274
+ .dark-theme .MyStories__story__more__button {
275
+ background: #342A40 !important;
276
+ }
277
+
278
+ .dark-theme .MyStories__story__more__button:hover {
279
+ background: #40364B !important;
280
+ }
281
+
282
+ .dark-theme .MyStories__story:hover .MyStories__story__download,
283
+ .dark-theme .MyStories__story:hover .MyStories__story__more__button {
284
+ background: #40364B !important;
285
+ }
286
+
287
+ .MyStories__avatar__add-story {
288
+ border-radius: 9999px;
289
+ align-items: center;
290
+ background: #9140c9 !important;
291
+ border: 2px solid;
292
+ bottom: -2px;
293
+ display: flex;
294
+ height: 20px;
295
+ justify-content: center;
296
+ position: absolute;
297
+ inset-inline-end: -4px;
298
+ width: 20px;
299
+ z-index: 1;
300
+ }
301
+
302
+ .StoryCreator {
303
+ background-color: #1E132B80 !important;
304
+ background: linear-gradient(180deg, #1e132b, #1E132B80) !important;
305
+ backdrop-filter: blur(12px) !important;
306
+ display: flex;
307
+ flex-direction: column;
308
+ width: 100vw;
309
+ height: 100vh;
310
+ inset-inline-start: 0;
311
+ position: absolute;
312
+ top: 0;
313
+ user-select: none;
314
+ z-index: 99;
315
+ }
316
+
317
+ .MediaEditor__toolbar {
318
+ align-items: center;
319
+ background-color: transparent !important;
320
+ border-radius: 10px;
321
+ color: #ffffff;
322
+ display: flex;
323
+ height: 36px;
324
+ justify-content: center;
325
+ padding-block: 14px;
326
+ padding-inline: 12px;
327
+ margin-inline: 16px;
328
+ min-width: 418px;
329
+ }
330
+
331
+ .MediaEditor {
332
+ background-color: #1E132B80 !important;
333
+ background: linear-gradient(180deg, #1e132b, #1E132B80) !important;
334
+ backdrop-filter: blur(12px) !important;
335
+ display: flex;
336
+ flex-direction: column;
337
+ width: 100vw;
338
+ height: 100vh;
339
+ inset-inline-start: 0;
340
+ top: 0;
341
+ position: absolute;
342
+ user-select: none;
343
+ -webkit-app-region: no-drag;
344
+ z-index: 99;
345
+ }
346
+
347
+ .dark-theme .CallsList__Item--selected .CallsList__ItemTile {
348
+ background-color: #393045 !important;
349
+ }
350
+
351
+ .dark-theme .MyStories__story:hover {
352
+ background: #2B2137 !important;
353
+ }
354
+
355
+ .dark-theme .module-Button--details {
356
+ background-color: #483F53 !important;
357
+ color: #e9e9e9;
358
+ }
187
359
 
188
360
  .Stories__placeholder {
189
- background-color: #221D32 !important;
361
+ color: #5e5e5e;
362
+ background: transparent !important;
363
+ }
364
+
365
+ .FunGrid__HeaderButton:hover, .FunGrid__HeaderButton:focus {
366
+ background: light-dark(#f6f6f6, #393045) !important;
367
+ }
368
+
369
+ .FunGrid__HeaderPopoverDialog {
370
+ width: 328px;
371
+ border-radius: 8px;
372
+ box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
373
+ background: light-dark(#ffffff, #393045) !important;
374
+ user-select: none;
375
+ overflow: clip;
376
+ padding: 16px;
377
+ display: flex;
378
+ flex-direction: column;
379
+ align-items: center;
380
+ gap: 12px;
381
+ }
382
+
383
+ .dark-theme .Input__container {
384
+ background: #342A40 !important;
385
+ border-color: #342A40 !important;
386
+ color: #e9e9e9;
387
+ }
388
+
389
+ .dark-theme .Input__container:focus-within {
390
+ border-color: #9551AC !important;
391
+ }
392
+
393
+ .Preferences__ChatFolders__ChatSelection__Item--Button:hover .Preferences__ChatFolders__ChatSelection__ItemContent,
394
+ .Preferences__ChatFolders__ChatSelection__Item--Button .Preferences__ChatFolders__ChatSelection__ItemContent[data-axo-contextmenu-state=open],
395
+ .Preferences__ChatFolders__ChatSelection__Item--Clickable:hover .Preferences__ChatFolders__ChatSelection__ItemContent,
396
+ .Preferences__ChatFolders__ChatSelection__Item--Clickable .Preferences__ChatFolders__ChatSelection__ItemContent[data-axo-contextmenu-state=open] {
397
+ background: light-dark(#f6f6f6, #2B2137) !important;
398
+ }
399
+
400
+ .Preferences__ChatFolders__ChatSelection__ItemAvatar {
401
+ display: flex;
402
+ align-items: center;
403
+ justify-content: center;
404
+ width: 36px;
405
+ height: 36px;
406
+ border-radius: 9999px;
407
+ background: light-dark(#e9e9e9, #342A40) !important;
408
+ }
409
+
410
+ .FunSkinTones__ListBoxItem[data-selected=true] .FunSkinTones__ListBoxItemButton {
411
+ background: light-dark(#e9e9e9, #393045) !important;
412
+ }
413
+
414
+ .Tabs {
415
+ border-bottom: none !important;
416
+ display: flex;
417
+ justify-content: space-around;
418
+ user-select: none;
419
+ }
420
+
421
+ .FunSkinTones__ListBoxItem:hover .FunSkinTones__ListBoxItemButton, .FunSkinTones__ListBoxItem:focus .FunSkinTones__ListBoxItemButton {
422
+ background: light-dark(#f6f6f6, #483F53);
423
+ }
424
+
425
+ .dark-theme .module-left-pane__archive-helper-text {
426
+ color: #b9b9b9;
427
+ background-color: #1E132B !important;
190
428
  }
191
429
 
192
- /*
193
- _ _ ____ __ _ _
194
- | | | |___ ___ _ __ | _ \ _ __ ___ / _(_) | ___
195
- | | | / __|/ _ \ '__| | |_) | '__/ _ \| |_| | |/ _ \
196
- | |_| \__ \ __/ | | __/| | | (_) | _| | | __/
197
- \___/|___/\___|_| |_| |_| \___/|_| |_|_|\___|
198
- */
199
430
 
200
- /* background of user details panel */
201
- .ConversationPanel,
202
- .ConversationPanel__header {
203
- background-color: #221D32 !important;
431
+ .dark-theme .module-conversation-list__item--archive-button:hover, .dark-theme .module-conversation-list__item--archive-button:focus {
432
+ background-color: #2B2137 !important;
204
433
  }
205
434
 
206
- /* disappering message timer */
207
- .module-select > select {
208
- background-color: #3D3144 !important;
435
+
436
+ .dark-theme .module-conversation-list__item--contact-or-conversation .module-conversation-list__item--contact-or-conversation__unread-indicator {
437
+ background-color: #893EA3 !important;
209
438
  }
210
439
 
211
- /* nickname, chatcolor, add to group and other button */
212
- .ConversationDetails-panel-row__root--button:hover {
213
- background-color: #3D3144 !important;
440
+ .dark-theme .module-conversation-list__item--archive-button__archived-count {
441
+ color: #b9b9b9;
442
+ background-color: #3D3646 !important;
214
443
  }
215
444
 
216
- /* nickname edit menu*/
217
- .Input__container {
218
- background-color: #3D3144 !important;
219
- border-color: #9399b2 !important;
445
+ .WhatsNew {
446
+ color: #ce60f5 !important;
220
447
  }
221
448
 
222
- /* add to group button background color */
223
- .ConversationDetails-groups__add-to-group-icon {
224
- background-color: #3D3144 !important;
449
+ div.Preferences div.relative.flex.grow.flex-col div.relative.flex.grow.overflow-y-scroll > div.flex.w-full.max-w-\[798px\].grow.flex-col.items-center.px-\[10px\] {
450
+ --color-background-secondary: #342A40 !important;
225
451
  }
226
452
 
227
- /* the user profile, signal connection and safety number popup */
228
- .module-Modal {
229
- background-color: #221D32 !important;
453
+ .CircleCheckbox__checkbox input[type=radio]:checked::before {
454
+ border: 2px solid #893EA3 !important;
455
+ }
456
+ .CircleCheckbox__checkbox input[type=radio]:checked::after {
457
+ background: #893EA3 !important;
458
+ top: 4px;
459
+ inset-inline-start: 4px;
460
+ width: 12px;
461
+ height: 12px;
462
+ border-radius: 6px;
230
463
  }
231
464
 
232
- /* mark as varified or clear verification button */
233
- .module-SafetyNumberViewer__button > button {
234
- background-color: #51455A !important;
465
+ .CircleCheckbox__checkbox--small input[type=checkbox]:checked::before {
466
+ background: #893EA3 !important;
467
+ border: 1.5px solid #893EA3 !important;
235
468
  }
236
469
 
237
- /*
238
- _
239
- _ __ ___ (_)___ ___
240
- | '_ ` _ \| / __|/ __|
241
- | | | | | | \__ \ (__
242
- |_| |_| |_|_|___/\___|
243
- */
470
+ .CircleCheckbox__checkbox--small input[type=radio]:checked::before {
471
+ border: 2px solid #893EA3 !important;
472
+ }
473
+ .CircleCheckbox__checkbox--small input[type=radio]:checked::after {
474
+ background: #893EA3 !important;
475
+ top: 4px;
476
+ /* stylelint-disable-next-line liberty/use-logical-spec */
477
+ left: 4px;
478
+ width: 10px;
479
+ height: 10px;
480
+ border-radius: 5px;
481
+ }
244
482
 
245
- /* background when viewing image */
246
- .Lightbox__animated {
247
- background-color: #221D32 !important;
483
+ --color-label-secondary: #342A40 !important;
248
484
  }
249
485
 
250
- /* many of the buttons */
251
- .module-Button {
252
- background-color: #51455A !important;
486
+ .ContactModal__official-badge::after {
487
+ -webkit-mask: url("../images/icons/v3/official/official-fill-compact.svg") no-repeat center;
488
+ -webkit-mask-size: 100%;
489
+ background-color: #893EA3 !important;
490
+ }
491
+ .dark-theme .Preferences {
492
+ background: #1E132B !important;
253
493
  }
254
494
 
255
- .module-Button:hover {
256
- background-color: #3D3144 !important;
495
+ :root {
496
+ --color-color-fill-primary: #893EA3 !important;
497
+ --color-elevated-background-primary: #1E132B !important;
498
+ --color-elevated-background-tertiary: #342A40 !important;
257
499
  }
258
500
 
259
- /*
260
- ____ _ _ _
261
- / ___| ___| |_| |_(_)_ __ __ _ ___
262
- \___ \ / _ \ __| __| | '_ \ / _` / __|
263
- ___) | __/ |_| |_| | | | | (_| \__ \
264
- |____/ \___|\__|\__|_|_| |_|\__, |___/
265
- |___/
266
- */
501
+ .PreferencesDonations__description__read-more {
502
+ color: #ce60f5 !important;
503
+ }
267
504
 
268
- /* side pannel of settings */
269
- .Preferences__page-selector {
270
- background-color: #221D33 !important;
505
+ .dark-theme .module-select select {
506
+ background-color: #342A40 !important;
507
+ border-color: #342A40 !important;
508
+ color: #e9e9e9;
509
+ border-radius: 9999px !important;
271
510
  }
272
511
 
273
- /* main settings pannel */
274
- .Preferences, .Preferences__settings-pane {
275
- background-color: #221D33 !important;
512
+ .dark-theme .Preferences__control--clickable:hover {
513
+ background: #2B2137 !important;
276
514
  }
277
515
 
278
- /* page selector selected background */
279
- .Preferences__button--selected, .Preferences__profile-chip--selected {
280
- background-color: #51455A !important;
516
+ .Checkbox__container input {
517
+ height: 18px;
518
+ width: 18px;
519
+ accent-color: #893EA3 !important;
281
520
  }
282
521
 
283
- .Preferences__profile-chip:focus, .Preferences__button:focus {
284
- background-color: #3D3144 !important;
522
+ .ConversationDetails-panel-section__root:not(:first-child)::before {
523
+ border-top: 1px solid transparent;
524
+ border-top-color: light-dark(#dedede, #342A40) !important;
285
525
  }
286
526
 
287
- .Preferences__profile-chip:hover, .Preferences__button:hover {
288
- background-color: #342C3A !important;
527
+ .Inbox__conversation-stack {
528
+ flex-grow: 1;
529
+ height: 100%;
530
+ overflow: hidden;
531
+ position: relative;
532
+ background-color: #1E132B !important;
289
533
  }
290
534
 
291
- /* language and chat color button */
292
- .Preferences__control--clickable:hover {
293
- background-color: #3D3144 !important;
535
+ .dark-theme .AvatarEditor__button {
536
+ background-color: #4a4a4a;
537
+ color: #e9e9e9;
294
538
  }
295
539
 
296
- .module-Button--secondary--destructive {
297
- color: #f38ba8 !important;
540
+ .dark-theme .Preferences__settings-row:not(:last-child) {
541
+ border-color: #342A40 !important;
298
542
  }
299
543
 
300
- .AvatarEditor__button {
301
- background-color: #51455A !important;
544
+ .dark-theme .ProfileEditor__divider {
545
+ border-color: #342A40 !important;
302
546
  }
303
547
 
304
- /*
305
- ____ _ _
306
- / ___|__ _| | |
307
- | | / _` | | |
308
- | |__| (_| | | |
309
- \____\__,_|_|_|
310
- */
548
+ .dark-theme .ConversationPanel,
549
+ .dark-theme .ConversationPanel__header {
550
+ background-color: #1E132B !important;
551
+ }
311
552
 
312
- .module-calling__container {
313
- background-color: #221D32 !important;
553
+ .module-Button--primary {
554
+ color: #ffffff;
555
+ background: #893EA3 !important;
556
+ border-radius: 9999px !important;
314
557
  }
315
558
 
316
- /* cancel and settings button */
317
- .CallSettingsButton__Button {
318
- background-color: #3D3144 !important;
559
+ .dark-theme .module-Button--secondary:hover:not(:disabled):not([aria-disabled=true]) {
560
+ background: #3D3646 !important;
561
+ }
562
+ .dark-theme .module-Button--secondary:active:not(:disabled):not([aria-disabled=true]) {
563
+ background: #3D3646 !important;
319
564
  }
320
565
 
321
- /* the bar at the bottom during calls */
322
- .CallControls {
323
- background-color: #3D3144 !important;
566
+ .dark-theme .module-Button--primary:hover:not(:disabled):not([aria-disabled=true]) {
567
+ background: #9551AC !important;
568
+ }
569
+ .dark-theme .module-Button--primary:active:not(:disabled):not([aria-disabled=true]) {
570
+ background: #9551AC !important;
571
+ }
572
+
573
+ .dark-theme .module-Button--secondary,
574
+ .module-Button--destructive {
575
+ border-radius: 9999px !important;
324
576
  }
325
577
 
326
- /* mike and camera button */
327
- .CallingButton__icon {
328
- background-color: #685870 !important;
578
+ .dark-theme .CallsNewCall__ItemActionButton:not(:disabled, [aria-disabled=true]):hover {
579
+ background: #393045 !important;
580
+ }
581
+
582
+ .dark-theme .Preferences__profile-chip--selected {
583
+ background: #393045 !important;
584
+ }
585
+ .dark-theme.keyboard-mode .Preferences__profile-chip:has(.Preferences__profile-chip__button:focus) {
586
+ background: #2B2137 !important;
587
+ }
588
+ .dark-theme.mouse-mode .Preferences__profile-chip:has(.Preferences__profile-chip__button:hover):not(.Preferences__profile-chip--selected) {
589
+ background: #2B2137 !important;
329
590
  }
330
591
 
331
- /* your pfp box during call */
332
- .module-calling__background {
333
- background-color: #3D3144 !important;
592
+ .dark-theme .Preferences__page-selector {
593
+ background: #1E132B !important;
594
+ }
595
+
596
+ .dark-theme .Preferences__button--selected {
597
+ background: #393045 !important;
598
+ }
599
+
600
+ .Preferences__content {
601
+ background: #1E132B !important;
602
+ }
603
+
604
+ .dark-theme.keyboard-mode .Preferences__button:focus {
605
+ background: #2B2137 !important;
606
+ }
607
+
608
+ .dark-theme.mouse-mode .Preferences__button:hover:not(.Preferences__button--selected) {
609
+ background: #2B2137 !important;
610
+ }
611
+
612
+ .dark-theme .module-Avatar--with-story--unread {
613
+ border-color: #9840c9 !important;
614
+ }
615
+ .module-Avatar--with-story--unread {
616
+ border-color: #9840c9 !important;
617
+ }
618
+
619
+ .dark-theme .CallsNewCall__ItemActionButton:not(:disabled, [aria-disabled=true]):hover {
620
+ background: #545454;
621
+ }
622
+
623
+ .dark-theme .module-Button--secondary {
624
+ background: #342A40 !important;
625
+ }
626
+ .dark-theme .module-Button--secondary--affirmative {
627
+ color: #d174f1 !important;
628
+ }
629
+ .dark-theme .module-Button--secondary--affirmative--discouraged {
630
+ color: #d174f180 !important;
631
+ }
632
+
633
+ .Lightbox__container {
634
+ background-color: #1E132B80 !important;
635
+ background: linear-gradient(180deg, #1e132b, #1E132B80) !important;
636
+ backdrop-filter: blur(12px) !important;
637
+ bottom: 0;
638
+ inset-inline: 0;
639
+ position: absolute;
640
+ top: 0;
641
+ z-index: 100;
642
+ }
643
+
644
+ .dark-theme .LeftPaneSearchInput__in-conversation-pill {
645
+ background-color: #2B2137 !important;
646
+ }
647
+
648
+ .dark-theme .module-ConversationHeader__button:not(:disabled):hover {
649
+ background: #2B2137 !important;
650
+ }
651
+
652
+ .dark-theme .module-ConversationHeader__button:not(:disabled):active {
653
+ background: #2B2137 !important;
654
+ }
655
+ .dark-theme .LeftPaneSearchInput__in-conversation-pill__x-button:hover, .dark-theme .LeftPaneSearchInput__in-conversation-pill__x-button:focus, .dark-theme .LeftPaneSearchInput__in-conversation-pill__x-button:active {
656
+ background: #9551AC !important;
657
+ }
658
+
659
+
660
+ .Toast {
661
+ background-color: #393045 !important;
334
662
  }
package/utils.js CHANGED
@@ -121,14 +121,60 @@ class Utils {
121
121
  }
122
122
 
123
123
  /**
124
- * Copies the given CSS file to the correct location inside the `patchDir`.
125
- * @param {string} cssPath - Path to the custom stylesheet CSS file.
124
+ * Copies the given custom stylesheet to the correct location inside the `patchDir`.
125
+ * @param {string} cssPath - Path to the custom stylesheet.
126
+ * @throws {Error} If `cssPath` is null or undefined, or if the copy operation fails.
126
127
  */
127
128
  setStylesheet(cssPath) {
128
- fs.copyFileSync(
129
- cssPath,
130
- path.join(this.patchDir, "stylesheets/custom.css")
131
- );
129
+ if (cssPath === null || cssPath === undefined) {
130
+ throw new Error("cssPath cannot be null or undefined");
131
+ }
132
+
133
+ if (!fs.existsSync(cssPath)) {
134
+ throw new Error(`cssPath ${cssPath} does not exist`);
135
+ }
136
+
137
+ try {
138
+ fs.copyFileSync(
139
+ cssPath,
140
+ path.join(this.patchDir, "stylesheets/custom.css")
141
+ );
142
+ } catch (err) {
143
+ throw new Error(`Failed to copy stylesheet: ${err}`);
144
+ }
145
+ }
146
+
147
+ /**
148
+ * Deletes the old tray icons directory if it exists, and then copies the
149
+ * contents of the given tray icon directory to the correct location inside
150
+ * `patchDir`.
151
+ * @param {string} iconsPath - Path to the tray icon directory.
152
+ * @throws {Error} If `iconsPath` is null or undefined, or if the delete or copy operation fails.
153
+ */
154
+ setTrayIcons(iconsPath) {
155
+ if (iconsPath === null || iconsPath === undefined) {
156
+ throw new Error("iconsPath cannot be null or undefined");
157
+ }
158
+
159
+ if (!fs.existsSync(iconsPath)) {
160
+ throw new Error(`iconsPath ${iconsPath} does not exist`);
161
+ }
162
+
163
+ const oldIconsPath = path.join(this.patchDir, "images/tray-icons");
164
+
165
+ try {
166
+ if (fs.existsSync(oldIconsPath)) {
167
+ fs.rmSync(oldIconsPath, { recursive: true });
168
+ }
169
+
170
+ fs.cpSync(
171
+ iconsPath,
172
+ oldIconsPath,
173
+ { recursive: true }
174
+ );
175
+ } catch (err) {
176
+ throw new Error(`Failed to copy tray icons: ${err}`);
177
+ }
132
178
  }
133
179
 
134
180
  /**