├── .editorconfig ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── question.md ├── .gitignore ├── changelog.org ├── contributing.org ├── images ├── background.jpg ├── bg-blur-high.jpg ├── bg-blur-low.jpg ├── bg-blur-none.jpg └── preview.png ├── license ├── metadata.styl ├── readme.org ├── wa.user.css ├── wa.user.styl └── whatsapp.sh /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_size = 2 8 | indent_style = space 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.{styl,sh}] 13 | indent_size = 4 14 | 15 | [*.md] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | ko_fi: vednoc 2 | liberapay: vednoc 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41B Bug report" 3 | about: Report a problem encountered while using this style 4 | title: '' 5 | labels: 'bug' 6 | assignees: '' 7 | --- 8 | 9 | 17 | 18 | - **Browser**: 19 | - **WhatsApp Web version**: 20 | - **Dark-WhatsApp version**: 21 | - **Additional context**: 22 | - **Screenshot**: 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F60D Feature request" 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: 'enhancement' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the change you'd like**: 10 | 11 | **Additional context**: 12 | 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U00002753 Ask a question" 3 | about: I have a question about this project 4 | title: '' 5 | labels: 'question' 6 | assignees: '' 7 | --- 8 | 9 | 10 | ### I would like to be able do the following 11 | 15 | 1. 16 | 2. 17 | 3. 18 | 19 | ### Additional context 20 | 24 | 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | darkmode.css 2 | custom.user.css 3 | temp.styl 4 | -------------------------------------------------------------------------------- /changelog.org: -------------------------------------------------------------------------------- 1 | #+STARTUP: nofold 2 | 3 | * Changelog 4 | ** 3.7.2 [2023-03-31 Fri] 5 | Yet another maintenance release to fix compact mode, rounded avatars, alerts, 6 | big emoji size, and message tails features. Starting from alerts and going 7 | onwards, code is now much simpler and resistant to updates that only change 8 | selectors, so it should last for a long time. 9 | 10 | *** Fixed 11 | - Updated selectors for rounded avatars (#196, #198) 12 | - Updated selectors for compact mode (#200, #201) 13 | 14 | ** 3.7.1 [2023-01-15 Sun] 15 | Another maintenance release that fixes a bunch of things in different areas. If 16 | you find bugs, please report them to our issue tracker. 17 | 18 | ** 3.7.0 [2021-07-09 Fri] 19 | This is a maintenance release to fix the latest update as well as simplify 20 | styles for a number of features. The code should be more maintainable than 21 | before, especially for Dark-WhatsApp's most unique feature: the compact mode. 22 | 23 | Also, UserStyles.world has been rewritten a while ago. If you're experienced 24 | with Go programming language (and/or HTML/CSS/TS/JS), [[https://github.com/userstyles-world/userstyles.world][check out the source code]]. 25 | Stylus =v1.5.18= (now in beta) allows you to browse as well as upload your styles 26 | directly to USw with ease. We're looking for feedback to make that process, as 27 | well as the website, even better. Check it out here: 28 | 29 | 🌟 https://userstyles.world 🌟 30 | 31 | Notice: I didn't test /all/ the available features, but I can say with certainty 32 | that Facebook-style message tails no longer work (since 3.6.x release) and RTL 33 | fixes have been implemented by WA. If some other feature stopped working, open 34 | an issue and I'll have a look at it. The support for the aforementioned 35 | functionality has been dropped due to amount of code that is required for 36 | maintenance, but it's not removed yet. 37 | 38 | *** Added 39 | - Changed the =@updateURL= fields of both userstyles to use UserStyle.world's API 40 | + This will allow me to have an insight in basic statistics in order to see to 41 | what extent DWA is being used and whether it should be maintained or not. 42 | GitHub's insights are pretty much useless, so this will help greatly. 43 | 44 | *** Improvements 45 | - Rewrote =compact mode= from the scratch. It's as simple as it gets 46 | - Switched to other types of selectors other than hard-coded class selectors 47 | + I would like to do it for more elements, but unfortunately it is what it is. 48 | 49 | *** Fixed 50 | - Updated selectors for pretty much everything 51 | - Updated rounded corners for avatars ([[https://github.com/vednoc/dark-whatsapp/pull/189][#189]]) 52 | - Added proper text color to attach menu tooltips ([[https://github.com/vednoc/dark-whatsapp/pull/188][#188]], [[https://github.com/vednoc/dark-whatsapp/pull/190][#190]]) 53 | 54 | ** 3.6.1 [2021-03-03 Wed] 55 | As mentioned in the announcement note in the previous release, I'm looking for 56 | someone to help maintain this userstyle. This is one of the last, if not the 57 | very last update that I'll be doing. I've been working on this userstyle since 58 | 2017 and it's time to pass the torch to someone else. 59 | 60 | If you're interested, you can reach out to me on GitHub, on GitLab, via e-mail, 61 | via Discord, or via Matrix. 62 | 63 | Thank you for understanding. 64 | 65 | *** Added 66 | - Message bubble sides can now be swapped outside of =fb-like= tails option 67 | 68 | *** Fixed 69 | - Updated broken selectors for compact mode ([[https://github.com/vednoc/dark-whatsapp/issues/186][#186]]) 70 | + Made just a few of them more resistant to future updates. 71 | - Updated selector for hiding "Allow Notifications" alert 72 | 73 | ** 3.6.0 [2021-02-26 Fri] 74 | Adding one new option and updating selectors for ~2.2106.5~ update. 75 | 76 | *** Added 77 | - Background color for system messages in chat can now be overriden 78 | 79 | *** Fixed 80 | - Updated a ton of broken selectors from the latest update. Known issues: 81 | + Compact mode is very usable, but it has broken selectors for badges 82 | - Tracked in issue [[https://github.com/vednoc/dark-whatsapp/issues/186][#186]]. 83 | + Fb-like tails, message positions, and perhaps some other options are 84 | broken. Will probably be fixed in the next update. 85 | 86 | ** 3.5.0 [2020-12-10 Thu] 87 | Adding one new option and updating selectors for ~2.2049.8~ update. 88 | 89 | *** Added 90 | - Profile pictures can now be hidden with a new option ([[https://github.com/vednoc/dark-whatsapp/issues/183][#183]]) 91 | + Disabled by default. 92 | + Quick preview: 93 | 94 | [[https://user-images.githubusercontent.com/18245694/101796690-7ba3aa00-3b09-11eb-9e4e-115fec492f54.png]] 95 | 96 | *** Fixed 97 | - Resolved a conflict with hover state of items in forward message modal 98 | - Updated selector for external links when Facebook-style tails are enabled 99 | 100 | ** 3.4.0 [2020-11-21 Sat] 101 | Hotfix release for ~2.2047.11~ update. 102 | 103 | *** Docs 104 | - Added summary for =v3.3.0= release 105 | - Revised code comments 106 | 107 | *** Improvements 108 | - Compact mode and Facebook-style tails should work slightly better than before 109 | + These two options were the ones that received small yet necessary rewrites. 110 | - Slowed down custom emoji animations (from =1.0s= to =1.5s=) 111 | 112 | *** Fixed 113 | - Pretty much /everything/ 114 | + All class selectors had to be replaced with new ones. 115 | + Some features had to be slightly rewritten. 116 | + A small checklist was made in [[https://github.com/vednoc/dark-whatsapp/issues/182][#182]]. 117 | 118 | ** 3.3.0 [2020-11-01 Sun] 119 | Adding one new option and tidying up code. 120 | 121 | *** Documentation 122 | - Added preview gif for custom emoji animations in =v3.2.0= release 123 | 124 | *** Added 125 | - New overrides for 'seen message icon color' ([[https://github.com/vednoc/dark-whatsapp/issues/181][#181]]) 126 | + Works the same way as overrides for message bubble colors. 127 | + Quick preview: 128 | 129 | [[https://user-images.githubusercontent.com/18245694/97802421-8a15c080-1c43-11eb-876e-d19c43283538.png]] 130 | 131 | *** Fixed 132 | - Removed =!important= from generated variables 133 | + It makes no difference when it's used there. 134 | 135 | ** 3.2.1 [2020-10-26 Mon] 136 | Fixing a regression from the previous release. 137 | 138 | *** Fixed 139 | - Updated mismatched keys for 'animate emojis' option 140 | + Toggling animated emojis on and off now works as intended. 141 | 142 | ** 3.2.0 [2020-10-26 Mon] 143 | Adding options to set custom animated emojis, improving the build tool, adding 144 | new color variables, and making overall experience more consistent. 145 | 146 | *** Build 147 | - Added an option to print compiled userstyle to standard output 148 | - Fixed a bug when using =-cuf= options together that would produce an empty file 149 | - Added checking for file's existance before deleting them for =-r= option 150 | 151 | *** Added 152 | - Two new options to set custom emojis for Kiss and Pulse emoji animations 153 | + These bring more customization to 'animated emojis' option. 154 | + On detailed how-to-use, see my writeup in the commit [[https://github.com/vednoc/dark-whatsapp/commit/ee200fbd91fc4210e561e8bc7c9189e16a08ff38][#ee200fb]]. 155 | + Quick preview: 156 | 157 | [[https://user-images.githubusercontent.com/18245694/97813538-23b39100-1c89-11eb-9434-4e45bfd43cea.gif]] 158 | - More remapping for color variables 159 | 160 | *** Improved 161 | - More color consistency in floating drawers and groups 162 | - Added better formatting for 'typing...' animation 163 | 164 | *** Fixed 165 | - Removed recently updated =min-height= overflow in compact mode 166 | - Updated icon color for 'Phone not connected' alert 167 | - Tweaked new styles for items in wallpapers area 168 | 169 | ** 3.1.0 [2020-10-02 Fri] 170 | Adding one new feature and fixing a few bugs. 171 | 172 | *** Docs 173 | - Updated info in contributing file 174 | - Updated info in project readme 175 | 176 | *** Added 177 | - Animated chat emojis when sent in the chat (Added by Erel in [[https://github.com/vednoc/dark-whatsapp/pull/180][#180]]) 178 | + Enabled by default. 179 | + Works when sent as a single — big — emoji. E.g.: ❤️ 180 | + Currently enabled for following emojis: 🤩, 😍, ☺️,❣️, ♥️, ❤️, 💋 181 | - Added pale variants of some color variables 182 | 183 | *** Fixed 184 | - Updated attach menu icon alignment in compact mode 185 | - Removed extra whitespace below the link in RTL layout 186 | 187 | ** 3.0.0 [2020-09-03 Thu] 188 | The =v3= release is here! It took around 3 months to get here, and a ton of work. 189 | 190 | There are no deprecated features and there is a new one to adjust syntax color 191 | tones. For full list, look for /added/ sections the previous releases. 192 | 193 | Overall, I'm quite happy with how everything turned out — especially the 194 | =whatsapp.sh= tool. Huge thanks to everyone who contributed, and to [[https://github.com/E-RELevant/][Erel]] for 195 | helping out a ton behind the scenes. 196 | 197 | Erel also made a [[https://github.com/E-RELevant/WhatsApp-Web-Skeleton][WA Skeleton]] theme that can be used as a "screenshot mode" of 198 | sorts — which will hide all sensitive information — and you can use it to 199 | showcase your DWA theme in [[https://github.com/vednoc/dark-whatsapp/issues/178][this issue]] to show everyone how you use it. 200 | 201 | Finally, I wrote a blog post that highlights this update. You can [[https://vednoc.me/blog/next-gen-of-dark-whatsapp][read it here]]. 202 | 203 | *** Build 204 | - Added brand new options to the [[https://github.com/vednoc/dark-whatsapp/blob/master/whatsapp.sh][whatsapp.sh]] utility 205 | - You can now compile custom DWA with UserCSS options outside of the browser! 206 | 207 | *** Docs 208 | - Updated UserCSS options and code comments 209 | - Updated screenshot image 210 | 211 | *** Added 212 | - Tertiary, or syntax colors, are now a part of the color generator 213 | 214 | *** Improved 215 | - Added a better generation for shadow color variable 216 | - Switched to a more vibrant version of accent color for scrollbar thumbs 217 | 218 | *** Fixed 219 | - Updated a few regressions introduced when refactoring syntax color variables 220 | - Updated colors for prev/next item in media viewer 221 | 222 | ** 3.0.0-rc.7 [2020-08-27 Thu] 223 | Not many changes in this release; just updating styles to WhatsApp `v2.2035.12` 224 | update, and adding an announcement for my new project --- [[https://userstyles.world/][UserStyles.World]] --- 225 | that I've launched a few days ago as an alternative to =userstyles.org=, which has 226 | been quite unusable for many months now. 227 | 228 | If you'd like to contribute to development of USW, do check out the GitHub 229 | [[https://github.com/vednoc/userstyles.world][project repository]]. If you're a userstyle creator, there's a section on 230 | [[https://github.com/openstyles/stylus/wiki/UserCSS-authors][OpenStyles/Stylus Wiki]] in regards to writing UserCSS userstyles that will allow 231 | you to host them on GitHub/GitLab or elsewhere. The process is pretty easy and 232 | well documented, but I'll be adding something simpler to USW at some point. 233 | 234 | There is just a handful of userstyles added at the moment since I'm a one-man 235 | team (at the time of writing), and other priorities on the list take a lot of my 236 | time to research and implement. Here's a short [[https://github.com/vednoc/userstyles.world/issues/1][Roadmap]] to keep track of ideas. 237 | 238 | *** Docs 239 | - Revised code comments 240 | 241 | *** Improved 242 | - Switched to a different logo background color for theme intro image 243 | - Updated color generation rules of ac4–5 variables for outgoing message bubbles 244 | 245 | *** Fixed 246 | - Updated logic for collapsed messages when =fb-like= tails are active 247 | 248 | ** 3.0.0-rc.6 [2020-08-18 Tue] 249 | Added an option to set size of big emojis, fixed compact mode indicators in RTL 250 | mode, and a lot more logic and code style refactoring. 251 | 252 | *** Added 253 | - An option to choose the size of big emojis 254 | - Uses WhatsApp's native values by default 255 | 256 | *** Improved 257 | - More logic and code style refactoring 258 | - Increased =min-width= for message bubbles to avoid small issues 259 | - Better contrast for =ac1–ac3= accent color variables 260 | 261 | *** Fixed 262 | - Compact mode indicators now have proper positions in RTL UI ([[https://github.com/vednoc/dark-whatsapp/issues/175][#175]]) 263 | 264 | ** 3.0.0-rc.5 [2020-08-14 Fri] 265 | Added missing colors from the last two WhatsApp updates, refactored a lot of 266 | logic for color generator, and fixed a few things that broke in new update. 267 | 268 | *** Added 269 | - New color variables from last two updates 270 | - New options to adjust generated tones for /foreground/ and /accent/ colors 271 | 272 | *** Improved 273 | - Lots of improvements for color generator 274 | 275 | *** Fixed 276 | - Colors for floating emoji picker 277 | - Removed redundant colors option for replies/group members 278 | - Updated selectors for default option in 'set chat wallpaper' area 279 | 280 | ** 3.0.0-rc.4 [2020-08-12 Wed] 281 | This pre-release has a ton of refactoring centered around logic and code style, 282 | and a few small improvements as well as bug fixes around =fb-like= tail style. 283 | 284 | *** Docs 285 | - Revised code comments 286 | 287 | *** Improved 288 | - Lots of refactoring around logic and code style 289 | - App background element is now completely removed on low-res screens 290 | - Added hover animation to icons for 'select messages' mode in chat 291 | - Added hover animation to toolbar icons in media viewer 292 | - Small contrast improvements for Google Maps feature 293 | 294 | *** Fixed 295 | - Removed styles for thin scrollbars and 'loading results' spinner 296 | - Removed whitespace hack for disabled big emojis in =fb-like= tails 297 | 298 | ** 3.0.0-rc.3 [2020-08-08 Sat] 299 | I've decided to delay full-release until next week because there are more ideas 300 | that need to be implemented first. 301 | 302 | This pre-release adds dark mode to Google Maps integration, and improves more 303 | descriptions for UserCSS options. 304 | 305 | *** Docs 306 | - Improved descriptions for more UserCSS options 307 | 308 | *** Fixed 309 | - Added dark mode to Google Maps integration 310 | 311 | ** 3.0.0-rc.2 [2020-08-04 Tue] 312 | This is the second pre-release of ~v3~ that resolves a few small bugs and improves 313 | descriptions for UserCSS options. 314 | 315 | *** Docs 316 | - Fixed typos in the changelog 317 | - Updated descriptions for some UserCSS options 318 | - Added missing link to the project home on intro pane 319 | 320 | *** Fixed 321 | - Tweaked text color for nicknames in groups 322 | - Added missing border for footer in various modals 323 | 324 | ** 3.0.0-rc.1 [2020-08-01 Sat] 325 | This is the first pre-release of ~v3~ that ports the remaining of missing features 326 | and improves/fixes some of the leftover bugs. 327 | 328 | In a week's time, I'll publish the ~v3.0.0~ that will reset some custom options 329 | for the sake of more consistant naming scheme, so keep in mind that you'll have 330 | to re-do your customizations in the configuration menu once the update lands. 331 | 332 | If there are some bugs with recently ported options, do let me know! 333 | 334 | *** Added 335 | - Ported all variants for 'tail styles' option 336 | - Ported all extra tweaks for =fb-like= tail style (preview in =v2.7.0= section) 337 | - Ported options for incoming/outgoing message bubble sides 338 | - Ported options for 'blurred images/videos' feature 339 | 340 | *** Improved 341 | - Compile time is roughly cut in half after removing ~v2~ code 342 | - Better hover/focus states for emojis 343 | - Added more contrast to 'down-context' icon 344 | 345 | *** Fixed 346 | - 'Only admins can send messages' now has proper borders 347 | - Proper colors for 'x not connected' notification alert 348 | 349 | ** 2.16.4 [2020-07-25 Sat] 350 | Small update to refine a few necessary things. 351 | 352 | *** Docs 353 | - Revised code comments 354 | 355 | *** Improved 356 | - Add more contrast for foreground colors in color generator 357 | - Increased DWA logo from =200px= to =240px= 358 | 359 | *** Fixed 360 | - Use proper background color for mentions menu ([[https://github.com/vednoc/dark-whatsapp/issues/174][#174]]) 361 | - Refactored and improved styles for rounded =default-user= icons 362 | 363 | ** 2.16.3 [2020-07-24 Fri] 364 | Hotfix for previous release. 365 | 366 | *** Fixed 367 | - Remove double borders from 'unknown contact' alert 368 | - More consistent chat dividers in native dark mode 369 | 370 | ** 2.16.2 [2020-07-22 Wed] 371 | Small maintenance update for ~2.2029.4~ update. 372 | 373 | *** Docs 374 | - Added missing item in /fixed/ section for previous update 375 | - Updated info in the project readme 376 | 377 | *** Improved 378 | - Tweaks for image/video timestamps are now visible globally 379 | 380 | *** Fixed 381 | - Removed double borders for right drawer 382 | - Added missing border for emoji/gif/sticker drawer 383 | 384 | ** 2.16.1 [2020-07-03 Fri] 385 | Hotfix for the ~2.2027.10~ update. 386 | 387 | *** Improved 388 | - Custom options for =custom chat bg image= now work properly 389 | - Landing page now shows custom background image 390 | 391 | *** Fixed 392 | - Colors for contact info/timestamp bubble in status area 393 | - Unread message timestamp now has proper colors in dark mode 394 | - Custom chat background now works properly in native dark mode 395 | - Removed stripe background from the landing page 396 | 397 | ** 2.16.0 [2020-07-01 Wed] 398 | Hotfix for the ~2.2027.9~ update. 399 | 400 | WhatsApp is (finally) releasing their native dark mode with this update. I made 401 | it so that Dark-WhatsApp overrides native dark mode colors as well in [[https://github.com/vednoc/dark-whatsapp/commit/f0c1f7af4d2acdc37a5fd944d79c02f158735f6d][#f0c1f7a]]. 402 | I'm also happy to report that all of our [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration][custom features]] are working properly! 403 | 404 | *** Added 405 | - New color variables ([[https://github.com/vednoc/dark-whatsapp/issues/171][#171]]) 406 | 407 | *** Improved 408 | - Invert colors range for bg/chat images has been increased from 10 to 100 steps 409 | 410 | *** Fixed 411 | - Invert colors option for chat image resetting on every update ([[https://github.com/vednoc/dark-whatsapp/issues/169][#169]]) 412 | - Missing DWA intro tweaks in dark mode 413 | 414 | ** 2.15.0 [2020-06-25 Thu] 415 | Porting more features, fixing more bugs, and improving more things. 416 | 417 | *** Added 418 | - A new option to adjust generated tones for =background= color 419 | + Still testing things; might be removed later on 420 | - Ported and improved alerts option 421 | - Ported theme colors for replies and group members option 422 | - Ported old color-scheme menu 423 | + =Custom= is the new default, and is using same colors as =old= option 424 | - A new =to_rgba= mixin to fix issues with Stylus-lang's built-in =rgba= function 425 | 426 | *** Improved 427 | - Theme colors for many color variables 428 | - System messages now have borders around them 429 | - The look for default wallpaper in 'set chat wallpaper' area under settings 430 | - Made gray chat wallpaper use dark background colors to avoid conflicts 431 | - Borders for elements in chat footer/compose area 432 | 433 | *** Fixed 434 | - Custom background images are no longer removed in native dark mode 435 | - Alignment for spinners inside of search bars 436 | - Removed top borders from docs/links/starred messages 437 | - Custom app/status width now plays well with =fullscreen mode= 438 | 439 | ** 2.14.0 [2020-06-18 Thu] 440 | Hotfix for the ~2.2025.6~ update that added new color variables. 441 | 442 | *** Added 443 | - Ported options for RTL messages (Thanks [[https://github.com/E-RELevant][Erel]]!) 444 | - New color variables ([[https://github.com/vednoc/dark-whatsapp/issues/167][#167]]) 445 | 446 | *** Improved 447 | - Color variables for various areas (Thanks [[https://github.com/E-RELevant][Erel]]!) 448 | - Refactored old logic and short one-line styles 449 | 450 | ** 2.13.0 [2020-06-16 Tue] 451 | Refactoring codebase for the sake of consistency. 452 | 453 | *** Documentation 454 | - Revised code comments 455 | 456 | *** Improved 457 | - All color variables now use theme color variables 458 | - Re-arranged things around for people using =Lite= version 459 | 460 | ** 2.12.0 [2020-06-12 Fri] 461 | Porting more features and polishing colors. 462 | 463 | *** Added 464 | - An option for consistent drawer headers ([[https://github.com/vednoc/dark-whatsapp/pull/113][#113]]) 465 | - Enabled by default. 466 | - More ~v2~-like colors for sidebars/chat/intro/status area 467 | - Ported various emoji enhancements and default opacity option 468 | - Ported thin scrollbars option for Firefox users 469 | - Ported custom chat background options 470 | 471 | *** Improved 472 | - Override for default dark mode color variables 473 | - Refactored bg/fg/ac variable generation 474 | - Shadow for left/right drawer sections 475 | - Various color variables improvements 476 | - Added background to the app wrapper 477 | 478 | *** Fixed 479 | - Base styles for 'Allow Notifications' modal 480 | - Missing 'shared contacts' for 'custom avatar radius' option 481 | 482 | ** 2.11.0 [2020-06-07 Sun] 483 | Adding more features and fixing a few of bugs. 484 | 485 | *** Added 486 | - An empty 'divider' to separate working from broken features 487 | - Options to set custom incoming/outgoing message bubble colors ([[https://github.com/vednoc/dark-whatsapp/issues/162][#162]], [[https://github.com/vednoc/dark-whatsapp/issues/163][#163]]) 488 | - Thanks to [[https://github.com/E-RELevant][Erel]] for writing code for this from scratch 489 | - Further /improved/ by making it an opt-in feature 490 | - Quick preview: 491 | 492 | [[https://user-images.githubusercontent.com/18245694/83976901-4f5e6500-a8fd-11ea-98b2-ac36e3b2e599.gif]] 493 | - Ported custom width for chat app option 494 | - Ported fullscreen mode 495 | - Ported blurred contacts 496 | - Quick preview: 497 | 498 | [[https://user-images.githubusercontent.com/18245694/83976781-71a3b300-a8fc-11ea-9dcc-a10dbc7ab7b1.gif]] 499 | 500 | *** Improved 501 | - Minor adjustments for color variables 502 | - Timestmaps for media messages now have background 503 | 504 | *** Fixed 505 | - Missing avatars for custom avatar radius option 506 | - An issue with non-Lite version applying globally ([[https://github.com/vednoc/dark-whatsapp/issues/164][#164]]) 507 | - Color for down arrow found in message context menus 508 | 509 | ** 2.10.0 [2020-06-06 Sat] 510 | Bringing back more features from previous releases and improvements! 511 | 512 | *** Added 513 | - Small tweaks for accent color generation ([[https://github.com/vednoc/dark-whatsapp/issues/162][#162]]) 514 | - Ported rounded corners for menu/input/avatar ([[https://github.com/vednoc/dark-whatsapp/issues/163][#163]]) 515 | - Ported styles for compact mode ([[https://github.com/vednoc/dark-whatsapp/issues/160][#160]]) 516 | - Quick preview: 517 | 518 | [[https://user-images.githubusercontent.com/18245694/83950648-a9dbc080-a82c-11ea-817d-c63857978d48.png]] 519 | 520 | *** Improved 521 | - Added borders around base elements in modals 522 | - Ported styles for status area 523 | - Updated a few CSS color variables 524 | - Seen status icon 525 | 526 | *** Fixed 527 | - Removed message bubble shadow from stickers 528 | - Colors for toast notifications 529 | - Context menu background for stickers 530 | 531 | ** 2.9.0 [2020-06-05 Fri] 532 | Rewriting everything so that we can utilize WhatsApp's native CSS variables. All 533 | of this is thanks to the ~2.2023.2~ update that broke /a lot/ of things. 534 | 535 | *** Added 536 | We are releasing a preview of our procedural color generation for background, 537 | foreground, and accent colors in this update. Two months ago, we published 538 | initial work for it in [[https://github.com/vednoc/dark-whatsapp/pull/145][#145]]; today, we're releasing it to everyone. 539 | 540 | This is something we've been working towards for quite a while now, making over 541 | a dozen of different implementations to find the right one. Since there are 6 542 | tones for all base colors, the interop with [[https://github.com/vednoc/dark-switcher/][Dark-Switcher]] is no longer possible 543 | until this functionality is implemented there. 544 | 545 | What you see is still early-days, since we have to polish color generator rules 546 | and include edge-cases, as well as see how it does /in the wild/. If you run into 547 | issues, or weird looking color generation, we would love to hear it! Don't 548 | hesitate to open a new [[https://github.com/vednoc/dark-whatsapp/issues/new/choose][issue]] and tell us about it. 549 | 550 | Quick preview of changing base background and accent colors: 551 | 552 | [[https://user-images.githubusercontent.com/18245694/83881589-33ae5f80-a741-11ea-8db3-f5edb1b1597d.gif]] 553 | 554 | *** Broken features 555 | A lot of our previous work is now broken in the new update, and we'll have to 556 | rewrite or fix majority of the features you can find on [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration][Configuration]] page on 557 | our project wiki. Only the following features made it into ~v2.9.0~ release: 558 | 559 | - Custom background/foreground/accent colors 560 | - All app background image options 561 | - Custom intro image 562 | - Custom UI font 563 | 564 | We will slowly but surely bring old features back in the upcoming updates as we 565 | make our way towards ~v3~ of Dark-WhatsApp. 566 | 567 | *** Fixed 568 | - Issues where the new update was reported ([[https://github.com/vednoc/dark-whatsapp/issues/158][#158]], [[https://github.com/vednoc/dark-whatsapp/issues/159][#159]]) 569 | - Unreadable 'update alert' text color ([[https://github.com/vednoc/dark-whatsapp/issues/155][#155]], [[https://github.com/vednoc/dark-whatsapp/issues/157][#157]]) 570 | 571 | ** 2.8.0 [2020-05-31 Sun] 572 | More polish for ~fb-like~ message tails style, and a new intro image. 573 | 574 | *** Added 575 | - Inlined SVG for intro image ([[https://github.com/vednoc/dark-whatsapp/pull/156][#156]]) 576 | - Huge thanks to [[https://github.com/jdruedaq][jdruedaq]] for contributing and for the initial idea. 577 | - Quick preview when using color-schems from [[https://github.com/vednoc/dark-switcher/][dark-switcher]]: 578 | 579 | [[https://user-images.githubusercontent.com/18245694/83363146-6948f680-a397-11ea-9e65-91089648a74a.gif]] 580 | - Uniform height for big emojis when ~fb-like~ tails are active 581 | - Enabled by default; only works with ~fb-like~ tails. 582 | 583 | [[https://user-images.githubusercontent.com/18245694/83363145-664e0600-a397-11ea-949b-6582211bd25b.gif]] 584 | 585 | *** Improved 586 | - Block contact icon now uses a warning color 587 | - QR code borders now have a hardcoded ~#ffffff~ value 588 | - No more minor conflicts with /some/ color-schemes when using [[https://github.com/vednoc/dark-switcher/][dark-switcher]]. 589 | 590 | *** Fixed 591 | - Hover animation for reply messages 592 | - Conflicts in grouped media (images, videos, etc) in ~fb-like~ tails 593 | - Selectors for audio message controls 594 | - Opacity for deleted message icon 595 | 596 | ** 2.7.0 [2020-05-23 Sat] 597 | Improved ~fb-like~ message tails style and various other things that got broken in 598 | the latest ~2.2021.3~ update. 599 | 600 | **** Added 601 | - App and chat background images now support custom ~size~, ~position~, and ~repeat~ 602 | - ~Fb-like~ message tails option received a lot of enhancements 603 | - Huge thanks to [[https://github.com/E-RELevant][Erel]] for the idea of hiding timestamps for all messages 604 | except the very last one, and for non-stop testing and bug reporting! 605 | - We hope everyone will enjoy using this style because it looks great! 606 | - Here is [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration#message-tails][how to enable it]]! Quick preview: 607 | 608 | [[https://user-images.githubusercontent.com/18245694/82741377-86efdd80-9d51-11ea-84d8-2ccb1315f346.gif]] 609 | - An option to enable ~screenshot mode~ for preview image 610 | - This option could be used for bug-reports and for user-submitted previews 611 | 612 | **** Improved 613 | - Lots of improvements for audio messages and audio sliders 614 | - Left/right side options for message bubbles work great with fb-like tails 615 | 616 | **** Fixed 617 | - Compact mode's typing indicator in Ferdi ([[https://github.com/vednoc/dark-whatsapp/pull/153][#153]]) 618 | - Avatar radius for shared contact(s) messages 619 | - Colors for giphy and delete chat icons 620 | 621 | ** 2.6.3 [2020-05-14 Thu] 622 | Minor polish and refactoring. 623 | 624 | **** Improved 625 | - Fb-like option for message tails 626 | - Logic for custom app background 627 | 628 | **** Fixed 629 | - Color for =@= symbol in mentions 630 | - Colors for scrollbars in Firefox 631 | 632 | ** 2.6.2 [2020-05-11 Mon] 633 | Hotfix update for =2.2019.6= release. 634 | 635 | *** Fixed 636 | - Shortcut elements in 'keyboard shortcuts' modal 637 | - Selected message blinking twice 638 | 639 | ** 2.6.1 [2020-05-10 Sun] 640 | Small maintenance for latest release. 641 | 642 | *** Documentation 643 | - Fixed typos in readme and changelog 644 | - Added day names to dates in the changelog 645 | 646 | *** Fixed 647 | - User mentions in groups and upload preview 648 | - Margin for platform-specific borders 649 | 650 | ** 2.6.0 [2020-05-07 Thu] 651 | Improvements for RTL tweaks (thanks [[https://github.com/E-RELevant][Erel]] for keeping me busy with lots of bug 652 | reports) and minor broken styles. 653 | 654 | *** Improved 655 | - Build script received lots of improvements and enhancements 656 | - A whole lot of selectors for RTL message options 657 | - Colors for audio message sliders 658 | 659 | *** Fixed 660 | - Contacts area in 'add participant' modal ([[https://github.com/vednoc/dark-whatsapp/issues/152][#152]]) 661 | - Colors for voice message icons ([[https://github.com/vednoc/dark-whatsapp/issues/151][#151]]) 662 | 663 | ** 2.5.0 [2020-05-03 Sun] 664 | Fix formatting for RTL messages and minor broken styles. 665 | 666 | *** Added 667 | - Options to disable RTL formatting tweaks 668 | 669 | *** Documentation 670 | - Removed deprecated v1 userstyle from the file tree 671 | 672 | *** Improved 673 | - Build script now converts Lite version to Franz/Ferdi properly 674 | - Formatting for RTL messages ([[https://github.com/vednoc/dark-whatsapp/issues/107][#107]]; thanks [[https://github.com/E-RELevant][Erel]] for the help!) 675 | 676 | *** Fixed 677 | - Context menus for RTL messages 678 | - Styles for header in status area 679 | - Platform-specific alert about desktop app 680 | - Drop shadow for message bubbles 681 | 682 | ** 2.4.1 [2020-04-28 Tue] 683 | Hotfix update for =2.2017.6= release. 684 | 685 | *** Improved 686 | - Various things in 'Set Chat Wallpaper' area ([[https://github.com/vednoc/dark-whatsapp/issues/149][#149]]) 687 | - Styles for 'Upload/Take picture' modals 688 | 689 | *** Fixed 690 | - All styles for message tails option ([[https://github.com/vednoc/dark-whatsapp/issues/150][#150]]) 691 | - Wrong color for 'missed video call' icon 692 | - Background for checkmarks in docs/links 693 | - Wrong color for 'typing...' element 694 | - Colors for thumbnails and separators in embeds 695 | 696 | ** 2.4.0 [2020-04-21 Tue] 697 | Small maintenance update for =2.2013.7= release. 698 | 699 | *** Added 700 | - Options to set hover on/off delay for blurred chat media ([[https://github.com/vednoc/dark-whatsapp/issues/149][#149]]) 701 | 702 | *** Improved 703 | - Selected state for emojis ([[https://github.com/vednoc/dark-whatsapp/issues/148][#148]]) 704 | - Landing pane announcement ([[https://github.com/vednoc/dark-whatsapp/issues/128][#128]]) 705 | 706 | *** Fixed 707 | - Colors for view/send contact areas 708 | - Chat labels for WhatsApp for Business ([[https://github.com/vednoc/dark-whatsapp/issues/147][#147]]) 709 | - Transparent emoji images are no longer needed ([[https://github.com/vednoc/dark-whatsapp/commit/5f60c41788a1bf2b3598dfcb88a1146d0f6779b7][5f60c41]]) 710 | 711 | ** 2.3.6 [2020-04-04 Sat] 712 | Lots of bug fixing and polishing in this update. 713 | 714 | *** Documentation 715 | - Added 'similar projects' section to the readme 716 | 717 | *** Improved 718 | - A few edge-cases for compact mode styles 719 | - Styles for content in reply area 720 | 721 | *** Fixed 722 | - Lots of fixes for context menus, icons, and modals 723 | - Selectors for blurred contacts/media option 724 | - Reply bubble colors in status area ([[https://github.com/vednoc/dark-whatsapp/issues/144][#144]]) 725 | - Alerts from 'unknown sender' ([[https://github.com/vednoc/dark-whatsapp/issues/146][#146]]) 726 | 727 | ** 2.3.5 [2020-04-01 Wed] 728 | Adding transparent emoji images and polishing things up. 729 | 730 | *** Documentation 731 | - Updated readme ([[https://github.com/vednoc/dark-whatsapp/pull/143][#143]]) 732 | 733 | *** Improved 734 | - New transparent emoji images ([[https://github.com/vednoc/dark-whatsapp/issues/137][#137]]) 735 | 736 | *** Fixed 737 | - Various button and icon styles 738 | - Styles in 'upload preview' pane 739 | - Selectors for the last 'message tails' option 740 | - Audio length for incoming messages 741 | - Reply bubble in status area ([[https://github.com/vednoc/dark-whatsapp/issues/144][#144]]) 742 | 743 | ** 2.3.4 [2020-03-28 Sat] 744 | Fixing the leftover minor bugs. 745 | 746 | *** Improved 747 | - Bug report template now has 'WA version' field ([[https://github.com/vednoc/dark-whatsapp/issues/141][#141]]) 748 | 749 | *** Fixed 750 | - Colors for video progress bar colors ([[https://github.com/vednoc/dark-whatsapp/issues/142][#142]]) 751 | - Colors for vudio progress bar colors 752 | - Rounded corners for avatar in settings 753 | - Colors for 'low battery' alert 754 | - Selectors for emoji/gif/sticker menus 755 | 756 | ** 2.3.3 [2020-03-27 Fri] 757 | Fixing more new bugs, some caused by last night's hotfix. 758 | 759 | *** Added 760 | - An option to set 'hover-off' duration in compact mode ([[https://github.com/vednoc/dark-whatsapp/issues/138][#138]]) 761 | 762 | *** Fixed 763 | - Many more selectors throughout the app 764 | - Colors for audio/video sliders ([[https://github.com/vednoc/dark-whatsapp/issues/136][#136]]) 765 | - 'Computer not connected' alert ([[https://github.com/vednoc/dark-whatsapp/issues/140][#140]]) 766 | - Rewritten compact mode 767 | 768 | ** 2.3.2 [2020-03-27 Fri] 769 | Fixing more new bugs, some caused by last night's hotfix. 770 | 771 | *** Fixed 772 | - A bunch of styles all throughout the app 773 | - Colors for the 'seen' message status ([[https://github.com/vednoc/dark-whatsapp/issues/131][#131]]) 774 | - Selectors for built-in video player ([[https://github.com/vednoc/dark-whatsapp/issues/133][#133]]) 775 | 776 | ** 2.3.1 [2020-03-27 Fri] 777 | Hotfix for the latest update (version ~0.4.2080~). Reported in [[https://github.com/vednoc/dark-whatsapp/issues/130][#130]]. 778 | 779 | *** Documentation 780 | - Revised code comments 781 | 782 | *** Improved 783 | - Chat background image opacity (0.10 -> 0.15) 784 | 785 | *** Fixed 786 | - 'No stickers' alert ([[https://github.com/vednoc/dark-whatsapp/issues/129][#129]]) in chat 787 | - Avatar size of the default-user icons 788 | - A bunch of things from the latest update 789 | 790 | ** 2.3.0 [2020-03-22 Sun] 791 | Bug fixes and improvements (version ~0.4.1307~). 792 | 793 | *** Breaking 794 | - Settings related to avatar radius, app background, and message bubbles will 795 | probably reset to their default values. 796 | 797 | *** Improved 798 | - Background images by adding different image versions 799 | - Avatar radius option by adding more avatar selectors 800 | - Header and buttons for media overlay modal 801 | - Opacity and radius for various icons 802 | - Typing indicator hack in compact mode 803 | - The contract for message bubble colors 804 | - The contrast for secondary background color 805 | - The app background option 806 | 807 | *** Fixed 808 | - Played state of audio messages 809 | - Items and icons for chat filter 810 | - Avatar's loading background in info pane 811 | - Animation for 'Jump to new messages' button 812 | - Opacity for attach menu icons 813 | - Elements for 'failed to send msg' area 814 | 815 | ** 2.2.2 [2020-02-22 Sat] 816 | Minor bug fixes and improvements. 817 | 818 | *** Documentation 819 | - Revised code comments 820 | 821 | *** Improved 822 | - Typing indicator hack while in compact mode ([[https://github.com/vednoc/dark-whatsapp/issues/111][#111]]) 823 | - Reverted to old styles for 'join group' buttons 824 | - Left floating panes in compact mode 825 | 826 | *** Fixed 827 | - Upload preview pane in compact mode 828 | - Chat background image opacity in Ferdi/Franz 829 | - Seen message status in message info 830 | - Logo icons for videos, embeds, etc ([[https://github.com/vednoc/dark-whatsapp/pull/120][#120]]) 831 | - Context menu icon hover animation ([[https://github.com/vednoc/dark-whatsapp/pull/121][#121]]) 832 | - Chat filter in WhatsApp Business ([[https://github.com/vednoc/dark-whatsapp/issues/122][#122]]) 833 | 834 | ** 2.2.1 [2020-02-16 Sun] 835 | Minor bug fixes for yesterday's update. 836 | 837 | *** Fixed 838 | - Missing ~dblcheck-ack~ colors 839 | - Full chat background image link 840 | - Colors for audio message controls 841 | - Animation for down arrow icon 842 | 843 | ** 2.2.0 [2020-02-15 Sat] 844 | Bug fixes and improvements (version ~0.4.930~). 845 | 846 | This update brought /hidden/ and still in-progress native dark mode to WhatsApp 847 | Web; to try it out yourself, open DevTools and add ~dark~ to the classes of the 848 | HTML element. The change should look like so: ~~ 849 | 850 | *** Breaking 851 | - Transparent emoji images are disabled until desktop installers are updated to 852 | the latest version. If you enable the option, it will use wrong emoji images. 853 | 854 | *** Added 855 | - Added an option to set custom avatar radius ([[https://github.com/vednoc/dark-whatsapp/pull/117][#117]]) 856 | 857 | *** Documentation 858 | - Revised code comments 859 | 860 | *** Improved 861 | - Compiled CSS output by refactoring left pane selectors 862 | - Compact mode indicators and message content positioning 863 | - Search input bar by adding a border around it 864 | - Hover/shadow styles for chat jump button 865 | - Badges now use the same colors 866 | 867 | *** Fixed 868 | - Alert colors in 'upload preview' pane 869 | - Minor regressions caused by refactoring 870 | - Hover/selected bugs for selected messages 871 | 872 | ** 2.1.2 [2020-02-10 Mon] 873 | Minor bug fixes and improvements (version ~0.4.613~). 874 | 875 | *** Improved 876 | - Gifs now have rounded corners 877 | - Colors for 'download media' buttons 878 | - Colors for 'download sticker' buttons 879 | - Colors for 'join' and 'view all contact' buttons 880 | 881 | *** Fixed 882 | - Tooltip colors for attach menu dropdown items 883 | - Z-index causing glitches in 'select messages' mode 884 | - Context menu gradient for embedded links 885 | - Message text position in compact mode ([[https://github.com/vednoc/dark-whatsapp/issues/112][#112]]) 886 | 887 | ** 2.1.1 [2020-01-27 Mon] 888 | Weekly update to address a few minor things. 889 | 890 | *** Documentation 891 | - Updated summary of the last release 892 | - Updated and improved preview image 893 | 894 | *** Improved 895 | - Alignment of UserCSS metadata 896 | - Accent color for the /new/ color-scheme preset ([[https://github.com/vednoc/dark-whatsapp/issues/32][#32]]) 897 | 898 | *** Fixed 899 | - Background z-index in /select messages/ mode ([[https://github.com/vednoc/dark-whatsapp/pull/108][#108]]) 900 | - Emoji race selection hover background 901 | - Search placeholder text color 902 | 903 | ** 2.1.0 [2020-01-21 Tue] 904 | Adding new features and porting v2 to =wa.user.css= format for use in extensions 905 | that don't support [[https://github.com/stylus/stylus/][stylus-lang]] and/or other projects. 906 | 907 | *** Added 908 | - An option to hide notification alerts ([[https://github.com/vednoc/dark-whatsapp/pull/101][#101]]) 909 | - An option to use theme colors in groups 910 | - New style for message tails, inspired by Facebook 911 | - New tertiary colors 912 | - /Lite/, non-customizable v2 version ([[https://github.com/vednoc/dark-whatsapp/commit/670210d579cb569c79afa5c8f764807d6e64b0db][info in this commit]]) 913 | 914 | *** Documentation 915 | - Updated wording for the ~2.0.6~ release ([[https://github.com/vednoc/dark-whatsapp/pull/92][#92]]) 916 | - Added more badges to the readme 917 | 918 | *** Improved 919 | - Intro message content ([[https://github.com/vednoc/dark-whatsapp/pull/93][#93]]) 920 | - Header content and QR code on the landing page 921 | - Visuals of active media tab in profiles ([[https://github.com/vednoc/dark-whatsapp/pull/97][#97]]) 922 | - On hover effect for chat replies ([[https://github.com/vednoc/dark-whatsapp/pull/105][#105]]) 923 | - On hover animation for arrows ([[https://github.com/vednoc/dark-whatsapp/pull/104][#104]]) 924 | - On hover background for avatars you can change ([[https://github.com/vednoc/dark-whatsapp/pull/103][#103]]) 925 | 926 | *** Fixed 927 | - Footer background color in /select messages/ mode 928 | - Colors for status area icons ([[https://github.com/vednoc/dark-whatsapp/issues/91][#91]]) 929 | - Hover background color when adding new group members 930 | - Background for 'x more members' button ([[https://github.com/vednoc/dark-whatsapp/pull/98][#98]]) 931 | - Selected media button opacity ([[https://github.com/vednoc/dark-whatsapp/pull/100][#100]]) 932 | - Icon opacity and colors on the left pane 933 | - Icon opacity for all icons 934 | - Icon color for "low battery" alert ([[https://github.com/vednoc/dark-whatsapp/pull/106][#106]]) 935 | 936 | ** 2.0.6 [2020-01-17 Fri] 937 | Hotfix for the latest update (version ~0.4.315~). 938 | 939 | *** USo/v1 notice 940 | - Ported some of the changes; please move over to v2 941 | - The v2 is coming to ~wa.user.css~ and userstyles.org in next the version 942 | 943 | *** Documentation 944 | - Added issue templates 945 | - Added sponsor button to the repository 946 | - Added external links and info about companion-style ([[https://github.com/vednoc/dark-whatsapp/pull/87][#87]]) 947 | 948 | *** Fixed 949 | - Intro pane and search bar ([[https://github.com/vednoc/dark-whatsapp/pull/89][#89]]) 950 | - Selected media header and icons 951 | - Icons and badges in compact mode 952 | - Z-index for the menu in starred messages 953 | - Caret color for ~select~ elements 954 | - Modal colors when adding group participants 955 | - Bottom divider for applications on intro page ([[https://github.com/vednoc/dark-whatsapp/pull/90][#90]]) 956 | - Emoji search input text color in Chromium 957 | 958 | ** 2.0.5 [2020-01-13 Mon] 959 | Minor bug fixes and improvements. 960 | 961 | Huge thanks to [[https://github.com/E-RELevant][Erelephant]] for making a bunch of pull requests and fixing a ton 962 | of bugs, as well as doing most of the work for [[https://github.com/vednoc/dark-whatsapp/wiki][project wiki pages]]! 963 | 964 | *** Documentation 965 | - Added old project name in the readme 966 | - Added info about using this userstyle with Ferdi 967 | - Added contributing ([[https://github.com/vednoc/dark-whatsapp/pull/85][#85]]) 968 | - Added credits to the readme 969 | 970 | *** Improved 971 | - Wrapper background for the left pane 972 | - Default colors for custom message bubbles ([[https://github.com/vednoc/dark-whatsapp/pull/78][#78]]) 973 | - Whitespace for desktop apps on intro pane ([[https://github.com/vednoc/dark-whatsapp/pull/82][#82]]) 974 | - Animation for icons that take action ([[https://github.com/vednoc/dark-whatsapp/pull/81][#81]], [[https://github.com/vednoc/dark-whatsapp/pull/86][#86]]) 975 | - Hover event for mentions now applies underline 976 | - Padding for modal body in a few modals 977 | 978 | *** Fixed 979 | - Star icons color for images/videos/gifs ([[https://github.com/vednoc/dark-whatsapp/pull/75][#75]]) 980 | - Emoji picker in upload preview pane 981 | - Background for attach dropdown items 982 | - Borders for group alerts ([[https://github.com/vednoc/dark-whatsapp/pull/79][#79]]) 983 | - Divider between modal header and search ([[https://github.com/vednoc/dark-whatsapp/pull/80][#80]]) 984 | - New group description alert ([[https://github.com/vednoc/dark-whatsapp/pull/83][#83]]) 985 | - Avatar border-radius glitches ([[https://github.com/vednoc/dark-whatsapp/pull/84][#84]]) 986 | - Context menu colors for messages with stickers 987 | - Disabled icons in selected messages area 988 | 989 | ** 2.0.4 [2020-01-05 Sun] 990 | Minor bug fixes and improvements. 991 | 992 | *** Improved 993 | - Made readme friendlier ([[https://github.com/vednoc/dark-whatsapp/pull/71][#71]]) and rewrote it in org-mode 994 | - Search box and restored the old look ([[https://github.com/vednoc/dark-whatsapp/pull/73][#73]]) 995 | - Star icons in messages are now using accent color 996 | - The way how thin scrollbars are applied in Firefox 997 | 998 | *** Fixed 999 | - An empty, old object-like, element that caused background glitches 1000 | - Context menu in messages with embedded links 1001 | - Outset for background blur 1002 | - Media player's box shadow 1003 | 1004 | ** 2.0.3 [2019-12-31 Tue] 1005 | Minor bug fixes and improvements. 1006 | 1007 | *** Improved 1008 | - Navigation bar in emoji/gif/sticker menu 1009 | - The =@= symbol color in mentions 1010 | 1011 | *** Fixed 1012 | - Background for default avatars in replies 1013 | - Audio slider colors in media player 1014 | - Text color of video duration 1015 | - Small border radius for reply/embed content 1016 | - Glitchy menu in starred messages 1017 | 1018 | ** 2.0.2 [2019-12-29 Sun] 1019 | Minor bug fixes and improvements. 1020 | 1021 | *** Improved 1022 | - Message tails has three options now (Thanks [[https://github.com/E-RELevant][Erelephant]] for this suggestion) 1023 | 1024 | *** Fixed 1025 | - Border around reply content works properly now 1026 | - Context menu for messages with files/links 1027 | - Second selector for mentions in the chat area 1028 | - Colors for forwarded status in message info area 1029 | 1030 | ** 2.0.1 [2019-12-27 Fri] 1031 | Thanks to [[https://github.com/E-RELevant][Erelephant]] for reporting quite a few of small bugs. 1032 | 1033 | *** Improved 1034 | - App background image is scaled properly 1035 | - Color-scheme option allows you to choose between old, new, and custom colors 1036 | - Simplified the logic for message tails, bubble positions, and bubble colors 1037 | 1038 | *** Fixed 1039 | - Mention's =@= symbol and contact name 1040 | - Bold font weight and audio icon color in contact's area 1041 | - Context menus for forwarded messages and messages with files 1042 | - Missing timestamp background from gif messages 1043 | 1044 | ** 2.0.0 [2019-12-21 Sat] 1045 | Moving forward, all the changes will be documented here. 1046 | 1047 | Huge thanks to [[https://github.com/E-RELevant][Erelephant]] for testing and reporting bugs throughout this entire 1048 | process. It wouldn't have been the same without your help. :tada: 1049 | 1050 | *** About v1.x.x version 1051 | *TL;DR:* It is going away soon. 1052 | 1053 | When the script is done, the version 2.x.x will be compiled to =wa.user.css= file. 1054 | USo userstyle will be updated shortly after with this version. 1055 | -------------------------------------------------------------------------------- /contributing.org: -------------------------------------------------------------------------------- 1 | #+TITLE: Contributing to Dark-WhatsApp 2 | #+STARTUP: nofold 3 | 4 | * Table of Contents :TOC_5: 5 | - [[#getting-involved][Getting Involved]] 6 | - [[#how-to-report-style-issues][How to Report Style Issues]] 7 | - [[#i-dont-know-css][I don't know CSS]] 8 | - [[#i-know-both-css--github][I know both CSS & GitHub]] 9 | - [[#duplicate-the-style-or-create-a-companion-style][Duplicate the style or create a "companion style"]] 10 | - [[#duplicate-the-style][Duplicate the style]] 11 | - [[#create-a-companion-style][Create a "companion style"]] 12 | - [[#getting-started][Getting Started]] 13 | - [[#style-guide][Style guide]] 14 | - [[#contributing-code][Contributing code]] 15 | - [[#testing-changes-of-a-local-userstyle][Testing changes of a local userstyle]] 16 | 17 | * Getting Involved 18 | There are a number of ways to get involved with the development of 19 | Dark-WhatsApp. 20 | 21 | Even if you've never contributed to an Open Source project before, we're always 22 | looking for help identifying missing styles or other issues. 23 | 24 | * How to Report Style Issues 25 | ** I don't know CSS 26 | If you don't know CSS very well and have found a missing style, please include 27 | as much as possible of following information when opening an issue: 28 | 29 | - Screenshot of the problem 30 | - Include the element(s) in the console if at all possible 31 | - To select an element, target it with your mouse then right-click and choose 32 | "Inspect Element", otherwise press `Ctrl + Shift + C` and select it with 33 | your left mouse click 34 | - Copy the HTML if at all possible 35 | 36 | ** I know both CSS & GitHub 37 | - *Recommended:* [[#duplicate-the-style][duplicate]] the style or [[#create-a-companion-style][create a "companion style"]] 38 | - Follow the [[#style-guide][style guide]] below 39 | - Make any needed changes, then send us a pull request 40 | - Please include a URL to the page (if public) 41 | 42 | *** Duplicate the style or create a "companion style" 43 | When a userstyle is installed from a page, Stylus stores the url of that page 44 | internally along with the CSS style. 45 | 46 | If that userstyle is then modified or even renamed, it will still maintain the 47 | original install location, but all automatic updates of the modified userstyle 48 | will be blocked to preserve local changes. A manual update of that userstyle is 49 | required to update, but be warned that an update *will overwrite* all changes, 50 | i.e. *all modifications will be lost*! 51 | 52 | To get around this, either duplicate it or create a "companion style". 53 | 54 | **** Duplicate the style 55 | The easiest way is to copy and paste the source code into a new, *local* style. 56 | 57 | 1. Copy the style 58 | - Open Dark-WhatsApp in the [[https://github.com/openstyles/stylus/wiki/Editor][Stylus' Editor]] [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] 59 | - Copy the code directly from the edit window. 60 | - If not all content is automatically selected in the popped up window, use Select All (@@html:@@Ctrl@@html:@@+@@html:@@A@@html:@@), then Copy (@@html:@@Ctrl@@html:@@+@@html:@@C@@html:@@) the style. 61 | 2. Paste into a new style 62 | - Click "Write new style" in the [[https://github.com/openstyles/stylus/wiki/Manager][Stylus' Manager]] [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] 63 | - Paste (@@html:@@Ctrl@@html:@@+@@html:@@V@@html:@@) the style into the code block area. 64 | - Give the style a name, then save. 65 | 66 | **** Create a "companion style" 67 | Please refer to the [[https://github.com/openstyles/stylus/wiki/Writing-styles#making-a-companion-style][Stylus' Writing Styles page]] [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] for more details. 68 | 69 | * Getting Started 70 | ** Style guide 71 | - Limit to the [[https://en.wikipedia.org/wiki/Indentation_style#Variant:_BSD_KNF][K&R (KNF variation style)]] [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]], and *TAB SPACE INDENTATION* (not more, 72 | and not less than 4 spaces). 73 | - Use [[https://editorconfig.org/][EditorConfig]] [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] plugin for your editor if at all possible, and let it take 74 | care of indentation. 75 | 76 | - K&R - KNF Variation Example: 77 | #+BEGIN_SRC css 78 | element[attr='value'] { 79 | ····property: value; 80 | } 81 | #+END_SRC 82 | 83 | - *Not* Allman 84 | #+BEGIN_SRC css 85 | element[property='value'] 86 | { 87 | ····property: value; 88 | } 89 | #+END_SRC 90 | 91 | - Strict space between the =selector= and the ={=: 92 | #+BEGIN_SRC css 93 | /* good */ 94 | element[attr='value'] { } 95 | /* bad */ 96 | element[attr='value']{ } 97 | #+END_SRC 98 | 99 | - Don't go multi-line for simple one-liners 100 | #+BEGIN_SRC css 101 | /* good */ 102 | element { property: value } 103 | /* bad */ 104 | element { 105 | property: value; 106 | } 107 | #+END_SRC 108 | 109 | - 4 [Tab] Space indentation 110 | #+BEGIN_SRC css 111 | /* good */ 112 | ····property: value; 113 | /* bad */ 114 | ··property: value; 115 | --property: value; 116 | ·property: value; 117 | #+END_SRC 118 | 119 | - Use the provided mixins and variables 120 | 121 | You can find more about them at the top of the =wa.user.styl= file. Also, use 122 | [[http://stylus-lang.com/][stylus-lang documentation]] 123 | [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] 124 | to get familar with Stylus-lang syntax and features. 125 | 126 | #+BEGIN_SRC css 127 | /* good */ 128 | element { c: #eee 0 #333 } 129 | /* best */ 130 | element { c: fg1 0 bg1 } 131 | /* bad */ 132 | element { 133 | color: #eee, 134 | background-color: #333; 135 | } 136 | #+END_SRC 137 | 138 | - Try to wrap lines at around 80 characters. 139 | - This style does not have a size limit, but: 140 | - If possible, reduce any added selectors. Remember that the style likely has 141 | an =!important= flag to override default styling, so a selector starting from 142 | the body isn't always necessary. 143 | - If your CSS definition already exists within the style, do not add it again! 144 | Add your selector to the existing definition. 145 | - Insert any new CSS selectors in any available slot before the style 146 | definition, or on a new line as needed. 147 | - If you want to add a new userstyle variable/feature, please open an issue and 148 | discuss it with us first. 149 | - Don't include version bumps with your contribution, all releases are handled 150 | internally. 151 | - If your pull request (PR) fixes an open issue or replaces another PR, include 152 | fixes/closes =#issue-number= in your commit message title. [[https://help.github.com/en/articles/closing-issues-using-keywords][Read more on this]] 153 | [[https://user-images.githubusercontent.com/136959/44433186-de548e80-a56a-11e8-8947-d3331bd6d7a1.png]] 154 | 155 | ** Contributing code 156 | - [[https://user-images.githubusercontent.com/20738487/72159480-1c06c100-33c5-11ea-91d1-7a67c1dd7ae5.png]] 157 | [[https://github.com/vednoc/dark-whatsapp/archive/master.zip][Download]], 158 | [[https://user-images.githubusercontent.com/20738487/72159479-1c06c100-33c5-11ea-9ce4-c3d17110348a.png]] 159 | [[https://github.com/vednoc/dark-whatsapp/fork][fork]], or clone this repository 160 | - Create and change into a new branch of your local Dark-WhatsApp repository 161 | - Make the changes in the [[https://github.com/vednoc/dark-whatsapp/blob/master/wa.user.styl][wa.user.styl]] file and verify that they fix the issue 162 | - Push the changes to your branch 163 | + Make sure that your changes address only a *single* issue. Don't combine 164 | multiple fixes for unrelated issues into a single pull request. 165 | - Submit a PR 166 | 167 | ** Testing changes of a local userstyle 168 | - Open the =wa.user.styl= file in your browser, and make sure to have "live 169 | preview" checked for testing 170 | - If you're using a Chromium-based browser, go to /extensions/, open /details/ for 171 | Stylus, and enable "Allow access to file URLs". 172 | - Make some changes then save the file, and Stylus will do its magic 173 | -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vednoc/dark-whatsapp/396b6626ccfdd341b1e258b089b4994e5405bfcf/images/background.jpg -------------------------------------------------------------------------------- /images/bg-blur-high.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vednoc/dark-whatsapp/396b6626ccfdd341b1e258b089b4994e5405bfcf/images/bg-blur-high.jpg -------------------------------------------------------------------------------- /images/bg-blur-low.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vednoc/dark-whatsapp/396b6626ccfdd341b1e258b089b4994e5405bfcf/images/bg-blur-low.jpg -------------------------------------------------------------------------------- /images/bg-blur-none.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vednoc/dark-whatsapp/396b6626ccfdd341b1e258b089b4994e5405bfcf/images/bg-blur-none.jpg -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vednoc/dark-whatsapp/396b6626ccfdd341b1e258b089b4994e5405bfcf/images/preview.png -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2020 vednoc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /metadata.styl: -------------------------------------------------------------------------------- 1 | /*! ==UserStyle== 2 | @name Dark-WhatsApp Custom 3 | @description Custom-compiled version of Dark-WhatsApp. 4 | @namespace github.com/vednoc/dark-whatsapp 5 | @homepageURL https://github.com/vednoc/dark-whatsapp 6 | @supportURL https://github.com/vednoc/dark-whatsapp/issues 7 | @author vednoc (https://github.com/vednoc) 8 | @version 3.7.0 9 | @license MIT 10 | ==/UserStyle== */ 11 | 12 | /*! 13 | * This is a custom-compiled version of DWA. 14 | * Documentation for options is available on project wiki's ~Configuration~ page: 15 | * https://github.com/vednoc/dark-whatsapp/wiki/Configuration 16 | */ 17 | 18 | // Base color-scheme toggle. 19 | /// Options: 'custom' --- same as old option, but you can change base colors 20 | /// 'old' --- dark blue colors 21 | /// 'new --- dark gray colors 22 | theme = 'old' 23 | 24 | // Base Background/Foreground/Accent colors for custom ~theme~ option. 25 | _bg = #1f232a 26 | _fg = #eeeeee 27 | _ac = #7289da 28 | 29 | // Adjust generated tones for Background/Foreground/Accent colors. 30 | /// Options: bg --- -25--25%, step by 0.1, 0% default value 31 | /// fg --- -25--25%, step by 0.1, 0% default value 32 | /// ac --- 0--25%, step by 1, 0% default value 33 | /// sc --- 0--25%, step by 1, 0% default value 34 | _bg_a = 0% 35 | _fg_a = 0% 36 | _ac_a = 0% 37 | _sc_a = 0% 38 | 39 | // UI font. 40 | ui_font = 'font_name' 41 | 42 | // App width. 43 | app_width = 1396px 44 | 45 | // Fullscreen mode. 46 | fullscreen = 0 47 | 48 | // Compact mode. 49 | compact = 1 50 | 51 | // Compact mode breakpoint. 52 | compact_mw = 720px 53 | 54 | // Compact mode hover-on delay. 55 | compact_hi = 0.6s 56 | 57 | // Compact mode hover-off delay. 58 | compact_ho = 1.2s 59 | 60 | // Notification alerts. 61 | /// Options: show --- Show all notifications 62 | /// hide --- Hide all notifications 63 | /// notifications --- Hide only notifications 64 | app_alerts = 'show' 65 | 66 | // Consistent drawer headers. 67 | app_header = 1 68 | 69 | // Rounded corners for various menus. 70 | radius_m = 4px 71 | 72 | // Rounded corners for input bar. 73 | radius_i = 24px 74 | 75 | // Rounded corners for avatars. 76 | /// Options: 0--50%, step by 1, 50% default value 77 | radius_a = 50% 78 | 79 | // App background. 80 | /// Options: 'bg-high' --- Theme image with 12px blur 81 | /// 'bg-low' --- Theme image with 6px blur 82 | /// 'bg-none' --- Theme image without blur 83 | /// 'custom' --- Custom background image 84 | /// 'default' --- Default stripe background 85 | /// 'none' --- No background image 86 | app_image = 'bg-high' 87 | 88 | // Custom app background image. 89 | image_url = url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80') 90 | 91 | // App background image opacity. 92 | /// Options: 0--1, step by 0.1, 0.4 default value 93 | bg_opacity = 0.4 94 | 95 | // App background image blur. 96 | /// Options: 0--50px, step by 1, 0px default value 97 | bg_blur = 0px 98 | 99 | // App background image hue. 100 | /// Options: 0--360deg, step by 1, 320deg default value 101 | bg_hue = 320deg 102 | 103 | // App background image inverted colors. 104 | /// Options: 0--1, step by 0.1, 0 default value 105 | bg_invert = 0 106 | 107 | // App background image size. 108 | bg_size = cover 109 | 110 | // App background image position. 111 | bg_pos = center 112 | 113 | // App background image repetition. 114 | bg_rep = no-repeat 115 | 116 | // Message tails. 117 | /// Options: 'default', 'minimal', 'rounded', 'fb-like' 118 | tail_style = 'default' 119 | 120 | // Collapse messages when `fb-like` tail style is enabled. 121 | fb_compact = 1 122 | 123 | // Emoji non-hover opacity. 124 | /// Options: 0--1, step by 0.1, 0.8 default value 125 | emoji_o = 0.8 126 | 127 | // Reduce big emoji size. 128 | /// Options: 'default', 'medium', 'normal', 'small' 129 | emoji_b = 'default' 130 | 131 | // Animated emojis. 132 | emoji_a = 1 133 | 134 | // Emojis with kiss animation. 135 | emoji_k = '💋' 136 | 137 | // Emojis with pulse animation. 138 | emoji_p = '🤩' '😍' '☺️' '❣️' '♥️' '❤️' 139 | 140 | // Override seen message icon color. 141 | ow_ack = 0 142 | 143 | // Seen message icon color. 144 | _ack = #ff6666 145 | 146 | // Override system message background color. 147 | ow_sys_msg = 0 148 | 149 | // System message background color 150 | sys_msg_bg = #364462 151 | 152 | // Override incoming message bubble color. 153 | ow_imsg = 0 154 | 155 | // Incoming message bubble color. 156 | _imsg = #16191e 157 | 158 | // Swap side for incoming message bubble. 159 | bubble_in = 0 160 | 161 | // Override outgoing message bubble color. 162 | ow_omsg = 0 163 | 164 | // Outgoing message bubble color. 165 | _omsg = #3b4250 166 | 167 | // Swap side for incoming message bubble. 168 | bubble_out = 0 169 | 170 | // Remove empty message headers for RTL messages. 171 | rtl_header = 1 172 | 173 | // Fix formatting for RTL messages. 174 | rtl_format = 1 175 | 176 | // Hide profile pictures. 177 | chat_h_p_p = 0 178 | 179 | // Blur contacts drawer. 180 | chat_b_c = 0 181 | 182 | // Blur chat images/videos and other media. 183 | chat_b_img = 0 184 | 185 | // Blurred media hover-on delay. 186 | chat_b_in = 0.4s 187 | 188 | // Blurred media hover-off delay. 189 | chat_b_out = 0.2s 190 | 191 | // Chat background image. 192 | chat_bg = 1 193 | 194 | // Custom chat background image. 195 | chat_image = url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png') 196 | 197 | // Chat background image opacity. 198 | /// Options: 0--1, step by 0.01, 0.15 default value 199 | chat_bg_o = 0.15 200 | 201 | // Chat background image inverted colors. 202 | /// Options: 0--1, step by 0.01, 0.6 default value 203 | chat_bg_iv = 0.6 204 | 205 | // Chat background image size. 206 | chat_bg_s = initial 207 | 208 | // Chat background image position. 209 | chat_bg_p = top left 210 | 211 | // Chat background image repetition. 212 | chat_bg_r = repeat 213 | 214 | // Override various theme colors. 215 | _yellow = #e5c512 216 | _orange = #df4b16 217 | _red = #dc322f 218 | _magenta = #f33682 219 | _violet = #6c71c4 220 | _blue = #268bd2 221 | _cyan = #2aa198 222 | _green = #859900 223 | _white = #ffffff 224 | _sh = #00000025 225 | -------------------------------------------------------------------------------- /readme.org: -------------------------------------------------------------------------------- 1 | #+STARTUP: nofold 2 | #+HTML:
3 | #+HTML: 4 | 5 | * Dark-WhatsApp (né onyx) 6 | Complete dark mode implementation for [[https://web.whatsapp.com][WhatsApp Web]] with many improvements and 7 | customizable options. 8 | 9 | [[https://github.com/vednoc/dark-whatsapp/blob/master/changelog.org][https://img.shields.io/github/v/tag/vednoc/dark-whatsapp.svg?label=version&style=flat]] 10 | [[https://github.com/vednoc/dark-whatsapp/stargazers][https://img.shields.io/github/stars/vednoc/dark-whatsapp.svg?style=flat]] 11 | [[https://github.com/vednoc/dark-whatsapp/network][https://img.shields.io/github/forks/vednoc/dark-whatsapp.svg?color=007ec6&style=flat]] 12 | [[https://github.com/vednoc/dark-whatsapp/wiki][https://img.shields.io/badge/docs-on%20GitHub-007ec6.svg?&style=flat]] 13 | [[https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg?longCache=true&style=flat]] 14 | [[https://discord.gg/NpT8PzA][https://img.shields.io/discord/272011641694978048.svg?longCache=true&colorB=7289da&logo=discord&style=flat]] 15 | 16 | #+HTML: 17 | 18 | /Version 3.0.0 with [[https://github.com/rsms/inter/][Inter]] as the custom font, and hidden notification alerts. 19 | Check [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration][Configuration page]] on project/ wiki to get started customizing your 20 | Dark-WhatsApp. See more examples in the [[https://github.com/vednoc/dark-whatsapp/issues/178][Screenshot thread]]. 21 | 22 | #+HTML:
23 | 24 | ** Features 25 | - Complete dark mode — utilizing WhatsApp's native CSS variables 26 | - Customizable base colors — light/dark color-schemes are fully supported 27 | - Private mode — blurring contacts and/or chat media until you hover over them 28 | - Compact mode for small resolutions (optional, very hacky; works well though) 29 | - Fullscreen mode — if you prefer not wasting any available space 30 | - Custom background options for app/chat background images 31 | - Custom message bubble colors and/or their positions 32 | - Custom emoji opacity and unified big emoji sizes 33 | - Various styles and options for message tails 34 | - Custom chat window width, UI font, and more! 35 | 36 | Visit [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration][configuration page]] to see the full list of features and how to use them. 37 | 38 | ** Installation 39 | You have to install [[https://add0n.com/stylus.html][Stylus]] and then click on the install link below. 40 | 41 | [[https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.styl][https://img.shields.io/badge/Install%20directly%20with-Stylus-116b59.svg]] 42 | 43 | *** Other ways to install this userstyle 44 | For userstyle managers other than Stylus or a custom-compiled version, see 45 | [[https://github.com/vednoc/dark-whatsapp/wiki/Installation][installation page]]. 46 | 47 | ** Getting Started 48 | If you have a question, make sure to see [[https://github.com/vednoc/dark-whatsapp/wiki/FAQ][FAQ page]] first in order to see if your 49 | question has already been answered. 50 | 51 | To learn more about using this theme and customizing it for your personal use, 52 | visit the [[https://github.com/vednoc/dark-whatsapp/wiki/Configuration][configuration page]]. 53 | 54 | ** Contributions 55 | Any contribution is greatly appreciated. 56 | 57 | If you'd like to contribute code, please make sure to read the [[https://github.com/vednoc/dark-whatsapp/blob/master/contributing.org][contribution 58 | guidelines]]. 59 | 60 | If you really like this project and would like to tip me for my work, then you 61 | can: 62 | - Buy me a coffee over at [[https://ko-fi.com/vednoc][ko-fi]] 63 | - Support me over at [[https://liberapay.com/vednoc][LiberaPay]] 64 | 65 | ** Credits 66 | This project wouldn't be possible without: 67 | - [[https://github.com/erelado][erelado]] for making wiki pages, testing and reporting/fixing bugs 68 | - [[https://github.com/StylishThemes/][StylishThemes]] team for inspiration and documentation templates 69 | - [[https://unsplash.com/@totem_phillip][Phillip Sauerbeck]] for the gorgeous [[https://unsplash.com/photos/Tmk0MkQVwwA][background image]] 70 | - Everyone that helped with [[https://github.com/vednoc/dark-whatsapp/issues][issues]] and/or [[https://github.com/vednoc/dark-whatsapp/pulls][code]] 71 | 72 | Similar open-source projects: 73 | - [[https://github.com/Barina/Dark-Telegram][Barina/Dark-Telegram]] - Port of Dark-WhatsApp to Telegram 74 | - [[https://github.com/dcferreira/franz-themes][dcferreira/franz-themes]] - Port to Ferdi/Franz (desktop apps) 75 | - [[https://github.com/obvionaoe/dark][obvionaoe/dark]] - Port to Ferdi/Franz/Rambox (desktop apps) 76 | - [[https://github.com/amanharwara/altus][amanharwara/altus]] - Port to Altus (desktop app) 77 | 78 | ** License 79 | Code released under the [[license][MIT]] license. 80 | -------------------------------------------------------------------------------- /wa.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Dark-WhatsApp Lite 3 | @description Non-customizable version of Dark-WhatsApp. 4 | @namespace github.com/vednoc/dark-whatsapp 5 | @homepageURL https://github.com/vednoc/dark-whatsapp 6 | @supportURL https://github.com/vednoc/dark-whatsapp/issues 7 | @updateURL https://userstyles.world/api/style/253.user.css 8 | @author vednoc (https://github.com/vednoc) 9 | @version 3.7.2 10 | @license MIT 11 | ==/UserStyle== */ 12 | 13 | @-moz-document domain('web.whatsapp.com') { 14 | :root:not(#z), 15 | .dark:not(#z) { 16 | --version: '🌚 Dark-WhatsApp Lite v3.7.2 — March 31st, 2023'; 17 | --ui-font: 'font_name', Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif; 18 | --r-menus: 4px; 19 | --r-inputs: 24px; 20 | --r-avatars: 50%; 21 | --c-m-hover: 0.6s; 22 | --c-m-delay: 1.2s; 23 | --blur-in: 0.4s; 24 | --blur-out: 0.2s; 25 | --app-width: 1396px; 26 | --emoji-o: 0.8; 27 | --bg-image: url("https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/images/bg-blur-high.jpg"); 28 | --bg-opacity: 0.4; 29 | --bg-blur: 0px; 30 | --bg-blur-s: calc(-2 * var(--bg-blur)); 31 | --bg-hue: 320deg; 32 | --bg-invert: 0; 33 | --bg-size: cover; 34 | --bg-pos: center; 35 | --bg-rep: no-repeat; 36 | --chat-image: url("https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png"); 37 | --chat-bg-o: 0.15; 38 | --chat-bg-i: 0.6; 39 | --chat-bg-s: initial; 40 | --chat-bg-p: top left; 41 | --chat-bg-r: repeat; 42 | --msg-in-0: var(--bg-4); 43 | --msg-in-0-rgb: var(--bg-4-rgb); 44 | --msg-in-1: var(--bg-3); 45 | --msg-in-1-rgb: var(--bg-3-rgb); 46 | --msg-out-0: var(--ac-4); 47 | --msg-out-0-rgb: var(--ac-4-rgb); 48 | --msg-out-1: var(--ac-5); 49 | --msg-out-1-rgb: var(--ac-5-rgb); 50 | --msg-ack: var(--ac-0); 51 | --msg-ack-rgb: var(--ac-0-rgb); 52 | --gray-30: var(--bg-5); 53 | --gray-30-rgb: var(--bg-5-rgb); 54 | --gray-700: var(--fg-4); 55 | --gray-700-rgb: var(--fg-4-rgb); 56 | --pale-blue-green: var(--b6-4); 57 | --pale-blue-green-rgb: var(--b6-4-rgb); 58 | --pale-green: var(--b4-4); 59 | --pale-green-rgb: var(--b4-4-rgb); 60 | --pale-yellow: var(--b3-4); 61 | --pale-yellow-rgb: var(--b3-4-rgb); 62 | --teal: var(--ac-0); 63 | --teal-rgb: var(--ac-0-rgb); 64 | --teal-light: var(--ac-1); 65 | --teal-light-rgb: var(--ac-1-rgb); 66 | --teal-lighter: var(--ac-2); 67 | --teal-lighter-rgb: var(--ac-2); 68 | --green-deep: var(--ac-2); 69 | --green-deep-rgb: var(--ac-2-rgb); 70 | --blue-ocean: var(--bg-2); 71 | --blue-ocean-rgb: var(--bg-2-rgb); 72 | --active-tab-marker: var(--ac-0); 73 | --active-tab-marker-rgb: var(--ac-0-rgb); 74 | --app-background-stripe: var(--bg-1); 75 | --app-background-stripe-rgb: var(--bg-1-rgb); 76 | --app-background: var(--bg-0); 77 | --app-background-rgb: var(--bg-0-rgb); 78 | --app-background-deeper: var(--bg-0); 79 | --app-background-deeper-rgb: var(--bg-0-rgb); 80 | --attach-media-drop-border: var(--fg-3); 81 | --attach-media-drop-border-rgb: var(--fg-3-rgb); 82 | --attach-media-drop-overlay: var(--bg-2); 83 | --attach-media-drop-overlay-rgb: var(--bg-2-rgb); 84 | --audio-progress-incoming: var(--b4-0); 85 | --audio-progress-incoming-rgb: var(--b4-0-rgb); 86 | --audio-progress-outgoing: var(--ac-2); 87 | --audio-progress-outgoing-rgb: var(--ac-2-rgb); 88 | --audio-progress-played-incoming: var(--b6-0); 89 | --audio-progress-played-incoming-rgb: var(--b6-0-rgb); 90 | --audio-progress-played-outgoing: var(--b6-0); 91 | --audio-progress-played-outgoing-rgb: var(--b6-0-rgb); 92 | --audio-track-incoming: var(--fg-4); 93 | --audio-track-incoming-rgb: var(--fg-4-rgb); 94 | --audio-track-outgoing: var(--fg-4); 95 | --audio-track-outgoing-rgb: var(--fg-4-rgb); 96 | --avatar-background: var(--bg-1); 97 | --avatar-background-rgb: var(--bg-1-rgb); 98 | --avatar-border: var(--bg-3); 99 | --avatar-border-rgb: var(--bg-3-rgb); 100 | --avatar-placeholder-background: var(--bg-5); 101 | --avatar-placeholder-background-rgb: var(--bg-5-rgb); 102 | --avatar-placeholder-primary: var(--fg-3); 103 | --avatar-placeholder-primary-rgb: var(--fg-3-rgb); 104 | --background-default: var(--bg-2); 105 | --background-default-rgb: var(--bg-2-rgb); 106 | --background-default-active: var(--bg-4); 107 | --background-default-active-rgb: var(--bg-4-rgb); 108 | --background-default-hover: var(--bg-3); 109 | --background-default-hover-rgb: var(--bg-3-rgb); 110 | --border-bubble: var(--shadow); 111 | --border-bubble-rgb: var(--shadow-rgb); 112 | --border-default: var(--bg-3); 113 | --border-default-rgb: var(--bg-3-rgb); 114 | --border-list: var(--bg-3); 115 | --border-list-rgb: var(--bg-3-rgb); 116 | --border-panel: var(--bg-5); 117 | --border-panel-rgb: var(--bg-5-rgb); 118 | --border-strong: var(--bg-5); 119 | --border-strong-rgb: var(--bg-5-rgb); 120 | --border-stronger: var(--bg-5); 121 | --border-stronger-rgb: var(--fg-5-rgb); 122 | --bubble-meta: var(--fg-3); 123 | --bubble-meta-rgb: var(--fg-3-rgb); 124 | --bubble-meta-icon: var(--fg-3); 125 | --bubble-meta-icon-rgb: var(--fg-3-rgb); 126 | --butterbar-battery-background: var(--b1-4); 127 | --butterbar-battery-background-rgb: var(--b1-4-rgb); 128 | --butterbar-battery-icon: var(--b1-0); 129 | --butterbar-battery-icon-rgb: var(--b1-0-rgb); 130 | --butterbar-battery-primary: var(--fg-0); 131 | --butterbar-battery-primary-rgb: var(--fg-0-rgb); 132 | --butterbar-battery-secondary: var(--fg-4); 133 | --butterbar-battery-secondary-rgb: var(--fg-4-rgb); 134 | --butterbar-connection-background: var(--b3-4); 135 | --butterbar-connection-background-rgb: var(--b3-4-rgb); 136 | --butterbar-connection-primary: var(--fg-0); 137 | --butterbar-connection-primary-rgb: var(--fg-0-rgb); 138 | --butterbar-connection-secondary: var(--fg-4); 139 | --butterbar-connection-secondary-rgb: var(--fg-4-rgb); 140 | --butterbar-default-background: var(--b6-4); 141 | --butterbar-default-background-rgb: var(--b6-4); 142 | --butterbar-icon: var(--b3-0); 143 | --butterbar-icon-rgb: var(--b3-0-rgb); 144 | --butterbar-notification-icon: var(--b6-0); 145 | --butterbar-notification-icon-rgb: var(--b6-0-rgb); 146 | --butterbar-primary: var(--fg-0); 147 | --butterbar-primary-rgb: var(--fg-0-rgb); 148 | --butterbar-secondary: var(--fg-4); 149 | --butterbar-secondary-rgb: var(--fg-4-rgb); 150 | --butterbar-update-background: var(--b4-4); 151 | --butterbar-update-background-rgb: var(--b4-4-rgb); 152 | --butterbar-update-icon: var(--b4-0); 153 | --butterbar-update-icon-rgb: var(--b4-0-rgb); 154 | --button-alternative: var(--ac-1); 155 | --button-alternative-rgb: var(--ac-1-rgb); 156 | --button-alternative-background: var(--bg-3); 157 | --button-alternative-background-rgb: var(--bg-3-rgb); 158 | --button-background-disabled: var(--bg-2); 159 | --button-background-disabled-rgb: var(--bg-2-rgb); 160 | --button-bubble: var(--ac-0); 161 | --button-bubble-rgb: var(--ac-0-rgb); 162 | --button-plain-background: var(--bg-4); 163 | --button-plain-background-rgb: var(--bg-4-rgb); 164 | --button-primary: var(--white); 165 | --button-primary-rgb: var(--white-rgb); 166 | --button-primary-background: var(--ac-0); 167 | --button-primary-background-rgb: var(--ac-0-rgb); 168 | --button-primary-background-hover: var(--ac-3); 169 | --button-primary-background-hover-rgb: var(--ac-3-rgb); 170 | --button-round-background: var(--ac-0); 171 | --button-round-background-rgb: var(--ac-0-rgb); 172 | --button-secondary: var(--ac-0); 173 | --button-secondary-rgb: var(--ac-0-rgb); 174 | --button-secondary-background: transparent; 175 | --button-secondary-background-rgb: 0, 0, 0; 176 | --button-secondary-background-hover: rgba(241,241,242,0.051); 177 | --button-secondary-background-hover-rgb: var(--fg-3-rgb); 178 | --button-secondary-hover: var(--ac-0); 179 | --button-secondary-hover-rgb: var(--ac-0-rgb); 180 | --chat-marker: var(--fg-3); 181 | --chat-marker-rgb: var(--fg-3-rgb); 182 | --chat-marker-admin: var(--ac-0); 183 | --chat-marker-admin-rgb: var(--ac-0-rgb); 184 | --chat-marker-admin-border: var(--ac-0); 185 | --chat-marker-admin-border-rgb: var(--ac-0-rgb); 186 | --chat-marker-border: var(--fg-3); 187 | --chat-marker-border-rgb: var(--fg-3-rgb); 188 | --chat-meta: var(--fg-3); 189 | --chat-meta-rgb: var(--fg-3-rgb); 190 | --chatlist-icon: var(--fg-5); 191 | --chatlist-icon-rgb: var(--fg-5-rgb); 192 | --checkbox-background: var(--ac-0); 193 | --checkbox-background-rgb: var(--ac-0-rgb); 194 | --checkbox-mark: var(--white); 195 | --checkbox-mark-rgb: var(--white-rgb); 196 | --chevron-button-background: var(--bg-3); 197 | --chevron-button-background-rgb: var(--bg-3-rgb); 198 | --compose-input-background-focused: var(--bg-0); 199 | --compose-input-background-focused-rgb: var(--bg-0-rgb); 200 | --compose-input-background: var(--bg-1); 201 | --compose-input-background-rgb: var(--bg-1-rgb); 202 | --compose-input-border: var(--bg-5); 203 | --compose-input-border-rgb: var(--bg-5-rgb); 204 | --compose-input-border-focused: var(--bg-5); 205 | --compose-input-border-focused-rgb: var(--bg-5-rgb); 206 | --compose-panel-background: var(--bg-3); 207 | --compose-panel-background-rgb: var(--bg-3-rgb); 208 | --compose-panel-background-hover: var(--bg-4); 209 | --compose-panel-background-hover-rgb: var(--ac-4-rgb); 210 | --compose-primary: var(--fg-1); 211 | --compose-primary-rgb: var(--fg-1-rgb); 212 | --conversation-panel-background: var(--bg-1); 213 | --conversation-panel-background-rgb: var(--bg-1-rgb); 214 | --conversation-panel-border: var(--bg-5); 215 | --conversation-panel-border-rgb: var(--fg-3-rgb); 216 | --danger: var(--b1-0); 217 | --danger-rgb: var(--b1-0-rgb); 218 | --drawer-background: var(--bg-1); 219 | --drawer-background-rgb: var(--bg-1-rgb); 220 | --drawer-background-deep: var(--bg-0); 221 | --drawer-background-deep-rgb: var(--bg-0-rgb); 222 | --drawer-gallery-background: var(--bg-1); 223 | --drawer-gallery-background-rgb: var(--bg-1-rgb); 224 | --drawer-gallery-background-active: var(--bg-0); 225 | --drawer-gallery-background-active-rgb: var(--bg-0-rgb); 226 | --drawer-gallery-background-hover: var(--bg-0); 227 | --drawer-gallery-background-hover-rgb: var(--bg-0-rgb); 228 | --drawer-header-title: var(--fg-1); 229 | --drawer-header-title-rgb: var(--fg-1-rgb); 230 | --drawer-section-background: var(--bg-2); 231 | --drawer-section-background-rgb: var(--bg-2-rgb); 232 | --dropdown-background: var(--bg-2); 233 | --dropdown-background-rgb: var(--bg-2-rgb); 234 | --dropdown-background-hover: var(--bg-3); 235 | --dropdown-background-hover-rgb: var(--bg-3-rgb); 236 | --empty-state-background: var(--bg-3); 237 | --empty-state-background-rgb: var(--bg-3-rgb); 238 | --empty-state-icon: var(--fg-4); 239 | --empty-state-icon-rgb: var(--fg-4-rgb); 240 | --focus: var(--ac-3); 241 | --focus-rgb: var(--ac-3-rgb); 242 | --focus-animation: var(--ac-3); 243 | --focus-animation-rgb: var(--ac-3-rgb); 244 | --focus-animation-deeper: var(--ac-3); 245 | --focus-animation-deeper-rgb: var(--ac-3-rgb); 246 | --focus-lighter: var(--ac-3); 247 | --focus-lighter-rgb: var(--ac-3-rgb); 248 | --highlight: var(--ac-0); 249 | --highlight-rgb: var(--ac-0-rgb); 250 | --icon: var(--fg-3); 251 | --icon-rgb: var(--fg-3-rgb); 252 | --icon-ack: var(--msg-ack); 253 | --icon-ack-rgb: var(--msg-ack-rgb); 254 | --icon-disabled: var(--fg-5); 255 | --icon-disabled-rgb: var(--fg-5-rgb); 256 | --icon-fixed: var(--fg-3); 257 | --icon-fixed-rgb: var(--fg-3-rgb); 258 | --icon-lighter: var(--fg-5); 259 | --icon-lighter-rgb: var(--fg-0-rgb); 260 | --icon-search-back: var(--ac-2); 261 | --icon-search-back-rgb: var(--ac-2-rgb); 262 | --icon-strong: var(--fg-1); 263 | --icon-strong-rgb: var(--fg-1-rgb); 264 | --incoming-background: var(--msg-in-0); 265 | --incoming-background-rgb: var(--msg-in-0-rgb); 266 | --incoming-background-deeper: var(--msg-in-1); 267 | --incoming-background-deeper-rgb: var(--msg-in-1-rgb); 268 | --incoming-background-highlight: #ccc; 269 | --incoming-background-highlight-rgb: 204, 204, 204; 270 | --incoming-primary: var(--fg-3); 271 | --incoming-primary-rgb: var(--fg-3-rgb); 272 | --input-border-active: var(--ac-0); 273 | --input-border-active-rgb: var(--ac-0-rgb); 274 | --input-placeholder: var(--fg-4); 275 | --input-placeholder-rgb: var(--fg-4); 276 | --intro-background: var(--bg-1); 277 | --intro-background-rgb: var(--bg-1-rgb); 278 | --intro-border: var(--ac-2); 279 | --intro-border-rgb: var(--ac-2-rgb); 280 | --intro-logo: var(--fg-3); 281 | --intro-logo-rgb: var(--fg-3-rgb); 282 | --intro-secondary: var(--fg-3); 283 | --intro-secondary-rgb: var(--fg-3-rgb); 284 | --inverse: var(--fg-0); 285 | --inverse-rgb: var(--fg-0-rgb); 286 | --labels-icon: rgba(241,241,242,0.4); 287 | --labels-icon-rgb: var(--fg-3-rgb); 288 | --link: var(--ac-0); 289 | --link-rgb: var(--ac-0-rgb); 290 | --live-location-footer-background: var(--bg-2); 291 | --live-location-footer-background-rgb: var(--bg-2-rgb); 292 | --live-location-glow: rgba(var(--ac-1-rgb), 0.5); 293 | --live-location-glow-rgb: var(--ac-1-rgb); 294 | --live-location-glow-stale: rgba(var(--red-rgb), 0.5); 295 | --live-location-glow-stale-rgb: var(--b1-0-rgb); 296 | --location-cluster-background: var(--bg-1); 297 | --location-cluster-background-rgb: var(--bg-1-rgb); 298 | --media-editor-control: #1c313f; 299 | --media-editor-control-rgb: 28, 49, 63; 300 | --media-viewer-background: rgba(var(--bg-1-rgb), 0.8); 301 | --media-viewer-background-rgb: var(--bg-1-rgb); 302 | --media-viewer-button-background: var(--bg-3); 303 | --media-viewer-button-background-rgb: var(--bg-3-rgb); 304 | --media-viewer-button-icon: #f1f1f2; 305 | --media-viewer-button-icon-rgb: var(--fg-3-rgb); 306 | --menu-tabs-list-active: var(--ac-0); 307 | --menu-tabs-list-active-rgb: var(--ac-0-rgb); 308 | --message-background-deep: var(--bg-0); 309 | --message-background-deep-rgb: var(--bg-0-rgb); 310 | --message-placeholder-icon: var(--fg-3); 311 | --message-placeholder-icon-rgb: var(--fg-3-rgb); 312 | --message-primary: var(--fg-1); 313 | --message-primary-rgb: var(--fg-1-rgb); 314 | --message-selection-highlight: rgba(var(--ac-0-rgb), 0.1); 315 | --message-selection-highlight-rgb: var(--ac-0-rgb); 316 | --modal-backdrop: rgba(var(--bg-1-rgb), 0.7); 317 | --modal-backdrop-rgb: var(--bg-0-rgb); 318 | --modal-backdrop-solid: var(--bg-0); 319 | --modal-backdrop-solid-rgb: var(--bg-0-rgb); 320 | --modal-background: var(--bg-2); 321 | --modal-background-rgb: var(--bg-2-rgb); 322 | --notification-biz-background: var(--b5-5); 323 | --notification-biz-background-rgb: var(--b5-5-rgb); 324 | --notification-biz-text: var(--b5-0); 325 | --notification-biz-text-rgb: var(--b5-0-rgb); 326 | --notification-e2e-background: var(--b3-5); 327 | --notification-e2e-background-rgb: var(--b3-5-rgb); 328 | --notification-e2e-icon: var(--b3-1); 329 | --notification-e2e-icon-rgb: var(--b3-1-rgb); 330 | --notification-e2e-text: var(--b3-0); 331 | --notification-e2e-text-rgb: var(--b3-0-rgb); 332 | --notification-text: var(--fg-3); 333 | --notification-text-rgb: var(--fg-3-rgb); 334 | --outgoing-background: var(--msg-out-0); 335 | --outgoing-background-rgb: var(--msg-out-0-rgb); 336 | --outgoing-background-deeper: var(--msg-out-1); 337 | --outgoing-background-deeper-rgb: var(--msg-out-1-rgb); 338 | --outgoing-background-highlight: #ccc; 339 | --outgoing-background-highlight-rgb: 204, 204, 204; 340 | --overlay: var(--bg-0); 341 | --overlay-rgb: var(--bg-0-rgb); 342 | --panel-background: var(--bg-3); 343 | --panel-background-rgb: var(--bg-3-rgb); 344 | --panel-background-active: #1a262d; 345 | --panel-background-active-rgb: 26, 38, 45; 346 | --panel-background-colored: var(--bg-3); 347 | --panel-background-colored-rgb: var(--bg-3-rgb); 348 | --panel-background-colored-deeper: var(--bg-3); 349 | --panel-background-colored-deeper-rgb: var(--bg-3-rgb); 350 | --panel-background-deep: var(--bg-2); 351 | --panel-background-deep-rgb: var(--bg-2-rgb); 352 | --panel-background-deeper: var(--bg-3); 353 | --panel-background-deeper-rgb: var(--bg-3-rgb); 354 | --panel-background-hover: var(--bg-4); 355 | --panel-background-hover-rgb: var(--bg-4-rgb); 356 | --panel-background-lighter: var(--bg-3); 357 | --panel-background-lighter-rgb: var(--bg-3-rgb); 358 | --panel-header-background: var(--bg-3); 359 | --panel-header-background-rgb: var(--bg-3-rgb); 360 | --panel-header-icon: var(--fg-3); 361 | --panel-header-icon-rgb: var(--fg-3-rgb); 362 | --panel-input-background: var(--bg-2); 363 | --panel-input-background-rgb: var(--bg-2-rgb); 364 | --panel-primary: var(--fg-3); 365 | --panel-primary-rgb: var(--fg-3-rgb); 366 | --payment-amount: #00a593; 367 | --payment-amount-rgb: 0, 164.8, 146.90743; 368 | --payment-status-failed: #ef697a; 369 | --payment-status-failed-rgb: 239, 105, 122; 370 | --payment-status-processing: var(--fg-1); 371 | --payment-status-processing-rgb: var(--fg-3-rgb); 372 | --payment-status-success: #40cf6c; 373 | --payment-status-success-rgb: 64, 207, 108; 374 | --payment-status-waiting: var(--fg-1); 375 | --payment-status-waiting-rgb: var(--fg-3-rgb); 376 | --photopicker-overlay-background: rgba(var(--bg-3-rgb), 0.8); 377 | --photopicker-overlay-background-rgb: var(--bg-3-rgb); 378 | --picker-background: var(--bg-2); 379 | --picker-background-rgb: var(--bg-2-rgb); 380 | --popup-panel-background: var(--bg-2); 381 | --popup-panel-background-rgb: var(--bg-2-rgb); 382 | --primary: var(--fg-2); 383 | --primary-rgb: var(--fg-2-rgb); 384 | --primary-strong: var(--fg-1); 385 | --primary-strong-rgb: var(--fg-1-rgb); 386 | --primary-stronger: var(--fg-0); 387 | --primary-stronger-rgb: var(--fg-0-rgb); 388 | --primary-strongest: var(--fg-0); 389 | --primary-strongest-rgb: var(--fg-0-rgb); 390 | --primary-title: var(--fg-2); 391 | --primary-title-rgb: var(--fg-2-rgb); 392 | --product-image-button-background: var(--bg-4); 393 | --product-image-button-background-rgb: var(--bg-4-rgb); 394 | --product-thumb-background: var(--bg-3); 395 | --product-thumb-background-rgb: var(--bg-3-rgb); 396 | --product-thumb-background-deeper: var(--bg-2); 397 | --product-thumb-background-deeper-rgb: var(--bg-2-rgb); 398 | --progress-background: var(--bg-2); 399 | --progress-background-rgb: var(--bg-2-rgb); 400 | --progress-primary: var(--ac-0); 401 | --progress-primary-rgb: var(--ac-0); 402 | --ptt-blue: var(--b6-0); 403 | --ptt-blue-rgb: var(--b6-0-rgb); 404 | --ptt-button-cancel: var(--b1-0); 405 | --ptt-button-cancel-rgb: var(--b1-0-rgb); 406 | --ptt-button-send: var(--b4-0); 407 | --ptt-button-send-rgb: var(--b4-0-rgb); 408 | --ptt-gray: var(--fg-4); 409 | --ptt-gray-rgb: var(--fg-4-rgb); 410 | --ptt-green: var(--b4-0); 411 | --ptt-green-rgb: var(--b4-rgb); 412 | --ptt-message-blue: var(--b6-0); 413 | --ptt-message-blue-rgb: var(--b6-0-rgb); 414 | --quick-action-button: rgba(var(--fg-3-rgb), 0.8); 415 | --quick-action-button-rgb: var(--fg-3-rgb); 416 | --quick-action-button-background: var(--bg-4); 417 | --quick-action-button-background-rgb: var(--bg-4-rgb); 418 | --round-entry-point-background-color: var(--bg-4); 419 | --round-entry-point-background-color-rgb: var(--bg-4-rgb); 420 | --quoted-message-text: var(--fg-2); 421 | --quoted-message-text-rgb: var(--fg-2-rgb); 422 | --rich-text-panel-background: var(--bg-3); 423 | --rich-text-panel-background-rgb: var(--bg-3-rgb); 424 | --search-container-background: var(--bg-2); 425 | --search-container-background-rgb: var(--bg-2-rgb); 426 | --search-input-background: var(--bg-3); 427 | --search-input-background-rgb: var(--bg-3-rgb); 428 | --secondary: var(--fg-3); 429 | --secondary-rgb: var(--fg-3-rgb); 430 | --secondary-light: var(--fg-2); 431 | --secondary-light-rgb: var(--fg-2-rgb); 432 | --secondary-lighter: var(--fg-3); 433 | --secondary-lighter-rgb: var(--fg-3-rgb); 434 | --secondary-stronger: var(--fg-3); 435 | --secondary-stronger-rgb: var(--fg-3-rgb); 436 | --shadow: var(--sh); 437 | --shadow-rgb: var(--sh-rgb); 438 | --shadow-light: var(--sh); 439 | --shadow-light-rgb: var(--sh-rgb); 440 | --spinner-default: var(--fg-3); 441 | --spinner-default-rgb: var(--fg-3-rgb); 442 | --spinner-highlight: var(--ac-0); 443 | --spinner-highlight-rgb: var(--ac-0-rgb); 444 | --spinner-incoming: var(--fg-5); 445 | --spinner-incoming-rgb: var(--fg-5-rgb); 446 | --spinner-outgoing: var(--ac-5); 447 | --spinner-outgoing-rgb: var(--ac-5-rgb); 448 | --startup-background: var(--bg-0); 449 | --startup-background-rgb: var(--bg-0-rgb); 450 | --startup-icon: var(--fg-3); 451 | --startup-icon-rgb: var(--fg-3-rgb); 452 | --status-background: var(--bg-1); 453 | --status-background-rgb: var(--bg-1-rgb); 454 | --status-background-hover: var(--bg-2); 455 | --status-background-hover-rgb: var(--bg-2-rgb); 456 | --status-primary: var(--fg-1); 457 | --status-primary-rgb: var(--fg-1-rgb); 458 | --status-secondary: var(--fg-4); 459 | --status-secondary-rgb: var(--fg-4-rgb); 460 | --status-secondary-stronger: var(--fg-5); 461 | --status-secondary-stronger-rgb: var(--fg-5-rgb); 462 | --success: var(--ac-0); 463 | --success-rgb: var(--ac-0-rgb); 464 | --suspicious-background: rgba(239,105,122,0.8); 465 | --suspicious-background-rgb: 239, 105, 122; 466 | --system-message-background: var(--b6-4); 467 | --system-message-background-rgb: var(--b6-4-rgb); 468 | --system-message-text: rgba(var(--fg-1-rgb), 0.87); 469 | --system-message-text-rgb: var(--fg-1-rgb); 470 | --teal-hover: var(--ac-0); 471 | --teal-hover-rgb: var(--ac-0-rgb); 472 | --teal-pale: var(--ac-3); 473 | --teal-pale-rgb: var(--ac-3-rgb); 474 | --text-muted: var(--fg-4); 475 | --text-muted-rgb: var(--fg-4-rgb); 476 | --thumb-border-active: var(--bg-2); 477 | --thumb-border-active-rgb: var(--bg-2-rgb); 478 | --thumb-border-active-new-media-editor: var(--fg-4); 479 | --thumb-border-active-new-media-editor-rgb: var(--fg-4-rgb); 480 | --thumb-border-viewer-active: var(--fg-3); 481 | --thumb-border-viewer-active-rgb: var(--fg-3-rgb); 482 | --toast-background: rgba(var(--bg-3-rgb), 0.96); 483 | --toast-background-rgb: var(--bg-3-rgb); 484 | --tooltip-text: var(--fg-1); 485 | --tooltip-text-rgb: var(--fg-1-rgb); 486 | --tooltip-background: rgba(var(--bg-4-rgb), 0.85); 487 | --tooltip-background-rgb: var(--bg-4); 488 | --typing: var(--ac-0); 489 | --typing-rgb: var(--ac-0-rgb); 490 | --unread-background: var(--bg-3); 491 | --unread-background-rgb: var(--bg-3-rgb); 492 | --unread-bar-background: rgba(var(--bg-0-rgb), 0.7); 493 | --unread-bar-background-rgb: var(--bg-0-rgb); 494 | --unread-timestamp: var(--ac-0); 495 | --unread-timestamp-rgb: var(--ac-0-rgb); 496 | --unread-marker-background: var(--ac-0); 497 | --unread-marker-background-rgb: var(--ac-0-rgb); 498 | --unread-marker-text: var(--white); 499 | --unread-marker-text-rgb: var(--white-rgb); 500 | --video-player-background: #000; 501 | --video-player-background-rgb: 0, 0, 0; 502 | --video-primary: #fff; 503 | --video-primary-rgb: 255, 255, 255; 504 | --voip-accept-background: #70db91; 505 | --voip-accept-background-rgb: 112, 219, 145; 506 | --voip-background: #262626; 507 | --voip-background-rgb: 38, 38, 38; 508 | --voip-background-deep: #000; 509 | --voip-background-deep-rgb: 0, 0, 0; 510 | --voip-primary: #fff; 511 | --voip-primary-rgb: 255, 255, 255; 512 | --voip-reject-background: #e54b40; 513 | --voip-reject-background-rgb: 229, 75, 64; 514 | --wallpaper-background: var(--bg-1); 515 | --wallpaper-background-rgb: var(--bg-1-rgb); 516 | --wallpaper-thumb-border-active: var(--bg-5); 517 | --wallpaper-thumb-border-active-rgb: var(--bg-5-rgb); 518 | --wallpaper-thumb-border-hover: var(--bg-4); 519 | --wallpaper-thumb-border-hover-rgb: var(--bg-4-rgb); 520 | --win32-title-primary: var(--fg-1); 521 | --win32-title-primary-rgb: var(--fg-1-rgb); 522 | --reactions-tray-background: var(--bg-3); 523 | --reactions-tray-background-rgb: var(--bg-3-rgb); 524 | --reactions-tray-active-round-background: var(--bg-5); 525 | --reactions-tray-active-round-background-rgb: var(--bg-5-rgb); 526 | --reactions-picker-bg: var(--bg-4); 527 | --reactions-picker-bg-rgb: var(--bg-4-rgb); 528 | --svg-gray-button: var(--fg-3); 529 | --svg-gray-button-rgb: var(--fg-3-rgb); 530 | --text-primary-strong: var(--fg-1); 531 | --text-primary-strong-rgb: var(--fg-1-rgb); 532 | --text-secondary-lighter: var(--fg-2); 533 | --text-secondary-lighter-rgb: var(--fg-2-rgb); 534 | --text-medium-emphasis: var(--fg-3); 535 | --text-medium-emphasis-rgb: var(--fg-3-rgb); 536 | --bg-0: #1c2026; 537 | --bg-0-rgb: 28,32,38; 538 | --bg-1: #1f232a; 539 | --bg-1-rgb: 31,35,42; 540 | --bg-2: #282d37; 541 | --bg-2-rgb: 40,45,55; 542 | --bg-3: #323843; 543 | --bg-3-rgb: 50,56,67; 544 | --bg-4: #3b4250; 545 | --bg-4-rgb: 59,66,80; 546 | --bg-5: #444d5c; 547 | --bg-5-rgb: 68,77,92; 548 | --fg-0: #f0f0f0; 549 | --fg-0-rgb: 240,240,240; 550 | --fg-1: #eee; 551 | --fg-1-rgb: 238,238,238; 552 | --fg-2: #d6d6d6; 553 | --fg-2-rgb: 214,214,214; 554 | --fg-3: #bebebe; 555 | --fg-3-rgb: 190,190,190; 556 | --fg-4: #a7a7a7; 557 | --fg-4-rgb: 167,167,167; 558 | --fg-5: #8f8f8f; 559 | --fg-5-rgb: 143,143,143; 560 | --ac-0: #7289da; 561 | --ac-0-rgb: 114,137,218; 562 | --ac-1: #6377bd; 563 | --ac-1-rgb: 99,119,189; 564 | --ac-2: #5566a0; 565 | --ac-2-rgb: 85,102,160; 566 | --ac-3: #475483; 567 | --ac-3-rgb: 71,84,131; 568 | --ac-4: #2f3756; 569 | --ac-4-rgb: 47,55,86; 570 | --ac-5: #282f46; 571 | --ac-5-rgb: 40,47,70; 572 | --b1-0: #f07178; 573 | --b1-0-rgb: 240,113,120; 574 | --b1-1: #f08571; 575 | --b1-1-rgb: 240,133,113; 576 | --b1-2: #f09671; 577 | --b1-2-rgb: 240,150,113; 578 | --b1-3: #8f4a51; 579 | --b1-3-rgb: 143,74,81; 580 | --b1-4: #60353a; 581 | --b1-4-rgb: 96,53,58; 582 | --b1-5: #4a2c30; 583 | --b1-5-rgb: 74,44,48; 584 | --b2-0: #f78c6c; 585 | --b2-0-rgb: 247,140,108; 586 | --b2-1: #f7aa6c; 587 | --b2-1-rgb: 247,170,108; 588 | --b2-2: #f7bd6c; 589 | --b2-2-rgb: 247,189,108; 590 | --b2-3: #93594a; 591 | --b2-3-rgb: 147,89,74; 592 | --b2-4: #623e36; 593 | --b2-4-rgb: 98,62,54; 594 | --b2-5: #4c322d; 595 | --b2-5-rgb: 76,50,45; 596 | --b3-0: #ffcb6b; 597 | --b3-0-rgb: 255,203,107; 598 | --b3-1: #ffea6b; 599 | --b3-1-rgb: 255,234,107; 600 | --b3-2: #ffff6b; 601 | --b3-2-rgb: 255,255,107; 602 | --b3-3: #977c4a; 603 | --b3-3-rgb: 151,124,74; 604 | --b3-4: #655435; 605 | --b3-4-rgb: 101,84,53; 606 | --b3-5: #4e422d; 607 | --b3-5-rgb: 78,66,45; 608 | --b4-0: #c3e88d; 609 | --b4-0-rgb: 195,232,141; 610 | --b4-1: #b0e88d; 611 | --b4-1-rgb: 176,232,141; 612 | --b4-2: #a3e88d; 613 | --b4-2-rgb: 163,232,141; 614 | --b4-3: #768c5c; 615 | --b4-3-rgb: 118,140,92; 616 | --b4-4: #505e41; 617 | --b4-4-rgb: 80,94,65; 618 | --b4-5: #3f4936; 619 | --b4-5-rgb: 63,73,54; 620 | --b5-0: #89ddff; 621 | --b5-0-rgb: 137,221,255; 622 | --b5-1: #89c4ff; 623 | --b5-1-rgb: 137,196,255; 624 | --b5-2: #89b4ff; 625 | --b5-2-rgb: 137,180,255; 626 | --b5-3: #56869b; 627 | --b5-3-rgb: 86,134,155; 628 | --b5-4: #3c5b69; 629 | --b5-4-rgb: 60,91,105; 630 | --b5-5: #304752; 631 | --b5-5-rgb: 48,71,82; 632 | --b6-0: #82aaff; 633 | --b6-0-rgb: 130,170,255; 634 | --b6-1: #828fff; 635 | --b6-1-rgb: 130,143,255; 636 | --b6-2: #8682ff; 637 | --b6-2-rgb: 134,130,255; 638 | --b6-3: #526a9b; 639 | --b6-3-rgb: 82,106,155; 640 | --b6-4: #394969; 641 | --b6-4-rgb: 57,73,105; 642 | --b6-5: #2e3a52; 643 | --b6-5-rgb: 46,58,82; 644 | --b7-0: #c792ea; 645 | --b7-0-rgb: 199,146,234; 646 | --b7-1: #da92ea; 647 | --b7-1-rgb: 218,146,234; 648 | --b7-2: #e692ea; 649 | --b7-2-rgb: 230,146,234; 650 | --b7-3: #785c90; 651 | --b7-3-rgb: 120,92,144; 652 | --b7-4: #514062; 653 | --b7-4-rgb: 81,64,98; 654 | --b7-5: #40344d; 655 | --b7-5-rgb: 64,52,77; 656 | --b8-0: #9a91ea; 657 | --b8-0-rgb: 154,145,234; 658 | --b8-1: #ad91ea; 659 | --b8-1-rgb: 173,145,234; 660 | --b8-2: #b991ea; 661 | --b8-2-rgb: 185,145,234; 662 | --b8-3: #5f5c90; 663 | --b8-3-rgb: 95,92,144; 664 | --b8-4: #424062; 665 | --b8-4-rgb: 66,64,98; 666 | --b8-5: #34344d; 667 | --b8-5-rgb: 52,52,77; 668 | --white: #fff; 669 | --white-rgb: 255,255,255; 670 | --sh: rgba(0,0,0,0.145); 671 | --sh-rgb: 0,0,0; 672 | --t: transparent; 673 | --bshadow: 0 4px 8px 2px var(--shadow); 674 | --intro-image: url("data:image/svg+xml;utf8,"); 675 | } 676 | @keyframes aBorder { 677 | 40% { 678 | opacity: 0; 679 | } 680 | 80% { 681 | opacity: 1; 682 | } 683 | } 684 | @keyframes aPulse { 685 | 0% { 686 | transform: scale(0.9); 687 | } 688 | 50% { 689 | transform: scale(1); 690 | } 691 | 100% { 692 | transform: scale(0.9); 693 | } 694 | } 695 | @keyframes aKiss { 696 | 0% { 697 | transform: scale(0.7); 698 | } 699 | 50% { 700 | transform: scale(0.8); 701 | } 702 | 80% { 703 | transform: scale(1) rotate(-30deg); 704 | } 705 | 100% { 706 | transform: scale(0.7); 707 | } 708 | } 709 | html > body { 710 | background-image: none !important; 711 | color: var(--fg-0) !important; 712 | background-color: var(--bg-0) !important; 713 | } 714 | html > body option { 715 | color: var(--fg-1) !important; 716 | background-color: var(--bg-3) !important; 717 | } 718 | html > body, 719 | html > body button, 720 | html > body input { 721 | font-family: var(--ui-font); 722 | } 723 | html > body ._1Ftww { 724 | color: var(--fg-1) !important; 725 | border: 1px solid var(--bg-5) !important; 726 | } 727 | html > body ._1Ftww button:nth-child(2) { 728 | color: var(--ac-1) !important; 729 | } 730 | html > body ._1Ftww button:nth-child(3) { 731 | color: var(--fg-4) !important; 732 | } 733 | html > body [data-testid^="intro-md-beta-logo-"] { 734 | padding: 8rem; 735 | background-image: var(--intro-image); 736 | } 737 | html > body [data-testid^="intro-md-beta-logo-"] > svg { 738 | display: none; 739 | } 740 | html > body [data-testid="intro-title"] { 741 | font-size: 0px !important; 742 | } 743 | html > body [data-testid="intro-title"]::before { 744 | content: var(--version); 745 | font-size: 1.5rem; 746 | } 747 | html > body [data-testid="intro-text"] { 748 | font-size: 0px !important; 749 | } 750 | html > body [data-testid="intro-text"]::before { 751 | content: 'Still looking for someone to help maintain Dark-WhatsApp. I will try to maintain it until a big breaking update. Also, check out my other project related to userstyles:\A\A 🌟 https://userstyles.world 🌟\A\A Changelog: https://github.com/vednoc/dark-whatsapp\AP.S. CSS can not create clickable links.'; 752 | white-space: pre-wrap; 753 | font-size: 0.875rem; 754 | } 755 | .Iwkc0 { 756 | position: relative; 757 | --blue-light: var(--ac-3); 758 | --inverse: var(--ac-3); 759 | } 760 | .Iwkc0:first-child, 761 | .Iwkc0:first-child::after { 762 | width: calc(100% + 8px); 763 | } 764 | .Iwkc0:first-child::before { 765 | content: ''; 766 | filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)); 767 | background: var(--chat-image) !important; 768 | position: absolute; 769 | height: 100%; 770 | width: 100%; 771 | } 772 | .Iwkc0:first-child span { 773 | font-size: 0 !important; 774 | } 775 | .Iwkc0:first-child span::before { 776 | content: 'Use this with Dark-WhatsApp'; 777 | font-size: 16px !important; 778 | } 779 | @supports (scrollbar-width: thin) { 780 | * { 781 | scrollbar-color: var(--ac-2) var(--shadow) !important; 782 | } 783 | } 784 | *::-webkit-scrollbar-thumb { 785 | background-color: var(--ac-2) !important; 786 | } 787 | *::-webkit-scrollbar-track { 788 | background-color: var(--shadow) !important; 789 | } 790 | [id*='startup'] { 791 | background-color: var(--bg-0) !important; 792 | } 793 | [id*='startup'] .graphic::after { 794 | opacity: 0.6 !important; 795 | background: linear-gradient(to right, var(--bg-0) 0%, var(--bg-0) 33%, transparent 44%, transparent 55%, var(--bg-0) 66%, var(--bg-0) 100%) !important; 796 | } 797 | progress { 798 | background-color: var(--bg-2) !important; 799 | } 800 | progress[value]::-moz-progress-bar { 801 | background-color: var(--ac-0) !important; 802 | } 803 | ::-moz-progress-bar { 804 | background-color: var(--bg-4) !important; 805 | } 806 | ::-webkit-progress-bar { 807 | background-color: var(--bg-4) !important; 808 | } 809 | ::-webkit-progress-value { 810 | background-color: var(--ac-0) !important; 811 | } 812 | ._3g4Pn[style], 813 | ._3PdFH { 814 | background-color: var(--bg-5) !important; 815 | } 816 | ._3g4Pn[style], 817 | ._3g4Pn[style] > img, 818 | img.o2zu3hjb, 819 | ._1jLYl, 820 | ._1PAkz { 821 | border-radius: var(--r-avatars) !important; 822 | } 823 | [data-list-scroll-offset] > div:first-child > div:last-child { 824 | margin-left: 0 !important; 825 | } 826 | .emojik { 827 | transition: transform 0.15s ease !important; 828 | } 829 | .emojik:not(:hover):not(:focus):not(.selected) { 830 | filter: opacity(var(--emoji-o)); 831 | } 832 | .emojik:hover:not(.selected):not(:focus) { 833 | transform: scale(1.2); 834 | box-shadow: none !important; 835 | opacity: 1 !important; 836 | } 837 | .emojik.selected, 838 | .emojik:focus { 839 | box-shadow: 0 0 0 1px var(--bg-3), 0 0 0 3px var(--ac-0) !important; 840 | } 841 | [data-animate-media-viewer] > div:first-child { 842 | border-bottom: 1px solid var(--bg-5) !important; 843 | background-color: var(--bg-2) !important; 844 | } 845 | .overlay [data-testid='cell-frame-container'] { 846 | background-color: transparent !important; 847 | } 848 | .overlay [data-animate-modal-popup] { 849 | box-shadow: var(--bshadow) !important; 850 | border: 1px solid var(--bg-5); 851 | border-radius: var(--r-menus) !important; 852 | } 853 | .overlay [data-animate-modal-popup] .copyable-area > header { 854 | border-bottom: 1px solid var(--bg-5); 855 | } 856 | .overlay [data-animate-modal-popup] .copyable-area > span [style *= 'translateY']:not([tabindex]), 857 | .overlay [data-animate-modal-popup] .copyable-area ._30pU5 { 858 | border-top: 1px solid var(--bg-5); 859 | } 860 | .overlay header + div[tabindex] + div div[style] { 861 | --background-default: var(--bg-1); 862 | --background-default-hover: var(--bg-2); 863 | } 864 | ._1XWMx { 865 | border-color: var(--bg-5) !important; 866 | background-color: var(--bg-2) !important; 867 | } 868 | [data-animate-status-v3-modal-background = 'true'] { 869 | background-color: var(--modal-backdrop) !important; 870 | } 871 | [data-animate-status-v3-modal-background = 'true'] > div { 872 | background-color: var(--bg-1) !important; 873 | } 874 | [data-animate-status-v3-modal-background = 'true'] > div > div:nth-child(1) { 875 | background-color: var(--bg-2) !important; 876 | border-right: 1px solid var(--bg-5); 877 | border-radius: var(--r-menus) 0 0 var(--r-menus) !important; 878 | } 879 | @media (min-width: 1441px) { 880 | [data-animate-status-v3-modal-background = 'true'] > div { 881 | border: 1px solid var(--bg-5) !important; 882 | border-radius: var(--r-menus) !important; 883 | } 884 | } 885 | ._2yhFa { 886 | margin: auto; 887 | padding: 5px 8px 8px; 888 | min-width: 150px; 889 | border-radius: var(--r-inputs); 890 | background-color: rgba(var(--bg-1-rgb), 0.5); 891 | } 892 | [data-icon = 'status-v3-unread'] [fill = '#009588'] { 893 | fill: var(--ac-0) !important; 894 | } 895 | [data-testid="confirm-popup"] { 896 | background-color: var(--modal-backdrop) !important; 897 | } 898 | [data-testid="confirm-popup"] [data-animate-modal-popup] { 899 | --white-rgb: var(--fg-1-rgb); 900 | } 901 | .landing-title { 902 | color: var(--fg-1) !important; 903 | } 904 | .landing-wrapper-before { 905 | background-color: var(--bg-1) !important; 906 | } 907 | .landing-header { 908 | position: relative; 909 | } 910 | .landing-header path[fill ^= '#FFF'] { 911 | fill: var(--ac-0); 912 | } 913 | .landing-header path[fill ^= '#00E'] { 914 | fill: var(--bg-1); 915 | } 916 | .landing-header div { 917 | text-transform: unset; 918 | color: var(--fg-1) !important; 919 | } 920 | .landing-header::after { 921 | font-size: 14px; 922 | font-weight: 500; 923 | position: absolute; 924 | content: var(--version); 925 | } 926 | html[dir = 'RTL'] .landing-header::after { 927 | left: 0; 928 | } 929 | html[dir = 'LTR'] .landing-header::after { 930 | right: 0; 931 | } 932 | .landing-window:not(#z) { 933 | border-radius: 4px; 934 | background-color: var(--bg-1) !important; 935 | box-shadow: 0 0 1px var(--bg-5); 936 | } 937 | .landing-main a { 938 | color: var(--ac-0) !important; 939 | } 940 | .landing-main label { 941 | color: var(--fg-3) !important; 942 | } 943 | .landing-main [fill^='#f2f'i] { 944 | fill: var(--bg-5); 945 | } 946 | .landing-main [fill^='#818'i] { 947 | fill: var(--fg-1); 948 | } 949 | .landing-main div[data-ref] { 950 | filter: contrast(150%); 951 | outline: 4px solid #fff; 952 | box-shadow: 0 0 0 4px #fff; 953 | } 954 | .landing-main div[data-ref] [role='button'] { 955 | color: #fff !important; 956 | background-color: var(--ac-0) !important; 957 | } 958 | .landing-main + div { 959 | background-color: transparent !important; 960 | } 961 | .landing-main + div img { 962 | opacity: 0.3; 963 | } 964 | .landing-main + div [style *= 'opacity: 1'] { 965 | background-color: transparent !important; 966 | } 967 | .landing-main a[href*='faq.whatsapp.com'] + div > span > div { 968 | color: #fff !important; 969 | background-color: var(--ac-0) !important; 970 | box-shadow: bsh; 971 | } 972 | .landing-main a[href*='faq.whatsapp.com'] + div > span > div::before { 973 | border-bottom-color: var(--ac-0) !important; 974 | } 975 | #app > div::after { 976 | top: var(--bg-blur-s); 977 | right: var(--bg-blur-s); 978 | bottom: var(--bg-blur-s); 979 | left: var(--bg-blur-s); 980 | height: unset; 981 | width: unset; 982 | filter: blur(var(--bg-blur)) opacity(var(--bg-opacity)) invert(var(--bg-invert)) hue-rotate(var(--bg-hue)); 983 | background-position: var(--bg-pos) !important; 984 | background-image: var(--bg-image) !important; 985 | background-repeat: var(--bg-rep) !important; 986 | background-size: var(--bg-size) !important; 987 | background-color: transparent !important; 988 | } 989 | @media screen and (min-width: 1441px) { 990 | #app > div::after { 991 | content: '' !important; 992 | } 993 | } 994 | div div:first-child > ._36BuW::before, 995 | span div:first-child > ._36BuW::before { 996 | content: none; 997 | } 998 | #app > div .p3_M1 { 999 | border-radius: var(--r-inputs) !important; 1000 | } 1001 | #app > div > span > div[style ^= 'transform-origin:'][tabindex], 1002 | #app > div .o--vV[style ^= 'transform-origin:'][tabindex] { 1003 | box-shadow: var(--bshadow) !important; 1004 | border: 1px solid var(--bg-4); 1005 | border-radius: var(--r-menus) !important; 1006 | } 1007 | #app > div > span > ._3IU7z { 1008 | border: 1px solid var(--bg-5) !important; 1009 | box-shadow: var(--bshadow) !important; 1010 | } 1011 | #app > div > span > ._3IU7z div[tabindex='-1'] > div:only-child { 1012 | border-left: none !important; 1013 | } 1014 | #app > div > span > ._3IU7z > [data-animate-dropdown-nib] { 1015 | border-bottom: 1px solid var(--bg-5); 1016 | border-right: 1px solid var(--bg-5); 1017 | border-radius: 0 0 4px 0; 1018 | bottom: -8px !important; 1019 | } 1020 | #app > div > [tabindex] { 1021 | background-color: var(--bg-1) !important; 1022 | } 1023 | @media (min-width: 1441px) { 1024 | #app > div > [tabindex], 1025 | [data-animate-status-v3-modal-background] > div:first-child { 1026 | width: calc(100% - 38px) !important; 1027 | max-width: var(--app-width) !important; 1028 | border-radius: var(--r-menus) !important; 1029 | border: 1px solid var(--bg-5) !important; 1030 | box-shadow: 0 2px 6px sh !important; 1031 | } 1032 | } 1033 | #app > div > [tabindex]::after { 1034 | content: unset !important; 1035 | } 1036 | [data-testid="chat-list-search-container"] { 1037 | background-color: var(--bg-2) !important; 1038 | border-bottom: 1px solid var(--bg-5) !important; 1039 | } 1040 | [data-testid="chat-list-search-container"] > div { 1041 | border-radius: var(--r-inputs) !important; 1042 | box-shadow: inset 0 0 0 1px var(--bg-4); 1043 | } 1044 | [data-testid="chat-list-search-container"]:focus-within { 1045 | box-shadow: var(--bshadow); 1046 | } 1047 | #app > div > [tabindex] [data-testid="chatlist-header"] { 1048 | border-bottom: 1px solid var(--bg-5) !important; 1049 | } 1050 | #app > div > [tabindex] [data-testid='chat-butterbar'] { 1051 | border-bottom: 1px solid var(--bg-5) !important; 1052 | } 1053 | #app > div > [tabindex] [data-testid='chat-butterbar'] [data-icon = 'x'] svg path { 1054 | fill: var(--fg-5); 1055 | } 1056 | #app > div > [tabindex].three > [data-testid="drawer-right"] { 1057 | border-left: 1px solid var(--bg-5) !important; 1058 | } 1059 | #app > div > [tabindex].three > [data-testid="drawer-right"] section > div { 1060 | box-shadow: 0 0 0 1px var(--bg-4) !important; 1061 | } 1062 | .dark .three #main > *, 1063 | .dark .three #main .copyable-area > div[tabindex='0'] { 1064 | border-right: none !important; 1065 | } 1066 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) > span[class] * [role][aria-selected='false'] > div { 1067 | background-color: var(--bg-1) !important; 1068 | } 1069 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) > span[class] * [role][aria-selected='false'] > div:hover { 1070 | background-color: var(--bg-2) !important; 1071 | } 1072 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) .copyable-text ~ div[role='button'] { 1073 | --background-default: var(--bg-1); 1074 | --background-default-hover: var(--bg-2); 1075 | } 1076 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div, 1077 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div { 1078 | --drawer-gallery-background-hover: var(--bg-2); 1079 | --border-panel: var(--b1-1); 1080 | } 1081 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div::before, 1082 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div::before { 1083 | background-color: var(--bg-3) !important; 1084 | } 1085 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(1) header + div > span > div > div::after, 1086 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > span > div > div::after { 1087 | background-color: transparent !important; 1088 | } 1089 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > div:first-child.wJ21F, 1090 | #app > div > [tabindex] > div:nth-child(2) > div:nth-child(3) header + div > div[role='button'] { 1091 | --background-default: var(--bg-1); 1092 | --background-default-hover: var(--bg-2); 1093 | } 1094 | span[class][data-icon = 'checkbox-round-checked'] [fill = '#00BFA5'] { 1095 | fill: var(--ac-0); 1096 | } 1097 | span[class][data-icon = 'checkbox-round-checked'] [fill = '#FFF'] { 1098 | fill: #fff; 1099 | } 1100 | span[class][data-icon] path[fill = '#FFBC00'] { 1101 | fill: var(--bg-3) !important; 1102 | } 1103 | span[class][data-icon = 'down-context'] { 1104 | color: var(--fg-3) !important; 1105 | } 1106 | #side > header button:not([data-animate-menu-icons-item]) [data-icon], 1107 | #main > div + header button:not([data-animate-menu-icons-item]) [data-icon], 1108 | #main > footer > .copyable-area button:not([data-animate-menu-icons-item]) [data-icon], 1109 | #main > footer + span:not([class]) > div button:not([data-animate-menu-icons-item]) [data-icon], 1110 | .overlay > div:first-child button:not([data-animate-menu-icons-item]) [data-icon], 1111 | .copyable-area > header button:not([data-animate-menu-icons-item]) [data-icon], 1112 | #side > header [role = 'button'] [data-icon], 1113 | #main > div + header [role = 'button'] [data-icon], 1114 | #main > footer > .copyable-area [role = 'button'] [data-icon], 1115 | #main > footer + span:not([class]) > div [role = 'button'] [data-icon], 1116 | .overlay > div:first-child [role = 'button'] [data-icon], 1117 | .copyable-area > header [role = 'button'] [data-icon] { 1118 | transition: fill-opacity 0.3s ease !important; 1119 | } 1120 | #side > header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1121 | #main > div + header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1122 | #main > footer > .copyable-area button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1123 | #main > footer + span:not([class]) > div button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1124 | .overlay > div:first-child button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1125 | .copyable-area > header button:not([data-animate-menu-icons-item]):not(._3QjfB):hover [data-icon], 1126 | #side > header [role = 'button']:not(._3QjfB):hover [data-icon], 1127 | #main > div + header [role = 'button']:not(._3QjfB):hover [data-icon], 1128 | #main > footer > .copyable-area [role = 'button']:not(._3QjfB):hover [data-icon], 1129 | #main > footer + span:not([class]) > div [role = 'button']:not(._3QjfB):hover [data-icon], 1130 | .overlay > div:first-child [role = 'button']:not(._3QjfB):hover [data-icon], 1131 | .copyable-area > header [role = 'button']:not(._3QjfB):hover [data-icon] { 1132 | fill-opacity: 0.6 !important; 1133 | } 1134 | .copyable-area header[class] { 1135 | height: 59px !important; 1136 | justify-content: center !important; 1137 | border-bottom: 1px solid var(--bg-5) !important; 1138 | } 1139 | .copyable-area header[class] > [data-animate-drawer-title] { 1140 | height: unset !important; 1141 | } 1142 | .copyable-area header[class] > [data-animate-drawer-title] > div:nth-child(2) { 1143 | margin-top: 1px !important; 1144 | font-size: 18px !important; 1145 | font-weight: normal !important; 1146 | } 1147 | #main > header { 1148 | border-bottom: 1px solid var(--bg-5) !important; 1149 | box-shadow: none !important; 1150 | border-color: var(--bg-5) !important; 1151 | } 1152 | #main > header::after { 1153 | content: unset; 1154 | } 1155 | #main .EtBAv { 1156 | border: 1px solid var(--b6-3); 1157 | text-shadow: none !important; 1158 | } 1159 | #main .EtBAv._1p8Qv { 1160 | border: 1px solid var(--b3-4); 1161 | } 1162 | [data-asset-chat-background-dark], 1163 | [data-asset-chat-background-light] { 1164 | filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)); 1165 | background-image: var(--chat-image) !important; 1166 | background-position: var(--chat-bg-p) !important; 1167 | background-repeat: var(--chat-bg-r) !important; 1168 | background-size: var(--chat-bg-s) !important; 1169 | opacity: 1 !important; 1170 | } 1171 | #main ._5ML0C { 1172 | border: none !important; 1173 | } 1174 | #main [data-js-context-icon] + div[style] { 1175 | background-color: var(--bg-4) !important; 1176 | } 1177 | [style *= 'width'][style *= 'height'] + div._2AKAp, 1178 | [style *= 'width'][style *= 'height'] + div.zE8pI { 1179 | padding: 2px 4px !important; 1180 | background-color: rgba(var(--bg-1-rgb), 0.7) !important; 1181 | border-radius: 5px !important; 1182 | } 1183 | .video-thumb ._1rd4q, 1184 | .video-thumb + ._3phU6 { 1185 | padding: 2px 4px !important; 1186 | background-color: rgba(var(--bg-1-rgb), 0.7) !important; 1187 | border-radius: 5px !important; 1188 | } 1189 | .video-thumb._3V2jl + ._3phU6 { 1190 | right: 5px !important; 1191 | bottom: 3px !important; 1192 | } 1193 | [style *= 'height'][data-plain-text *= 'maps.google.com'] + div[class] > [role] { 1194 | padding: 2px 4px !important; 1195 | background-color: rgba(var(--bg-1-rgb), 0.7) !important; 1196 | border-radius: 5px !important; 1197 | } 1198 | .fMR4l { 1199 | background-color: rgba(var(--bg-4-rgb), 0.5) !important; 1200 | } 1201 | #main> header ~ div[style *= 'height: 0px'] { 1202 | border-top: 1px solid var(--bg-5) !important; 1203 | } 1204 | #main > footer .velocity-animating, 1205 | #main > footer div[style $= 'translateY(0%);'], 1206 | #main > footer div[style $= 'translateY(0px);'] { 1207 | box-shadow: 0 -1px 0 var(--bg-5) !important; 1208 | } 1209 | #main > footer ._3ImlL { 1210 | border-top: none; 1211 | border-bottom: 1px solid var(--bg-5); 1212 | } 1213 | #main > footer ._31enr { 1214 | border-top: 1px solid var(--bg-5) !important; 1215 | border-left: 1px solid var(--bg-5) !important; 1216 | } 1217 | #main > footer [data-list-scroll-container] { 1218 | border-bottom: 1px solid var(--bg-5) !important; 1219 | box-shadow: 0 -1px var(--bg-5) !important; 1220 | } 1221 | #main > footer + span > .OVz7E { 1222 | border-top: 1px solid var(--bg-5) !important; 1223 | border-left: 1px solid var(--bg-5) !important; 1224 | } 1225 | #main > footer ._2A8P4 { 1226 | border-radius: var(--r-inputs) !important; 1227 | } 1228 | #main img[src *= 'maps.googleapis.com'] { 1229 | filter: invert(0.8) hue-rotate(180deg) !important; 1230 | } 1231 | [class *= ' color-'] > span:nth-child(2) { 1232 | color: var(--fg-3) !important; 1233 | } 1234 | #main .color-0 { 1235 | color: var(--b1-0) !important; 1236 | } 1237 | #main .bg-color-0 { 1238 | background-color: var(--b1-0) !important; 1239 | } 1240 | #main .color-1 { 1241 | color: var(--b2-0) !important; 1242 | } 1243 | #main .bg-color-1 { 1244 | background-color: var(--b2-0) !important; 1245 | } 1246 | #main .color-2 { 1247 | color: var(--b3-0) !important; 1248 | } 1249 | #main .bg-color-2 { 1250 | background-color: var(--b3-0) !important; 1251 | } 1252 | #main .color-3 { 1253 | color: var(--b4-0) !important; 1254 | } 1255 | #main .bg-color-3 { 1256 | background-color: var(--b4-0) !important; 1257 | } 1258 | #main .color-4 { 1259 | color: var(--b5-0) !important; 1260 | } 1261 | #main .bg-color-4 { 1262 | background-color: var(--b5-0) !important; 1263 | } 1264 | #main .color-5 { 1265 | color: var(--b6-0) !important; 1266 | } 1267 | #main .bg-color-5 { 1268 | background-color: var(--b6-0) !important; 1269 | } 1270 | #main .color-6 { 1271 | color: var(--b7-0) !important; 1272 | } 1273 | #main .bg-color-6 { 1274 | background-color: var(--b7-0) !important; 1275 | } 1276 | #main .color-7 { 1277 | color: var(--b8-0) !important; 1278 | } 1279 | #main .bg-color-7 { 1280 | background-color: var(--b8-0) !important; 1281 | } 1282 | #main .color-8 { 1283 | color: var(--b1-1) !important; 1284 | } 1285 | #main .bg-color-8 { 1286 | background-color: var(--b1-1) !important; 1287 | } 1288 | #main .color-9 { 1289 | color: var(--b2-1) !important; 1290 | } 1291 | #main .bg-color-9 { 1292 | background-color: var(--b2-1) !important; 1293 | } 1294 | #main .color-10 { 1295 | color: var(--b3-1) !important; 1296 | } 1297 | #main .bg-color-10 { 1298 | background-color: var(--b3-1) !important; 1299 | } 1300 | #main .color-11 { 1301 | color: var(--b4-1) !important; 1302 | } 1303 | #main .bg-color-11 { 1304 | background-color: var(--b4-1) !important; 1305 | } 1306 | #main .color-12 { 1307 | color: var(--b5-1) !important; 1308 | } 1309 | #main .bg-color-12 { 1310 | background-color: var(--b5-1) !important; 1311 | } 1312 | #main .color-13 { 1313 | color: var(--b6-1) !important; 1314 | } 1315 | #main .bg-color-13 { 1316 | background-color: var(--b6-1) !important; 1317 | } 1318 | #main .color-14 { 1319 | color: var(--b7-1) !important; 1320 | } 1321 | #main .bg-color-14 { 1322 | background-color: var(--b7-1) !important; 1323 | } 1324 | #main .color-15 { 1325 | color: var(--b1-2) !important; 1326 | } 1327 | #main .bg-color-15 { 1328 | background-color: var(--b1-2) !important; 1329 | } 1330 | #main .color-16 { 1331 | color: var(--b2-2) !important; 1332 | } 1333 | #main .bg-color-16 { 1334 | background-color: var(--b2-2) !important; 1335 | } 1336 | #main .color-17 { 1337 | color: var(--b3-2) !important; 1338 | } 1339 | #main .bg-color-17 { 1340 | background-color: var(--b3-2) !important; 1341 | } 1342 | #main .color-18 { 1343 | color: var(--b4-2) !important; 1344 | } 1345 | #main .bg-color-18 { 1346 | background-color: var(--b4-2) !important; 1347 | } 1348 | #main .color-19 { 1349 | color: var(--b5-2) !important; 1350 | } 1351 | #main .bg-color-19 { 1352 | background-color: var(--b5-2) !important; 1353 | } 1354 | #main .color-20 { 1355 | color: var(--b6-2) !important; 1356 | } 1357 | #main .bg-color-20 { 1358 | background-color: var(--b6-2) !important; 1359 | } 1360 | @media screen and (max-height: 648px) { 1361 | #app > div > [tabindex] { 1362 | min-height: auto; 1363 | } 1364 | } 1365 | @media screen and (max-width: 648px) { 1366 | #app > div > [tabindex] { 1367 | min-width: auto; 1368 | } 1369 | } 1370 | @media screen and (max-width: 720px) { 1371 | .two > div:nth-child(4), 1372 | .three > div:nth-child(4) { 1373 | flex: 0 0 80px !important; 1374 | transition: 0.2s ease; 1375 | } 1376 | .two > div:nth-child(4):hover, 1377 | .three > div:nth-child(4):hover, 1378 | .two > div:nth-child(4):focus-within, 1379 | .three > div:nth-child(4):focus-within { 1380 | flex: 0 0 30% !important; 1381 | } 1382 | .two > div:nth-child(3) > div:nth-child(2) { 1383 | flex: 0 0 calc(100% - 80px) !important; 1384 | margin-left: calc(-30% + 80px); 1385 | } 1386 | .two > div:nth-child(4) { 1387 | min-width: 1px !important; 1388 | transition: 0.3s ease !important; 1389 | transition-delay: var(--c-m-delay) !important; 1390 | } 1391 | .two > div:nth-child(4):hover { 1392 | min-width: 349px !important; 1393 | transition-delay: var(--c-m-hover) !important; 1394 | flex: 0 0 30% !important; 1395 | } 1396 | .two > :nth-child(3) > :nth-child(1) { 1397 | z-index: 201 !important; 1398 | flex: 0 0 30% !important; 1399 | min-width: 350px !important; 1400 | } 1401 | .two > :nth-child(3) > :nth-child(1) [style][tabindex] { 1402 | border-right: 1px solid var(--bg-5) !important; 1403 | } 1404 | .three > div:nth-child(3) > div:nth-child(2) { 1405 | flex: 0 0 calc(100% - 30% - 81px) !important; 1406 | margin-left: calc(-30% + 80px); 1407 | } 1408 | .three > div:nth-child(4) { 1409 | max-width: 80px !important; 1410 | flex: 0 0 80px !important; 1411 | } 1412 | [data-testid="chatlist-header"] { 1413 | display: flex; 1414 | justify-content: start; 1415 | min-height: 59px; 1416 | } 1417 | [data-testid="chatlist-header"]:not(:focus-within) { 1418 | overflow: hidden; 1419 | } 1420 | [data-testid="chatlist-header"] > div:nth-child(2) { 1421 | margin-left: 1rem; 1422 | } 1423 | [data-testid="chatlist-header"] + span { 1424 | display: none; 1425 | } 1426 | [data-testid="chatlist-header"] + span + div:not(:focus-within) [data-testid="chat-list-search-container"] > div { 1427 | min-width: 60px; 1428 | } 1429 | #side span[title*="…"] { 1430 | overflow: unset !important; 1431 | margin-top: -8px !important; 1432 | margin-left: 0px !important; 1433 | position: absolute !important; 1434 | } 1435 | #side span[title*="…"]::before { 1436 | content: '' !important; 1437 | position: absolute !important; 1438 | top: -31px !important; 1439 | left: -66px !important; 1440 | height: 53px !important; 1441 | width: 53px !important; 1442 | border-radius: var(--r-avatars) !important; 1443 | box-shadow: inset 0 0 0 3px var(--b4-0) !important; 1444 | animation: 2s aBorder infinite !important; 1445 | } 1446 | [dir = 'RTL'] #side span[title*="…"]::before { 1447 | left: 63px !important; 1448 | } 1449 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) { 1450 | position: relative; 1451 | flex-direction: row-reverse; 1452 | } 1453 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [role='gridcell'] { 1454 | margin: 0 !important; 1455 | } 1456 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid="icon-unread-count"] { 1457 | left: 44px; 1458 | z-index: 9999; 1459 | position: fixed; 1460 | margin-top: 4px; 1461 | border: 2px solid var(--bg-2) !important; 1462 | } 1463 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid^="status-"] { 1464 | left: 44px; 1465 | z-index: 9999; 1466 | position: fixed; 1467 | margin-top: 4px; 1468 | padding: 3px !important; 1469 | border: 2px solid var(--bg-2) !important; 1470 | background-color: var(--bg-4) !important; 1471 | border-radius: 50%; 1472 | } 1473 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-testid^="status-"] svg { 1474 | width: 14px; 1475 | height: 14px; 1476 | } 1477 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) .status-vcard, 1478 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) button[aria-hidden], 1479 | #side [data-testid='cell-frame-container'] > div:nth-child(2) > div:nth-child(2) [data-icon]:not([data-icon*='status-']):not([data-icon*='disappearing']) { 1480 | display: none; 1481 | } 1482 | #side:not(#z) [aria-selected='false'] > div:hover [data-testid="icon-unread-count"], 1483 | #side:not(#z) [aria-selected='false'] > div:hover [data-testid^="status-"] { 1484 | border-color: var(--bg-3) !important; 1485 | } 1486 | #side:not(#z) [aria-selected='false'] > div:hover [data-testid^="status-"] { 1487 | background-color: var(--bg-5) !important; 1488 | } 1489 | #side:not(#z) [aria-selected='true'] > div [data-testid="icon-unread-count"], 1490 | #side:not(#z) [aria-selected='true'] > div [data-testid^="status-"] { 1491 | border-color: var(--bg-4) !important; 1492 | background-color: var(--bg-1) !important; 1493 | } 1494 | #side > #pane-side { 1495 | overflow-x: hidden !important; 1496 | } 1497 | [data-testid="chatlist-e2e-message"] { 1498 | display: none; 1499 | } 1500 | } 1501 | .message-in .copyable-text.selectable-text:has([src^='/img'][src$='-40.png']), 1502 | .message-out .copyable-text.selectable-text:has([src^='/img'][src$='-40.png']), 1503 | .message-in .copyable-text.selectable-text:has([src^='/img'][src$='-64.png']), 1504 | .message-out .copyable-text.selectable-text:has([src^='/img'][src$='-64.png']) { 1505 | margin: 0 57px 0 0 !important; 1506 | } 1507 | [class*='message-'] img[src$='-64.png'][alt='💋'] { 1508 | animation: aKiss 1.5s infinite; 1509 | } 1510 | [class*='message-'] img[src$='-64.png'][alt='❤️'] { 1511 | animation: aPulse 1.5s infinite; 1512 | } 1513 | .gm-style img[src *= 'images/google'], 1514 | .gm-style img[src *= 'maps.googleapis.com'], 1515 | .gm-style img[style *= 'width: 256px'][style *= 'height: 256px'] { 1516 | filter: invert(0.8) hue-rotate(180deg) contrast(120%) !important; 1517 | } 1518 | .gm-style img[src *= 'com/pp?'], 1519 | .gm-style [style *= 'height: 40px; width: 40px'] { 1520 | border-radius: 50% !important; 1521 | } 1522 | .gm-style [controlwidth = '40'] * { 1523 | filter: invert(0.9) !important; 1524 | } 1525 | .gm-style [controlwidth = '40'] * [style *= 'd-color: rgb(255, 255, 255)'] { 1526 | background-color: var(--bg-0) !important; 1527 | } 1528 | .gm-style [style *= 'd-color: rgb(245, 245, 245)'] { 1529 | background-color: var(--bg-4) !important; 1530 | } 1531 | .gm-style [style *= ' color: rgb(68, 68, 68)'] { 1532 | color: var(--fg-3) !important; 1533 | } 1534 | .gm-style .BPkae { 1535 | border-top-color: var(--modal-background) !important; 1536 | } 1537 | .gm-style ._3Q8RX { 1538 | background-color: var(--ac-1) !important; 1539 | } 1540 | ._3nNEI { 1541 | box-shadow: 0 -1px var(--bg-3) !important; 1542 | } 1543 | } 1544 | -------------------------------------------------------------------------------- /wa.user.styl: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name Dark-WhatsApp 3 | @description Dark and light, very customizable theme for WhatsApp. 4 | @namespace github.com/vednoc/dark-whatsapp 5 | @homepageURL https://github.com/vednoc/dark-whatsapp 6 | @supportURL https://github.com/vednoc/dark-whatsapp/issues 7 | @updateURL https://userstyles.world/api/style/4.user.css 8 | @author vednoc (https://github.com/vednoc) 9 | @version 3.7.2 10 | @license MIT 11 | @preprocessor stylus 12 | 13 | @var select theme 'Base color-scheme toggle' { 14 | 'Custom colors *': 'custom', 15 | 'Dark blue (old) ': 'old', 16 | 'Dark gray (new) ': 'new', 17 | } 18 | 19 | @var color _bg 'Base background color ' #1f232a 20 | @var color _fg 'Base foreground color ' #eeeeee 21 | @var color _ac 'Base accent color ' #7289da 22 | 23 | @var range _bg_a 'Adjust background color tones' [0, -25, 25, 0.1, '%'] 24 | @var range _fg_a 'Adjust foreground color tones' [0, -25, 25, 0.1, '%'] 25 | @var range _ac_a 'Adjust accent color tones ' [0, 0, 25, 1, '%'] 26 | @var range _sc_a 'Adjust syntax color tones ' [0, 0, 25, 1, '%'] 27 | 28 | @var text ui_font 'UI font' ''font_name'' 29 | @var text app_width 'App width' 1396px 30 | @var checkbox fullscreen 'Fullscreen mode' 0 31 | 32 | @var checkbox compact 'Compact mode' 1 33 | @var text compact_mw 'Compact mode breakpoint' 720px 34 | @var text compact_hi 'Compact mode hover-on delay' 0.6s 35 | @var text compact_ho 'Compact mode hover-off delay' 1.2s 36 | 37 | @var select app_alerts 'Alerts' { 38 | 'Show all *': 'show ', 39 | 'Hide "Allow notifications" ': 'notifications ', 40 | 'Hide all ': 'hide ', 41 | } 42 | @var checkbox app_header 'Consistent drawer headers' 1 43 | 44 | @var text radius_m 'Rounded corners for menus' 4px 45 | @var text radius_i 'Rounded corners for input area' 24px 46 | @var range radius_a 'Rounded corners for avatars' [50, 0, 50, 1, '%'] 47 | 48 | @var select app_image 'App background' { 49 | 'Theme image with 12px blur *': 'bg-high ', 50 | 'Theme image with 6px blur ': 'bg-low ', 51 | 'Theme image without blur ': 'bg-none ', 52 | 'Custom background image ': 'custom ', 53 | 'Default background ': 'default ', 54 | 'None ': 'none ', 55 | } 56 | @var text image_url 'App background image link' url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80') 57 | @var range bg_opacity 'App background image opacity' [0.4, 0.0, 1, 0.01] 58 | @var range bg_blur 'App background image blur size' [0, 0, 50, 1, 'px'] 59 | @var range bg_hue 'App background image hue' [320, 0, 360, 1, 'deg'] 60 | @var range bg_invert 'App background image invert colors' [0, 0.0, 1, 0.01] 61 | @var text bg_size 'App background image size' cover 62 | @var text bg_pos 'App background image position' center 63 | @var text bg_rep 'App background image repeat' no-repeat 64 | 65 | @var select tail_style 'Style for message bubble tails' { 66 | 'Default *': 'default ', 67 | 'Minimal ': 'minimal ', 68 | 'Rounded ': 'rounded ', 69 | } 70 | 71 | @var range emoji_o 'Emoji opacity' [0.8, 0.0, 1, 0.01] 72 | @var range emoji_b 'Reduce big emoji size' [48, 20, 48, 4, "px"] 73 | @var checkbox emoji_a 'Animate emojis' 1 74 | @var text emoji_k 'Emojis with kiss animation' "'💋'" 75 | @var text emoji_p 'Emojis with pulse animation' "'🤩' '😍' '☺️' '❣️' '♥️' '❤️'" 76 | 77 | @var checkbox ow_ack 'Override seen message icon color' 0 78 | @var color _ack 'Seen message icon color' #ff6666 79 | 80 | @var checkbox ow_sys_msg 'Override system message background color' 0 81 | @var color sys_msg_bg 'System message background color' #364462 82 | 83 | @var checkbox ow_imsg 'Override incoming message bubble color' 0 84 | @var color _imsg 'Incoming message bubble color' #16191e 85 | @var checkbox bubble_in 'Swap sides for incoming message bubbles' 0 86 | 87 | @var checkbox ow_omsg 'Override outgoing message bubble color' 0 88 | @var color _omsg 'Outgoing message bubble color' #3b4250 89 | @var checkbox bubble_out 'Swap sides for outgoing message bubbles' 0 90 | 91 | @var checkbox chat_h_p_p 'Hide profile pictures' 0 92 | @var checkbox chat_b_c 'Blurred contacts' 0 93 | @var checkbox chat_b_img 'Blurred media' 0 94 | @var text chat_b_in 'Blurred media hover-on delay' 0.4s 95 | @var text chat_b_out 'Blurred media hover-off delay' 0.2s 96 | 97 | @var checkbox chat_bg 'Chat background image' 1 98 | @var text chat_image 'Chat background image link' url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png') 99 | @var range chat_bg_o 'Chat background image opacity' [0.15, 0.0, 1, 0.01] 100 | @var range chat_bg_iv 'Chat background image inverted colors' [0.6, 0.0, 1, 0.01] 101 | @var text chat_bg_s 'Chat background image size' initial 102 | @var text chat_bg_p 'Chat background image position' top left 103 | @var text chat_bg_r 'Chat background image repeat' repeat 104 | 105 | @var color _red 'Base red color ' #f07178 106 | @var color _orange 'Base orange color ' #f78c6c 107 | @var color _yellow 'Base yellow color ' #ffcb6b 108 | @var color _green 'Base green color ' #c3e88d 109 | @var color _cyan 'Base cyan color ' #89ddff 110 | @var color _blue 'Base blue color ' #82aaff 111 | @var color _magenta 'Base magenta color ' #c792ea 112 | @var color _violet 'Base violet color ' #9a91ea 113 | @var color _white 'White color ' #ffffff 114 | @var color _sh 'Shadow color ' #00000025 115 | ==/UserStyle== */ 116 | 117 | // Color mixin. 118 | /// All colors: `c: fg1 bg5 bg1` 119 | /// Only border-color: `c: 0 bg5` 120 | c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) { 121 | if x != 0 && x != '_' { color: xi is 0 ? x : x i } 122 | if y != 0 && y != '_' { border-color: yi is 0 ? y : y i } 123 | if z != 0 && z != '_' { background-color: zi is 0 ? z : z i } 124 | } 125 | 126 | // Raw RGB mixin. 127 | /// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format. 128 | to_rgb(input, t = 0) { 129 | if (t) { 130 | unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5)) 131 | } else { 132 | unquote(slice(s('%s', rgba(input, 0)), 5, -3)) 133 | } 134 | } 135 | 136 | // Raw RGBA mixin. 137 | /// Combine `*-rgb` vars and alpha value. 138 | to_rgba(input, alpha) { 139 | unquote(s('rgba(var(--%s-rgb), %s)', unquote(input), alpha)) 140 | } 141 | 142 | // SVG-friendly colors mixin. 143 | to_svg(input) { 144 | s('\%23%s', unquote(substr(s('%s', input), 1, 6))) 145 | } 146 | 147 | // Rounded corners mixin. 148 | rad() { border-radius: arguments } 149 | 150 | /// Remove old browser prefixes. 151 | vendors = official 152 | 153 | /// Feat -> Base color-scheme toggle. #32 154 | if (theme == 'custom') { 155 | BG = _bg 156 | FG = _fg 157 | AC = _ac 158 | } else if (theme == 'old') { 159 | BG = #1f232a 160 | FG = #eeeeee 161 | AC = #7289da 162 | _red = #f07178 163 | _orange = #f78c6c 164 | _yellow = #ffcb6b 165 | _green = #c3e88d 166 | _cyan = #89ddff 167 | _blue = #82aaff 168 | _magenta = #c792ea 169 | _violet = #9a91ea 170 | } else if (theme == 'new') { 171 | BG = #292929 172 | FG = #e6e6e6 173 | AC = #d47d3f 174 | _red = #f2777a 175 | _orange = #f99157 176 | _yellow = #ffcc66 177 | _green = #99cc99 178 | _cyan = #66cccc 179 | _blue = #6699cc 180 | _magenta = #cc99cc 181 | _violet = #aa99cc 182 | } 183 | 184 | /// Helpers. 185 | t = transparent 186 | i = !important 187 | BA = _bg_a 188 | FA = _fg_a 189 | AA = _ac_a 190 | SA = _sc_a 191 | IM = _imsg 192 | OM = _omsg 193 | 194 | // Color generator. 195 | /// NOTE: Scope the variables to avoid potential conflicts. 196 | /{ 197 | g = global 198 | 199 | /// Color generator rules. 200 | if (dark(BG)) { 201 | a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75) 202 | s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75) 203 | b1 = (BA + 10); b2 = (BA - 05); b3 = (BA - 10); b4 = (BA - 15); b5 = (BA - 20) 204 | f1 = (FA - 10); f2 = (FA + 10); f3 = (FA + 20); f4 = (FA + 30); f5 = (FA + 40) 205 | } else { 206 | a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75) 207 | s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75) 208 | b1 = (BA - 10); b2 = (BA + 08); b3 = (BA + 16); b4 = (BA + 24); b5 = (BA + 32) 209 | f1 = (FA - 05); f2 = (FA - 10); f3 = (FA - 15); f4 = (FA - 20); f5 = (FA - 30) 210 | } 211 | 212 | /// Feat -> Colors for message bubbles. 213 | ig_quote = dark(IM) ? -10% : 25% 214 | og_quote = dark(OM) ? -10% : 25% 215 | 216 | /// Generate tones for base colors. 217 | C = { 218 | bg: { 219 | '0': darken(BG, b1), 220 | '1': darken(BG, 0%), 221 | '2': darken(BG, b2), 222 | '3': darken(BG, b3), 223 | '4': darken(BG, b4), 224 | '5': darken(BG, b5), 225 | }, 226 | fg: { 227 | '0': darken(FG, f1), 228 | '1': darken(FG, 0%), 229 | '2': darken(FG, f2), 230 | '3': darken(FG, f3), 231 | '4': darken(FG, f4), 232 | '5': darken(FG, f5), 233 | }, 234 | ac: { 235 | '0': mix(darken(BG, 0%), AC, 0%), 236 | '1': mix(darken(BG, 40%), AC, a1), 237 | '2': mix(darken(BG, 40%), AC, a2), 238 | '3': mix(darken(BG, 40%), AC, a3), 239 | '4': mix(darken(BG, 65%), AC, a4), 240 | '5': mix(darken(BG, 50%), AC, a5), 241 | }, 242 | ig: { 243 | '0': IM, 244 | '1': darken(IM, ig_quote), 245 | }, 246 | og: { 247 | '0': OM, 248 | '1': darken(OM, og_quote), 249 | }, 250 | b1: { 251 | '0': spin(_red, 0deg - 0%) 252 | '1': spin(_red, 15deg - s1) 253 | '2': spin(_red, 30deg - s2) 254 | '3': mix(darken(BG, 20%), _red, s3) 255 | '4': mix(darken(BG, 40%), _red, s4) 256 | '5': mix(darken(BG, 40%), _red, s5) 257 | }, 258 | b2: { 259 | '0': spin(_orange, 0deg - 0%) 260 | '1': spin(_orange, 15deg - s1) 261 | '2': spin(_orange, 30deg - s2) 262 | '3': mix(darken(BG, 20%), _orange, s3) 263 | '4': mix(darken(BG, 40%), _orange, s4) 264 | '5': mix(darken(BG, 40%), _orange, s5) 265 | }, 266 | b3: { 267 | '0': spin(_yellow, 0deg - 0%) 268 | '1': spin(_yellow, 15deg - s1) 269 | '2': spin(_yellow, 30deg - s2) 270 | '3': mix(darken(BG, 20%), _yellow, s3) 271 | '4': mix(darken(BG, 40%), _yellow, s4) 272 | '5': mix(darken(BG, 40%), _yellow, s5) 273 | }, 274 | b4: { 275 | '0': spin(_green, 0deg - 0%) 276 | '1': spin(_green, 15deg - s1) 277 | '2': spin(_green, 30deg - s2) 278 | '3': mix(darken(BG, 20%), _green, s3) 279 | '4': mix(darken(BG, 40%), _green, s4) 280 | '5': mix(darken(BG, 40%), _green, s5) 281 | }, 282 | b5: { 283 | '0': spin(_cyan, 0deg - 0%) 284 | '1': spin(_cyan, 15deg - s1) 285 | '2': spin(_cyan, 30deg - s2) 286 | '3': mix(darken(BG, 20%), _cyan, s3) 287 | '4': mix(darken(BG, 40%), _cyan, s4) 288 | '5': mix(darken(BG, 40%), _cyan, s5) 289 | }, 290 | b6: { 291 | '0': spin(_blue, 0deg - 0%) 292 | '1': spin(_blue, 15deg - s1) 293 | '2': spin(_blue, 30deg - s2) 294 | '3': mix(darken(BG, 20%), _blue, s3) 295 | '4': mix(darken(BG, 40%), _blue, s4) 296 | '5': mix(darken(BG, 40%), _blue, s5) 297 | }, 298 | b7: { 299 | '0': spin(_magenta, 0deg - 0%) 300 | '1': spin(_magenta, 15deg - s1) 301 | '2': spin(_magenta, 30deg - s2) 302 | '3': mix(darken(BG, 20%), _magenta, s3) 303 | '4': mix(darken(BG, 40%), _magenta, s4) 304 | '5': mix(darken(BG, 40%), _magenta, s5) 305 | }, 306 | b8: { 307 | '0': spin(_violet, 0deg - 0%) 308 | '1': spin(_violet, 15deg - s1) 309 | '2': spin(_violet, 30deg - s2) 310 | '3': mix(darken(BG, 20%), _violet, s3) 311 | '4': mix(darken(BG, 40%), _violet, s4) 312 | '5': mix(darken(BG, 40%), _violet, s5) 313 | } 314 | } 315 | 316 | /// Generate Stylus-lang variables. 317 | define('bg-' + key, val, g) for key, val in C.bg 318 | define('fg-' + key, val, g) for key, val in C.fg 319 | define('ac-' + key, val, g) for key, val in C.ac 320 | define('og-' + key, val, g) for key, val in C.og 321 | define('ig-' + key, val, g) for key, val in C.ig 322 | define('b1-' + key, val, g) for key, val in C.b1 323 | define('b2-' + key, val, g) for key, val in C.b2 324 | define('b3-' + key, val, g) for key, val in C.b3 325 | define('b4-' + key, val, g) for key, val in C.b4 326 | define('b5-' + key, val, g) for key, val in C.b5 327 | define('b6-' + key, val, g) for key, val in C.b6 328 | define('b7-' + key, val, g) for key, val in C.b7 329 | define('b8-' + key, val, g) for key, val in C.b8 330 | 331 | /// Generate Stylus-lang helpers for CSS variables. 332 | define('bg' + key, s('var(--bg-%s)', unquote(key)), g) for key, val in C.bg 333 | define('fg' + key, s('var(--fg-%s)', unquote(key)), g) for key, val in C.fg 334 | define('ac' + key, s('var(--ac-%s)', unquote(key)), g) for key, val in C.ac 335 | define('b1' + key, s('var(--b1-%s)', unquote(key)), g) for key, val in C.b1 336 | define('b2' + key, s('var(--b2-%s)', unquote(key)), g) for key, val in C.b2 337 | define('b3' + key, s('var(--b3-%s)', unquote(key)), g) for key, val in C.b3 338 | define('b4' + key, s('var(--b4-%s)', unquote(key)), g) for key, val in C.b4 339 | define('b5' + key, s('var(--b5-%s)', unquote(key)), g) for key, val in C.b5 340 | define('b6' + key, s('var(--b6-%s)', unquote(key)), g) for key, val in C.b6 341 | define('b7' + key, s('var(--b7-%s)', unquote(key)), g) for key, val in C.b7 342 | define('b8' + key, s('var(--b8-%s)', unquote(key)), g) for key, val in C.b8 343 | } 344 | 345 | msg = "Still looking for someone to help maintain Dark-WhatsApp. I will try " 346 | msg += "to maintain it until a big breaking update. Also, check out my other " 347 | msg += "project related to userstyles:\A\A 🌟 https://userstyles.world 🌟\A\A " 348 | msg += "Changelog: https://github.com/vednoc/dark-whatsapp\A" 349 | msg += "P.S. CSS can not create clickable links." 350 | 351 | @-moz-document domain('web.whatsapp.com') { 352 | :root:not(#z), .dark:not(#z) { 353 | /// Userstyle info. 354 | --version: '🌚 Dark-WhatsApp v3.7.2 — March 31st, 2023' 355 | 356 | /// UI font. 357 | --ui-font: ui_font, Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, 358 | Arial, Ubuntu, Cantarell, Fira Sans, sans-serif 359 | 360 | /// Rounded corners. 361 | --r-menus: radius_m 362 | --r-inputs: radius_i 363 | --r-avatars: radius_a 364 | 365 | /// Compact mode. 366 | --c-m-hover: compact_hi 367 | --c-m-delay: compact_ho 368 | 369 | /// Blurred media. 370 | --blur-in: chat_b_in 371 | --blur-out: chat_b_out 372 | 373 | /// App width. 374 | --app-width: app_width 375 | 376 | /// Emoji opacity. 377 | --emoji-o: emoji_o 378 | 379 | /// App background. 380 | image_path = 'https://raw.githubusercontent.com/' 381 | image_path += 'vednoc/dark-whatsapp/master/images/bg-blur' 382 | if (app_image == 'bg-high') { 383 | --bg-image: url(image_path + '-high.jpg') 384 | } else if (app_image == 'bg-low') { 385 | --bg-image: url(image_path + '-low.jpg') 386 | } else if (app_image == 'bg-none') { 387 | --bg-image: url(image_path + '-none.jpg') 388 | } else if (app_image == 'custom') { 389 | --bg-image: image_url 390 | } else { 391 | --bg-image: none 392 | } 393 | --bg-opacity: bg_opacity 394 | --bg-blur: bg_blur 395 | --bg-blur-s: calc(-2 * var(--bg-blur)) 396 | --bg-hue: bg_hue 397 | --bg-invert: bg_invert 398 | --bg-size: bg_size 399 | --bg-pos: bg_pos 400 | --bg-rep: bg_rep 401 | 402 | /// Chat background. 403 | --chat-image: chat_image 404 | --chat-bg-o: chat_bg_o 405 | --chat-bg-i: chat_bg_iv 406 | --chat-bg-s: chat_bg_s 407 | --chat-bg-p: chat_bg_p 408 | --chat-bg-r: chat_bg_r 409 | 410 | /// Override incoming message bubble colors. 411 | --msg-in-0: (ow_imsg) ? ig-0 : var(--bg-4) 412 | --msg-in-0-rgb: (ow_imsg) ? to_rgb(ig-0) : var(--bg-4-rgb) 413 | --msg-in-1: (ow_imsg) ? ig-1 : var(--bg-3) 414 | --msg-in-1-rgb: (ow_imsg) ? to_rgb(ig-1) : var(--bg-3-rgb) 415 | 416 | /// Override outgoing message bubble colors. 417 | --msg-out-0: (ow_omsg) ? og-0 : var(--ac-4) 418 | --msg-out-0-rgb: (ow_omsg) ? to_rgb(og-0) : var(--ac-4-rgb) 419 | --msg-out-1: (ow_omsg) ? og-1 : var(--ac-5) 420 | --msg-out-1-rgb: (ow_omsg) ? to_rgb(og-1) : var(--ac-5-rgb) 421 | 422 | /// Override seen message icon color. 423 | --msg-ack: (ow_ack) ? _ack : var(--ac-0) 424 | --msg-ack-rgb: (ow_ack) ? to_rgb(_ack) : var(--ac-0-rgb) 425 | 426 | /// WA variables. 427 | --gray-30: var(--bg-5) //#f7f7f7; 428 | --gray-30-rgb: var(--bg-5-rgb) //247,247,247; 429 | --gray-700: var(--fg-4) // #4a4a4a; 430 | --gray-700-rgb: var(--fg-4-rgb) // 74,74,74; 431 | --pale-blue-green: var(--b6-4) //#ecfaf5; 432 | --pale-blue-green-rgb: var(--b6-4-rgb) //236,250,245; 433 | --pale-green: var(--b4-4) //#dcf8c6; 434 | --pale-green-rgb: var(--b4-4-rgb) //220,248,198; 435 | --pale-yellow: var(--b3-4) //#fff5c4; 436 | --pale-yellow-rgb: var(--b3-4-rgb) //255,245,196; 437 | --teal: var(--ac-0) //#009688; 438 | --teal-rgb: var(--ac-0-rgb) //0,150,136; 439 | --teal-light: var(--ac-1) //#1de9b6; 440 | --teal-light-rgb: var(--ac-1-rgb) //29,233,182; 441 | --teal-lighter: var(--ac-2) //#00bfa5; 442 | --teal-lighter-rgb: var(--ac-2) //0,191,165; 443 | --green-deep: var(--ac-2) //#1b9a59; 444 | --green-deep-rgb: var(--ac-2-rgb) //27,154,89; 445 | --blue-ocean: var(--bg-2) //#aadaff; 446 | --blue-ocean-rgb: var(--bg-2-rgb) //#aadaff; 447 | --active-tab-marker: var(--ac-0) //#00af9c; 448 | --active-tab-marker-rgb: var(--ac-0-rgb) //0,175,156; 449 | --app-background-stripe: var(--bg-1) //#091e1f; 450 | --app-background-stripe-rgb: var(--bg-1-rgb) //9,30,31; 451 | --app-background: var(--bg-0) //#080e12; 452 | --app-background-rgb: var(--bg-0-rgb) //8,14,18; 453 | --app-background-deeper: var(--bg-0) //#080e12; 454 | --app-background-deeper-rgb: var(--bg-0-rgb) //8,14,18; 455 | --attach-media-drop-border: var(--fg-3) //#f1f1f233; 456 | --attach-media-drop-border-rgb: var(--fg-3-rgb) //241,241,242; 457 | --attach-media-drop-overlay: var(--bg-2) //#383d3f4d; 458 | --attach-media-drop-overlay-rgb: var(--bg-2-rgb) //55.76,60.6,63.24; 459 | --audio-progress-incoming: var(--b4-0) //#3bb463; 460 | --audio-progress-incoming-rgb: var(--b4-0-rgb) //59,180,99; 461 | --audio-progress-outgoing: var(--ac-2) //#5f8884; 462 | --audio-progress-outgoing-rgb: var(--ac-2-rgb) //95,136,132; 463 | --audio-progress-played-incoming: var(--b6-0) //#5ba0c3; 464 | --audio-progress-played-incoming-rgb: var(--b6-0-rgb) //91,160,195; 465 | --audio-progress-played-outgoing: var(--b6-0) //#55a5c5; 466 | --audio-progress-played-outgoing-rgb: var(--b6-0-rgb) //85,165,197; 467 | --audio-track-incoming: var(--fg-4) //#374248; 468 | --audio-track-incoming-rgb: var(--fg-4-rgb) //55,66,72; 469 | --audio-track-outgoing: var(--fg-4) //#1d5852; 470 | --audio-track-outgoing-rgb: var(--fg-4-rgb) //29,88,82; 471 | --avatar-background: var(--bg-1) //#101d24; 472 | --avatar-background-rgb: var(--bg-1-rgb) //16,29,36; 473 | --avatar-border: var(--bg-3) //#a5aaad; 474 | --avatar-border-rgb: var(--bg-3-rgb) //165,170,173; 475 | --avatar-placeholder-background: var(--bg-5) //#6c7478; 476 | --avatar-placeholder-background-rgb: var(--bg-5-rgb) //108,116,120; 477 | --avatar-placeholder-primary: var(--fg-3) //#d6d8d9; 478 | --avatar-placeholder-primary-rgb: var(--fg-3-rgb) //214,216,217; 479 | --background-default: var(--bg-2) //#101d24; 480 | --background-default-rgb: var(--bg-2-rgb) //16,29,36; 481 | --background-default-active: var(--bg-4) //#202c32; 482 | --background-default-active-rgb: var(--bg-4-rgb) //32,44,50; 483 | --background-default-hover: var(--bg-3) //#17232a; 484 | --background-default-hover-rgb: var(--bg-3-rgb) //23,35,42; 485 | --border-bubble: var(--shadow) //#f1f1f20f; 486 | --border-bubble-rgb: var(--shadow-rgb) //241,241,242; 487 | --border-default: var(--bg-3) //#1b282e; 488 | --border-default-rgb: var(--bg-3-rgb) //27,40,46; 489 | --border-list: var(--bg-3) //#1b282e; 490 | --border-list-rgb: var(--bg-3-rgb) //27,40,46; 491 | --border-panel: var(--bg-5) //#28333a; 492 | --border-panel-rgb: var(--bg-5-rgb) //40,51,58; 493 | --border-strong: var(--bg-5) //#343f45; 494 | --border-strong-rgb: var(--bg-5-rgb) //52,63,69; 495 | --border-stronger: var(--bg-5) //#f1f1f20f; 496 | --border-stronger-rgb: var(--fg-5-rgb) //241,241,242; 497 | --bubble-meta: var(--fg-3) //#f1f1f299; 498 | --bubble-meta-rgb: var(--fg-3-rgb) //241,241,242; 499 | --bubble-meta-icon: var(--fg-3) //#f1f1f299; 500 | --bubble-meta-icon-rgb: var(--fg-3-rgb) //241,241,242; 501 | --butterbar-battery-background: var(--b1-4) //#e05b52; 502 | --butterbar-battery-background-rgb: var(--b1-4-rgb) //224,91,82; 503 | --butterbar-battery-icon: var(--b1-0) //#f5d6d7; 504 | --butterbar-battery-icon-rgb: var(--b1-0-rgb) //245,214,215; 505 | --butterbar-battery-primary: var(--fg-0) //#f1f1f2f5; 506 | --butterbar-battery-primary-rgb: var(--fg-0-rgb) //241,241,242; 507 | --butterbar-battery-secondary: var(--fg-4) //#f1f1f2cc; 508 | --butterbar-battery-secondary-rgb: var(--fg-4-rgb) //241,241,242; 509 | --butterbar-connection-background: var(--b3-4) //#febc2c; 510 | --butterbar-connection-background-rgb: var(--b3-4-rgb) //254,188,44; 511 | --butterbar-connection-primary: var(--fg-0) //#1c282ff5; 512 | --butterbar-connection-primary-rgb: var(--fg-0-rgb) //28,40,47; 513 | --butterbar-connection-secondary: var(--fg-4) //#1c282fd9; 514 | --butterbar-connection-secondary-rgb: var(--fg-4-rgb) //28,40,47; 515 | --butterbar-default-background: var(--b6-4) //#39c; 516 | --butterbar-default-background-rgb: var(--b6-4) //51,153,204; 517 | --butterbar-icon: var(--b3-0) //#f1f1f2cc; 518 | --butterbar-icon-rgb: var(--b3-0-rgb) //241,241,242; 519 | --butterbar-notification-icon: var(--b6-0) //#8eb2be; 520 | --butterbar-notification-icon-rgb: var(--b6-0-rgb) //142,178,190; 521 | --butterbar-primary: var(--fg-0) //#f1f1f2f5; 522 | --butterbar-primary-rgb: var(--fg-0-rgb) //241,241,242; 523 | --butterbar-secondary: var(--fg-4) //#f1f1f2d9; 524 | --butterbar-secondary-rgb: var(--fg-4-rgb) //241,241,242; 525 | --butterbar-update-background: var(--b4-4) //#00af9c; 526 | --butterbar-update-background-rgb: var(--b4-4-rgb) //0,175,156; 527 | --butterbar-update-icon: var(--b4-0) //#8eafaa; 528 | --butterbar-update-icon-rgb: var(--b4-0-rgb) //142,175,170; 529 | --button-alternative: var(--ac-1) //#68bbe4; 530 | --button-alternative-rgb: var(--ac-1-rgb) //104,187,228; 531 | --button-alternative-background: var(--bg-3) //#222e35; 532 | --button-alternative-background-rgb: var(--bg-3-rgb) //34,46,53; 533 | --button-background-disabled: var(--bg-2) //#253137; 534 | --button-background-disabled-rgb: var(--bg-2-rgb) //37,49,55; 535 | --button-bubble: var(--ac-0) //#00af9cb3; 536 | --button-bubble-rgb: var(--ac-0-rgb) //0,175,156; 537 | --button-plain-background: var(--bg-4) //#2f3437; 538 | --button-plain-background-rgb: var(--bg-4-rgb) //47.1,51.86667,54.9; 539 | --button-primary: var(--white) //#101d24; 540 | --button-primary-rgb: var(--white-rgb) //16,29,36; 541 | --button-primary-background: var(--ac-0) //#00af9c; 542 | --button-primary-background-rgb: var(--ac-0-rgb) //0,175,156; 543 | --button-primary-background-hover: var(--ac-3) //#00c3ae; 544 | --button-primary-background-hover-rgb: var(--ac-3-rgb) //0,195.4,174.18514; 545 | --button-round-background: var(--ac-0) //#00af9c; 546 | --button-round-background-rgb: var(--ac-0-rgb) //0,175,156; 547 | --button-secondary: var(--ac-0) //#00af9c; 548 | --button-secondary-rgb: var(--ac-0-rgb) //0,175,156; 549 | --button-secondary-background: transparent; 550 | --button-secondary-background-rgb: 0,0,0; 551 | --button-secondary-background-hover: #f1f1f20d; 552 | --button-secondary-background-hover-rgb: var(--fg-3-rgb) //241,241,242; 553 | --button-secondary-hover: var(--ac-0) //#00af9c; 554 | --button-secondary-hover-rgb: var(--ac-0-rgb) //0,175,156; 555 | --chat-marker: var(--fg-3) //#999; 556 | --chat-marker-rgb: var(--fg-3-rgb) //153,153,153; 557 | --chat-marker-admin: var(--ac-0) //#00af9c; 558 | --chat-marker-admin-rgb: var(--ac-0-rgb) //0,175,156; 559 | --chat-marker-admin-border: var(--ac-0) //#00af9cb3; 560 | --chat-marker-admin-border-rgb: var(--ac-0-rgb) //0,175,156; 561 | --chat-marker-border: var(--fg-3) //#999999b3; 562 | --chat-marker-border-rgb: var(--fg-3-rgb) //153,153,153; 563 | --chat-meta: var(--fg-3) //hsl(203.1, 12%, 57.6%); 564 | --chat-meta-rgb: var(--fg-3-rgb) //134,150,160; 565 | --chatlist-icon: var(--fg-5) //#f1f1f299; 566 | --chatlist-icon-rgb: var(--fg-5-rgb) //241,241,242; 567 | --checkbox-background: var(--ac-0) //#00af9c; 568 | --checkbox-background-rgb: var(--ac-0-rgb) //0,175,156; 569 | --checkbox-mark: var(--white) //#101d24; 570 | --checkbox-mark-rgb: var(--white-rgb) //16,29,36; 571 | --chevron-button-background: var(--bg-3) //#f1f1f259; 572 | --chevron-button-background-rgb: var(--bg-3-rgb) //241,241,242; 573 | --compose-input-background-focused: var(--bg-0) //#3f5560; 574 | --compose-input-background-focused-rgb: var(--bg-0-rgb) //63,85,96; 575 | --compose-input-background: var(--bg-1) //#33383b; 576 | --compose-input-background-rgb: var(--bg-1-rgb) //51.22296,56.04619,58.67704; 577 | --compose-input-border: var(--bg-5) //#33383b; 578 | --compose-input-border-rgb: var(--bg-5-rgb) //51.22296,56.04619,58.67704; 579 | --compose-input-border-focused: var(--bg-5) //#415a67; 580 | --compose-input-border-focused-rgb: var(--bg-5-rgb) //65,90,103; 581 | --compose-panel-background: var(--bg-3) //#1e2428; 582 | --compose-panel-background-rgb: var(--bg-3-rgb) //29.591,36.36026,40.309; 583 | --compose-panel-background-hover: var(--bg-4) //#151e23; 584 | --compose-panel-background-hover-rgb: var(--ac-4-rgb) //21,30,35; 585 | --compose-primary: var(--fg-1) //#f1f1f2; 586 | --compose-primary-rgb: var(--fg-1-rgb) //241,241,242; 587 | --conversation-panel-background: var(--bg-1) //#0b1419; 588 | --conversation-panel-background-rgb: var(--bg-1-rgb) //11.29231,20.46731,25.40769; 589 | --conversation-panel-border: var(--bg-5) //#f1f1f214; 590 | --conversation-panel-border-rgb: var(--fg-3-rgb) //241,241,242; 591 | --danger: var(--b1-0) //#ef697a; 592 | --danger-rgb: var(--b1-0-rgb) //239,105,122; 593 | --drawer-background: var(--bg-1) //#101d24; 594 | --drawer-background-rgb: var(--bg-1-rgb) //16,29,36; 595 | --drawer-background-deep: var(--bg-0) //#080e12; 596 | --drawer-background-deep-rgb: var(--bg-0-rgb) //8,14,18; 597 | --drawer-gallery-background: var(--bg-1) //#101d24; 598 | --drawer-gallery-background-rgb: var(--bg-1-rgb) //16,29,36; 599 | --drawer-gallery-background-active: var(--bg-0) //#0d1418; 600 | --drawer-gallery-background-active-rgb: var(--bg-0-rgb) //13.12731,19.91681,23.57269; 601 | --drawer-gallery-background-hover: var(--bg-0) //#0d1418; 602 | --drawer-gallery-background-hover-rgb: var(--bg-0-rgb) //13.12731,19.91681,23.57269; 603 | --drawer-header-title: var(--fg-1) //#d6d8d9; 604 | --drawer-header-title-rgb: var(--fg-1-rgb) //214,216,217; 605 | --drawer-section-background: var(--bg-2) //#101d24; 606 | --drawer-section-background-rgb: var(--bg-2-rgb) //16,29,36; 607 | --dropdown-background: var(--bg-2) //#253137; 608 | --dropdown-background-rgb: var(--bg-2-rgb) //37,49,55; 609 | --dropdown-background-hover: var(--bg-3) //#202c33; 610 | --dropdown-background-hover-rgb: var(--bg-3-rgb) //32,44,51; 611 | --empty-state-background: var(--bg-3) //#1c282f; 612 | --empty-state-background-rgb: var(--bg-3-rgb) //28,40,47; 613 | --empty-state-icon: var(--fg-4) //#757c81; 614 | --empty-state-icon-rgb: var(--fg-4-rgb) //117,124,129; 615 | --focus: var(--ac-3) //#68bbe4; 616 | --focus-rgb: var(--ac-3-rgb) //104,187,228; 617 | --focus-animation: var(--ac-3) //#68bbe442; 618 | --focus-animation-rgb: var(--ac-3-rgb) //104,187,228; 619 | --focus-animation-deeper: var(--ac-3) //#68bbe452; 620 | --focus-animation-deeper-rgb: var(--ac-3-rgb) //104,187,228; 621 | --focus-lighter: var(--ac-3) //#68bbe41f; 622 | --focus-lighter-rgb: var(--ac-3-rgb) //104,187,228; 623 | --highlight: var(--ac-0) //#00af9c; 624 | --highlight-rgb: var(--ac-0-rgb) //0,175,156; 625 | --icon: var(--fg-3) //#80868b; 626 | --icon-rgb: var(--fg-3-rgb) //128,134,139; 627 | --icon-ack: var(--msg-ack) //#34b7f1; 628 | --icon-ack-rgb: var(--msg-ack-rgb) //52,183,241; 629 | --icon-disabled: var(--fg-5) //#3c464c; 630 | --icon-disabled-rgb: var(--fg-5-rgb) //60,70,76; 631 | --icon-fixed: var(--fg-3) //#80868b; 632 | --icon-fixed-rgb: var(--fg-3-rgb) //128,134,139; 633 | --icon-lighter: var(--fg-5) //#f1f1f245; 634 | --icon-lighter-rgb: var(--fg-0-rgb) //241,241,242; 635 | --icon-search-back: var(--ac-2) //#71787d; 636 | --icon-search-back-rgb: var(--ac-2-rgb) //113,120,125; 637 | --icon-strong: var(--fg-1) //#c4c7c9; 638 | --icon-strong-rgb: var(--fg-1-rgb) //196,199,201; 639 | --incoming-background: var(--msg-in-0) //#222e35; 640 | --incoming-background-rgb: var(--msg-in-0-rgb) //34,46,53; 641 | --incoming-background-deeper: var(--msg-in-1) //#1d272e; 642 | --incoming-background-deeper-rgb: var(--msg-in-1-rgb) //29,39,46; 643 | --incoming-background-highlight: #ccc; 644 | --incoming-background-highlight-rgb: 204,204,204; 645 | --incoming-primary: var(--fg-3) //#777d81; 646 | --incoming-primary-rgb: var(--fg-3-rgb) //119,125,129; 647 | --input-border-active: var(--ac-0) //#00af9c; 648 | --input-border-active-rgb: var(--ac-0-rgb) //0,175,156; 649 | --input-placeholder: var(--fg-4) //#6a7276; 650 | --input-placeholder-rgb: var(--fg-4) //106,114,118; 651 | --intro-background: var(--bg-1) //#222e35; 652 | --intro-background-rgb: var(--bg-1-rgb) //34,46,53; 653 | --intro-border: var(--ac-2) //#054740; 654 | --intro-border-rgb: var(--ac-2-rgb) //5,71,64; 655 | --intro-logo: var(--fg-3) //rgba(241,241,242,0.26); 656 | --intro-logo-rgb: var(--fg-3-rgb) //241,241,242; 657 | --intro-secondary: var(--fg-3) //#a6a8aa; 658 | --intro-secondary-rgb: var(--fg-3-rgb) //166,168,170; 659 | --inverse: var(--fg-0) //#f1f1f2; 660 | --inverse-rgb: var(--fg-0-rgb) //241,241,242; 661 | --labels-icon: #f1f1f266; 662 | --labels-icon-rgb: var(--fg-3-rgb) //241,241,242; 663 | --link: var(--ac-0) //#68bbe4; 664 | --link-rgb: var(--ac-0-rgb) //104,187,228; 665 | --live-location-footer-background: var(--bg-2) //#101d24e6; 666 | --live-location-footer-background-rgb: var(--bg-2-rgb) //16,29,36; 667 | --live-location-glow: to_rgba('ac-1', 0.5) //#25d3664d; 668 | --live-location-glow-rgb: var(--ac-1-rgb) //37,211,102; 669 | --live-location-glow-stale: to_rgba('red', 0.5) //#ff001f4d; 670 | --live-location-glow-stale-rgb: var(--b1-0-rgb) //255,0,31; 671 | --location-cluster-background: var(--bg-1) //#101d24; 672 | --location-cluster-background-rgb: var(--bg-1-rgb) //16,29,36; 673 | --media-editor-control: #1c313f; 674 | --media-editor-control-rgb: 28,49,63; 675 | --media-viewer-background: to_rgba('bg-1', 0.80) //#101d24fa; 676 | --media-viewer-background-rgb: var(--bg-1-rgb) //16,29,36; 677 | --media-viewer-button-background: var(--bg-3) //#1c282f; 678 | --media-viewer-button-background-rgb: var(--bg-3-rgb) //28,40,47; 679 | --media-viewer-button-icon: #f1f1f2; 680 | --media-viewer-button-icon-rgb: var(--fg-3-rgb) //241,241,242; 681 | --menu-tabs-list-active: var(--ac-0) //#00af9c; 682 | --menu-tabs-list-active-rgb: var(--ac-0-rgb) //0,175,156; 683 | --message-background-deep: var(--bg-0) //#080e1259; 684 | --message-background-deep-rgb: var(--bg-0-rgb) //8,14,18; 685 | --message-placeholder-icon: var(--fg-3) //#cccccc4d; 686 | --message-placeholder-icon-rgb: var(--fg-3-rgb) //204,204,204; 687 | --message-primary: var(--fg-1) //#f1f1f2f2; 688 | --message-primary-rgb: var(--fg-1-rgb) //241,241,242; 689 | --message-selection-highlight: to_rgba('ac-0', 0.1) //#f1f1f20d; 690 | --message-selection-highlight-rgb: var(--ac-0-rgb) //241,241,242; 691 | --modal-backdrop: to_rgba('bg-1', 0.70) //#080e12d9; 692 | --modal-backdrop-rgb: var(--bg-0-rgb) //8,14,18; 693 | --modal-backdrop-solid: var(--bg-0) //#1c282f; 694 | --modal-backdrop-solid-rgb: var(--bg-0-rgb) //28,40,47; 695 | --modal-background: var(--bg-2) //#364147; 696 | --modal-background-rgb: var(--bg-2-rgb) //54,65,71; 697 | --notification-biz-background: var(--b5-5) //#1c282f; 698 | --notification-biz-background-rgb: var(--b5-5-rgb) //28,40,47; 699 | --notification-biz-text: var(--b5-0) //#55fad9; 700 | --notification-biz-text-rgb: var(--b5-0-rgb) //85,250,217; 701 | --notification-e2e-background: var(--b3-5) //#1c282f; 702 | --notification-e2e-background-rgb: var(--b3-5-rgb) //28,40,47; 703 | --notification-e2e-icon: var(--b3-1) //#fad964; 704 | --notification-e2e-icon-rgb: var(--b3-1-rgb) //250,217,100; 705 | --notification-e2e-text: var(--b3-0) //#fad964; 706 | --notification-e2e-text-rgb: var(--b3-0-rgb) //250,217,100; 707 | --notification-text: var(--fg-3) //#f1f1f266; 708 | --notification-text-rgb: var(--fg-3-rgb) //241,241,242; 709 | --outgoing-background: var(--msg-out-0) //#054740; 710 | --outgoing-background-rgb: var(--msg-out-0-rgb) //5,71,64; 711 | --outgoing-background-deeper: var(--msg-out-1) //#063b36; 712 | --outgoing-background-deeper-rgb: var(--msg-out-1-rgb) //6,59,54; 713 | --outgoing-background-highlight: #ccc; 714 | --outgoing-background-highlight-rgb: 204,204,204; 715 | --overlay: var(--bg-0) //#080e12; 716 | --overlay-rgb: var(--bg-0-rgb) //8,14,18; 717 | --panel-background: var(--bg-3) //#1c282f; 718 | --panel-background-rgb: var(--bg-3-rgb) //28,40,47; 719 | --panel-background-active: #1a262d; 720 | --panel-background-active-rgb: 26,38,45; 721 | --panel-background-colored: var(--bg-3) //#222e35; 722 | --panel-background-colored-rgb: var(--bg-3-rgb) //34,46,53; 723 | --panel-background-colored-deeper: var(--bg-3) //#222e35; 724 | --panel-background-colored-deeper-rgb: var(--bg-3-rgb) //34,46,53; 725 | --panel-background-deep: var(--bg-2) //#162026; 726 | --panel-background-deep-rgb: var(--bg-2-rgb) //22,32,38; 727 | --panel-background-deeper: var(--bg-3) //#1a252c; 728 | --panel-background-deeper-rgb: var(--bg-3-rgb) //26,37,44; 729 | --panel-background-hover: var(--bg-4) //#1b272e; 730 | --panel-background-hover-rgb: var(--bg-4-rgb) //27,39,46; 731 | --panel-background-lighter: var(--bg-3) //#1a252c; 732 | --panel-background-lighter-rgb: var(--bg-3-rgb) //26,37,44; 733 | --panel-header-background: var(--bg-3) //#222e35; 734 | --panel-header-background-rgb: var(--bg-3-rgb) //34,46,53; 735 | --panel-header-icon: var(--fg-3) //#9ea3a6; 736 | --panel-header-icon-rgb: var(--fg-3-rgb) //158,163,166; 737 | --panel-input-background: var(--bg-2) //#262d31; 738 | --panel-input-background-rgb: var(--bg-2-rgb) //38.35,44.85526,48.65; 739 | --panel-primary: var(--fg-3) //#f1f1f259; 740 | --panel-primary-rgb: var(--fg-3-rgb) //241,241,242; 741 | --payment-amount: #00a593; 742 | --payment-amount-rgb: 0,164.8,146.90743; 743 | --payment-status-failed: #ef697a; 744 | --payment-status-failed-rgb: 239,105,122; 745 | --payment-status-processing: var(--fg-1) //#f1f1f273; 746 | --payment-status-processing-rgb: var(--fg-3-rgb) //241,241,242; 747 | --payment-status-success: #40cf6c; 748 | --payment-status-success-rgb: 64,207,108; 749 | --payment-status-waiting: var(--fg-1) //#f1f1f273; 750 | --payment-status-waiting-rgb: var(--fg-3-rgb) //241,241,242; 751 | --photopicker-overlay-background: to_rgba('bg-3', 0.8) //#212c31cc; 752 | --photopicker-overlay-background-rgb: var(--bg-3-rgb) //33,44,49; 753 | --picker-background: var(--bg-2) //#2a2f32; 754 | --picker-background-rgb: var(--bg-2-rgb) //41.6,47.46667,50.4; 755 | --popup-panel-background: var(--bg-2) //#080e1233; 756 | --popup-panel-background-rgb: var(--bg-2-rgb) //8,14,18; 757 | --primary: var(--fg-2) //#a5aaad; 758 | --primary-rgb: var(--fg-2-rgb) //165,170,173; 759 | --primary-strong: var(--fg-1) //#d4d5d7; 760 | --primary-strong-rgb: var(--fg-1-rgb) //212,213,215; 761 | --primary-stronger: var(--fg-0) //#f1f1f2de; 762 | --primary-stronger-rgb: var(--fg-0-rgb) //241,241,242; 763 | --primary-strongest: var(--fg-0) //#fff; 764 | --primary-strongest-rgb: var(--fg-0-rgb) //255,255,255; 765 | --primary-title: var(--fg-2) //#d4d5d7f7; 766 | --primary-title-rgb: var(--fg-2-rgb) //212,213,215; 767 | --product-image-button-background: var(--bg-4) //#f1f1f259; 768 | --product-image-button-background-rgb: var(--bg-4-rgb) //241,241,242; 769 | --product-thumb-background: var(--bg-3) //#1c282f; 770 | --product-thumb-background-rgb: var(--bg-3-rgb) //28,40,47; 771 | --product-thumb-background-deeper: var(--bg-2) //#2b3e49; 772 | --product-thumb-background-deeper-rgb: var(--bg-2-rgb) //43.232,61.76,72.568; 773 | --progress-background: var(--bg-2) //#2a2f32; 774 | --progress-background-rgb: var(--bg-2-rgb) //41.6,47.46667,50.4; 775 | --progress-primary: var(--ac-0) //#0c897c; 776 | --progress-primary-rgb: var(--ac-0) //12,137,124; 777 | --ptt-blue: var(--b6-0) //#4fc3f7; 778 | --ptt-blue-rgb: var(--b6-0-rgb) //79,195,247; 779 | --ptt-button-cancel: var(--b1-0) //#e53935cc; 780 | --ptt-button-cancel-rgb: var(--b1-0-rgb) //229,57,53; 781 | --ptt-button-send: var(--b4-0) //#09d261cc; 782 | --ptt-button-send-rgb: var(--b4-0-rgb) //9,210,97; 783 | --ptt-gray: var(--fg-4) //#f1f1f266; 784 | --ptt-gray-rgb: var(--fg-4-rgb) //241,241,242; 785 | --ptt-green: var(--b4-0) //#09d261; 786 | --ptt-green-rgb: var(--b4-rgb) //9,210,97; 787 | --ptt-message-blue: var(--b6-0) //#68bbe4; 788 | --ptt-message-blue-rgb: var(--b6-0-rgb) //104,187,228; 789 | --quick-action-button: to_rgba('fg-3', 0.8) //#f1f1f280; 790 | --quick-action-button-rgb: var(--fg-3-rgb) //241,241,242; 791 | --quick-action-button-background: var(--bg-4) //#080e1299; 792 | --quick-action-button-background-rgb: var(--bg-4-rgb) //8,14,18; 793 | --round-entry-point-background-color: var(--bg-4) //hsla(0, 0%, 0%, 0.7); 794 | --round-entry-point-background-color-rgb: var(--bg-4-rgb) //0,0,0; 795 | --quoted-message-text: var(--fg-2) //hsla(0,0%,100%,0.6); 796 | --quoted-message-text-rgb: var(--fg-2-rgb) //255,255,255; 797 | --rich-text-panel-background: var(--bg-3) //#1c282f; 798 | --rich-text-panel-background-rgb: var(--bg-3-rgb) //28,40,47; 799 | --search-container-background: var(--bg-2) //#131c21; 800 | --search-container-background-rgb: var(--bg-2-rgb) //18.6,28.22,33.4; 801 | --search-input-background: var(--bg-3) //#2a2f32; 802 | --search-input-background-rgb: var(--bg-3-rgb) //41.6,47.46667,50.4; 803 | --secondary: var(--fg-3) //#f1f1f299; 804 | --secondary-rgb: var(--fg-3-rgb) //241,241,242; 805 | --secondary-light: var(--fg-2) //#f1f1f240; 806 | --secondary-light-rgb: var(--fg-2-rgb) //241,241,242; 807 | --secondary-lighter: var(--fg-3) //#f1f1f273; 808 | --secondary-lighter-rgb: var(--fg-3-rgb) //241,241,242; 809 | --secondary-stronger: var(--fg-3) //#f1f1f2cc; 810 | --secondary-stronger-rgb: var(--fg-3-rgb) //241,241,242; 811 | --shadow: var(--sh) //#000; 812 | --shadow-rgb: var(--sh-rgb) //0,0,0; 813 | --shadow-light: var(--sh) //#00000014; 814 | --shadow-light-rgb: var(--sh-rgb) //0,0,0; 815 | --spinner-default: var(--fg-3) //#75787a; 816 | --spinner-default-rgb: var(--fg-3-rgb) //117,120,122; 817 | --spinner-highlight: var(--ac-0) //#00af9c; 818 | --spinner-highlight-rgb: var(--ac-0-rgb) //0,175,156; 819 | --spinner-incoming: var(--fg-5) //#60696e; 820 | --spinner-incoming-rgb: var(--fg-5-rgb) //96,105,110; 821 | --spinner-outgoing: var(--ac-5) //#4c7a75; 822 | --spinner-outgoing-rgb: var(--ac-5-rgb) //76,122,117; 823 | --startup-background: var(--bg-0) //#131c21; 824 | --startup-background-rgb: var(--bg-0-rgb) //18.6,28.22,33.4; 825 | --startup-icon: var(--fg-3) //#6c7175; 826 | --startup-icon-rgb: var(--fg-3-rgb) //108,113,117; 827 | --status-background: var(--bg-1) //#000; 828 | --status-background-rgb: var(--bg-1-rgb) //0,0,0; 829 | --status-background-hover: var(--bg-2) //#242424; 830 | --status-background-hover-rgb: var(--bg-2-rgb) //36,36,36; 831 | --status-primary: var(--fg-1) //#fff; 832 | --status-primary-rgb: var(--fg-1-rgb) //255,255,255; 833 | --status-secondary: var(--fg-4) //#ffffff8c; 834 | --status-secondary-rgb: var(--fg-4-rgb) //255,255,255; 835 | --status-secondary-stronger: var(--fg-5) //#b3b3b3; 836 | --status-secondary-stronger-rgb: var(--fg-5-rgb) //179,179,179; 837 | --success: var(--ac-0) //#00af9c; 838 | --success-rgb: var(--ac-0-rgb) //0,175,156; 839 | --suspicious-background: #ef697acc; 840 | --suspicious-background-rgb: 239,105,122; 841 | --system-message-background: (ow_sys_msg) ? sys_msg_bg : var(--b6-4) //#1e2a30; 842 | --system-message-background-rgb: (ow_sys_msg) ? to_rgb(sys_msg_bg) : var(--b6-4-rgb) //30,42,48; 843 | --system-message-text: to_rgba('fg-1', 0.87) //#f1f1f2de; 844 | --system-message-text-rgb: var(--fg-1-rgb) //241,241,242; 845 | --teal-hover: var(--ac-0) //#00b7a1; 846 | --teal-hover-rgb: var(--ac-0-rgb) //0,183,161; 847 | --teal-pale: var(--ac-3) //#5fc8bc; 848 | --teal-pale-rgb: var(--ac-3-rgb) //95,200,188; 849 | --text-muted: var(--fg-4) //hsl(203.1, 12%, 57.6%); 850 | --text-muted-rgb: var(--fg-4-rgb) //134,150,160; 851 | --thumb-border-active: var(--bg-2) //#75787a; 852 | --thumb-border-active-rgb: var(--bg-2-rgb) //117,120,122; 853 | --thumb-border-active-new-media-editor: var(--fg-4) //#f1f1f2; 854 | --thumb-border-active-new-media-editor-rgb: var(--fg-4-rgb) //241,241,242; 855 | --thumb-border-viewer-active: var(--fg-3) //#75787a; 856 | --thumb-border-viewer-active-rgb: var(--fg-3-rgb) //117,120,122; 857 | --toast-background: to_rgba('bg-3', 0.96) //#080e12f5; 858 | --toast-background-rgb: var(--bg-3-rgb) //8,14,18; 859 | --tooltip-text: var(--fg-1) //hsl(0, 0%, 0%); 860 | --tooltip-text-rgb: var(--fg-1-rgb) //0,0,0; 861 | --tooltip-background: to_rgba('bg-4', 0.85) //#fff; 862 | --tooltip-background-rgb: var(--bg-4) //255,255,255; 863 | --typing: var(--ac-0) //#00af9c; 864 | --typing-rgb: var(--ac-0-rgb) //0,175,156; 865 | --unread-background: var(--bg-3) //#1c282f; 866 | --unread-background-rgb: var(--bg-3-rgb) //28,40,47; 867 | --unread-bar-background: to_rgba('bg-0', 0.7) //#080e124d; 868 | --unread-bar-background-rgb: var(--bg-0-rgb) //8,14,18; 869 | --unread-timestamp: var(--ac-0) //hsl(167.1, 100%, 32.9%); 870 | --unread-timestamp-rgb: var(--ac-0-rgb) //0,168,132; 871 | --unread-marker-background: var(--ac-0) //#00af9c; 872 | --unread-marker-background-rgb: var(--ac-0-rgb) //0,175,156; 873 | --unread-marker-text: var(--white) //#101d24; 874 | --unread-marker-text-rgb: var(--white-rgb) //16,29,36; 875 | --video-player-background: #000; 876 | --video-player-background-rgb: 0,0,0; 877 | --video-primary: #fff; 878 | --video-primary-rgb: 255,255,255; 879 | --voip-accept-background: #70db91; 880 | --voip-accept-background-rgb: 112,219,145; 881 | --voip-background: #262626; 882 | --voip-background-rgb: 38,38,38; 883 | --voip-background-deep: #000; 884 | --voip-background-deep-rgb: 0,0,0; 885 | --voip-primary: #fff; 886 | --voip-primary-rgb: 255,255,255; 887 | --voip-reject-background: #e54b40; 888 | --voip-reject-background-rgb: 229,75,64; 889 | --wallpaper-background: var(--bg-1) //#2b93ce; 890 | --wallpaper-background-rgb: var(--bg-1-rgb) //13.12731,19.91681,23.57269; 891 | --wallpaper-thumb-border-active: var(--bg-5) //#75787a; 892 | --wallpaper-thumb-border-active-rgb: var(--bg-5-rgb) //117,120,122; 893 | --wallpaper-thumb-border-hover: var(--bg-4) //#3b4042; 894 | --wallpaper-thumb-border-hover-rgb: var(--bg-4-rgb) //59,63.52941,66; 895 | --win32-title-primary: var(--fg-1) //#fff; 896 | --win32-title-primary-rgb: var(--fg-1-rgb) //255,255,255; 897 | --reactions-tray-background: var(--bg-3) //hsl(202.1, 21.8%, 17.1%); 898 | --reactions-tray-background-rgb: var(--bg-3-rgb) //34,46,53; 899 | --reactions-tray-active-round-background: var(--bg-5) //hsl(204, 17.5%, 28%); 900 | --reactions-tray-active-round-background-rgb: var(--bg-5-rgb) //59,74,84; 901 | --reactions-picker-bg: var(--bg-4) //hsl(202.2, 11.7%, 45.3%); 902 | --reactions-picker-bg-rgb: var(--bg-4-rgb) //102,119,129; 903 | --svg-gray-button: var(--fg-3) //hsl(204, 22.7%, 17.3%); 904 | --svg-gray-button-rgb: var(--fg-3-rgb) //34,46,54; 905 | --text-primary-strong: var(--fg-1) //hsl(200, 15.8%, 92.5%); 906 | --text-primary-strong-rgb: var(--fg-1-rgb) //233,237,239; 907 | --text-secondary-lighter: var(--fg-2) //hsl(203.1, 12%, 57.6%); 908 | --text-secondary-lighter-rgb: var(--fg-2-rgb) //134,150,160; 909 | --text-medium-emphasis: var(--fg-3) //hsl(203.1, 12%, 57.6%); 910 | --text-medium-emphasis-rgb: var(--fg-3-rgb) //134,150,160; 911 | 912 | /// Generate DWA color variables. 913 | for _v in (bg fg ac b1 b2 b3 b4 b5 b6 b7 b8) { 914 | for _i in 0..5 { 915 | key = s('--%s-%s', _v, _i) 916 | /// Escape `\` for `*-0` vars. 917 | val = _v + \- + _i 918 | 919 | /// Generate CSS variables. 920 | { key }: val 921 | { key + '-rgb' }: to_rgb(val) 922 | } 923 | } 924 | 925 | /// Misc colors. 926 | --white: _white 927 | --white-rgb: to_rgb(_white) 928 | --sh: _sh 929 | --sh-rgb: to_rgb(_sh, 1) 930 | --t: transparent 931 | --bshadow: 0 4px 8px 2px var(--shadow) 932 | 933 | /// Theme intro colors. 934 | svg_bg = to_svg(bg-2) 935 | svg_ac = to_svg(ac-0) 936 | 937 | /// Theme intro image. 938 | _1 = "data:image/svg+xml;utf8, Animate emojis. 969 | if (emoji_a) { 970 | @keyframes aPulse { 971 | 0% { transform: scale(.9) } 972 | 50% { transform: scale(1) } 973 | 100% { transform: scale(.9) } 974 | } 975 | 976 | @keyframes aKiss { 977 | 0% { transform: scale(.7) } 978 | 50% { transform: scale(.8) } 979 | 80% { transform: scale(1) rotate(-30deg) } 980 | 100% { transform: scale(.7) } 981 | } 982 | } 983 | 984 | // Global styles. 985 | html > body { 986 | background-image: none i 987 | c: fg0 0 bg0 988 | 989 | option { c: fg1 0 bg3 } 990 | 991 | /// Feat -> Custom font. 992 | &, button, input { font-family: var(--ui-font) } 993 | 994 | /// Toast notifications. 995 | ._1Ftww { 996 | c: fg1 997 | border: 1px solid bg5 i 998 | button:nth-child(2) { c: ac1 } 999 | button:nth-child(3) { c: fg4 } 1000 | } 1001 | 1002 | /// Intro -> Image. 1003 | [data-testid^="intro-md-beta-logo-"] { 1004 | padding: 8rem 1005 | background-image: var(--intro-image) 1006 | > svg { display: none } 1007 | } 1008 | 1009 | /// Intro -> Version. 1010 | [data-testid="intro-title"] { 1011 | font-size: 0px i 1012 | &::before { 1013 | content: var(--version) 1014 | font-size: 1.5rem 1015 | } 1016 | } 1017 | 1018 | /// Intro -> Announcements. 1019 | [data-testid="intro-text"] { 1020 | font-size: 0px i 1021 | &::before { 1022 | content: msg 1023 | white-space: pre-wrap 1024 | font-size: 0.875rem 1025 | } 1026 | } 1027 | 1028 | /// Settings -> Tweaks for 'Set Chat Wallpaper' area. #149 1029 | /.Iwkc0 { 1030 | position: relative 1031 | 1032 | /// Override selected wallpaper. 1033 | --blue-light: ac3 1034 | --inverse: ac3 1035 | 1036 | /// Expand default chat wallpaper. 1037 | &:first-child { 1038 | &, &::after { width: calc(100% + 8px) } 1039 | 1040 | /// Add chat image. 1041 | &::before { 1042 | content: '' 1043 | filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)) 1044 | background: var(--chat-image) i 1045 | position: absolute 1046 | height: 100% 1047 | width: 100% 1048 | } 1049 | 1050 | /// Add pseudo text. 1051 | span { 1052 | font-size: 0 i 1053 | &::before { 1054 | content: 'Use this with Dark-WhatsApp' 1055 | font-size: 16px i 1056 | } 1057 | } 1058 | } 1059 | } 1060 | 1061 | /// Global -> Scrollbar styles. 1062 | /\* { 1063 | /// Scrollbar colors. 1064 | @supports (scrollbar-width: thin) { 1065 | scrollbar-color: ac2 var(--shadow) i 1066 | } 1067 | &::-webkit-scrollbar { 1068 | &-thumb { c: 0 0 ac2 } 1069 | &-track { c: 0 0 var(--shadow) } 1070 | } 1071 | } 1072 | 1073 | /// Feat -> Hide profile pictures. 1074 | if (chat_h_p_p) { 1075 | /img[src*='whatsapp.com/pp?'] { display: none i } 1076 | } 1077 | 1078 | /// Loading page. 1079 | /// NOTE: Keep it because there are two `startup` states; one of them 1080 | /// is *not* styled by default, so it leads to white background flash. 1081 | /[id*='startup'] { 1082 | c: 0 0 bg0 1083 | .graphic::after { 1084 | opacity: 0.6 i 1085 | background: linear-gradient(to right, bg0 0%, bg0 33%, t 44%, t 55%, bg0 66%, bg0 100%) i 1086 | } 1087 | } 1088 | 1089 | /// Progress bars. 1090 | /// NOTE: There is still flashing of unstyled content. Sigh. 1091 | /progress { 1092 | c: 0 0 bg2 1093 | &[value]::-moz-progress-bar { c: 0 0 ac0 } 1094 | /::-moz-progress-bar { c: 0 0 bg4 } 1095 | /::-webkit-progress { 1096 | &-bar { c: 0 0 bg4 } 1097 | &-value { c: 0 0 ac0 } 1098 | } 1099 | } 1100 | } 1101 | 1102 | // Feat -> Rounded corners for avatars. 1103 | ._3g4Pn[style] { 1104 | /// Global/shared contacts. 1105 | &, /._3PdFH { c: 0 0 bg5 } 1106 | 1107 | /// Avatars/images/new group/contact avatar/your avatar. 1108 | &, > img, /img.o2zu3hjb, /._1jLYl, /._1PAkz { 1109 | rad: var(--r-avatars) i 1110 | } 1111 | 1112 | /// Fix 'New group' bottom divider to hide drawer background-color. 1113 | /[data-list-scroll-offset] > div:first-child > div:last-child { 1114 | margin-left: 0 i 1115 | } 1116 | 1117 | /// Tweak default icons. 1118 | if (radius_a != '50%') { 1119 | /[style *= 'width:'][style *= 'height:'] { 1120 | [data-icon = 'default-user'] svg, 1121 | [data-icon = 'default-group'] svg { 1122 | background-color: bg5 1123 | border-radius: var(--r-avatars) i 1124 | } 1125 | } 1126 | } 1127 | } 1128 | 1129 | // Emojis -> Custom enhancements. 1130 | .emojik { 1131 | transition: transform 0.15s ease i 1132 | 1133 | /// Default opacity. 1134 | &:not(:hover):not(:focus):not(.selected) { 1135 | filter: opacity(var(--emoji-o)) 1136 | } 1137 | 1138 | /// Hovered/focused states. 1139 | &:hover:not(.selected):not(:focus) { 1140 | transform: scale(1.2) 1141 | box-shadow: none i 1142 | opacity: 1 i 1143 | } 1144 | 1145 | /// Selected state. #148 1146 | &.selected, &:focus { box-shadow: 0 0 0 1px bg3, 0 0 0 3px ac0 i } 1147 | } 1148 | 1149 | // Modals. 1150 | .overlay { 1151 | /// Fix header in media viewer modal. @upstream 1152 | /[data-animate-media-viewer] > div:first-child{ 1153 | border-bottom: 1px solid bg5 i 1154 | c: 0 0 bg2 1155 | } 1156 | 1157 | /// Remove header in avatar viewer modal. 1158 | [data-testid='cell-frame-container'] { c: 0 0 t } 1159 | 1160 | /// Add borders. 1161 | [data-animate-modal-popup] { 1162 | box-shadow: var(--bshadow) i 1163 | border: 1px solid bg5 1164 | rad: var(--r-menus) i 1165 | 1166 | .copyable-area { 1167 | > header { border-bottom: 1px solid bg5 } 1168 | > span [style *= 'translateY']:not([tabindex]), ._30pU5 { 1169 | border-top: 1px solid bg5 1170 | } 1171 | } 1172 | } 1173 | 1174 | /// Groups -> Search participants. 1175 | header + div[tabindex] + div div[style] { 1176 | --background-default: bg1 1177 | --background-default-hover: bg2 1178 | } 1179 | 1180 | /// Fix media selection footer. 1181 | /._1XWMx { c: 0 bg5 bg2 } 1182 | 1183 | /// Status area modal. 1184 | /[data-animate-status-v3-modal-background = 'true'] { 1185 | c: 0 0 var(--modal-backdrop) 1186 | /// Main content. 1187 | > div { 1188 | c: 0 0 bg1 1189 | 1190 | /// Sidebar. 1191 | > div:nth-child(1) { 1192 | c: 0 0 bg2 1193 | border-right: 1px solid bg5 1194 | rad: var(--r-menus) 0 0 var(--r-menus) i 1195 | } 1196 | 1197 | /// Large screens. 1198 | if (!fullscreen) { 1199 | @media (min-width: 1441px) { 1200 | border: 1px solid bg5 i 1201 | rad: var(--r-menus) i 1202 | } 1203 | } 1204 | } 1205 | 1206 | /// Background color for author & publish date. @upstream 1207 | /._2yhFa { 1208 | margin: auto 1209 | padding: 5px 8px 8px 1210 | min-width: 150px 1211 | rad: var(--r-inputs) 1212 | background-color: to_rgba('bg-1', 0.5) 1213 | } 1214 | 1215 | /// Fill color for unread icon. @upstream 1216 | /[data-icon = 'status-v3-unread'] { 1217 | [fill = '#009588'] { fill: ac0 i } 1218 | } 1219 | } 1220 | 1221 | /// 'Allow notifications' modal. 1222 | /[data-testid="confirm-popup"] { 1223 | c: 0 0 var(--modal-backdrop) 1224 | /// Use a proper foreground color. 1225 | [data-animate-modal-popup] { --white-rgb: var(--fg-1-rgb) } 1226 | } 1227 | } 1228 | 1229 | // Login page. 1230 | .landing { 1231 | &-title { c: fg1 } 1232 | &-wrapper-before { c: 0 0 bg1 } 1233 | &-header { 1234 | position: relative 1235 | 1236 | /// WhatsApp logo. 1237 | path[fill ^= '#FFF'] { fill: ac0 } 1238 | path[fill ^= '#00E'] { fill: bg1 } 1239 | div { 1240 | text-transform: unset 1241 | c: fg1 1242 | } 1243 | 1244 | /// Userstyle version. 1245 | &::after { 1246 | font-size: 14px 1247 | font-weight: 500 1248 | position: absolute 1249 | content: var(--version) 1250 | /html[dir = 'RTL'] & { left: 0 } 1251 | /html[dir = 'LTR'] & { right: 0 } 1252 | } 1253 | } 1254 | 1255 | &-window:not(#z) { 1256 | rad: 4px 1257 | c: 0 0 bg1 1258 | box-shadow: 0 0 1px bg5 1259 | } 1260 | 1261 | &-main { 1262 | a { c: ac0 } 1263 | label { c: fg3 } 1264 | [fill^='#f2f' i] { fill: bg5 } 1265 | [fill^='#818' i] { fill: fg1 } 1266 | 1267 | /// QR code. 1268 | div[data-ref] { 1269 | filter: contrast(150%) 1270 | outline: 4px solid #fff 1271 | box-shadow: 0 0 0 4px #fff 1272 | [role='button'] { c: white 0 ac0 } 1273 | } 1274 | 1275 | /// Video tutorial. 1276 | + div { 1277 | c: 0 0 t 1278 | img { opacity: 0.3 } 1279 | /// Reset background on button container. 1280 | [style *= 'opacity: 1'] { c: 0 0 t } 1281 | } 1282 | 1283 | /// 'Keep me signed in' tooltip. #59 1284 | a[href*='faq.whatsapp.com'] + div > span > div { 1285 | c: white 0 ac0 1286 | box-shadow: bsh 1287 | &::before { border-bottom-color: ac0 i } 1288 | } 1289 | } 1290 | } 1291 | 1292 | // Various app styles. 1293 | #app > div { 1294 | &::after { 1295 | /// Remove app background in fullscreen mode or low-res screens. 1296 | @media screen and (min-width: 1441px) { 1297 | content: (fullscreen || app_image == 'none') ? unset i : '' i 1298 | } 1299 | 1300 | /// Feat -> App background. 1301 | if (app_image != 'none' && app_image != 'default') { 1302 | s = var(--bg-blur-s) 1303 | b = blur(var(--bg-blur)) 1304 | o = opacity(var(--bg-opacity)) 1305 | t = invert(var(--bg-invert)) 1306 | h = hue-rotate(var(--bg-hue)) 1307 | top: s; right: s; bottom: s; left: s; 1308 | height: unset; width: unset; 1309 | filter: b o t h 1310 | background-position: var(--bg-pos) i 1311 | background-image: var(--bg-image) i 1312 | background-repeat: var(--bg-rep) i 1313 | background-size: var(--bg-size) i 1314 | background-color: transparent i 1315 | } else if (app_image == 'default') { 1316 | c: 0 0 bg1 1317 | } 1318 | } 1319 | 1320 | /// Right -> Remove top border from the first Links/Docs message. 1321 | /div, /span { 1322 | div:first-child > ._36BuW::before { content: none } 1323 | } 1324 | 1325 | /// Feat -> Input border radius. 1326 | .p3_M1 { rad: var(--r-inputs) i } 1327 | 1328 | /// Dropdowns -> Chat/Header. 1329 | > span > div, .o--vV { 1330 | &[style ^= 'transform-origin:'][tabindex] { 1331 | box-shadow: var(--bshadow) i 1332 | border: 1px solid bg4 1333 | rad: var(--r-menus) i 1334 | } 1335 | } 1336 | 1337 | /// Floating emoji picker. 1338 | > span > ._3IU7z { 1339 | border: 1px solid bg5 i 1340 | box-shadow: var(--bshadow) i 1341 | 1342 | /// Remove borders. 1343 | div[tabindex='-1'] > div:only-child { border-left: none i } 1344 | 1345 | > [data-animate-dropdown-nib] { 1346 | border-bottom: 1px solid bg5 1347 | border-right: 1px solid bg5 1348 | rad: 0 0 4px 0 1349 | bottom: -8px i 1350 | } 1351 | } 1352 | } 1353 | 1354 | // Shared app drawer styles. 1355 | #app > div > [tabindex] { 1356 | c: 0 0 bg1 1357 | 1358 | @media (min-width: 1441px) { 1359 | &, /[data-animate-status-v3-modal-background] > div:first-child { 1360 | /// Feat -> Fullscreen mode. 1361 | if (fullscreen) { 1362 | width: 100% i 1363 | max-width: 100% i 1364 | height: 100% i 1365 | top: unset i 1366 | } else { 1367 | /// Feat -> App width. 1368 | width: calc(100% - 38px) i 1369 | max-width: var(--app-width) i 1370 | rad: var(--r-menus) i 1371 | border: 1px solid bg5 i 1372 | box-shadow: 0 2px 6px sh i 1373 | } 1374 | } 1375 | } 1376 | 1377 | /// Odd header-like tall background. 1378 | &::after { content: unset i } 1379 | 1380 | /// Global -> Search bar. 1381 | /[data-testid="chat-list-search-container"] { 1382 | c: 0 0 bg2 1383 | border-bottom: 1px solid bg5 i 1384 | > div { 1385 | rad: var(--r-inputs) i 1386 | box-shadow: inset 0 0 0 1px bg4 1387 | } 1388 | &:focus-within { box-shadow: var(--bshadow) } 1389 | } 1390 | 1391 | /// Left -> Reset header. 1392 | [data-testid="chatlist-header"] { 1393 | border-bottom: 1px solid bg5 i 1394 | } 1395 | 1396 | /// Left -> Tweak alerts. 1397 | [data-testid='chat-butterbar'] { 1398 | border-bottom: 1px solid bg5 i 1399 | 1400 | /// Close icon for 'low battery' state. 1401 | [data-icon = 'x'] svg path { fill: fg5 } 1402 | 1403 | // Feat -> Hide alerts. 1404 | if (app_alerts == 'hide') { 1405 | display: none i 1406 | } else if (app_alerts == 'notifications') { 1407 | &:has([data-icon='alert-notification']) { 1408 | display: none i 1409 | } 1410 | } 1411 | } 1412 | 1413 | /// Right -> Drawer divider. 1414 | &.three > [data-testid="drawer-right"] { 1415 | border-left: 1px solid bg5 i 1416 | 1417 | /// Remove shadows from drawer sections. 1418 | section > div { box-shadow: 0 0 0 1px bg4 i } 1419 | 1420 | /// Remove native dark mode dividers. 1421 | /.dark .three #main { 1422 | > *, .copyable-area > div[tabindex='0'] { border-right: none i } 1423 | } 1424 | } 1425 | 1426 | /// Floating drawers. 1427 | > div:nth-child(2) { 1428 | /// Left -> Archived contacts. 1429 | > div:nth-child(1) { 1430 | > span[class] * { 1431 | // c: 0 0 red 1432 | [role][aria-selected='false'] > div { 1433 | c: 0 0 bg1 1434 | &:hover { c: 0 0 bg2 } 1435 | } 1436 | } 1437 | } 1438 | 1439 | /// Left -> Settings -> Help. 1440 | > div:nth-child(1) { 1441 | .copyable-text ~ div[role='button'] { 1442 | --background-default: var(--bg-1) 1443 | --background-default-hover: var(--bg-2) 1444 | } 1445 | } 1446 | 1447 | /// Left/Right -> Starred messages. 1448 | > div:nth-child(1), 1449 | > div:nth-child(3) { 1450 | // c: 0 0 blue 1451 | header + div > span > div > div { 1452 | --drawer-gallery-background-hover: var(--bg-2) 1453 | --border-panel: b11 1454 | /// Always show top border. 1455 | &::before { c: 0 0 bg3 } 1456 | /// Do not hide bottom border. 1457 | &::after { c: 0 0 t } 1458 | } 1459 | } 1460 | 1461 | /// Right -> Invite to group. 1462 | > div:nth-child(3) { 1463 | header + div { 1464 | > div:first-child.wJ21F, // Invite link wrapper. 1465 | > div[role='button'] { 1466 | --background-default: bg1 1467 | --background-default-hover: bg2 1468 | } 1469 | } 1470 | } 1471 | } 1472 | } 1473 | 1474 | // Global -> Icons. 1475 | span[class] { 1476 | /// Right -> Contact/group selected media drawer. 1477 | &[data-icon = 'checkbox-round-checked'] { 1478 | [fill = '#00BFA5'] { fill: ac0 } 1479 | [fill = '#FFF'] { fill: white } 1480 | } 1481 | 1482 | /// Left -> Reset 'connecting' icon background. @upstream 1483 | &[data-icon] path[fill = '#FFBC00'] { fill: bg3 i } 1484 | 1485 | /// Chat -> Context menu arrows. 1486 | &[data-icon = 'down-context'] { c: fg3 } 1487 | 1488 | /// Hover animation for icons. 1489 | /#side > header, 1490 | /#main > div + header, 1491 | /#main > footer > .copyable-area, 1492 | /#main > footer + span:not([class]) > div, 1493 | /.overlay > div:first-child, 1494 | /.copyable-area > header { 1495 | button:not([data-animate-menu-icons-item]), [role = 'button'] { 1496 | [data-icon] { transition: fill-opacity 0.3s ease i } 1497 | &:not(._3QjfB):hover [data-icon] { fill-opacity: 0.6 i } 1498 | } 1499 | } 1500 | } 1501 | 1502 | // Feat -> Consistent drawer headers. 1503 | .copyable-area header[class] { 1504 | if (app_header) { 1505 | height: 59px i 1506 | justify-content: center i 1507 | border-bottom: 1px solid bg5 i 1508 | 1509 | /// Reset left drawer inner item. 1510 | > [data-animate-drawer-title] { 1511 | height: unset i 1512 | 1513 | /// Reset header text. 1514 | > div:nth-child(2) { 1515 | margin-top: 1px i 1516 | font-size: 18px i 1517 | font-weight: normal i 1518 | } 1519 | } 1520 | } else { 1521 | --panel-background-colored: bg4 i 1522 | } 1523 | } 1524 | 1525 | // Sidebar. 1526 | #side { 1527 | /// Feat -> Blur contacts. 1528 | if (chat_b_c) { 1529 | [style *= '0s; height'] { 1530 | /// Remove odd shadow. 1531 | > [aria-selected = 'true'] { 1532 | > div::after { display: none i } 1533 | } 1534 | 1535 | /// Do the blur. 1536 | > :not([aria-selected = 'true']) { 1537 | overflow: hidden i 1538 | > div { transition: background, filter 300ms ease-in-out i } 1539 | &:not(:hover) > div { filter: blur(6px) } 1540 | &:hover { filter: blur(0px) } 1541 | } 1542 | } 1543 | } 1544 | } 1545 | 1546 | // Chat. 1547 | #main { 1548 | /// Reset header. 1549 | > header { 1550 | border-bottom: 1px solid bg5 i 1551 | box-shadow: none i 1552 | c: 0 bg5 1553 | 1554 | /// Remove border in light mode. 1555 | &::after { content: unset } 1556 | } 1557 | 1558 | /// System messages. 1559 | .EtBAv { 1560 | $c = (ow_sys_msg) ? darken(sys_msg_bg, -10%) : b63 1561 | border: 1px solid $c 1562 | text-shadow: none i 1563 | 1564 | /// End-to-end encryption message. 1565 | &._1p8Qv { border: 1px solid b34 } 1566 | } 1567 | 1568 | /// Feat -> Custom chat background. 1569 | /[data-asset-chat-background-dark], 1570 | /[data-asset-chat-background-light] { 1571 | filter: invert(var(--chat-bg-i)) opacity(var(--chat-bg-o)) 1572 | background-image: var(--chat-image) i 1573 | background-position: var(--chat-bg-p) i 1574 | background-repeat: var(--chat-bg-r) i 1575 | background-size: var(--chat-bg-s) i 1576 | opacity: 1 i 1577 | 1578 | /// Feat -> Show chat image. 1579 | if (!chat_bg) { display: none i } 1580 | } 1581 | 1582 | /// Tweak 'unread messages' alert. 1583 | ._5ML0C { border: none i } 1584 | 1585 | /// Fix context menu background for stickers. 1586 | [data-js-context-icon] + div[style] { c: 0 0 bg4 } 1587 | 1588 | /// Add background to media message timestamps. 1589 | /[style *= 'width'][style *= 'height'] + div { 1590 | /// Images/gifs. 1591 | &._2AKAp, &.zE8pI { 1592 | padding: 2px 4px i 1593 | background-color: to_rgba('bg-1', 0.7) i 1594 | rad: 5px i 1595 | } 1596 | 1597 | /// Videos. 1598 | /.video-thumb { 1599 | /// Length/Timestamp. 1600 | ._1rd4q, + ._3phU6 { 1601 | padding: 2px 4px i 1602 | background-color: to_rgba('bg-1', 0.7) i 1603 | rad: 5px i 1604 | } 1605 | 1606 | /// Timestamps in grouped media. 1607 | &._3V2jl + ._3phU6 { 1608 | right: 5px i 1609 | bottom: 3px i 1610 | } 1611 | } 1612 | 1613 | /// Google Maps timestamps. 1614 | /[style *= 'height'][data-plain-text *= 'maps.google.com'] { 1615 | + div[class] > [role] { 1616 | padding: 2px 4px i 1617 | background-color: to_rgba('bg-1', 0.7) i 1618 | rad: 5px i 1619 | } 1620 | 1621 | /// Live location overlay. 1622 | /.fMR4l { background-color: to_rgba('bg-4', 0.5) i } 1623 | } 1624 | } 1625 | 1626 | /// Feat -> Blur media. 1627 | if (chat_b_img) { 1628 | /[class *= 'message-'] [style *= 'height'] { 1629 | img:not([src*='/pp?']) { 1630 | transition: 0.5s ease 1631 | transition-delay: var(--blur-out) 1632 | filter: blur(16px) grayscale(100%) 1633 | 1634 | &:hover { 1635 | transition-delay: var(--blur-in) 1636 | filter: none i 1637 | } 1638 | } 1639 | 1640 | /// Reset blur for avatars in audio messages. 1641 | &[style *= 'width'] > img._2goTk { filter: none i } 1642 | } 1643 | 1644 | /[class *= 'message-'] .video-thumb { 1645 | [style *= "data:image"] { 1646 | transition: 0.5s ease 1647 | transition-delay: var(--blur-out) 1648 | filter: blur(16px) grayscale(100%) 1649 | } 1650 | 1651 | &:hover [style *= "data:image"] { 1652 | transition-delay: var(--blur-in) 1653 | filter: none i 1654 | } 1655 | } 1656 | } 1657 | 1658 | /// Footer. 1659 | > footer { 1660 | /// Compose border. 1661 | ../> header ~ div[style *= 'height: 0px'] { 1662 | border-top: 1px solid bg5 i 1663 | } 1664 | 1665 | /// Popover border. 1666 | .velocity-animating, 1667 | div[style $= 'translateY(0%);'], 1668 | div[style $= 'translateY(0px);'] { 1669 | box-shadow: 0 -1px 0 bg5 i 1670 | } 1671 | 1672 | /// Fix borders an unknown contact. 1673 | ._3ImlL { 1674 | border-top: none 1675 | border-bottom: 1px solid bg5 1676 | } 1677 | 1678 | /// Groups -> Only admins can send messages. 1679 | ._31enr { 1680 | border-top: 1px solid bg5 i 1681 | border-left: @border-top 1682 | } 1683 | 1684 | /// Emoji quick-picker. 1685 | [data-list-scroll-container] { 1686 | border-bottom: 1px solid bg5 i 1687 | box-shadow: 0 -1px bg5 i 1688 | } 1689 | 1690 | /// Chat -> Select messages. 1691 | + span > .OVz7E { 1692 | border-top: 1px solid bg5 i 1693 | border-left: 1px solid bg5 i 1694 | } 1695 | 1696 | /// Feat -> Input border radius. 1697 | ._2A8P4 { rad: var(--r-inputs) i } 1698 | } 1699 | 1700 | /// Fix styles for Google Maps. 1701 | img[src *= 'maps.googleapis.com'] { 1702 | filter: invert(0.8) hue-rotate(180deg) i 1703 | } 1704 | 1705 | /// Groups -> Fix opacity for nicknames. 1706 | /[class *= ' color-'] > span:nth-child(2) { c: fg3 } 1707 | 1708 | /// Theme colors for replies and member nicknames. 1709 | for k, v in 0..20 { 1710 | key = (k < 8) ? k + 1 : (k < 15) ? k + 1 - 8 : k + 1 - 15 1711 | val = (k < 8) ? 0 : (k < 15) ? 1 : 2 1712 | .color-{ k } { c: s('var(--b%s-%s)', key, val) } 1713 | .bg-color-{ k } { c: 0 0 s('var(--b%s-%s)', key, val) } 1714 | } 1715 | } 1716 | 1717 | // Feat -> Compact mode. 1718 | if (compact) { 1719 | /// Reset height/width if there is an overflow. 1720 | #app > div > [tabindex] { 1721 | @media screen and (max-height: 648px) { min-height: auto } 1722 | @media screen and (max-width: 648px) { min-width: auto } 1723 | // > div *:hover { box-shadow: inset 0 0 0 1px crimson i } 1724 | } 1725 | 1726 | /// Compact mode. 1727 | @media screen and (max-width: compact_mw) { 1728 | /// Shared drawer styles. 1729 | .two, .three { 1730 | /// Left -> Settings/Contacts. 1731 | > div:nth-child(4) { 1732 | flex: 0 0 80px i 1733 | transition: 0.2s ease 1734 | &:hover, &:focus-within { flex: 0 0 30% i } 1735 | } 1736 | } 1737 | 1738 | /// Tweaks for two open drawers. 1739 | .two { 1740 | /// Reset upload preview. 1741 | > div:nth-child(3) > div:nth-child(2) { 1742 | flex: 0 0 calc(100% - 80px) i 1743 | margin-left: calc(-30% + 80px) 1744 | } 1745 | 1746 | /// Expand contacts. 1747 | > div:nth-child(4) { 1748 | min-width: 1px i 1749 | transition: 0.3s ease i 1750 | transition-delay: var(--c-m-delay) i 1751 | 1752 | /// All left drawers should be the same width. 1753 | &:hover { 1754 | min-width: 349px i 1755 | transition-delay: var(--c-m-hover) i 1756 | flex: 0 0 30% i 1757 | } 1758 | } 1759 | 1760 | /// Settings/Starred/Archived drawers. 1761 | > :nth-child(3) > :nth-child(1) { 1762 | z-index: 201 i 1763 | flex: 0 0 30% i 1764 | min-width: 350px i 1765 | [style][tabindex] { border-right: 1px solid bg5 i } 1766 | } 1767 | } 1768 | 1769 | /// Tweaks for three open drawers. 1770 | .three { 1771 | /// Reset upload preview drawer. 1772 | > div:nth-child(3) > div:nth-child(2) { 1773 | flex: 0 0 calc(100% - 30% - 81px) i 1774 | margin-left: calc(-30% + 80px) 1775 | } 1776 | 1777 | /// Do not expand left drawer when right drawer is open. 1778 | > div:nth-child(4) { 1779 | max-width: 80px i 1780 | flex: 0 0 80px i 1781 | } 1782 | } 1783 | 1784 | /// Fix left header. 1785 | [data-testid="chatlist-header"] { 1786 | display: flex 1787 | justify-content: start 1788 | min-height: 59px 1789 | 1790 | // Workaround for dropdown menus. 1791 | &:not(:focus-within) { overflow: hidden } 1792 | 1793 | // Separate header buttons. 1794 | > div:nth-child(2) { margin-left: 1rem } 1795 | 1796 | /// Remove notifications. 1797 | + span { display: none } 1798 | 1799 | /// Fix search bar width. 1800 | + span + div:not(:focus-within) { 1801 | [data-testid="chat-list-search-container"] > div { 1802 | min-width: 60px 1803 | } 1804 | } 1805 | } 1806 | 1807 | /// Contacts. 1808 | #side { 1809 | unread = '[data-testid="icon-unread-count"]' 1810 | status = '[data-testid^="status-"]' 1811 | typing = 'span[title*="…"]' 1812 | 1813 | /// 'Typing...' status indicator. 1814 | { typing } { 1815 | overflow: unset i 1816 | margin-top: -8px i 1817 | margin-left: 0px i 1818 | position: absolute i 1819 | 1820 | &::before { 1821 | content: '' i 1822 | position: absolute i 1823 | top: -31px i 1824 | left: -66px i 1825 | height: 53px i 1826 | width: 53px i 1827 | rad: var(--r-avatars) i 1828 | box-shadow: inset 0 0 0 3px b40 i 1829 | animation: 2s aBorder infinite i 1830 | 1831 | /// Fix RTL layout. 1832 | /[dir = 'RTL'] & { left: 63px i } 1833 | } 1834 | } 1835 | 1836 | /// Move icons to start. 1837 | n = 'nth-child(2)' 1838 | [data-testid='cell-frame-container'] > div:{ n } > div:{ n } { 1839 | position: relative 1840 | flex-direction: row-reverse 1841 | 1842 | /// Remove margins. 1843 | [role='gridcell'] { margin: 0 i } 1844 | 1845 | /// Unread indicator. 1846 | { unread } { 1847 | left: 44px 1848 | z-index: 9999 1849 | position: fixed 1850 | margin-top: 4px 1851 | border: 2px solid bg2 i 1852 | } 1853 | 1854 | /// Status indicator. 1855 | { status } { 1856 | left: 44px 1857 | z-index: 9999 1858 | position: fixed 1859 | margin-top: 4px 1860 | padding: 3px i 1861 | border: 2px solid bg2 i 1862 | c: 0 0 bg4 1863 | rad: 50% 1864 | 1865 | /// Make the icon smaller. 1866 | svg { 1867 | width: 14px 1868 | height: 14px 1869 | } 1870 | } 1871 | 1872 | /// Remove elements. 1873 | .status-vcard, // more icons 1874 | button[aria-hidden], // context menu 1875 | [data-icon]:not([data-icon*='status-']):not([data-icon*='disappearing']) { 1876 | display: none 1877 | } 1878 | } 1879 | 1880 | /// Hover/Active states. 1881 | &:not(#z) [aria-selected='false'] > div:hover { 1882 | { unread }, { status } { c: 0 bg3 } 1883 | { status } { c: 0 0 bg5 } 1884 | } 1885 | &:not(#z) [aria-selected='true'] > div { 1886 | { unread }, { status } { c: 0 bg4 bg1 } 1887 | } 1888 | 1889 | // Hide horizontal overflow. 1890 | > #pane-side { overflow-x: hidden i } 1891 | } 1892 | 1893 | // Remove E2E notice. 1894 | [data-testid="chatlist-e2e-message"] { display: none } 1895 | } 1896 | } 1897 | 1898 | // Main -> Chat message bubbles. 1899 | .message { 1900 | &-in, &-out { 1901 | /// Feat -> Message tails. 1902 | if (tail_style == 'rounded' || tail_style == 'minimal') { 1903 | [data-icon *= 'tail'] { 1904 | display: none i 1905 | 1906 | // Tweak corners in regular/group chats. 1907 | if (tail_style == 'rounded') { 1908 | + div, + div[data-testid] + div { rad: 7.5px i } 1909 | } 1910 | } 1911 | } 1912 | 1913 | /// Feat -> Reduce big emoji size. 1914 | img { 1915 | &[alt="❤️"], 1916 | &[src^='/img'][src$='-40.png'], 1917 | &[src^='/img'][src$='-64.png'] { 1918 | if (emoji_b != "48px") { 1919 | width: emoji_b i 1920 | height: emoji_b i 1921 | } 1922 | } 1923 | 1924 | // Add padding before timestamp. 1925 | ../ .copyable-text.selectable-text { 1926 | &:has([src^='/img'][src$='-40.png']), 1927 | &:has([src^='/img'][src$='-64.png']) { 1928 | margin: 0 57px 0 0 i 1929 | } 1930 | } 1931 | } 1932 | } 1933 | 1934 | /// Feat -> Swap message bubble positions. 1935 | if (bubble_in) { &-in { align-items: flex-end i }} 1936 | if (bubble_out) { &-out { align-items: flex-start i }} 1937 | 1938 | /// Feat -> Animate emojis. 1939 | if (emoji_a) { 1940 | emoji_k = (emoji_k == '') ? () : emoji_k 1941 | emoji_p = (emoji_p == '') ? () : emoji_p 1942 | 1943 | /// Generate Kiss/Pulse emoji styles. 1944 | /[class*='message-'] img[src$='-64.png'] { 1945 | for emoji in emoji_k { 1946 | &[alt={ '%s' % emoji }] { 1947 | +cache('aKiss') { animation: aKiss 1.5s infinite } 1948 | } 1949 | } 1950 | for emoji in emoji_p { 1951 | &[alt={ '%s' % emoji }] { 1952 | +cache('aPulse') { animation: aPulse 1.5s infinite } 1953 | } 1954 | } 1955 | } 1956 | } 1957 | } 1958 | 1959 | // Right -> Maps. 1960 | .gm-style { 1961 | img { 1962 | /// 1: Logo; 2: Full map; 3: Map tiles. 1963 | &[src *= 'images/google'] 1964 | &[src *= 'maps.googleapis.com'], 1965 | &[style *= 'width: 256px'][style *= 'height: 256px'] { 1966 | filter: invert(0.8) hue-rotate(180deg) contrast(120%) i 1967 | } 1968 | 1969 | /// Reset avatars. 1970 | &[src *= 'com/pp?'], 1971 | ../ [style *= 'height: 40px; width: 40px'] { 1972 | rad: 50% i 1973 | } 1974 | } 1975 | 1976 | /// Map controls. 1977 | [controlwidth = '40'] * { 1978 | filter: invert(0.9) i 1979 | [style *= 'd-color: rgb(255\, 255\, 255)'] { c: 0 0 bg0 } 1980 | } 1981 | 1982 | /// Map copyright/ToS. 1983 | [style *= 'd-color: rgb(245\, 245\, 245)'] { c: 0 0 bg4 } 1984 | [style *= ' color: rgb(68\, 68\, 68)'] { c: fg3 } 1985 | 1986 | /// Popout arrow. 1987 | .BPkae { border-top-color: var(--modal-background) i } 1988 | 1989 | /// Location pin. 1990 | ._3Q8RX { c: 0 0 ac1 } 1991 | 1992 | /// Footer border. 1993 | /._3nNEI { box-shadow: 0 -1px bg3 i } 1994 | } 1995 | } 1996 | -------------------------------------------------------------------------------- /whatsapp.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ## Dark-WhatsApp helper script. \n 4 | ## 5 | ## \033[0;36mUsage:\033[0m 6 | ## sh whatsapp.sh [-cufprh] \n 7 | ## 8 | ## \033[0;36mOptions:\033[0m 9 | ## -c Compile custom ~wa.user.styl~ userstyle. 10 | ## -u Compile ~wa.user.styl~ to ~wa.user.css~. 11 | ## -f Convert ~wa.user.css~ to ~darkmode.css~. 12 | ## -p Print the file content to standard output. 13 | ## -r Remove files generated by this script. 14 | ## -h Print help and exit. \n 15 | ## 16 | ## Source: 17 | ## \033[0;34m https://github.com/vednoc/dark-whatsapp \033[0m \n 18 | ## 19 | ## Documentation: 20 | ## \033[0;34m https://github.com/vednoc/dark-whatsapp/wiki \033[0m 21 | 22 | short_help() { 23 | help | tail -n +2 24 | } 25 | 26 | help() { 27 | printf "$(sed -n "s/##\ //p" "$0") \n" 28 | } 29 | 30 | print() { 31 | if [ -n "${USERCSS+x}" ]; then 32 | input="wa.user.css" 33 | elif [ -n "${COMPILE+x}" ]; then 34 | input="custom.user.css" 35 | else 36 | echo "You must pick an option." >&2 37 | exit 0 38 | fi 39 | 40 | cat $input 41 | } 42 | 43 | remove_if_exists() { 44 | if [ -f "$1" ]; then 45 | rm "$1" 46 | fi 47 | } 48 | 49 | remove() { 50 | echo "Removing files..." 51 | 52 | remove_if_exists temp.styl 53 | remove_if_exists darkmode.css 54 | remove_if_exists custom.user.css 55 | 56 | echo "Done!" 57 | } 58 | 59 | compile() { 60 | echo "Compiling..." 61 | 62 | temp="temp.styl" 63 | input="wa.user.styl" 64 | 65 | if [ -n "${USERCSS+x}" ]; then 66 | output="wa.user.css" 67 | else 68 | output="custom.user.css" 69 | fi 70 | 71 | sed -n '/^\/\//,$p; 1i @import("metadata.styl");' $input > $temp 72 | 73 | if command -v stylus >/dev/null; then 74 | stylus $temp -o $output 75 | rm $temp 76 | elif ! command -v npm >/dev/null; then 77 | echo "You're missing ~npm~ and ~Node.js~ libraries." >&2 78 | else 79 | echo "Missing ~stylus~ executable in your \$PATH." >&2 80 | fi 81 | } 82 | 83 | convert() { 84 | echo "Converting..." 85 | 86 | if [ -n "${USERCSS+x}" ]; then 87 | input="wa.user.css" 88 | elif [ -n "${COMPILE+x}" ]; then 89 | input="custom.user.css" 90 | else 91 | input="wa.user.css" 92 | fi 93 | 94 | output="darkmode.css" 95 | 96 | sed -n '/:root/,$p' $input | sed 's/^\ \ //; $d' > $output 97 | 98 | [ -e $output ] && echo "Done! $output is ready." \ 99 | || echo "File not found!" >&2 100 | } 101 | 102 | [ $# -eq 0 ] && { echo "No arguments given"; short_help; } 103 | 104 | while getopts "rcfuph" option; do 105 | case "$option" in 106 | "r") REMOVE=1 ;; 107 | "c") COMPILE=1 ;; 108 | "f") CONVERT=1 ;; 109 | "u") USERCSS=1 ;; 110 | "p") PRINT=1 ;; 111 | "h") help ;; 112 | *) short_help ;; 113 | esac 114 | done 115 | 116 | # Functions need to run in this order, therefore they are not called in getopts. 117 | [ -n "${REMOVE+x}" ] && remove 118 | [ -n "${COMPILE+x}" ] && compile 119 | [ -n "${CONVERT+x}" ] && convert 120 | [ -n "${PRINT+x}" ] && print 121 | --------------------------------------------------------------------------------