Greasy Fork

I tried to write a simple script to recolor The UI to Amoled Black & Red but its not working. Can someone please help.

This is the script:
// ==UserScript==
// @name WhatsApp Web - Red/Black Theme
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Forces custom colors by stripping media queries and adding !important to variables.
// @author You
// @match https://web.whatsapp.com/*
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-start
// ==/UserScript==

(function() {
'use strict';

const css = `
/* 1. Removed @media (prefers-color-scheme: dark) so this applies ALWAYS.
2. Added !important to every variable to override WhatsApp's defaults.
*/
.x9ux0ua.x9ux0ua,
.x9ux0ua.x9ux0ua:root,
body.web /* Added body.web as a fallback selector */ {
--WDS-accent: #c02121 !important;
--WDS-accent-RGB: 33, 192, 99 !important;
--WDS-accent-deemphasized: #351010 !important;
--WDS-accent-deemphasized-RGB: 16, 53, 41 !important;
--WDS-accent-emphasized: #fdd3d3 !important;
--WDS-accent-emphasized-RGB: 217, 253, 211 !important;
--WDS-background-dimmer: rgb(0, 0, 0, .32) !important;
--WDS-background-dimmer-RGB: #c02121 !important;
--WDS-background-elevated-wash-inset: #000000 !important;
--WDS-background-elevated-wash-inset-RGB: 29, 31, 31 !important;
--WDS-background-elevated-wash-plain: #000000 !important;
--WDS-background-elevated-wash-plain-RGB: 29, 31, 31 !important;
--WDS-background-wash-inset: #000000 !important;
--WDS-background-wash-inset-RGB: 22, 23, 2 !important;
--WDS-background-wash-plain: #000000 !important;
--WDS-background-wash-plain-RGB: 22, 23, 23 !important;
--WDS-components-active-list-row: rgba(255, 255, 255, .1) !important;
--WDS-components-active-list-row-RGB: 255, 255, 255 !important;
--WDS-components-filter-surface-selected: #351010 !important;
--WDS-components-filter-surface-selected-RGB: 16, 53, 41 !important;
--WDS-components-outline-profile-photo: rgba(255, 255, 255, .1) !important;
--WDS-components-outline-profile-photo-RGB: 255, 255, 255 !important;
--WDS-components-platform-gesture-bar: rgba(255, 255, 255, .6) !important;
--WDS-components-platform-gesture-bar-RGB: 255, 255, 255 !important;
--WDS-components-platform-status-bar: #FFFFFF !important;
--WDS-components-platform-status-bar-RGB: 255, 255, 255 !important;
--WDS-components-surface-nav-bar: #000000 !important;
--WDS-components-surface-nav-bar-RGB: 29, 31, 31 !important;
--WDS-content-action-default: #FAFAFA !important;
--WDS-content-action-default-RGB: 250, 250, 250 !important;
--WDS-content-action-emphasized: #c02121 !important;
--WDS-content-action-emphasized-RGB: 33, 192, 99 !important;
--WDS-content-deemphasized: rgba(255, 255, 255, .6) !important;
--WDS-content-deemphasized-RGB: 255, 255, 255 !important;
--WDS-content-default: #FAFAFA !important;
--WDS-content-default-RGB: 250, 250, 250 !important;
--WDS-content-disabled: #000000 !important;
--WDS-content-disabled-RGB: 66, 68, 69 !important;
--WDS-content-external-link: #c02121 !important;
--WDS-content-external-link-RGB: 33, 192, 99 !important;
--WDS-content-inverse: #0A0A0A !important;
--WDS-content-inverse-RGB: 10, 10, 10 !important;
--WDS-content-on-accent: #0A0A0A !important;
--WDS-content-on-accent-RGB: 10, 10, 10 !important;
--WDS-content-read: #53BDEB !important;
--WDS-content-read-RGB: 83, 189, 235 !important;
--WDS-lines-divider: rgba(255, 255, 255, .1) !important;
--WDS-lines-divider-RGB: 255, 255, 255 !important;
--WDS-lines-outline-deemphasized: rgba(255, 255, 255, .1) !important;
--WDS-lines-outline-deemphasized-RGB: 255, 255, 255 !important;
--WDS-lines-outline-default: #757778 !important;
--WDS-lines-outline-default-RGB: 117, 119, 120 !important;
--WDS-persistent-activity-indicator: #d32525 !important;
--WDS-persistent-activity-indicator-RGB: 37, 211, 102 !important;
--WDS-persistent-always-black: #0A0A0A !important;
--WDS-persistent-always-black-RGB: 10, 10, 10 !important;
--WDS-persistent-always-branded: #c02121 !important;
--WDS-persistent-always-branded-RGB: 33, 192, 99 !important;
--WDS-persistent-always-white: #FFFFFF !important;
--WDS-persistent-always-white-RGB: 255, 255, 255 !important;
--WDS-secondary-negative: #FB5061 !important;
--WDS-secondary-negative-RGB: 251, 80, 97 !important;
--WDS-secondary-negative-deemphasized: #321622 !important;
--WDS-secondary-negative-deemphasized-RGB: 50, 22, 34 !important;
--WDS-secondary-negative-emphasized: #FA99A4 !important;
--WDS-secondary-negative-emphasized-RGB: 250, 153, 16 !important;
--WDS-secondary-positive: #eb7171 !important;
--WDS-secondary-positive-RGB: 113, 235, 133 !important;
--WDS-secondary-positive-deemphasized: #351010 !important;
--WDS-secondary-positive-deemphasized-RGB: 16, 53, 41 !important;
--WDS-secondary-warning: #FFD279 !important;
--WDS-secondary-warning-RGB: 255, 210, 121 !important;
--WDS-secondary-warning-deemphasized: #362C1F !important;
--WDS-secondary-warning-deemphasized-RGB: 54, 44, 31 !important;
--WDS-surface-default: #000000 !important;
--WDS-surface-default-RGB: 22, 23, 23 !important;
--WDS-surface-elevated-default: #000000 !important;
--WDS-surface-elevated-default-RGB: 29, 31, 31 !important;
--WDS-surface-elevated-emphasized: #000000 !important;
--WDS-surface-elevated-emphasized-RGB: 36, 38, 38 !important;
--WDS-surface-emphasized: #000000 !important;
--WDS-surface-emphasized-RGB: 29, 31, 31 !important;
--WDS-surface-highlight: rgba(255, 255, 255, .1) !important;
--WDS-surface-highlight-RGB: 255, 255, 255 !important;
--WDS-surface-inverse: #EEEEEE !important;
--WDS-surface-inverse-RGB: 238, 238, 238 !important;
--WDS-surface-pressed: rgba(255, 255, 255, .2) !important;
--WDS-surface-pressed-RGB: 255, 255, 255 !important;
--WDS-systems-bubble-content-business: #e40505 !important;
--WDS-systems-bubble-content-business-RGB: 6, 207, 156 !important;
--WDS-systems-bubble-content-deemphasized: rgba(255, 255, 255, .6) !important;
--WDS-systems-bubble-content-deemphasized-RGB: 255, 255, 255 !important;
--WDS-systems-bubble-content-e2e: #FFD279 !important;
--WDS-systems-bubble-content-e2e-RGB: 255, 210, 121 !important;
--WDS-systems-bubble-surface-business: #000000 !important;
--WDS-systems-bubble-surface-business-RGB: 29, 31, 31 !important;
--WDS-systems-bubble-surface-e2e: #000000 !important;
--WDS-systems-bubble-surface-e2e-RGB: 29, 31, 31 !important;
--WDS-systems-bubble-surface-incoming: #000000 !important;
--WDS-systems-bubble-surface-incoming-RGB: 36, 38, 38 !important;
--WDS-systems-bubble-surface-outgoing: #4d1414 !important;
--WDS-systems-bubble-surface-outgoing-RGB: 20, 77, 55 !important;
--WDS-systems-bubble-surface-overlay: rgba(0, 0, 0, .2) !important;
--WDS-systems-bubble-surface-overlay-RGB: 0, 0, 0 !important;
--WDS-systems-bubble-surface-system: #000000 !important;
--WDS-systems-bubble-surface-system-RGB: 29, 31, 31 !important;
--WDS-systems-chat-background-wallpaper: #000000 !important;
--WDS-systems-chat-background-wallpaper-RGB: 22, 23, 23 !important;
--WDS-systems-chat-foreground-wallpaper: rgba(255, 255, 255, .1) !important;
--WDS-systems-chat-foreground-wallpaper-RGB: 255, 255, 255 !important;
--WDS-systems-chat-surface-composer: #000000 !important;
--WDS-systems-chat-surface-composer-RGB: 36, 38, 38 !important;
--WDS-systems-chat-surface-tray: #000000 !important;
--WDS-systems-chat-surface-tray-RGB: 22, 23, 23 !important;
--WDS-systems-status-seen: #757778 !important;
--WDS-systems-status-seen-RGB: 117, 119, 120 !important;
--x1lh8xxe: 9999px !important;
--x5t84p7: 16px !important;
--x15rupc7: 4px !important;
--x1qa5nmm: 6px !important;
--xbjhqfc: 0px !important;
--x14m3oik: 8px !important;
--xb871un: 12px !important;
--x1qxzflc: 24px !important;
--x83gkqu: 28px !important;
--xkjhph: 0 12px 16px -4px rgb(10 10 10 / .1) !important;
--x1j6lpam: 16px !important;
--xpaog5i: 20px !important;
--x3s3u4o: 4px !important;
--xbevxdb: 32px !important;
--x190aigg: 2px !important;
--x1kja0qa: 40px !important;
--x1qxx2f: 8px !important;
--xkyfeqk: 12px !important;
--xevgpr9: 24px !important;
--xievq3n: 28px !important;
}

._ak9y, ._ak9t {
background-color: #000000 !important;
}
`;

function addGlobalStyle(css) {
var head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}

if (typeof GM_addStyle !== "undefined") {
GM_addStyle(css);
} else {
addGlobalStyle(css);
}

})();