Discord Custom CSS

Allows you to set a custom background for Discord and other cool effects!

Versão de: 24/03/2018. Veja: a última versão.

Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/39893/260992/Discord%20Custom%20CSS.js

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name         Discord Custom CSS
// @namespace    https://discord.gg/BwqMNRn
// @version      2.0
// @description  Allows you to set a custom background for Discord and other cool effects!
// @author       Lucario
// @include      https://discordapp.com/*
// @include      http://discordapp.com/*
// @exclude      https://discordapp.com/invite/*
// @exclude      http://discordapp.com/invite/*
// @exclude      https://discordapp.com/oauth2/*
// @exclude      http://discordapp.com/oauth2/*
// @exclude      https://discordapp.com/developers/*
// @exclude      http://discordapp.com/developers/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

var alpha = 0;
var popoutAlpha = 0.5;
var hoverAlpha = 0.2;
var backgroundImage = "https://cdn.discordapp.com/attachments/424742013410476035/427152919607902228/albert.png";
var stretchImage = false; //BUG (MAYBE) FIXED!!!

const divWhitelistIDs = [
    "user-profile-modal"
];

const divWhitelistClasses = [
    "inner-1_1f7b",
    "tab-bar-container",
    "tab-bar",
    "tab-bar-item",
    "avatar-wrapper",
    "avatar-profile",
    "status",
    "header-info",
    "header-info-inner",
    "discord-tag",
    "activity",
    "scroller-wrap fade",
    "guilds scroller",
    "additional-actions-icon",
    "section",
    "section-header",
    "note",
    "guild",
    "avatar-large",
    "guild-name",
    "guild-nick",
    "guild-inner",
    "avatar-large",
    "context-menu",
    "item",
    "badge",
    "new-messages-indicator-guild",
    "popout-menu",
    "popout-menu-item",
    "popout-menu-item-label",
    "popout-menu-icon",
    "wrapper-2xO9RX",
    "user-popout",
    "nickname",
    "username-wrapper",
    "label",
    "inner-1_1f7b",
    "upload-modal",
    "filename",
    "description",
    "footer",
    "comment",
    "uploadInput-3oaE4N",
    "emojiButtonNormal-2yO7yT emojiButton-3c_qrT emojiButton-38mF6t",
    "spriteNormal-3BYqCK sprite-3pvJkd",
    "innerEnabled-gLHeOL inner-3if5cm flex-3B1Tl4 innerNoAutocomplete-kaUXJZ",
    "channelTextAreaEnabled-c05Zpy channelTextArea-1HTP3C channel-text-area-upload margin-top-8",
    "emojiButtonHovered-2DiAsP emojiButton-3c_qrT emojiButton-38mF6t",
    "spriteHovered-2ymMOw sprite-3pvJkd",
    "emoji-picker",
    "header",
    "dimmer",
    "category",
    "sprite-item",
    "diversity-selector",
    "scrollerWrap-2uBjct",
    "row",
    "sticky-header",
    "emoji-item",
    "popout",
    "categories",
    "update-notice",
    "protip",
    "tip",
    "modal-3HOjGZ",
    "header-3sp3cE",
    "inner-tqJwAU",
    "selectable-prgIYK",
    "form-inner",
    "switchWrapper-3sSQdm",
    "switch-3lyafC",
    "track-1h2wOF",
    "flexChild-1KGW5q",
    "date-1aJe8-",
    "small-3-03j1 size12-1IGJl9 height16-1qXrGy primary-2giqSn",
    "bar-2cFRGz",
    "embed",
    "embed-color-pill",
    "actions",
    "action create",
    "action join",
    "action-header",
    "action-body",
    "action-icon",
    "unread-23Kvxk",
    "or",
    "form-actions",
    "control-group",
    "instructions",
    "region-select",
    "region-select-inner",
    "region-select-flag",
    "region-select-name",
    "help-text",
    "avatar-uploader",
    "avatar-uploader-inner",
    "avatar-uploader-acronym",
    "avatar-uploader-hint",
    "rtc-connection-popout",
    "sparkline",
    "popout-bottom",
    "avatar-hint",
    "avatar-popout",
    "quick-message-wrapper",
    "channel-name",
    "icon-friends",
    "connected-accounts",
    "connected-account",
    "connected-account-name",
    "connected-account-name-inner",
    "connected-account-open-icon",
    "friend",
    "title",
    "subtitle",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStart-pnSyE6 noWrap-v6g9vO",
    "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO switchItem-1uofoz marginBottom20-2Ifj-2",
    "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO switchItem-1uofoz marginBottom20-2Ifj-2 disabled-2c1Mfv",
    "description-3MVziF formText-1L-zZB description-3Ijq-M marginBottom20-2Ifj-2 modeDefault-389VjU primary-2giqSn",
    "ui-form-item",
    "title-1M-Ras",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO",
    "info-1Z508c",
    "contentsDefault-nt2Ym5 contents-4L4hQM contentsFilled-3M8HCx contents-4L4hQM",
    "instant-invite-modal",
    "expire-text",
    "checkbox",
    "checkbox-inner",
    "blurb",
    "form-header",
    "control-groups",
    "Select has-value",
    "Select-control",
    "Select-placeholder",
    "Select-input",
    "settings-right",
    "settings-inner",
    "radio",
    "radio-inner",
    "radio-container",
    "radio-button",
    "notification-settings-modal-channel-settings-header",
    "notification-settings-modal-channel-settings-list",
    "channel-notification-settings",
    "flex-horizontal flex-spacer content",
    "flex-horizontal flex-spacer content-inner",
    "flex-vertical flex-spacer",
    "scroller-wrap",
    "contentsDefault-nt2Ym5 contents-4L4hQM contentsLink-2ScJ_P contents-4L4hQM",
    "medium-2KnC-N size16-3IvaX_ height20-165WbF primary-2giqSn",
    "embed-author",
    "embed-content",
    "embed-content-inner",
    "embed-field",
    "embed-field-name",
    "embed-field-value",
    "embed-fields",
    "spacing-3XGYwJ marginBottom20-2Ifj-2 medium-2KnC-N size16-3IvaX_ height20-165WbF primary-2giqSn",
    "slider",
    "item-slider",
    "slider-handle",
    "slider-handle-track",
    "Select-value",
    "emoji-alias-input",
    "emoji-row-text",
    "emoji-uploader",
    "description-3MVziF",
    "connection-status",
    "connecting",
    "connecting-inner",
    "quote",
    "attribution",
    "connecting-problems",
    "connecting-problems-text",
    "connecting-problems-buttons",
    "wrapperHoveredText-1PA_Uk",
    "upload-modal-in",
    "upload-drop-modal",
    "upload-area",
    "bgScale",
    "autocomplete-1TnWNR",
    "typing",
    "file",
    "settings-actions",
    "toolbar-badge",
    "results-group",
    "history",
    "search-option",
    "option",
    "empty"
];

