This is a modification of the Dark Minimal WhatsApp Web Theme:
https://uso.kkx.one/style/182006
WhatsApp GG2R10 Edit by gg2r10
Details
Authorgg2r10
LicenseNo License
CategoryWhatsApp
Created
Updated
Size34 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Full of bugs and unfinished, i'll update this theme regulary in order to change and fix some features.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dark Minimal WhatsApp Web
@namespace USO Archive
@author Giorgio Adamo
@description `<b>Sick of light? Join the darkness!</b>Make sure you have the dark theme selected from the whatsapp web settings:3 dots button on the top of the left pane (chat pane) > settings > theme > darkConsider supporting me by donating on <a href="paypal.me/giorgioadamo"><b>Paypal</b></a>You can easily <b>change the accent/theme color and the font family</b> according to your preference by clicking the button <b>CUSTOMIZE </b> right above the preview picture.Constantly updating as the newest WhatsApp web update release comes online. So if the skin breaks, it may take me maximum a couple of days to fix it, so don't worry and stay tuned. I will be on the case ;)Stay safe and have a productive day!UPDATED AUGUST 2022`
@version 20230130.0.45
@license CC-BY-NC-4.0
@preprocessor uso
@advanced color mainColor "Theme color" #FF9E70
@advanced dropdown fontFamily "Font family" {
monospazio "Font - Monospace*" <<<EOT monospace EOT;
seriffio "Font - Sans Serif" <<<EOT sans-serif EOT;
}
==/UserStyle== */
@-moz-document domain("web.whatsapp.com") {
/* @import url("https://fonts.googleapis.com/css?family=Raleway"); */
/* ignore the error icon below if using the Stylish code editor*/
:root .dark,
:root {
/* color-scheme */
--superLightGray: #fff;
--lightGray: rgb(255, 255, 255);
--darkGray: #000;
--darkerGray: #1c1c1c;
--darkestGray: #000;
--colorTonedGray: #1d2326;
--mainColor: /*[[mainColor]]*/ ;
--fontFamily: /*[[fontFamily]]*/ ;
--messagesColor: #111;
/* start comment this block on the stylish version */
/* --mainColor: #ff9e70; */
/* --fontFamily: "Raleway"; */
/* end comment this block on the stylish version */
--whitish: #d5d5d5;
--neumorph-cl-1: #0b0b0b;
--neumorph-cl-2: #2d2d2d;
--neumorph-bg: linear-gradient(
145deg,
var(--colorTonedGray),
var(--darkGray)
) !important;
--neumorph-bg-inverted: linear-gradient(
325deg,
var(--colorTonedGray),
var(--darkGray)
) !important;
--neumorph-bs: -3px -3px 10px var(--neumorph-cl-1),
3px 3px 10px var(--neumorph-cl-2) !important;
--neumorph-bs-focused: -3px -3px 10px var(--neumorph-cl-1),
3px 3px 10px var(--neumorph-cl-2), inset 0px 0px 2px 2px var(--mainColor) !important;
/* --alertMessage: "IMPORTANT: whatsapp released a new version of whatsapp web on 19.11.2020 breaking all the custom skins out there. I will release fixes in the next days to make it work again. Keep manually updating!!!"; */
--alertMessage: "IMPORTANT: I fixed an important issue where the color customisation wouldn't work. Please UNISTALL the skin, then go to the skin URL, select a color of your choice and REINSTALL the skin! ";
--alertMessageSize: 17px;
--cl-1: var(--mainColor) !important;
--cl-2: #F0A;
--cl-3: #b14aed;
--cl-4: #4474e4;
--cl-5: #34d3b3;
--cl-6: #2add7e;
--cl-7: #f5f12f;
--cl-8: #f69d37;
--cl-9: #ff70bf;
--cl-10: #e73287;
/* --colorTonedGray: #143031;
--mainColor: #bfffc7;
--colorTonedGray: #1c2e4c;
--mainColor: #6cd0ff;
--colorTonedGray: #1c0125;
--mainColor: #db6be2;
--colorTonedGray: #31020d;
--mainColor: #ff5450; */
/* vanilla vars overwrite */
--active-tab-marker: var(--mainColor) !important;
--audio-progress-played-incoming: var(--mainColor) !important;
--audio-progress-played-outgoing: var(--mainColor) !important;
--audio-progress-incoming: var(--mainColor) !important;
--audio-progress-outgoing: var(--mainColor) !important;
--background-default: var(--darkGray) !important;
--button-primary-background: var(--mainColor) !important;
--intro-background: var(--darkerGray) !important;
--menu-tabs-list-active: var(--mainColor) !important;
--audio-track-outgoing: var(--superLightGray) !important;
--audio-track-outgoing: var(--superLightGray) !important;
--panel-background: var(--darkGray) !important;
--panel-background-colored: var(--darkGray) !important;
--dropdown-background-hover: var(--darkGray) !important;
--unread-marker-background: var(--mainColor) !important;
--video-primary: var(--mainColor) !important;
--button-alternative: var(--mainColor);
--incoming-background-deeper: var(--darkerGray);
--outgoing-background-deeper: var(--darkerGray);
--butterbar-connection-background: var(--darkestGray);
--butterbar-connection-primary: white;
--butterbar-connection-secondary: var(--superLightGray);
--panel-header-background: var(--darkestGray);
--system-message-background: transparent;
--button-primary-background-hover: var(--colorTonedGray);
--panel-background-deeper: var(--darkerGray);
--button-alternative: var(--mainColor);
--switch-button-checked-color: var(--mainColor);
--switch-track-checked-color: var(--lightGray);
--video-primary: var(--mainColor);
--rich-text-panel-background: var(--darkGray);
--mention-at-symbol: var(--mainColor);
--search-input-container-background: transparent;
--button-secondary: var(--mainColor) !important;
--icon-high-emphasis: var(--darkerGray);
--link: var(--mainColor) !important;
--unread-timestamp: var(--mainColor) !important;
--primary-strong: var(--mainColor);
--compose-input-background: var(--darkerGray) !important;
--compose-input-border: var(--darkerGray) !important;
--dropdown-background: var(--darkerGray) !important;
--drawer-section-background: var(--darkerGray) !important;
--drawer-background: var(--darkerGray) !important;
}
/*========= miscellanous =========*/
/*========= miscellanous =========*/
._1XkO3,
._1lPgH,
.p3_M1,
.etp_f {
background: var(--neumorph-bg) !important;
box-shadow: var(--neumorph-bs) !important;
border-radius: 20px !important;
}
._1jLYl, ._1PAkz, ._11JPr { /*Codigo para cambiar todas las fotos de perfil cuadradas*/
border-radius: 0% !important;
}
._3gYev, ._2vDPL {
background-color: #000 !important;
}
._3Uu1_ {
background-color: #000 !important;
border-radius: 8px;
}
.c3x5l3r8 {
left: 0.5ch;
width: 100%;
display: flex;
align-items: center;
left: 10px;
}
.y_sn4 {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: baseline;
gap: 5px;
}
.y_sn4 * {
margin: 0 !important;
}
._2gzeB {
background-color: var(--darkestGray) !important;
}
._2T2Kt.vBu41 {
background: radial-gradient(
at top right,
rgba(var(--incoming-background-rgb), 1) 60%,
rgba(var(--incoming-background-rgb), 0) 80%
) !important;
}
span.l7jjieqr.fewfhwl7 {
color: #606060 !important;
}
._1beEj {
margin: 0 !important;
}
._3vPI2 {
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
._3vPI2 ._1i_wG {
margin: 0 !important;
color: white !important;
font-size: 11px !important;
margin: 2px 0 0 0 !important;
}
._2qo4q {
margin-right: 2px;
position: absolute;
top: 10px;
right: 10px;
flex-direction: row;
display: flex;
}
._2qo4q:before {
content: "status: ";
font-size: 10px;
color: white;
display: inline-block;
display: flex;
flex-direction: row;
margin-right: 5px;
}
.y_sn4 {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: baseline;
gap: 5px;
}
.y_sn4 * {
margin: 0 !important;
}
._2gzeB {
background-color: var(--darkestGray) !important;
}
._2T2Kt.vBu41 {
background: radial-gradient(
at top right,
rgba(var(--incoming-background-rgb), 1) 60%,
rgba(var(--incoming-background-rgb), 0) 80%
) !important;
}
.message-in span.l7jjieqr.fewfhwl7 {
color: #FF0095 !important;
}
.message-out span.l7jjieqr.fewfhwl7 {
color: var(--mainColor) !important;
}
._1beEj {
margin: 0 !important;
}
header._1G3Wr,
header._23P3O {
padding: 40px 30px !important;
background-color: var(--darkestGray) !important;
}
header._1G3Wr ._3GlyB,
header ._2YnE3 {
transform: scale(1.3) !important;
}
header ._2YnE3 {
padding-right: 20px !important;
margin-left: 20px !important;
}
header .lhj4utae {
font-size: 19px !important;
}
.EtBAv .i0jNr,
._3cOAM,
._1-lf9.NQl4z {
padding: 10px;
top: 0px;
position: relative;
border-radius: 10px;
color: var(--mainColor);
}
.V-zSs {
padding: 20px 9% !important;
}
.GAiYx {
margin-bottom: 12px !important;
}
._3EZ_R,
._1VmmK,
.message-out .ItfyB,
.message-in .ItfyB {
background: var(--messagesColor) !important;
position: relative;
padding: 5px !important;
border-radius: 0px !important;
border: 0px !important;
}
._1zdrl {
background-color: #111 !important;
}
.message-out .ItfyB {
background: var(--messagesColor) !important;
}
._1Jn3C {
background: var(--messagesColor) !important;
box-shadow: var(--messagesColor) !important;
}
.Nm1g1._22AX6,
._1XkO3,
._3yWey.XKmj6 {
background-color: transparent !important;
}
.zoWT4 {
font-size: 15px;
}
._22Msk {
background-color: transparent !important;
}
._2Fo6S {
margin-bottom: 15px !important;
}
.WYyr1 {
margin-top: 10px !important;
margin-left: 2px !important;
}
.Nm1g1 span.i0jNr {
box-shadow: none !important;
background: transparent !important;
}
.bfbxj8tr {
bottom: 10px;
right: -12px;
}
._16kef.dKzIw {
background: transparent !important;
}
header .lhj4utae {
font-size: 15px !important;
}
/*========= new messages notifications =========*/
/*========= new messages notifications =========*/
.ovhn1urg {
background-color: var(--mainColor);
border-radius: 5px !important;
padding: 5px !important;
display: block;
position: absolute;
top: 5px;
left: 5px;
font-weight: 100 !important;
}
.Hy9nV {
color: var(--whitish);
}
.Dvjym {
color: var(--lightGray) !important;
}
._2nY6U {
pos...