@JaviertINC AFYRUS Yesly Devs Captys Teextus Nuxum Music @Mencantas_cl Userscripts JTCraft Hytale
Ver todos los Proyectos

Whatsapp Web
DarkGreen

Una versión oscura, ayuda a cuidar tus ojos. Además, con este script, podrás cambiar el fondo de tu Whatsapp y proteger tus otros chats, muy útil cuando se está en una oficina o compartiendo pantalla.

Instalar v3.8 Ver en Github

WhatsApp Web | DarkGreen

Una versión oscura, ayuda a cuidar tus ojos :D

Este script modifica el estilo de WhatsApp Web con un estilo DarkGreen basado en los estilos de la página oficial de @JaviertINC.

Ínidce
Descripción Breve
Funciones
Screenshots
Videos

Funciones

  • Modifica el estilo de tu WhatsApp Web con el estilo DarkGreen mira las Screenshots
  • ¡También puedes modificar el fondo de tu Chat! [Ver Video]
  • Puedes desactivar el blur en las imágenes que ya no están disponibles en tu celular, pero siguen en el Chat (no están en una buena calidad) [Ver Video]
  • Puedes cuidar la privacidad de tus chats agregando un blur en tiempo real, protegiendo tus conversaciones mientras compartes pantalla o hay más gente viendo tu monitor. [Ver Video]

Screenshots

Pronto

Videos

¿Cómo cambiar el fondo de tu WhatsApp Web?

Pronto

¿Cómo activar/desactivar la protección de privacidad de tus chats de WhatsApp Web?

Pronto

¿Cómo activar/desactivar el blur de las imagenes que ya no están disponibles en tu WhatsApp Web?

Pronto

> Ver documento original en Github