const recursiveWhitelistClasses = {
    "body": ["section roles", "section notes"],
    "scroller-fzNley": ["sticky-header"],
    "icons": ["wrap-one"]
};

const zeroAlphaClasses = [
    "member-inner",
    "member-username",
    "member-activity",
    "message",
    "message-text",
    "markup",
    "body",
    "titlebar",
    "titlebar-edge",
    "accessory",
    "content-1orzGj",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO td z-index-boost",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyEnd-1ceqOU alignCenter-3VxkQP noWrap-v6g9vO td z-index-boost",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO",
    "avatar-xsmall",
    "code-1RiHF2",
    "countdown-column",
    "username",
    "flex-lFgbSz flex-3B1Tl4 vertical-3X17r5 flex-3B1Tl4 directionColumn-2h-LPR justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-v6g9vO name-and-tag",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO ui-role-list",
    "overflow-button",
    "default-3bB32Y formText-1L-zZB tag modeDefault-389VjU primary-2giqSn",
    "default-3bB32Y formText-1L-zZB name modeDefault-389VjU primary-2giqSn",
    "role-wrapper",
    "member",
    "nameDefault-Lnjrwm",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignCenter-3VxkQP noWrap-v6g9vO margin-reset",
    "nameDefaultText-QoumjC",
    "scroller-fzNley scroller-NXV0-d",
    "flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyStart-2yIZo0 alignStart-pnSyE6 noWrap-v6g9vO wrapperDefault-1Dl4SS",
    "marginReset-1YolDJ",
    "content-2mSKOj",
    "wrapper-fDmxzK",
    "containerDefault-7RImuF",
    "nameUnreadText-1pxldj",
    "iconSpacing-5GIHkT",
    "nameSelectedText-32NDX5",
    "modal-image",
    "accountDetails-15i-_e",
    "button-1aU9q1",
    "nameDefaultVoice-1swZoh",
    "nameHoveredVoice-TIoHRJ",
    "wrapper-2ldvyE",
    "header-toolbar",
    "search",
    "attachment-image",
    "DraftEditor-root",
    "public-DraftEditorPlaceholder-root",
    "public-DraftEditorPlaceholder-inner",
    "DraftEditor-editorContainer",
    "public-DraftEditor-content",
    "public-DraftStyleDefault-block public-DraftStyleDefault-ltr",
    "nameHoveredText-2FFqiz",
    "search-bar-icon",
    "nameHovered-1YFSWq",
    "nameMutedText-1YDcP-",
    "nameDefault-Lnjrwm",
    "topic",
    "messages",
    "status-text",
    "status-icon-text",
    "helper",
    "message-group",
    "avatar-small",
    "friends-column",
    "friends-row",
    "friends-table",
    "friends-table-header",
    "channel-activity",
    "channel private",
    "scroller-fzNley",
    "filename",
    "speed",
    "progress",
    "attachment",
    "icon-file",
    "upload",
    "wrap-one",
    "wrap-two",
    "wrap-three",
    "icon one",
    "icon two",
    "icon three",
    "autocompleteInner-N7OQf1",
    "autocompleteRowVertical-3_UxVA",
    "xsmall-2rXiD4",
    "avatarStatus-3VdB8Y",
    "selector-nbyEfM",
    "descriptionUsername-1quCGz",
    "descriptionDiscriminator-3KCIMj",
    "marginLeft8-34JoM2",
    "contentTitle-sL6DrN",
    "nameDefault-1I0lx8",
    "userDefault-2_cnT0",
    "draggable-3SphXU",
    "avatarContainer-303pFz",
    "avatarDefault-3jtQoc",
    "iconSpacing-1WJZFe",
    "nameLockedVoice-wNOMNa",
    "content-249Pr9",
    "description-YnaVYa",
    "edit-message",
    "edit-container-outer",
    "edit-container-inner",
    "edit-operation",
    "spacing-CsDO_x",
    "btn-option",
    "btn-reaction",
    "search-learn-more",
    "search-clear-history",
    "header-tab-bar-wrapper",
    "mention-filter",
    "value",
    "channel-separator",
    "action-buttons",
    "jump-button",
    "text",
    "search-for",
    "keybind-shortcut-dim",
    "embed-inner",
    "empty-icon-guilds",
    "empty-text",
    "empty-icon-friends",
    "system-message-content",
    "system-message",
    "system-message-icon",
    "attachment-inner",
    "metadata"
];

