signal-styler 1.0.0 → 1.0.1

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 (2) hide show
  1. package/package.json +7 -6
  2. package/purple.css +547 -219
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.0.1",
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
  }