> https://github.com/JaviertINC/userscripts/blob/master/scripts/whatsapp.darkgreen.user.js
// ==UserScript==
// @name         Whatsapp Web | DarkGreen
// @namespace    https://javiertinc.cl/userscripts
// @version      3.8
// @description  Una versión oscura, ayuda a cuidar tus ojos :D
// @homepage     https://javiertinc.cl/userscripts/script/whatsapp.darkgreen
// @author       @JaviertINC
// @match        *://web.whatsapp.com/*
// @include      https://web.whatsapp.com/JaviertINC
// @updateURL    https://javiertinc.github.io/userscripts/scripts/whatsapp.darkgreen.user.js
// @icon         https://www.google.com/s2/favicons?domain=whatsapp.com
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    var hidden_privacy = false; // Protege tus otros chats (true, false)
    var background_img = "https://i.yesly.cl/lNmTEA4s"; //Pon tu fondo favorito :D (se recomienda que la imagen esté en un servidor seguro con HTTPS)
    var background_opacity = "0.18"; //Modifica la opacidad de tu fondo
    var disable_blur = true; //Desactiva el blur en las imagenes que ya no están disponibles

	var css = [
        "body.darkgreen{ background-color: #242424!important; background-image: unset!important;}",
        ".darkgreen {",
        "    --gray-200: #4caf50;",
        "    --teal: #4caf50;",
        "    --app-background-stripe: #4caf50;",
        "    --intro-background: #4c4c4c;",
        "    --primary: #fff;",
        "    --primary-title: #fff;",
        "    --primary-strong: #f1f1f1;",
        "    --primary-stronger: #f1f1f1;",
        "    --secondary: #eee;",
        "    --secondary-lighter: #e1e1e1;",
        "    --secondary-stronger: #f1f1f1;",
        "    --border-stronger: #4caf50;",
        "    --button-primary-background: #4caf50;",
        "    --button-secondary: #4caf50;",
        "    --button-alternative-background: #4caf50;",
        "    --button-alternative: #fff;",
        "    --background-default: #393939;",
        "    --background-default-active: #4c4c4c;",
        "    --background-default-hover: #4c4c4c;",
        "    --border-list: #4caf50;",
        "    --icon: #fff;",
        "    --icon-lighter: #ddd;",
        "    --icon-ack: #4caf50;",
        "    --icon-strong-rgb: 255,255,255",
        "    --icon-lighter-rgb: 200, 200, 200,.7;",
        "    --rich-text-panel-background: #4c4c4c;",
        "    --compose-background: #666;",
        "    --avatar-background: #242424;",
        "    --avatar-placeholder-background: #242424;",
        "    --panel-background: #4c4c4c;",
        "    --panel-background-deep: #4c4c4c;",
        "    --panel-background-deeper: #666;",
        "    --panel-background-lighter: #242424;",
        "    --panel-background-colored: #4caf50;",
        "    --panel-background-hover: #333;",
        "    --panel-header-background: #4c4c4c;",
        "    --panel-header-icon: #fff;",
        "    --unread-background: #4caf50;",
        "    --unread-marker-background: #4caf50;",
        "    --compose-panel-background: #4c4c4c;",
        "    --incoming-background: #4c4c4c;",
        "    --incoming-background-rgb: 76,76,76;",
        "    --incoming-background-deeper: #333;",
        "    --incoming-background-deeper-rgb: 51,51,51;",
        "    --outgoing-background: #4f4f4f;",
        "    --outgoing-background-deeper: #333;",
        "    --outgoing-background-deeper-rgb: 51,51,51;",
        "    --dropdown-background: #393939;",
        "    --dropdown-background-hover: #4caf50;",
        "    --conversation-panel-background: #242424;",
        "    --media-viewer-background-rgb: 51,51,51;",
        "    --border-panel: #4caf50;",
        "    --system-message-background: #4c4c4c;",
        "    --system-message-text: #fff;",
        "    --conversation-panel-border: #4caf50;",
        "    --thumb-border-active: #4caf50;",
        "    --input-border-active: #4caf50;",
        "    --highlight: #4caf50;",
        "    --outgoing-background-rgb: 79, 79, 79;",
        "    --primary-strong-rgb: 170,170,170;",
        "    --media-viewer-background: #4c4c4c;",
        "    --modal-backdrop-solid: #242424;",
        "    --modal-background: #4c4c4c;",
        "    --notification-biz-background: #4c4c4c;",
        "    --notification-e2e-background: #4c4c4c;",
        "    --drawer-section-background: #4c4c4c;",
        "    --drawer-background: #333;",
        "    --teal-lighter: #4caf50;",
        "    --bubble-meta: #aaa;",
        "    --bubble-meta-icon: #aaa;",
        "    --button-bubble: #4caf50;",
        "    --button-secondary-background-hover: #343434;",
        "    --chatlist-icon: #aaa;",
        "    --intro-secondary: #f1f1f1;",
        "    --message-primary: #fff;",
        "    --compose-primary: #fff;",
        "    --compose-input-background: #343434;",
        "    --compose-input-border: #4caf50;",
        "    --notification-biz-text: #fff;",
        "    --notification-e2e-text: #fff;",
        "    --search-input-background: #666;",
        "    --search-container-background: #4c4c4c;",
        "    --active-tab-marker: #4caf50;",
        "    --butterbar-update-background: #4caf50;",
        "    --spinner-highlight: #4caf50;",
        "    --modal-backdrop: rgba(0,0,0,.7);",
        "    --button-plain-background: #4caf50;",
        "",
        "}",
        ".darkgreen a{ color: #4caf50!important; }",
        ".darkgreen ._1i1U7.jZ4tp,.darkgreen ._1i1U7._2DNgV{ background-unset!important; }",
        ".darkgreen #startup{ background-color: #242424!important; }",
        ".darkgreen #startup._1UDDE{ fill: #4caf50!important; }",
        ".darkgreen ._1RQfk{ background-color: #393939!important; }",
        ".darkgreen ._3pkkz{ border-bottom: 1px solid #4caf50!important; border-right: 1px solid #4caf50!important; }",
        ".darkgreen ._2nmDZ{ border-right: 1px solid #4caf50!important; }",
        ".darkgreen ._3auIg{ border: 1px solid #4caf50!important; }",
        ".darkgreen ._2y17h::after{ border: unset!important; background-color: unset!important; }",
        ".darkgreen ._1-iDe.Wu52Z{ border-right: 1px solid #4caf50!important; }",
        ".darkgreen ._2y17h,.darkgreen .gQzdc{ border-top: 1px solid #4caf50!important; border-bottom: 1px solid #4caf50!important; }",
        ".darkgreen _1vDUw B5rWa{ border-left: 1px solid #4caf50!important; }",
        ".darkgreen [data-asset-intro-image-light] { background-image: url(\""+ atob('aHR0cHM6Ly9qYXZpZXJ0aW5jLmdpdGh1Yi5pby9pbWFnZXMvd2hhdHNhcHAtY29ubmVjdGlvbi5wbmc=') +"\") !important; }",
        ".darkgreen [data-asset-chat-background-light]{background-image: url(\""+ background_img +"\") !important;}",
        ".darkgreen .Zq3Mc{ border: 1px solid #4caf50!important; color: #fff!important; }",
        ".darkgreen .rRAIq[style\"background-color: rgb(251, 251, 251);\"]{ background-color: #222!important; }",
        ".darkgreen path[fill=\"#009588\"]{ fill:#4caf50!important; }",
        ".darkgreen span[data-icon=\"back-blue\"]{ color: #4caf50!important; }",
        ".darkgreen .B5rWa{ border-left: 1px solid #4caf50!important; border-bottom: 1px solid #4caf50!important; }",
        ".darkgreen .gQzdc{ border-top: none!important; border-left: 1px solid #4caf50!important; }",
        ".darkgreen .message-in .tail-container,.darkgreen .message-in .tail-override-right .tail-container, .darkgreen .message-out .tail-override-right .tail-container, .darkgreen .message-in .tail-override-left .tail-container{ background-image: unset!important; }",
        ".darkgreen .message-out .tail-container,.darkgreen .message-out .tail-container.highlight{ background-image: unset!important; }",
        ".darkgreen .Pg7Si progress{ background-color: #4c4c4c!important; color: #4caf50!important; }",
        ".darkgreen .Pg7Si progress[value]::-webkit-progress-value{ background-color: #4caf50!important; }",
        ".darkgreen ._2EXPL{ filter: unset!important;}",
        ".darkgreen ._1CnF3{ border: 1px solid #4caf50!important; }",
        ".darkgreen ._3lLzD{ color: #f1f1f1!important; }",
        ".darkgreen ._2u2Mg ._1WliW,.darkgreen ._1wCju ._2UkYn,.darkgreen .Qgzj8.gqwaM._3FXB1{ border-radius: 0!important;}",
        ".darkgreen ._2u2Mg ._1WliW,.darkgreen ._1wCju ._2UkYn{ border: 1px solid #4caf50!important; }",
        ".darkgreen ._2fq0t{ border: 1px solid #4caf50!important; border-left: 0!important;}",
        ".darkgreen .app-wrapper-web .h70RQ,.darkgreen ._1E1g0{ border: 1px solid #4caf50!important; }",
        ".darkgreen .YUoyu{ opacity: "+ background_opacity +"!important; }",
        ".darkgreen ._9a59P{ color: #fff!important; }",
        ".darkgreen [data-icon=\"search\"]{ color: #fff!important; }",
        ".darkgreen ._2vJ01{ border-top: 1px solid #4caf50!important; }",
        ".darkgreen header{ border-bottom: 1px solid #4caf50!important; }",
        ".darkgreen .G_MLO{ border: 1px solid #4caf50!important; }",
        ".darkgreen ._3pTi5{ color: var(--message-primary)!important; }",
        ".darkgreen ._39vRn{ color: var(--message-primary)!important; }",
        ".darkgreen .NRCvf{ color: #ccc!important; }",
        ".darkgreen ._3Whw5.selectable-text.invisible-space.copyable-text{ color: #f1f1f1!important; }",
        ".darkgreen a._3Whw5.selectable-text.invisible-space.copyable-text{ color: #4caf50!important; }",
        ".darkgreen .matched-mention{ color: #4caf50!important; }",
        "[title=\"Theme\"],[title=\"Tema\"]{ display: none!important; }",
        ".jt-theme-btn{ background-color: #4c4c4c; color: #fff; border: 1px solid #4caf50; border-right: none; position: fixed; top: 140px; right: 0; padding: 1rem; border-radius: 5px 0 0 5px; cursor: pointer; z-index: 999; }",
        ".jt-background-btn{ background-color: #4c4c4c; color: #fff; border: 1px solid #4caf50; border-right: none; position: fixed; top: calc(140px + 58px + .5rem); right: 0; padding: 1rem; border-radius: 5px 0 0 5px; cursor: pointer; z-index: 999; }",
        ".jt-theme-btn,.jt-background-btn:hover{ background-color: #555; }",
    ].join("\n");
	GM_addStyle(css);

    if(hidden_privacy){
        var hidden_privacy_css = [
            "._210SC .eJ0yJ{ transition: all 0.3s; filter: blur(5px)!important; }",
            "._210SC .eJ0yJ._13opk,._210SC:hover .eJ0yJ{ filter: blur(0px)!important; }",
            "._210SC:hover{ filter: blur(1px)!important; }",
        ].join("\n");
        GM_addStyle(hidden_privacy_css);
    }
    if(disable_blur){
        var disable_blur_css = [
            "._20GbR { -webkit-filter: unset!important; filter: unset!important; }"
        ].join("\n");
        GM_addStyle(disable_blur_css);
    }



    setTimeout(() => {
        init();
    }, 100);

    function init(){
        var ct = get_current_theme();
        var dg = "darkgreen";
        if(ct == '"' + dg + '"'){
            document.querySelector('body').classList.add(dg);
            if(document.querySelector('body').classList.contains("dark")){
                document.querySelector('body').classList.remove('dark');
            }
        }else{
            //alert(ct + " != " + dg);
        }
        setTimeout(() => {
            add_theme_config();
            /*add_background_config();*/
            add_config_script();
        }, 3100);
    }

    function get_current_theme(){
        return localStorage.theme;
    }


    function add_theme_config(){
        var jt_theme_btn = document.createElement('div');
		jt_theme_btn.classList.add("jt-theme-btn");
        jt_theme_btn.setAttribute("onclick", "allThemes()");
        jt_theme_btn.setAttribute("title", "¡Cambia el estilo de WhatsApp!");
        jt_theme_btn.innerHTML = '<span data-icon="settings-theme"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 1l3.22 3.22h4.56v4.56L23 12l-3.22 3.22v4.56h-4.56L12 23l-3.22-3.22H4.22v-4.56L1 12l3.22-3.22V4.22h4.56L12 1zm0 5v12c3.31 0 6-2.69 6-6a6.005 6.005 0 0 0-5.775-5.996L12 6z" fill="currentColor"></path></svg></span>';
		document.body.appendChild(jt_theme_btn);
    }
    function add_background_config(){
        var jt_theme_btn = document.createElement('div');
		jt_theme_btn.classList.add("jt-background-btn");
        jt_theme_btn.setAttribute("onclick", "background_config()");
        jt_theme_btn.setAttribute("title", "¡Cambia el fondo de WhatsApp!");
        jt_theme_btn.innerHTML = '<span data-icon="settings-wallpaper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M4.9 5.9h6.4V4.1H4.9c-1 0-1.8.8-1.8 1.8v6.4h1.8V5.9zm5.3 8l-3.6 4.4h10.7l-2.7-3.6-1.8 2.4-2.6-3.2zm6.2-4c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3.6 1.3 1.3 1.3 1.3-.6 1.3-1.3zm2.7-5.8h-6.4v1.8h6.4v6.4h1.8V5.9c0-1-.8-1.8-1.8-1.8zm0 16h-6.4v1.8h6.4c1 0 1.8-.8 1.8-1.8v-6.4h-1.8v6.4zM4.9 13.7H3.1v6.4c0 1 .8 1.8 1.8 1.8h6.4v-1.8H4.9v-6.4z"></path></svg></span>';
		document.body.appendChild(jt_theme_btn);
    }
    function add_config_script(){
        var jt_theme_script = document.createElement('script');
        var jt_script = [
            'function allThemes(){',
            '   var theme = prompt(\'Ingresa el numero del estilo que deseas:\\n\\n1) Light (Default)\\n2) Dark (By WhatsApp)\\n3) DarkGreen (By @JaviertINC)\\n\', "3");',
            '   if (theme != null || theme != "") {',
            '     setTheme(theme);',
            '   }',
            '}',
            'function setTheme(theme){',
            '   switch(theme){',
            '     case "1":',
            '       localStorage.theme = \'"light"\'',
            '       if(document.querySelector(\'body\').classList.contains("dark")){',
            '         document.querySelector(\'body\').classList.remove(\'dark\');',
            '       }',
            '       if(document.querySelector(\'body\').classList.contains("darkgreen")){',
            '         document.querySelector(\'body\').classList.remove(\'darkgreen\');',
            '       }',
            '     break;',
            '     case "2":',
            '       localStorage.theme = \'"dark"\'',
            '       document.querySelector(\'body\').classList.add("dark");',
            '       if(document.querySelector(\'body\').classList.contains("darkgreen")){',
            '         document.querySelector(\'body\').classList.remove(\'darkgreen\');',
            '       }',
            '     break;',
            '     case "3":',
            '       localStorage.theme = \'"darkgreen"\'',
            '       document.querySelector(\'body\').classList.add("darkgreen");',
            '       if(document.querySelector(\'body\').classList.contains("dark")){',
            '         document.querySelector(\'body\').classList.remove(\'dark\');',
            '       }',
            '     break;',
            '   }',
            '}',
            'function background_config(){',
            '   var c_bg = prompt(\'Ingresa el enlace de tu imagen de fondo\\nIngresa 0 si quieres restaurar el fondo por defecto.\\n\', "3");',
            '   if (c_bg != null || c_bg != "") {',
            '     alert(c_bg);',
            '   }',
            '}',
        ].join("\n");
        jt_theme_script.innerHTML = jt_script;
		document.body.appendChild(jt_theme_script);
    }

})();        
whatsapp.darkgreen v3.9 | 2020-07-09
    Reparado
       Se repararon algunos colores de textos.