function hasWhitelistedClass(div){
    var classes = div.className.split(" ");
    for (const w of divWhitelistClasses){
        if (div.className == w){
            return true;
        }
        for (const c of classes){
            if (c == w){
                return true;
            }
        }
    }
    return false;
}

function hasZeroAlphaClass(div){
    var classes = div.className.split(" ");
    for (const w of zeroAlphaClasses){
        if (div.className == w){
            return true;
        }
        for (const c of classes){
            if (c == w){
                return true;
            }
        }
    }
    return false;
}

function recursivelyWalk(nodes, cb) {
    for (const node of nodes){
        var ret = cb(node);
        if (ret) {
            return ret;
        }
        if (node.childNodes && node.childNodes.length) {
            var ret = recursivelyWalk(node.childNodes, cb);
            if (ret) {
                return ret;
            }
        }
    }
}

function checkAllRecursiveWalks(d){
    var returnData = false;
    Object.keys(recursiveWhitelistClasses).forEach((k) => {
        d.className.split(" ").forEach((n) => {
            if (k == n) {
                recursiveWhitelistClasses[k].some((cc) => {
                    if (recursivelyWalk(d.childNodes, (node) => node.className == cc)){
                        returnData = true;
                        return true;
                    }
                });
            }
        });
        if (returnData === true) return;
    });
    return returnData;
}

var observer = new MutationObserver((mutations) => {
    mutations = mutations.map(m => m.target).filter(m => m.tagName && m.tagName.toUpperCase() == "DIV");
    //console.log(mutations);
    if (mutations.length < 1) return;
    [].forEach.call(document.getElementsByTagName("div"), d => {
        if (d.style.backgroundColor == `rgba(0,0,0,${alpha})` || d.style.backgroundColor == `rgba(0,0,0,${popoutAlpha})`) return;
        if (d.className == "connecting"){
            Object.assign(d.style,{backgroundColor: `#888`, backgroundImage: `url("${backgroundImage}")`, backgroundRepeat: `no-repeat`, webkitBackgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, mozBackroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, oBackgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`, backgroundSize: `${stretchImage ? "100vw 100vh" : "cover"}`});
            return;
        }
        if (d.className == "search" && d.parent){
            if (d.parent.className == "theme-dark" || d.parent.className == "theme-light"){
                d.parent.style.backgroundColor = "rgb(0,0,0,0)";
            }
        }
        if (d.className == "channel private"){
            d.style.opacity = 0.7;
        }
        if (!d.className && !d.id) return;
        if (checkAllRecursiveWalks(d)){
            return;
        }
        if (d.className == "messages-popout scroller"){
            d.style.backgroundColor = `rgba(0,0,0,${popoutAlpha})`;
            return;
        }
        if (hasZeroAlphaClass(d)){
            d.style.backgroundColor = "rgba(0,0,0,0)";
        }else if ((divWhitelistIDs.indexOf(d.id) < 0) && !hasWhitelistedClass(d)){
            d.style.backgroundColor = `rgba(0,0,0,${alpha})`;
        }
    });
    [].forEach.call(document.getElementsByTagName("a"), a => {
        if (!a.href) return;
        if (a.href.endsWith("/channels/@me") && a.draggable !== false && a.style.backgroundColor !== `rgba(0,0,0,${alpha})`){
            a.style.backgroundColor = `rgba(0,0,0,${alpha})`;
        }
    });
});
observer.observe(document.getElementsByTagName("body")[0], {attributes: true, childList: true, characterData: true, subtree: true});

var css = `
.message-group-blocked {display:none;}
body {background-color:#888;background-image: url("${backgroundImage}");background-repeat: no-repeat;-webkit-background-size: ${stretchImage ? "100vw 100vh" : "cover"};-moz-background-size: ${stretchImage ? "100vw 100vh" : "cover"};-o-background-size: ${stretchImage ? "100vw 100vh" : "cover"};background-size: ${stretchImage ? "100vw 100vh" : "cover"};}
.theme-dark .selectorSelected-2M0IGv {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
.theme-light .selectorSelected-2M0IGv {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
.theme-dark .autocomplete-1TnWNR {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${popoutAlpha})),to(rgba(20,20,20,${popoutAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${popoutAlpha}) 85%,rgba(20,20,20,${popoutAlpha}));}
.theme-light .autocomplete-1TnWNR {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${popoutAlpha})),to(rgba(166,166,166,${popoutAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${popoutAlpha}) 85%,rgba(166,166,166,${popoutAlpha}));}
.theme-dark .channel-members .member.popout-open, .theme-dark .channel-members .member:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
.theme-light .channel-members .member.popout-open, .theme-light .channel-members .member:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
.theme-dark .channel-members .member:hover .member-username{color:#fff;}
.theme-light .channel-members .member:hover .member-username{color:#222;}
.theme-dark .channel-members .member.popout-open .status,.theme-dark .channel-members .member:hover .status{border-color:rgba(16,16,16,${hoverAlpha});}
.theme-light .channel-members .member.popout-open .status,.theme-light .channel-members .member:hover .status{border-color:rgba(162,162,162,${hoverAlpha});}
.theme-dark .channel-members-loading, .theme-light .channel-members-loading{background-color:rgba(0,0,0,0);}
.theme-dark .channel-members-loading .background, .theme-light .channel-members-loading .background{background-image:none;background-color:rgba(0,0,0,0);}
.theme-dark .channel-members-loading .heading, .theme-light .channel-members-loading .heading{background-image:none;background-color:rgba(0,0,0,0);}
.theme-dark .channel-members-loading .member, .theme-light .channel-members-loading .member{background-image:none;background-color:rgba(0,0,0,0);}
.theme-dark .channel-members-loading .member:nth-child(2n-4),.theme-dark .channel-members-loading .member:nth-child(7n-1), .theme-light .channel-members-loading .member:nth-child(2n-4),.theme-light .channel-members-loading .member:nth-child(7n-1){background-image:none;background-color:rgba(0,0,0,0);}
.theme-dark .channel-members-loading .member:nth-child(3n+2),.theme-dark .channel-members-loading .member:nth-child(7n+4), .theme-light .channel-members-loading .member:nth-child(3n+2),.theme-light .channel-members-loading .member:nth-child(7n+4){background-image:none;background-color:rgba(0,0,0,0);}
.channel-members .member{display:-webkit-box;display:-ms-flexbox;display:flex;color:rgba(16,16,16,${hoverAlpha});padding:5px 16px 5px 30px;font-weight:500;cursor:pointer;line-height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;}
.theme-dark .wrapperHoveredText-1PA_Uk:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(16,16,16,${hoverAlpha})),to(rgba(20,20,20,${hoverAlpha})));background:linear-gradient(90deg,rgba(16,16,16,${hoverAlpha}) 85%,rgba(20,20,20,${hoverAlpha}));}
.theme-light .wrapperHoveredText-1PA_Uk:hover {background:-webkit-gradient(linear,left top,right top,color-stop(85%,rgba(162,162,162,${hoverAlpha})),to(rgba(166,166,166,${hoverAlpha})));background:linear-gradient(90deg,rgba(162,162,162,${hoverAlpha}) 85%,rgba(166,166,166,${hoverAlpha}));}
.theme-dark .chat form .typing {background-color:rgba(0,0,0,0);}
.theme-light .chat form .typing {background-color:rgba(0,0,0,0);}
.theme-dark .chat>.content{background-color:rgba(0,0,0,0);}
.theme-light .chat>.content{background-color:rgba(0,0,0,0);}
.scroller-wrap .scroller::-webkit-scrollbar-track-piece {visibility: hidden;}
.theme-dark .scroller-wrap .scroller::-webkit-scrollbar-thumb {border: 0px;background-color: rgba(0,0,0,0.4)!important;}
.theme-light .scroller-wrap .scroller::-webkit-scrollbar-thumb {border: 0px;background-color: rgba(255,255,255,0.4)!important;}
.scroller-wrap .scroller::-webkit-scrollbar {width: 10px;}
.theme-dark .popout-bottom {background: rgba(0,0,0,${popoutAlpha});}
.theme-light .popout-bottom {background: rgba(255,255,255,${popoutAlpha});}
.results-group .option:after {background: none;}
.theme-dark .results-group .user, .theme-dark .results-group .option, .theme-dark .search-popout .search-option, .theme-dark .option.search-query.selected {background: rgba(0,0,0,${popoutAlpha * 0.5});}
.theme-light .results-group .user, .theme-light .results-group .option, .theme-light .search-popout .search-option, .theme-light .option.search-query.selected {background: rgba(0,0,0,${popoutAlpha * 0.5});}
.theme-dark .results-group .user.selected, .theme-dark .results-group .option.selected, .theme-dark .search-popout .search-option.selected {background: rgba(0,0,0,${popoutAlpha * 0.75});}
.theme-light .results-group .user.selected, .theme-light .results-group .option.selected, .theme-light .search-popout .search-option.selected {background: rgba(0,0,0,${popoutAlpha * 0.75});}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
}else{
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);