> Ver en HeadWay
-=# #=- -=# #=- -=# #=-

whatsapp.darkgreen v3.8 | 2020-07-06
    Reparado
       Se repararon varios colores que no correspondían con el estilo DarkGreen.


> Ver en HeadWay
-=# #=- -=# #=- -=# #=-

whatsapp.darkgreen v3.7 | 2020-07-02
    Información
       Se actualizó WhatsApp Web añadiendo oficialmente su versión Dark.
       Ahora puedes elegir el estilo "DarkDefault" desde este script.
    Añadido
       Se agregó un botón flotante en el lado derecho, para cambiar el tema de WhatsApp.
       Ahora puedes cambiar 3 estilos desde el botón flotante.
       Se agrego un borde inferior en el Header.
       Se agregó una función que actualiza el valor del tema escogido y lo guarda en tu navegador.
    Reparado
       Se reparó el color de fondo de la caja de texto.
       Se reparó el borde de la caja de texto.
       Se repararon el color de los botones de acciones de un nuevo chat.
    Removido
       Se eliminó el el botón "Theme" de la configuración de WhatsApp y se cambió por el botón flotante a la derecha.


> Ver en HeadWay
-=# #=- -=# #=- -=# #=-
Publicidad
Userscripts
by @JaviertINC

Para poder usar estos Scripts, debes instalar UNA de estas extensiones:

Tampermonkey | JaviertINC Tampermonkey Greasemonkey | JaviertINC Greasemonkey Violentmonkey | JaviertINC Violentmonkey

Actualizaciones

gkeep.darkgreen v1.5 | 2021-02-10

youtube.darkgreen v0.8 | 2021-02-10

headwayapp.darkgreen v0.2 | 2020-07-20

computrabajo.darkgreen v1.2 | 2020-07-20

computrabajo.darkgreen v1.1 | 2020-07-20

headwayapp.darkgreen v0.1 | 2020-07-11

ytmp3cc.darkmode v0.2 | 2020-07-10

nonolive.autotaps v0.1 | 2020-07-09

computrabajo.darkgreen v1.0 | 2020-07-09

whatsapp.darkgreen v3.9 | 2020-07-09