☰

Greasy Fork is available in English.

DiscordColorways

The Definitive way of styling Discord and select themes

// ==UserScript==
// @name         DiscordColorways
// @version      5.6.0
// @description  The Definitive way of styling Discord and select themes
// @author       DaBluLite
// @match        https://discord.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=discord.com
// @grant        none
// @namespace    https://github.com/DaBluLite/DiscordColorways
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    var _mods_unparsed = webpackChunkdiscord_app.push([[Symbol("DiscordColorways")], {}, e => e]);
    var _mods_cache = _mods_unparsed.c;
    var _mods = Object.values(_mods_cache);
    webpackChunkdiscord_app.pop();

    function find(filter, { isIndirect = false, isWaitFor = false } = {}) {
        if (typeof filter !== "function")
            throw new Error("Invalid filter. Expected a function got " + typeof filter);

        for (const key in _mods_cache) {
            const mod = _mods_cache[key];
            if (!mod?.exports) continue;

            if (filter(mod.exports)) {
                return isWaitFor ? [mod.exports, Number(key)] : mod.exports;
            }

            if (typeof mod.exports !== "object") continue;

            if (mod.exports.default && filter(mod.exports.default)) {
                const found = mod.exports.default;
                return isWaitFor ? [found, Number(key)] : found;
            }

            // the length check makes search about 20% faster
            for (const nestedMod in mod.exports) if (nestedMod.length <= 3) {
                const nested = mod.exports[nestedMod];
                if (nested && filter(nested)) {
                    return isWaitFor ? [nested, Number(key)] : nested;
                }
            }
        }

        if (!isIndirect) {
            console.error('"find" found no module');
            return null;
        }

        return isWaitFor ? [null, null] : null;
    }

    const filters = {
        byProps: (...props) =>
            props.length === 1
                ? m => m[props[0]] !== void 0
                : m => props.every(p => m[p] !== void 0),

        byCode: (...code) => m => {
            if (typeof m !== "function") return false;
            const s = Function.prototype.toString.call(m);
            for (const c of code) {
                if (!s.includes(c)) return false;
            }
            return true;
        },
        byStoreName: (name) => m => m.constructor?.displayName === name,
        bySource: (...fragments) => {
            return (target) => {
                while (target instanceof Object && "$$typeof" in target) {
                    target = target.render ?? target.type;
                }
                if (target instanceof Function) {
                    const source = target.toString();
                    const renderSource = target.prototype?.render?.toString();
                    return fragments.every((fragment) => typeof fragment === "string" ? (source.includes(fragment) || renderSource?.includes(fragment)) : (fragment(source) || renderSource && fragment(renderSource)));
                }
                else {
                    return false;
                }
            };
        },
        byKeys: (...keys) => {
            return (target) => target instanceof Object && keys.every((key) => key in target);
        }
    };

    function findByCode(...code) {
        const res = find(filters.byCode(...code), { isIndirect: true });
        if (!res) {
            console.error('"findByCode" found no module');
            return null;
        }
        return res;
    }

    function findByProps(...props) {
        const res = find(filters.byProps(...props), { isIndirect: true });
        if (!res) {
            console.error('"findByProps" found no module');
            return null;
        }
        return res;
    }

    function waitFor(filter, callback) {
        if (typeof filter === "string")
            filter = filters.byProps(filter);
        else if (Array.isArray(filter))
            filter = filters.byProps(...filter);
        else if (typeof filter !== "function")
            throw new Error("filter must be a string, string[] or function, got " + typeof filter);

        const [existing, id] = find(filter, { isIndirect: true, isWaitFor: true });
        if (existing) return void callback(existing, id);

        subscriptions.set(filter, callback);
    }

    function waitForStore(name, cb) {
        waitFor(filters.byStoreName(name), cb);
    }

    function findAll(filter) {
        if (typeof filter !== "function")
            throw new Error("Invalid filter. Expected a function got " + typeof filter);

        const ret = [];
        for (const key in _mods_cache) {
            const mod = _mods_cache[key];
            if (!mod?.exports) continue;

            if (filter(mod.exports))
                ret.push(mod.exports);
            else if (typeof mod.exports !== "object")
                continue;

            if (mod.exports.default && filter(mod.exports.default))
                ret.push(mod.exports.default);
            else for (const nestedMod in mod.exports) if (nestedMod.length <= 3) {
                const nested = mod.exports[nestedMod];
                if (nested && filter(nested)) ret.push(nested);
            }
        }

        return ret;
    }

    const { ModalRoot, ModalContent, ModalHeader, ModalFooter, openModal, TextInput, Tooltip, FormTitle, Text, Button, Switch, showToast, ScrollerThin, FormSection } = findByProps("ModalRoot");
    const ModalText = findByProps("ModalRoot").Text;
    const React = findByProps("createContext");
    const PillContainer = findByCode("hovered", "selected");
    const subscriptions = new Map();
    const listeners = new Set();
    const { marginBottom20 } = findByProps("marginBottom20");

    const plugin = {
        name: "DiscordColorways",
        description:
            "A plugin that offers easy access to simple color schemes/themes for Discord, also known as Colorways",
        pluginVersion: "5.6.0",
        creatorVersion: "1.15",
        makeSettingsCategories: ({ ID }) => {
            return [
                {
                    section: ID.HEADER,
                    label: "Discord Colorways",
                    className: "vc-settings-header"
                },
                {
                    section: "ColorwaysSelector",
                    label: "Colors",
                    element: SelectorSettingsTab,
                    className: "dc-colorway-selector"
                },
                {
                    section: "ColorwaysSettings",
                    label: "Settings & Tools",
                    element: ColorwaySelectorBtn,
                    className: "dc-colorway-settings"
                },
                {
                    section: ID.DIVIDER
                }
            ].filter(Boolean);
        },
        ColorwaysBtn: [React.createElement(ColorwaySelectorBtn)],
        ColorwaysBtnBottom: [React.createElement(ColorwaySelectorBtn, { position: "bottom" })],
        patches: [
            {
                find: "Messages.ACTIVITY_SETTINGS",
                replacement: [{
                    match: /\{section:([a-zA-Z])\.ID\.HEADER,\s*label:([a-zA-Z])\.[a-zA-Z]\.Messages\.BILLING_SETTINGS\}/,
                    replace: "...DiscordColorways_plugin.makeSettingsCategories($1),$&"
                }],
                plugin: "DiscordColorways"
            },
            {
                find: "Messages.SERVERS,children",
                replacement: [{
                    match: /(Messages\.SERVERS,children:)(.+?default:return null\}\}\)\))/,
                    replace: "$1DiscordColorways_plugin.ColorwaysBtn.concat($2).concat(DiscordColorways_plugin.ColorwaysBtnBottom)"
                }],
                plugin: "DiscordColorways"
            }
        ]
    };

    globalThis.DiscordColorways_plugin = { ...plugin };

    class DataStore {
        defaultGetStoreFunc;
        promisifyRequest = (request) => {
            return new Promise((resolve, reject) => {
                request.oncomplete = request.onsuccess = () => resolve(request.result);
                request.onabort = request.onerror = () => reject(request.error);
            });
        };
        createStore = (dbName, storeName) => {
            const request = indexedDB.open(dbName);
            request.onupgradeneeded = () => request.result.createObjectStore(storeName);
            const dbp = this.promisifyRequest(request);

            return (txMode, callback) =>
                dbp.then(db =>
                    callback(db.transaction(storeName, txMode).objectStore(storeName))
                );
        };
        defaultGetStore = () => {
            if (!this.defaultGetStoreFunc) {
                this.defaultGetStoreFunc = this.createStore("ColorwaysData", "ColorwaysStore");
            }
            return this.defaultGetStoreFunc;
        };
        get = (key, customStore = this.defaultGetStore()) => {
            return customStore("readonly", store => this.promisifyRequest(store.get(key)));
        };
        set = (key, value, customStore = this.defaultGetStore()) => {
            return customStore("readwrite", store => {
                store.put(value, key);
                return this.promisifyRequest(store.transaction);
            });
        };
        setMany = (entries, customStore = this.defaultGetStore()) => {
            return customStore("readwrite", store => {
                entries.forEach(entry => store.put(entry[1], entry[0]));
                return this.promisifyRequest(store.transaction);
            });
        };
        getMany = (keys, customStore = this.defaultGetStore()) => {
            return customStore("readonly", store =>
                Promise.all(keys.map(key => this.promisifyRequest(store.get(key))))
            );
        };
        update = (key, updater, customStore = this.defaultGetStore()) => {
            return customStore(
                "readwrite",
                store =>
                    new Promise((resolve, reject) => {
                        store.get(key).onsuccess = function () {
                            try {
                                store.put(updater(this.result), key);
                                resolve(this.promisifyRequest(store.transaction));
                            } catch (err) {
                                reject(err);
                            }
                        };
                    })
            );
        };
        del = (key, customStore = this.defaultGetStore()) => {
            return customStore("readwrite", store => {
                store.delete(key);
                return this.promisifyRequest(store.transaction);
            });
        };
        delMany = (keys, customStore = this.defaultGetStore()) => {
            return customStore("readwrite", store => {
                keys.forEach(key => store.delete(key));
                return this.promisifyRequest(store.transaction);
            });
        };
        clear = (customStore = this.defaultGetStore()) => {
            return customStore("readwrite", store => {
                store.clear();
                return this.promisifyRequest(store.transaction);
            });
        };
        eachCursor = (store, callback) => {
            store.openCursor().onsuccess = function () {
                if (!this.result) return;
                callback(this.result);
                this.result.continue();
            };
            return this.promisifyRequest(store.transaction);
        };
        keys = (customStore = this.defaultGetStore()) => {
            return customStore("readonly", store => {
                // Fast path for modern browsers
                if (store.getAllKeys) {
                    return this.promisifyRequest(store.getAllKeys());
                }

                const items = [];

                return this.eachCursor(store, cursor => items.push(cursor.key)).then(() => items);
            });
        };
        values = (customStore = this.defaultGetStore()) => {
            return customStore("readonly", store => {
                if (store.getAll) {
                    return this.promisifyRequest(store.getAll());
                }

                const items = [];

                return this.eachCursor(store, cursor => items.push(cursor.value)).then(
                    () => items
                );
            });
        };
        entries = (customStore = this.defaultGetStore()) => {
            return customStore("readonly", store => {
                if (store.getAll && store.getAllKeys) {
                    return Promise.all([
                        this.promisifyRequest(store.getAllKeys()),
                        this.promisifyRequest(store.getAll())
                    ]).then(([keys, values]) => keys.map((key, i) => [key, values[i]]));
                }

                const items = [];

                return customStore("readonly", store =>
                    this.eachCursor(store, cursor => items.push([cursor.key, cursor.value])).then(
                        () => items
                    )
                );
            });
        };
    }

    class ColorwayCSS {
        get = () => { return { name: document.getElementById("activeColorwayCSS")?.getAttribute("data-colorway-id") || "", css: document.getElementById("activeColorwayCSS")?.textContent || "" }; };
        set = (e, t) => {
            if (!document.getElementById("activeColorwayCSS")) {
                var activeColorwayCSS = document.createElement("style");
                activeColorwayCSS.id = "activeColorwayCSS";
                activeColorwayCSS.textContent = e;
                activeColorwayCSS.setAttribute("data-colorway-id", t);
                document.head.append(activeColorwayCSS);
            } else {
                document.getElementById("activeColorwayCSS").textContent = e;
                document.getElementById("activeColorwayCSS").setAttribute("data-colorway-id", t);
            }
        };
        remove = () => document.getElementById("activeColorwayCSS").remove();
        openSelectorModal = () => openModal(props => React.createElement(SelectorModal, { modalProps: props }));
    };

    const [colorwayCSS, dataStore] = [new ColorwayCSS(), new DataStore()];

    var SelectedChannelStore, SelectedGuildStore, UserStore;
    const WEBPACK_CHUNK = "webpackChunkdiscord_app";
    let webpackChunk;
    if (window[WEBPACK_CHUNK]) {
        patchPush();
    } else {
        Object.defineProperty(window, WEBPACK_CHUNK, {
            get: () => webpackChunk,
            set: v => {
                if (v?.push !== Array.prototype.push) {
                    console.info(`Patching ${WEBPACK_CHUNK}.push`);
                    _mods_unparsed = v.push([[Symbol("DiscordColorways")], {}, e => e]);
                    patchPush();
                    delete window[WEBPACK_CHUNK];
                    window[WEBPACK_CHUNK] = v;
                }
                webpackChunk = v;
            },
            configurable: true
        });
    }

    function patchPush() {
        function handlePush(chunk) {
            try {
                const modules = chunk[1];
                const patches = plugin.patches;

                for (const id in modules) {
                    let mod = modules[id];
                    let code = mod.toString().replaceAll("\n", "");
                    if (code.startsWith("function(")) {
                        code = "0," + code;
                    }
                    const originalMod = mod;
                    const patchedBy = new Set();

                    const factory = modules[id] = function (module, exports, require) {
                        try {
                            mod(module, exports, require);
                        } catch (err) {
                            if (mod === originalMod) throw err;

                            console.error("Error in patched chunk", err);
                            return void originalMod(module, exports, require);
                        }

                        if (module.exports === window) {
                            Object.defineProperty(require.c, id, {
                                value: require.c[id],
                                enumerable: false,
                                configurable: true,
                                writable: true
                            });
                            return;
                        }

                        const numberId = Number(id);

                        for (const callback of listeners) {
                            try {
                                callback(exports, numberId);
                            } catch (err) {
                                console.error("Error in webpack listener", err);
                            }
                        }

                        for (const [filter, callback] of subscriptions) {
                            try {
                                if (filter(exports)) {
                                    subscriptions.delete(filter);
                                    callback(exports, numberId);
                                } else if (typeof exports === "object") {
                                    if (exports.default && filter(exports.default)) {
                                        subscriptions.delete(filter);
                                        callback(exports.default, numberId);
                                    }

                                    for (const nested in exports) if (nested.length <= 3) {
                                        if (exports[nested] && filter(exports[nested])) {
                                            subscriptions.delete(filter);
                                            callback(exports[nested], numberId);
                                        }
                                    }
                                }
                            } catch (err) {
                                console.error("Error while firing callback for webpack chunk", err);
                            }
                        }
                    };
                    try {
                        factory.toString = () => mod.toString();
                        factory.original = originalMod;
                    } catch { }

                    for (let i = 0; i < patches.length; i++) {
                        const patch = patches[i];
                        if (patch.predicate && !patch.predicate()) continue;

                        if (code.includes(patch.find)) {
                            patchedBy.add(patch.plugin);
                            for (const replacement of patch.replacement) {
                                if (replacement.predicate && !replacement.predicate()) continue;
                                const lastMod = mod;
                                const lastCode = code;

                                try {
                                    const newCode = code.replace(replacement.match, replacement.replace);
                                    if (newCode === code && !patch.noWarn) {
                                        console.warn(`Patch by ${patch.plugin} had no effect (Module id is ${id}): ${replacement.match}`);
                                    } else {
                                        code = newCode;
                                        mod = (0, eval)(`// Webpack Module ${id} - Patched by ${[...patchedBy].join(", ")}\n${newCode}\n//# sourceURL=WebpackModule${id}`);
                                    }
                                } catch (err) {
                                    console.error(`Patch by ${patch.plugin} errored (Module id is ${id}): ${replacement.match}\n`, err);

                                    code = lastCode;
                                    mod = lastMod;
                                    patchedBy.delete(patch.plugin);
                                }
                            }

                            if (!patch.all) patches.splice(i--, 1);
                        }
                    }
                }
            } catch (err) {
                console.error("Error in handlePush", err);
            }

            return handlePush.original.call(window[WEBPACK_CHUNK], chunk);
        }

        handlePush.original = window[WEBPACK_CHUNK].push;
        Object.defineProperty(window[WEBPACK_CHUNK], "push", {
            get: () => handlePush,
            set: v => (handlePush.original = v),
            configurable: true
        });
    }

    waitForStore("SelectedChannelStore", m => SelectedChannelStore = m);
    waitForStore("SelectedGuildStore", m => SelectedGuildStore = m);
    waitForStore("UserStore", s => UserStore = s);

    async function openUserProfile(userId) {
        const getUser = findByCode(".USER(");
        const openProfile = findByCode("friendToken", "USER_PROFILE_MODAL_OPEN");
        const guildId = SelectedGuildStore.getGuildId();
        const channelId = SelectedChannelStore.getChannelId();

        await getUser(userId);
        openProfile({
            userId,
            guildId,
            channelId,
            analyticsLocation: {
                page: guildId ? "Guild Channel" : "DM Channel",
                section: "Profile Popout"
            }
        });
    }

    var pluginCSS = `
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

.ColorwaySelectorBtn {
    height: 48px;
    width: 48px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .15s ease-out;
    background-color: var(--background-primary);
    cursor: pointer;
    color: var(--text-normal);
}

.ColorwaySelectorBtn:hover {
    background-color: var(--brand-experiment);
    border-radius: 16px;
}

.ColorwaySelectorBtn_green:not(:hover) .vc-pallete-icon {
    color: var(--green-360);
}

.ColorwaySelectorBtn_green:hover {
    background-color: var(--green-360);
}

.discordColorway {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-flow: wrap;
    flex-direction: row;
    position: relative;
    align-items: center;
    justify-content: center;
    transition: .1s;
    box-shadow: inset 0 0 0 1px var(--interactive-normal);
}

.discordColorway:hover {
    box-shadow: inset 0 0 0 1px var(--interactive-active);
}

.discordColorwayPreviewColorContainer {
    display: flex;
    flex-flow: wrap;
    flex-direction: row;
    overflow: hidden;
    border-radius: 50%;
    width: 56px;
    height: 56px;
}

.discordColorway.active {
    box-shadow: inset 0 0 0 2px var(--brand-500), inset 0 0 0 4px var(--background-primary);
}

.discordColorway.active .discordColorwayPreviewColorContainer {
    width: 52px;
    height: 52px;
}

.discordColorwayPreviewColor {
    width: 50%;
    height: 50%;
}

.discordColorway.active>.discordColorwayPreviewColor {
    width: 30px;
    height: 30px;
}

.discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(2)))>.discordColorwayPreviewColor {
    height: 100%;
    width: 100%;
}

.discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(3)))>.discordColorwayPreviewColor {
    height: 100%;
}

.discordColorwayPreviewColorContainer:not(:has(>.discordColorwayPreviewColor:nth-child(4)))>.discordColorwayPreviewColor:nth-child(3) {
    width: 100%;
}

.ColorwaySelectorWrapper {
    position: relative;
    display: flex;
    gap: 16px 24px;
    width: 100%;
    flex-wrap: wrap;
}

.colorwaySelectorModal {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--background-tertiary);
    box-shadow: var(--dark-elevation-high) !important;
    min-width: 596px;
}

.colorwaySelectorModalContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 596px;
    overflow: visible !important;
    padding: 16px !important;
    padding-right: 16px !important;
}

.ColorwaySelectorBtnContainer {
    position: relative;
    margin: 0 0 8px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 72px;
}

.colorwayCheckIconContainer {
    height: 20px;
    width: 20px;
    background-color: var(--brand-500);
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    opacity: 0;
    z-index: +1;
}

.discordColorway.active .colorwayCheckIconContainer {
    opacity: 1;
}

.colorwayCheckIcon {
    height: 20px;
    width: 20px;
    color: var(--white-500);
}

.colorwayInfoIconContainer {
    height: 20px;
    width: 20px;
    background-color: var(--brand-500);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    z-index: +1;
}

.colorwayInfoIconContainer:hover {
    background-color: var(--brand-700);
}

.discordColorway:hover .colorwayInfoIconContainer {
    opacity: 1;
    transition: .15s;
}

.colorwayInfoIcon {
    height: 20px;
    width: 20px;
    color: var(--white-500);
    padding: 2px;
}

.colorwayCreator-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 4px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    position: relative;
    color: #fff;
}

.colorwayCreator-swatchName {
    color: currentcolor;
    pointer-events: none;
}

.colorwayCreator-colorPreviews {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    position: relative;
}

.colorwayCreator-colorInput {
    width: 1px;
    height: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.colorwayCreator-menuWrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px !important;
    overflow: visible !important;
}

.colorwayCreator-modal {
    width: 620px;
    max-width: 620px;
    max-height: unset !important;
}

.colorways-creator-module-warning {
    width: 100%;
    text-align: center;
}

.colorways-creator-module-warning~.colorways-creator-module-warning {
    display: none;
}

.colorwayCreator-colorPreviews>.colorSwatch-2UxEuG,
.colorwayCreator-colorPreviews>.colorSwatch-2UxEuG>.swatch-efj8wq {
    width: 100%;
    border: none;
    position: relative;
}

.colorwaysPicker-colorLabel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.colorwayCreator-colorPreviews>.colorSwatch-2UxEuG:has([fill="var(--primary-530)"])>.colorwaysPicker-colorLabel {
    color: var(--primary-530);
}

.colorwaySelector-noDisplay {
    display: none;
}

.colorwayInfo-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--header-primary);
}

.colorwayInfo-colorSwatches {
    width: 100%;
    height: 46px;
    display: flex;
    flex-direction: row;
    margin: 12px 0;
    gap: 8px;
}

.colorwayInfo-colorSwatch {
    display: flex;
    width: 100%;
    height: 46px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.colorwayInfo-row {
    font-weight: 400;
    font-size: 20px;
    color: var(--header-secondary);
    margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    padding: 8px 12px;
}

.colorwayInfo-css {
    flex-direction: column;
    align-items: start;
}

.colorwayInfo-cssCodeblock {
    border-radius: 4px;
    border: 1px solid var(--background-accent);
    padding: 3px 6px;
    white-space: pre;
    max-height: 400px;
    overflow: auto;
    font-size: 0.875rem;
    line-height: 1.125rem;
    width: 100%;
    box-sizing: border-box;
}

.colorwayInfo-cssCodeblock::-webkit-scrollbar,
.colorwayToolbox-itemList::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.colorwayInfo-cssCodeblock::-webkit-scrollbar-corner,
.colorwayToolbox-itemList::-webkit-scrollbar-corner {
    background-color: transparent;
}

.colorwayInfo-cssCodeblock::-webkit-scrollbar-thumb,
.colorwayToolbox-itemList::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-auto-thumb);
    min-height: 40px;
}

.colorwayInfo-cssCodeblock::-webkit-scrollbar-thumb,
.colorwayInfo-cssCodeblock::-webkit-scrollbar-track,
.colorwayToolbox-itemList::-webkit-scrollbar-thumb,
.colorwayToolbox-itemList::-webkit-scrollbar-track {
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

.colorwayInfo-cssCodeblock::-webkit-scrollbar-track,
.colorwayToolbox-itemList::-webkit-scrollbar-track {
    margin-bottom: 8px;
}

.colorwaysCreator-settingCat {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    box-sizing: border-box;
    color: var(--header-secondary);
    max-height: 250px;
    overflow: hidden overlay;
}

.colorwaysCreator-settingItm {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 8px;
    justify-content: space-between;
}

.colorwaysCreator-settingItm:hover {
    background-color: var(--background-modifier-hover);
}

.colorwaysCreator-settingsList .colorwaysCreator-preset {
    justify-content: start;
    gap: 8px;
}

.colorwaysCreator-settingsList {
    overflow: auto;
    max-height: 185px;
}

.colorwaysCreator-settingCat-collapsed>.colorwaysCreator-settingsList {
    display: none;
}

.colorwaysCreator-noHeader {
    margin-top: 12px;
    margin-bottom: 12px;
}

.colorwaysCreator-noMinHeight {
    min-height: unset;
    height: fit-content;
}

.colorwaysPreview-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 270px;
    flex: 1 0 auto;
    border-radius: 4px;
    overflow: hidden;
}

.colorwaysPreview-modal {
    max-width: unset !important;
    max-height: unset !important;
    width: fit-content;
    height: fit-content;
}

.colorwaysPreview-titlebar {
    height: 22px;
    width: 100%;
    display: flex;
    flex: 1 0 auto;
}

.colorwaysPreview-body {
    height: 100%;
    width: 100%;
    display: flex;
}

.colorwayPreview-guilds {
    width: 72px;
    height: 100%;
    display: flex;
    flex: 1 0 auto;
    padding-top: 4px;
    flex-direction: column;
}

.colorwayPreview-channels {
    width: 140px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-top-left-radius: 8px;
    flex: 1 0 auto;
}

.colorwaysPreview-wrapper:fullscreen .colorwayPreview-channels {
    width: 240px;
}

.colorwayPreview-chat {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column-reverse;
}

.colorwayPreview-userArea {
    width: 100%;
    height: 40px;
    display: flex;
    flex: 1 0 auto;
}

.colorwaysPreview-wrapper:fullscreen .colorwayPreview-userArea {
    height: 52px;
}

.colorwaysPreview {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    box-sizing: border-box;
    color: var(--header-secondary);
    overflow: hidden overlay;
    margin-bottom: 4px;
}

.colorwaysPreview-collapsed .colorwaysPreview-container {
    display: none;
}

.colorwayInfo-lastCat,
.colorwaysCreator-lastCat {
    margin-bottom: 12px;
}

.colorwayPreview-guild {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}

.colorwayPreview-guildItem {
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50px;
    transition: .2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorwayPreview-guildItem:hover {
    border-radius: 16px;
}

.colorwayPreview-guildSeparator {
    width: 32px;
    height: 2px;
    opacity: .48;
    border-radius: 1px;
}

.colorwayToolbox-listItem {
    align-items: center;
    display: flex;
    border-radius: 4px;
    color: var(--interactive-normal);
    padding: 8px;
    margin: 0 -4px;
}

.colorwayToolbox-listItem:hover {
    background-color: var(--brand-experiment);
    color: var(--white-500);
    cursor: pointer;
}

.colorwayToolbox-title {
    align-items: center;
    display: flex;
    text-transform: uppercase;
    margin-top: 2px;
    padding-bottom: 8px;
    margin-bottom: 0;
}

.colorwayToolbox-list {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.colorwayToolbox-itemList {
    overflow: hidden auto;
    height: 100%;
    padding: 12px;
    padding-top: 0;
}

.colorwayToolbox-search {
    margin: 12px;
    margin-bottom: 0;
}

.colorwayToolbox-itemList::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.colorwayPreview-chatBox {
    height: 32px;
    border-radius: 6px;
    margin: 8px;
    margin-bottom: 12px;
    margin-top: 0;
    flex: 1 0 auto;
}

.colorwayPreview-filler {
    width: 100%;
    height: 100%;
}

.colorwayPreview-topShadow {
    box-shadow: 0 1px 0 hsl(var(--primary-900-hsl)/20%), 0 1.5px 0 hsl(var(--primary-860-hsl)/5%), 0 2px 0 hsl(var(--primary-900-hsl)/5%);
    width: 100%;
    height: 32px;
    flex: 1 0 auto;
    transition: background-color .1s linear;
    font-family: var(--font-display);
    font-weight: 500;
    padding: 12px 16px;
    box-sizing: border-box;
    align-items: center;
    display: flex;
}

.colorwayPreview-channels>.colorwayPreview-topShadow {
    border-top-left-radius: 8px;
}

.colorwayPreview-channels>.colorwayPreview-topShadow:hover {
    background-color: hsl(var(--primary-500-hsl)/30%);
}

.colorwaysPreview-wrapper:fullscreen .colorwayPreview-topShadow {
    height: 48px;
}

.colorwaysPreview-wrapper:fullscreen .colorwayPreview-chatBox {
    height: 44px;
    border-radius: 8px;
    margin: 16px;
    margin-bottom: 24px;
}

.colorwaysBtn-tooltipContent {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.colorwaySelector-headerIcon {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transition: transform .1s ease-out, opacity .1s ease-out;
    color: var(--interactive-normal);
}

.colorwaySelector-header {
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    box-shadow: none !important;
}

.colorwaySelector-search {
    width: 100%;
    height: 32px;
}

.colorwaySelector-searchInput {
    height: 32px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: .15s ease;
    padding: 0 12px;
}

.colorwaySelector-searchInput:hover {
    border-color: transparent;
}

.colorwaySelector-headerBtn {
    position: absolute;
    top: 64px;
    right: 20px;
}

.colorwaySelector-pill {
    border-radius: 20px;
    background-color: var(--background-tertiary);
    border: 1px solid transparent;
    box-sizing: border-box;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    height: 32px;
    overflow: hidden;
    color: var(--text-normal);
    cursor: pointer;
    transition: .15s ease
}

.colorwaySelector-pillWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.colorwaySelector-doublePillBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.theme-light .colorwaySelector-pill_selected,
.theme-light .colorwaySelector-pill:hover,
.theme-light .colorwaySelector-searchInput:focus {
    border-color: var(--brand-500);
    background-color: var(--brand-experiment-160);
}

.theme-dark .colorwaySelector-pill_selected,
.theme-dark .colorwaySelector-pill:hover,
.theme-dark .colorwaySelector-searchInput:focus {
    border-color: var(--brand-500);
    background-color: var(--brand-experiment-15a);
}

.colorwaysTooltip-tooltipPreviewRow {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.colorwaysTooltip-header {
    background-color: var(--background-primary);
    padding: 2px 8px;
    border-radius: 16px;
    height: min-content;
    color: var(--header-primary);
    margin-bottom: 2px;
    display: inline-flex;
    margin-left: -4px;
}

.colorwaySelector-pillSeparator {
    height: 24px;
    width: 1px;
    background-color: var(--primary-400);
}

.colorwaysSelector-infoRow {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

.colorwaysSelector-changelog {
    font-weight: 400;
    font-size: 20px;
    color: var(--header-secondary);
    border-radius: 4px;
    background-color: var(--background-secondary);
    padding: 8px 12px;
}

.colorwaysChangelog-li {
    position: relative;
    font-size: 16px;
    line-height: 20px;
}

.colorwaysChangelog-li::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -15px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    margin-left: -3px;
    border-radius: 50%;
    opacity: .3;
}

.theme-dark .colorwaysChangelog-li::before {
    background-color: hsl(216deg calc(var(--saturation-factor, 1)*9.8%) 90%);
}

.theme-light .colorwaysChangelog-li::before {
    background-color: hsl(223deg calc(var(--saturation-factor, 1)*5.8%) 52.9%);
}

.ColorwaySelectorWrapper .colorwayToolbox-list {
    width: 100%;
}

.ColorwaySelectorWrapper .colorwayToolbox-list .colorwaysToolbox-label {
    border-radius: 20px;
    box-sizing: border-box;
    color: var(--text-normal);
    transition: .15s ease;
    width: 100%;
    margin-left: 0;
    height: fit-content;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    cursor: default;
    max-height: 2rem;
    padding: 0 8px;
}

.ColorwaySelectorWrapper .colorwayToolbox-itemList {
    padding: 0;
    overflow: visible !important;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 0;
}

.ColorwaySelectorWrapper .colorwayToolbox-listItem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: transparent !important;
    width: calc(564px / 4);
    cursor: default;
    float: left;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ColorwaySelectorWrapper .colorwayToolbox-listItem .bi {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--background-tertiary);
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .15s ease;
    cursor: pointer;
    color: var(--interactive-normal);
}

.ColorwaySelectorWrapper .colorwayToolbox-listItem:hover {
    color: var(--interactive-normal) !important;
}

.ColorwaySelectorWrapper .colorwayToolbox-list .colorwayToolbox-listItem .bi:hover {
    border-color: var(--brand-500);
    background-color: var(--brand-experiment-15a);
    color: var(--interactive-hover) !important;
}

.colorwaysSelector-changelogHeader {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;
}

.colorwaysSelector-changelogHeader::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    margin-left: 4px;
    opacity: .6;
    background-color: currentcolor;
}

.colorwaysSelector-changelogHeader_added {
    color: var(--text-positive);
}

.colorwaysSelector-changelogHeader_fixed {
    color: hsl(359deg calc(var(--saturation-factor, 1)*87.3%) 59.8%);
}

.colorwaysSelector-changelogHeader_changed {
    color: var(--text-warning);
}

.is-mobile .colorwaySelectorModal,
.is-mobile .colorwayCreator-modal {
    width: 100vw !important;
    box-sizing: border-box;
    min-width: unset;
    border-radius: 0;
    height: 100vh;
    max-height: unset;
    border: none;
}

.is-mobile .colorwaySelectorModalContent {
    box-sizing: border-box;
    width: 100vw;
}

.is-mobile .colorwaySelector-doublePillBar {
    flex-direction: column-reverse;
    align-items: end;
}

.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child {
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    justify-content: space-between;
}

.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child>.colorwaySelector-pill {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    background-color: transparent;
    width: 100%;
    justify-content: center;
    flex: 0 0 min-content;
}

.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child>.colorwaySelector-pillSeparator {
    display: none;
}

.is-mobile .layer-fP3xEz:has(.colorwaySelectorModal, .colorwayCreator-modal) {
    padding: 0;
}

.is-mobile .ColorwaySelectorWrapper {
    justify-content: space-around;
    gap: 10px;
}

.is-mobile .colorwayToolbox-itemList {
    justify-content: space-around;
}

html:not(.is-mobile) #colorwaySelector-pill_closeSelector {
    display: none;
}

.colorwaysBtn-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.colorwaysBtn-spinnerInner {
    transform: rotate(280deg);
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    contain: paint;
}

@keyframes spinner-spinning-circle-rotate {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes spinner-spinning-circle-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 130, 200;
    }

    100% {
        stroke-dasharray: 130, 200;
        stroke-dashoffset: -124;
    }
}

.colorwaysBtn-spinnerCircular {
    animation: spinner-spinning-circle-rotate 2s linear infinite;
    height: 100%;
    width: 100%;
}

.colorwaysBtn-spinnerBeam {
    animation: spinner-spinning-circle-dash 2s ease-in-out infinite;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    fill: none;
    stroke-width: 6;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke: currentcolor;
}

.colorwaysBtn-spinnerBeam2 {
    stroke: currentcolor;
    opacity: 0.6;
    animation-delay: .15s;
}

.colorwaysBtn-spinnerBeam3 {
    stroke: currentcolor;
    opacity: 0.3;
    animation-delay: .23s;
}

.colorwaysSettings-colorwaySource {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 16px;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    min-height: 51px;
    align-items: center;
}

.colorwaysSettings-colorwaySource:hover {
    background-color: var(--background-modifier-hover);
}

.colorwaysSettings-colorwaySources {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
    border-radius: 4px;
    background-color: var(--background-secondary);
    box-sizing: border-box;
    color: var(--header-secondary);
    overflow: hidden overlay;
    margin-bottom: 4px;
}

.colorwaysSettings-modalRoot {
    min-width: 520px;
}

.colorwaysSettings-colorwaySourceLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colorwaysSettings-iconButton {
    background-color: transparent !important;
    border-radius: 0;
}

.colorwaysSettings-iconButtonInner {
    display: flex;
    gap: 4px;
    align-items: center;
}

.colorwaysSettings-modalContent {
    margin: 8px 0;
}

@keyframes loading-bar {
    0% {
        left: 0;
        right: 100%;
        width: 0;
    }

    10% {
        left: 0;
        right: 75%;
        width: 25%;
    }

    90% {
        right: 0;
        left: 75%;
        width: 25%;
    }

    100% {
        left: 100%;
        right: 0;
        width: 0;
    }
}

.colorwaysLoader-barContainer {
    width: 100%;
    border-radius: var(--radius-round);
    border: 0;
    position: relative;
    padding: 0;
}

.colorwaysLoader-bar {
    position: absolute;
    border-radius: var(--radius-round);
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background: var(--brand-500);
    width: 0;
    animation: loading-bar 2s linear infinite;
    transition: .2s ease;
}

.colorwaysSettingsSelector-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.colorwaysSettingsPage-wrapper .colorwayToolbox-listItem {
    gap: 8px;
    border-radius: 50px;
    padding: 12px 16px;
    background-color: var(--background-tertiary);
    transition: .15s ease;
    border: 1px solid transparent;
    color: var(--interactive-normal);
}

.colorwaysSettingsPage-wrapper .colorwayToolbox-listItem:hover {
    border-color: var(--brand-500);
    background-color: var(--brand-experiment-15a);
    color: var(--interactive-hover);
}

.colorwaysSettingsSelector-wrapper .ColorwaySelectorWrapper {
    justify-content: space-between;
}

.colorwaysSettingsSelector-infoWrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.colorwaysSettingsPage-wrapper .colorwayToolbox-itemList {
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.colorwaysSettings-label {
    flex: 1;
    display: block;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--header-primary);
    line-height: 24px;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
    cursor: pointer;
}

.colorwaysSettingsPage-settingsRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.colorwaysSettingsPage-divider {
    width: 100%;
    height: 1px;
    border-top: thin solid var(--background-modifier-accent);
    margin-top: var(--custom-margin-margin-medium);
    margin-bottom: 20px;
}

.colorwaysButton-pill {
    position: absolute;
    top: 0;
    left: 0;
}
`;

    const fallbackColorways = [
        {
            "name": "Keyboard Purple",
            "original": false,
            "accent": "hsl(235 85.6% 64.7%)",
            "primary": "#222456",
            "secondary": "#1c1f48",
            "tertiary": "#080d1d",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 235 calc(var(--saturation-factor, 1)*86%) 112%;
            --brand-130-hsl: 235 calc(var(--saturation-factor, 1)*86%) 108%;
            --brand-160-hsl: 235 calc(var(--saturation-factor, 1)*86%) 105%;
            --brand-200-hsl: 235 calc(var(--saturation-factor, 1)*86%) 101%;
            --brand-230-hsl: 235 calc(var(--saturation-factor, 1)*86%) 97%;
            --brand-260-hsl: 235 calc(var(--saturation-factor, 1)*86%) 94%;
            --brand-300-hsl: 235 calc(var(--saturation-factor, 1)*86%) 90%;
            --brand-330-hsl: 235 calc(var(--saturation-factor, 1)*86%) 87%;
            --brand-345-hsl: 235 calc(var(--saturation-factor, 1)*86%) 83%;
            --brand-360-hsl: 235 calc(var(--saturation-factor, 1)*86%) 79%;
            --brand-400-hsl: 235 calc(var(--saturation-factor, 1)*86%) 76%;
            --brand-430-hsl: 235 calc(var(--saturation-factor, 1)*86%) 72%;
            --brand-460-hsl: 235 calc(var(--saturation-factor, 1)*86%) 69%;
            --brand-500-hsl: 235 calc(var(--saturation-factor, 1)*86%) 65%;
            --brand-530-hsl: 235 calc(var(--saturation-factor, 1)*86%) 61%;
            --brand-560-hsl: 235 calc(var(--saturation-factor, 1)*86%) 58%;
            --brand-600-hsl: 235 calc(var(--saturation-factor, 1)*86%) 54%;
            --brand-630-hsl: 235 calc(var(--saturation-factor, 1)*86%) 51%;
            --brand-660-hsl: 235 calc(var(--saturation-factor, 1)*86%) 47%;
            --brand-700-hsl: 235 calc(var(--saturation-factor, 1)*86%) 43%;
            --brand-730-hsl: 235 calc(var(--saturation-factor, 1)*86%) 40%;
            --brand-760-hsl: 235 calc(var(--saturation-factor, 1)*86%) 36%;
            --brand-800-hsl: 235 calc(var(--saturation-factor, 1)*86%) 33%;
            --brand-830-hsl: 235 calc(var(--saturation-factor, 1)*86%) 29%;
            --brand-860-hsl: 235 calc(var(--saturation-factor, 1)*86%) 25%;
            --brand-900-hsl: 235 calc(var(--saturation-factor, 1)*86%) 22%;
            --mention-foreground: white !important;
            --primary-800-hsl: 224 calc(var(--saturation-factor, 1)*60%) 5%;
            --primary-730-hsl: 226 calc(var(--saturation-factor, 1)*57%) 7%;
            --primary-700-hsl: 226 calc(var(--saturation-factor, 1)*57%) 7%;
            --primary-660-hsl: 237 calc(var(--saturation-factor, 1)*44%) 16%;
            --primary-645-hsl: 238 calc(var(--saturation-factor, 1)*43%) 19%;
            --primary-630-hsl: 236 calc(var(--saturation-factor, 1)*44%) 20%;
            --primary-600-hsl: 238 calc(var(--saturation-factor, 1)*43%) 24%;
            --primary-560-hsl: 237 calc(var(--saturation-factor, 1)*44%) 28%;
            --primary-530-hsl: 237 calc(var(--saturation-factor, 1)*44%) 28%;
            --primary-500-hsl: 237 calc(var(--saturation-factor, 1)*44%) 28%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 237 calc(var(--saturation-factor, 1)*44%) 20.8%;
            --primary-400-hsl: 237 calc(var(--saturation-factor, 1)*44%) 17.2%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(235.9090909090909, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(235.9090909090909, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(235.9090909090909, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Eclipse",
            "original": false,
            "accent": "hsl(87 85.6% 64.7%)",
            "primary": "#000000",
            "secondary": "#181818",
            "tertiary": "#0a0a0a",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 87 calc(var(--saturation-factor, 1)*86%) 112%;
            --brand-130-hsl: 87 calc(var(--saturation-factor, 1)*86%) 108%;
            --brand-160-hsl: 87 calc(var(--saturation-factor, 1)*86%) 105%;
            --brand-200-hsl: 87 calc(var(--saturation-factor, 1)*86%) 101%;
            --brand-230-hsl: 87 calc(var(--saturation-factor, 1)*86%) 97%;
            --brand-260-hsl: 87 calc(var(--saturation-factor, 1)*86%) 94%;
            --brand-300-hsl: 87 calc(var(--saturation-factor, 1)*86%) 90%;
            --brand-330-hsl: 87 calc(var(--saturation-factor, 1)*86%) 87%;
            --brand-345-hsl: 87 calc(var(--saturation-factor, 1)*86%) 83%;
            --brand-360-hsl: 87 calc(var(--saturation-factor, 1)*86%) 79%;
            --brand-400-hsl: 87 calc(var(--saturation-factor, 1)*86%) 76%;
            --brand-430-hsl: 87 calc(var(--saturation-factor, 1)*86%) 72%;
            --brand-460-hsl: 87 calc(var(--saturation-factor, 1)*86%) 69%;
            --brand-500-hsl: 87 calc(var(--saturation-factor, 1)*86%) 65%;
            --brand-530-hsl: 87 calc(var(--saturation-factor, 1)*86%) 61%;
            --brand-560-hsl: 87 calc(var(--saturation-factor, 1)*86%) 58%;
            --brand-600-hsl: 87 calc(var(--saturation-factor, 1)*86%) 54%;
            --brand-630-hsl: 87 calc(var(--saturation-factor, 1)*86%) 51%;
            --brand-660-hsl: 87 calc(var(--saturation-factor, 1)*86%) 47%;
            --brand-700-hsl: 87 calc(var(--saturation-factor, 1)*86%) 43%;
            --brand-730-hsl: 87 calc(var(--saturation-factor, 1)*86%) 40%;
            --brand-760-hsl: 87 calc(var(--saturation-factor, 1)*86%) 36%;
            --brand-800-hsl: 87 calc(var(--saturation-factor, 1)*86%) 33%;
            --brand-830-hsl: 87 calc(var(--saturation-factor, 1)*86%) 29%;
            --brand-860-hsl: 87 calc(var(--saturation-factor, 1)*86%) 25%;
            --brand-900-hsl: 87 calc(var(--saturation-factor, 1)*86%) 22%;
            --mention-foreground: black !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*0%) 3%;
            --primary-730-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4%;
            --primary-700-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4%;
            --primary-660-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-645-hsl: 0 calc(var(--saturation-factor, 1)*0%) -5%;
            --primary-630-hsl: 0 calc(var(--saturation-factor, 1)*0%) 9%;
            --primary-600-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-560-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-530-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-500-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 0 calc(var(--saturation-factor, 1)*0%) -7.2%;
            --primary-400-hsl: 0 calc(var(--saturation-factor, 1)*0%) -10.8%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: gray !important;
            --channel-icon: gray !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: gray !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Cyan",
            "original": false,
            "accent": "#009f88",
            "primary": "#202226",
            "secondary": "#1c1e21",
            "tertiary": "#141517",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 171 calc(var(--saturation-factor, 1)*86%) 81%;
            --brand-130-hsl: 171 calc(var(--saturation-factor, 1)*86%) 77%;
            --brand-160-hsl: 171 calc(var(--saturation-factor, 1)*86%) 74%;
            --brand-200-hsl: 171 calc(var(--saturation-factor, 1)*86%) 70%;
            --brand-230-hsl: 171 calc(var(--saturation-factor, 1)*86%) 66%;
            --brand-260-hsl: 171 calc(var(--saturation-factor, 1)*86%) 63%;
            --brand-300-hsl: 171 calc(var(--saturation-factor, 1)*86%) 59%;
            --brand-330-hsl: 171 calc(var(--saturation-factor, 1)*86%) 56%;
            --brand-345-hsl: 171 calc(var(--saturation-factor, 1)*86%) 52%;
            --brand-360-hsl: 171 calc(var(--saturation-factor, 1)*86%) 48%;
            --brand-400-hsl: 171 calc(var(--saturation-factor, 1)*86%) 45%;
            --brand-430-hsl: 171 calc(var(--saturation-factor, 1)*86%) 41%;
            --brand-460-hsl: 171 calc(var(--saturation-factor, 1)*86%) 38%;
            --brand-500-hsl: 171 calc(var(--saturation-factor, 1)*86%) 34%;
            --brand-530-hsl: 171 calc(var(--saturation-factor, 1)*86%) 30%;
            --brand-560-hsl: 171 calc(var(--saturation-factor, 1)*86%) 27%;
            --brand-600-hsl: 171 calc(var(--saturation-factor, 1)*86%) 23%;
            --brand-630-hsl: 171 calc(var(--saturation-factor, 1)*86%) 20%;
            --brand-660-hsl: 171 calc(var(--saturation-factor, 1)*86%) 16%;
            --brand-700-hsl: 171 calc(var(--saturation-factor, 1)*86%) 12%;
            --brand-730-hsl: 171 calc(var(--saturation-factor, 1)*86%) 9%;
            --brand-760-hsl: 171 calc(var(--saturation-factor, 1)*86%) 5%;
            --brand-800-hsl: 171 calc(var(--saturation-factor, 1)*86%) 2%;
            --brand-830-hsl: 171 calc(var(--saturation-factor, 1)*86%) -2%;
            --brand-860-hsl: 171 calc(var(--saturation-factor, 1)*86%) -6%;
            --brand-900-hsl: 171 calc(var(--saturation-factor, 1)*86%) -9%;
            --mention-foreground: white !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*0%) 6%;
            --primary-730-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-700-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-660-hsl: 0 calc(var(--saturation-factor, 1)*0%) 9%;
            --primary-645-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-630-hsl: 0 calc(var(--saturation-factor, 1)*0%) 11%;
            --primary-600-hsl: 0 calc(var(--saturation-factor, 1)*0%) 13%;
            --primary-560-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-530-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-500-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 0 calc(var(--saturation-factor, 1)*0%) 7.8%;
            --primary-400-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4.199999999999999%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: gray !important;
            --channel-icon: gray !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: gray !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Spotify",
            "original": false,
            "accent": "hsl(141 76% 48%)",
            "primary": "#121212",
            "secondary": "#090909",
            "tertiary": "#090909",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 141 calc(var(--saturation-factor, 1)*76%) 95%;
            --brand-130-hsl: 141 calc(var(--saturation-factor, 1)*76%) 91%;
            --brand-160-hsl: 141 calc(var(--saturation-factor, 1)*76%) 88%;
            --brand-200-hsl: 141 calc(var(--saturation-factor, 1)*76%) 84%;
            --brand-230-hsl: 141 calc(var(--saturation-factor, 1)*76%) 80%;
            --brand-260-hsl: 141 calc(var(--saturation-factor, 1)*76%) 77%;
            --brand-300-hsl: 141 calc(var(--saturation-factor, 1)*76%) 73%;
            --brand-330-hsl: 141 calc(var(--saturation-factor, 1)*76%) 70%;
            --brand-345-hsl: 141 calc(var(--saturation-factor, 1)*76%) 66%;
            --brand-360-hsl: 141 calc(var(--saturation-factor, 1)*76%) 62%;
            --brand-400-hsl: 141 calc(var(--saturation-factor, 1)*76%) 59%;
            --brand-430-hsl: 141 calc(var(--saturation-factor, 1)*76%) 55%;
            --brand-460-hsl: 141 calc(var(--saturation-factor, 1)*76%) 52%;
            --brand-500-hsl: 141 calc(var(--saturation-factor, 1)*76%) 48%;
            --brand-530-hsl: 141 calc(var(--saturation-factor, 1)*76%) 44%;
            --brand-560-hsl: 141 calc(var(--saturation-factor, 1)*76%) 41%;
            --brand-600-hsl: 141 calc(var(--saturation-factor, 1)*76%) 37%;
            --brand-630-hsl: 141 calc(var(--saturation-factor, 1)*76%) 34%;
            --brand-660-hsl: 141 calc(var(--saturation-factor, 1)*76%) 30%;
            --brand-700-hsl: 141 calc(var(--saturation-factor, 1)*76%) 26%;
            --brand-730-hsl: 141 calc(var(--saturation-factor, 1)*76%) 23%;
            --brand-760-hsl: 141 calc(var(--saturation-factor, 1)*76%) 19%;
            --brand-800-hsl: 141 calc(var(--saturation-factor, 1)*76%) 16%;
            --brand-830-hsl: 141 calc(var(--saturation-factor, 1)*76%) 12%;
            --brand-860-hsl: 141 calc(var(--saturation-factor, 1)*76%) 8%;
            --brand-900-hsl: 141 calc(var(--saturation-factor, 1)*76%) 5%;
            --mention-foreground: black !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*0%) 2%;
            --primary-730-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4%;
            --primary-700-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4%;
            --primary-660-hsl: 0 calc(var(--saturation-factor, 1)*0%) 3%;
            --primary-645-hsl: 0 calc(var(--saturation-factor, 1)*0%) 2%;
            --primary-630-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4%;
            --primary-600-hsl: 0 calc(var(--saturation-factor, 1)*0%) 7%;
            --primary-560-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-530-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-500-hsl: 0 calc(var(--saturation-factor, 1)*0%) 8%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 0 calc(var(--saturation-factor, 1)*0%) 1%;
            --primary-400-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: gray !important;
            --channel-icon: gray !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: gray !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Bright n' Blue",
            "original": true,
            "accent": "hsl(234, 68%, 33%)",
            "primary": "#394aae",
            "secondary": "#29379d",
            "tertiary": "#1b278d",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 234 calc(var(--saturation-factor, 1)*68%) 80%;
            --brand-130-hsl: 234 calc(var(--saturation-factor, 1)*68%) 76%;
            --brand-160-hsl: 234 calc(var(--saturation-factor, 1)*68%) 73%;
            --brand-200-hsl: 234 calc(var(--saturation-factor, 1)*68%) 69%;
            --brand-230-hsl: 234 calc(var(--saturation-factor, 1)*68%) 65%;
            --brand-260-hsl: 234 calc(var(--saturation-factor, 1)*68%) 62%;
            --brand-300-hsl: 234 calc(var(--saturation-factor, 1)*68%) 58%;
            --brand-330-hsl: 234 calc(var(--saturation-factor, 1)*68%) 55%;
            --brand-345-hsl: 234 calc(var(--saturation-factor, 1)*68%) 51%;
            --brand-360-hsl: 234 calc(var(--saturation-factor, 1)*68%) 47%;
            --brand-400-hsl: 234 calc(var(--saturation-factor, 1)*68%) 44%;
            --brand-430-hsl: 234 calc(var(--saturation-factor, 1)*68%) 40%;
            --brand-460-hsl: 234 calc(var(--saturation-factor, 1)*68%) 37%;
            --brand-500-hsl: 234 calc(var(--saturation-factor, 1)*68%) 33%;
            --brand-530-hsl: 234 calc(var(--saturation-factor, 1)*68%) 29%;
            --brand-560-hsl: 234 calc(var(--saturation-factor, 1)*68%) 26%;
            --brand-600-hsl: 234 calc(var(--saturation-factor, 1)*68%) 22%;
            --brand-630-hsl: 234 calc(var(--saturation-factor, 1)*68%) 19%;
            --brand-660-hsl: 234 calc(var(--saturation-factor, 1)*68%) 15%;
            --brand-700-hsl: 234 calc(var(--saturation-factor, 1)*68%) 11%;
            --brand-730-hsl: 234 calc(var(--saturation-factor, 1)*68%) 8%;
            --brand-760-hsl: 234 calc(var(--saturation-factor, 1)*68%) 4%;
            --brand-800-hsl: 234 calc(var(--saturation-factor, 1)*68%) 1%;
            --brand-830-hsl: 234 calc(var(--saturation-factor, 1)*68%) -3%;
            --brand-860-hsl: 234 calc(var(--saturation-factor, 1)*68%) -7%;
            --brand-900-hsl: 234 calc(var(--saturation-factor, 1)*68%) -10%;
            --mention-foreground: white !important;
            --primary-800-hsl: 234 calc(var(--saturation-factor, 1)*69%) 23%;
            --primary-730-hsl: 234 calc(var(--saturation-factor, 1)*68%) 33%;
            --primary-700-hsl: 234 calc(var(--saturation-factor, 1)*68%) 33%;
            --primary-660-hsl: 233 calc(var(--saturation-factor, 1)*59%) 31%;
            --primary-645-hsl: 231 calc(var(--saturation-factor, 1)*51%) 40%;
            --primary-630-hsl: 233 calc(var(--saturation-factor, 1)*59%) 39%;
            --primary-600-hsl: 231 calc(var(--saturation-factor, 1)*51%) 45%;
            --primary-560-hsl: 231 calc(var(--saturation-factor, 1)*60%) 54%;
            --primary-530-hsl: 231 calc(var(--saturation-factor, 1)*60%) 54%;
            --primary-500-hsl: 231 calc(var(--saturation-factor, 1)*60%) 54%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 231 calc(var(--saturation-factor, 1)*60%) 46.8%;
            --primary-400-hsl: 231 calc(var(--saturation-factor, 1)*60%) 43.2%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(233.2758620689655, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(233.2758620689655, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(233.2758620689655, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Still Young",
            "original": true,
            "accent": "hsl(58 85.6% 89%)",
            "primary": "#443a31",
            "secondary": "#7c3d3e",
            "tertiary": "#207578",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 58 calc(var(--saturation-factor, 1)*86%) 136%;
            --brand-130-hsl: 58 calc(var(--saturation-factor, 1)*86%) 132%;
            --brand-160-hsl: 58 calc(var(--saturation-factor, 1)*86%) 129%;
            --brand-200-hsl: 58 calc(var(--saturation-factor, 1)*86%) 125%;
            --brand-230-hsl: 58 calc(var(--saturation-factor, 1)*86%) 121%;
            --brand-260-hsl: 58 calc(var(--saturation-factor, 1)*86%) 118%;
            --brand-300-hsl: 58 calc(var(--saturation-factor, 1)*86%) 114%;
            --brand-330-hsl: 58 calc(var(--saturation-factor, 1)*86%) 111%;
            --brand-345-hsl: 58 calc(var(--saturation-factor, 1)*86%) 107%;
            --brand-360-hsl: 58 calc(var(--saturation-factor, 1)*86%) 103%;
            --brand-400-hsl: 58 calc(var(--saturation-factor, 1)*86%) 100%;
            --brand-430-hsl: 58 calc(var(--saturation-factor, 1)*86%) 96%;
            --brand-460-hsl: 58 calc(var(--saturation-factor, 1)*86%) 93%;
            --brand-500-hsl: 58 calc(var(--saturation-factor, 1)*86%) 89%;
            --brand-530-hsl: 58 calc(var(--saturation-factor, 1)*86%) 85%;
            --brand-560-hsl: 58 calc(var(--saturation-factor, 1)*86%) 82%;
            --brand-600-hsl: 58 calc(var(--saturation-factor, 1)*86%) 78%;
            --brand-630-hsl: 58 calc(var(--saturation-factor, 1)*86%) 75%;
            --brand-660-hsl: 58 calc(var(--saturation-factor, 1)*86%) 71%;
            --brand-700-hsl: 58 calc(var(--saturation-factor, 1)*86%) 67%;
            --brand-730-hsl: 58 calc(var(--saturation-factor, 1)*86%) 64%;
            --brand-760-hsl: 58 calc(var(--saturation-factor, 1)*86%) 60%;
            --brand-800-hsl: 58 calc(var(--saturation-factor, 1)*86%) 57%;
            --brand-830-hsl: 58 calc(var(--saturation-factor, 1)*86%) 53%;
            --brand-860-hsl: 58 calc(var(--saturation-factor, 1)*86%) 49%;
            --brand-900-hsl: 58 calc(var(--saturation-factor, 1)*86%) 46%;
            --mention-foreground: black !important;
            --primary-800-hsl: 182 calc(var(--saturation-factor, 1)*59%) 21%;
            --primary-730-hsl: 182 calc(var(--saturation-factor, 1)*58%) 30%;
            --primary-700-hsl: 182 calc(var(--saturation-factor, 1)*58%) 30%;
            --primary-660-hsl: 359 calc(var(--saturation-factor, 1)*34%) 29%;
            --primary-645-hsl: 28 calc(var(--saturation-factor, 1)*16%) 18%;
            --primary-630-hsl: 359 calc(var(--saturation-factor, 1)*34%) 36%;
            --primary-600-hsl: 28 calc(var(--saturation-factor, 1)*16%) 23%;
            --primary-560-hsl: 29 calc(var(--saturation-factor, 1)*17%) 27%;
            --primary-530-hsl: 29 calc(var(--saturation-factor, 1)*17%) 27%;
            --primary-500-hsl: 29 calc(var(--saturation-factor, 1)*17%) 27%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 29 calc(var(--saturation-factor, 1)*17%) 19.8%;
            --primary-400-hsl: 29 calc(var(--saturation-factor, 1)*17%) 16.2%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(359.03225806451616, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(359.03225806451616, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(359.03225806451616, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Sea",
            "original": true,
            "accent": "hsl(184, 100%, 50%)",
            "primary": "#07353b",
            "secondary": "#0b5e60",
            "tertiary": "#08201d",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 184 calc(var(--saturation-factor, 1)*100%) 97%;
            --brand-130-hsl: 184 calc(var(--saturation-factor, 1)*100%) 93%;
            --brand-160-hsl: 184 calc(var(--saturation-factor, 1)*100%) 90%;
            --brand-200-hsl: 184 calc(var(--saturation-factor, 1)*100%) 86%;
            --brand-230-hsl: 184 calc(var(--saturation-factor, 1)*100%) 82%;
            --brand-260-hsl: 184 calc(var(--saturation-factor, 1)*100%) 79%;
            --brand-300-hsl: 184 calc(var(--saturation-factor, 1)*100%) 75%;
            --brand-330-hsl: 184 calc(var(--saturation-factor, 1)*100%) 72%;
            --brand-345-hsl: 184 calc(var(--saturation-factor, 1)*100%) 68%;
            --brand-360-hsl: 184 calc(var(--saturation-factor, 1)*100%) 64%;
            --brand-400-hsl: 184 calc(var(--saturation-factor, 1)*100%) 61%;
            --brand-430-hsl: 184 calc(var(--saturation-factor, 1)*100%) 57%;
            --brand-460-hsl: 184 calc(var(--saturation-factor, 1)*100%) 54%;
            --brand-500-hsl: 184 calc(var(--saturation-factor, 1)*100%) 50%;
            --brand-530-hsl: 184 calc(var(--saturation-factor, 1)*100%) 46%;
            --brand-560-hsl: 184 calc(var(--saturation-factor, 1)*100%) 43%;
            --brand-600-hsl: 184 calc(var(--saturation-factor, 1)*100%) 39%;
            --brand-630-hsl: 184 calc(var(--saturation-factor, 1)*100%) 36%;
            --brand-660-hsl: 184 calc(var(--saturation-factor, 1)*100%) 32%;
            --brand-700-hsl: 184 calc(var(--saturation-factor, 1)*100%) 28%;
            --brand-730-hsl: 184 calc(var(--saturation-factor, 1)*100%) 25%;
            --brand-760-hsl: 184 calc(var(--saturation-factor, 1)*100%) 21%;
            --brand-800-hsl: 184 calc(var(--saturation-factor, 1)*100%) 18%;
            --brand-830-hsl: 184 calc(var(--saturation-factor, 1)*100%) 14%;
            --brand-860-hsl: 184 calc(var(--saturation-factor, 1)*100%) 10%;
            --brand-900-hsl: 184 calc(var(--saturation-factor, 1)*100%) 7%;
            --mention-foreground: black !important;
            --primary-800-hsl: 173 calc(var(--saturation-factor, 1)*63%) 5%;
            --primary-730-hsl: 173 calc(var(--saturation-factor, 1)*60%) 8%;
            --primary-700-hsl: 173 calc(var(--saturation-factor, 1)*60%) 8%;
            --primary-660-hsl: 180 calc(var(--saturation-factor, 1)*81%) 17%;
            --primary-645-hsl: 187 calc(var(--saturation-factor, 1)*79%) 8%;
            --primary-630-hsl: 181 calc(var(--saturation-factor, 1)*79%) 21%;
            --primary-600-hsl: 187 calc(var(--saturation-factor, 1)*79%) 13%;
            --primary-560-hsl: 187 calc(var(--saturation-factor, 1)*80%) 15%;
            --primary-530-hsl: 187 calc(var(--saturation-factor, 1)*80%) 15%;
            --primary-500-hsl: 187 calc(var(--saturation-factor, 1)*80%) 15%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 187 calc(var(--saturation-factor, 1)*80%) 7.8%;
            --primary-400-hsl: 187 calc(var(--saturation-factor, 1)*80%) 4.199999999999999%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(180.70588235294116, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(180.70588235294116, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(180.70588235294116, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Lava",
            "original": true,
            "accent": "hsl(4, 80.4%, 32%)",
            "primary": "#401b17",
            "secondary": "#351917",
            "tertiary": "#230b0b",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 4 calc(var(--saturation-factor, 1)*80%) 79%;
            --brand-130-hsl: 4 calc(var(--saturation-factor, 1)*80%) 75%;
            --brand-160-hsl: 4 calc(var(--saturation-factor, 1)*80%) 72%;
            --brand-200-hsl: 4 calc(var(--saturation-factor, 1)*80%) 68%;
            --brand-230-hsl: 4 calc(var(--saturation-factor, 1)*80%) 64%;
            --brand-260-hsl: 4 calc(var(--saturation-factor, 1)*80%) 61%;
            --brand-300-hsl: 4 calc(var(--saturation-factor, 1)*80%) 57%;
            --brand-330-hsl: 4 calc(var(--saturation-factor, 1)*80%) 54%;
            --brand-345-hsl: 4 calc(var(--saturation-factor, 1)*80%) 50%;
            --brand-360-hsl: 4 calc(var(--saturation-factor, 1)*80%) 46%;
            --brand-400-hsl: 4 calc(var(--saturation-factor, 1)*80%) 43%;
            --brand-430-hsl: 4 calc(var(--saturation-factor, 1)*80%) 39%;
            --brand-460-hsl: 4 calc(var(--saturation-factor, 1)*80%) 36%;
            --brand-500-hsl: 4 calc(var(--saturation-factor, 1)*80%) 32%;
            --brand-530-hsl: 4 calc(var(--saturation-factor, 1)*80%) 28%;
            --brand-560-hsl: 4 calc(var(--saturation-factor, 1)*80%) 25%;
            --brand-600-hsl: 4 calc(var(--saturation-factor, 1)*80%) 21%;
            --brand-630-hsl: 4 calc(var(--saturation-factor, 1)*80%) 18%;
            --brand-660-hsl: 4 calc(var(--saturation-factor, 1)*80%) 14%;
            --brand-700-hsl: 4 calc(var(--saturation-factor, 1)*80%) 10%;
            --brand-730-hsl: 4 calc(var(--saturation-factor, 1)*80%) 7%;
            --brand-760-hsl: 4 calc(var(--saturation-factor, 1)*80%) 3%;
            --brand-800-hsl: 4 calc(var(--saturation-factor, 1)*80%) 0%;
            --brand-830-hsl: 4 calc(var(--saturation-factor, 1)*80%) -4%;
            --brand-860-hsl: 4 calc(var(--saturation-factor, 1)*80%) -8%;
            --brand-900-hsl: 4 calc(var(--saturation-factor, 1)*80%) -11%;
            --mention-foreground: white !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*55%) 6%;
            --primary-730-hsl: 0 calc(var(--saturation-factor, 1)*52%) 9%;
            --primary-700-hsl: 0 calc(var(--saturation-factor, 1)*52%) 9%;
            --primary-660-hsl: 5 calc(var(--saturation-factor, 1)*40%) 12%;
            --primary-645-hsl: 6 calc(var(--saturation-factor, 1)*47%) 12%;
            --primary-630-hsl: 4 calc(var(--saturation-factor, 1)*40%) 15%;
            --primary-600-hsl: 6 calc(var(--saturation-factor, 1)*47%) 17%;
            --primary-560-hsl: 6 calc(var(--saturation-factor, 1)*48%) 20%;
            --primary-530-hsl: 6 calc(var(--saturation-factor, 1)*48%) 20%;
            --primary-500-hsl: 6 calc(var(--saturation-factor, 1)*48%) 20%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 6 calc(var(--saturation-factor, 1)*48%) 12.8%;
            --primary-400-hsl: 6 calc(var(--saturation-factor, 1)*48%) 9.2%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(4, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(4, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(4, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Solid Pink",
            "original": true,
            "accent": "hsl(340, 55.2%, 56.3%)",
            "primary": "#1e151c",
            "secondary": "#21181f",
            "tertiary": "#291e27",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 340 calc(var(--saturation-factor, 1)*55%) 103%;
            --brand-130-hsl: 340 calc(var(--saturation-factor, 1)*55%) 99%;
            --brand-160-hsl: 340 calc(var(--saturation-factor, 1)*55%) 96%;
            --brand-200-hsl: 340 calc(var(--saturation-factor, 1)*55%) 92%;
            --brand-230-hsl: 340 calc(var(--saturation-factor, 1)*55%) 88%;
            --brand-260-hsl: 340 calc(var(--saturation-factor, 1)*55%) 85%;
            --brand-300-hsl: 340 calc(var(--saturation-factor, 1)*55%) 81%;
            --brand-330-hsl: 340 calc(var(--saturation-factor, 1)*55%) 78%;
            --brand-345-hsl: 340 calc(var(--saturation-factor, 1)*55%) 74%;
            --brand-360-hsl: 340 calc(var(--saturation-factor, 1)*55%) 70%;
            --brand-400-hsl: 340 calc(var(--saturation-factor, 1)*55%) 67%;
            --brand-430-hsl: 340 calc(var(--saturation-factor, 1)*55%) 63%;
            --brand-460-hsl: 340 calc(var(--saturation-factor, 1)*55%) 60%;
            --brand-500-hsl: 340 calc(var(--saturation-factor, 1)*55%) 56%;
            --brand-530-hsl: 340 calc(var(--saturation-factor, 1)*55%) 52%;
            --brand-560-hsl: 340 calc(var(--saturation-factor, 1)*55%) 49%;
            --brand-600-hsl: 340 calc(var(--saturation-factor, 1)*55%) 45%;
            --brand-630-hsl: 340 calc(var(--saturation-factor, 1)*55%) 42%;
            --brand-660-hsl: 340 calc(var(--saturation-factor, 1)*55%) 38%;
            --brand-700-hsl: 340 calc(var(--saturation-factor, 1)*55%) 34%;
            --brand-730-hsl: 340 calc(var(--saturation-factor, 1)*55%) 31%;
            --brand-760-hsl: 340 calc(var(--saturation-factor, 1)*55%) 27%;
            --brand-800-hsl: 340 calc(var(--saturation-factor, 1)*55%) 24%;
            --brand-830-hsl: 340 calc(var(--saturation-factor, 1)*55%) 20%;
            --brand-860-hsl: 340 calc(var(--saturation-factor, 1)*55%) 16%;
            --brand-900-hsl: 340 calc(var(--saturation-factor, 1)*55%) 13%;
            --mention-foreground: white !important;
            --primary-800-hsl: 309 calc(var(--saturation-factor, 1)*14%) 10%;
            --primary-730-hsl: 311 calc(var(--saturation-factor, 1)*16%) 14%;
            --primary-700-hsl: 311 calc(var(--saturation-factor, 1)*16%) 14%;
            --primary-660-hsl: 317 calc(var(--saturation-factor, 1)*16%) 9%;
            --primary-645-hsl: 313 calc(var(--saturation-factor, 1)*18%) 5%;
            --primary-630-hsl: 313 calc(var(--saturation-factor, 1)*16%) 11%;
            --primary-600-hsl: 313 calc(var(--saturation-factor, 1)*18%) 10%;
            --primary-560-hsl: 316 calc(var(--saturation-factor, 1)*18%) 12%;
            --primary-530-hsl: 316 calc(var(--saturation-factor, 1)*18%) 12%;
            --primary-500-hsl: 316 calc(var(--saturation-factor, 1)*18%) 12%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 316 calc(var(--saturation-factor, 1)*18%) 4.8%;
            --primary-400-hsl: 316 calc(var(--saturation-factor, 1)*18%) 1.1999999999999993%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(313.33333333333337, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(313.33333333333337, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(313.33333333333337, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Sand",
            "original": true,
            "accent": "hsl(41, 31%, 45%)",
            "primary": "#7f6c43",
            "secondary": "#665b33",
            "tertiary": "#5c5733",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 41 calc(var(--saturation-factor, 1)*31%) 93%;
            --brand-130-hsl: 41 calc(var(--saturation-factor, 1)*31%) 89%;
            --brand-160-hsl: 41 calc(var(--saturation-factor, 1)*31%) 86%;
            --brand-200-hsl: 41 calc(var(--saturation-factor, 1)*31%) 82%;
            --brand-230-hsl: 41 calc(var(--saturation-factor, 1)*31%) 78%;
            --brand-260-hsl: 41 calc(var(--saturation-factor, 1)*31%) 75%;
            --brand-300-hsl: 41 calc(var(--saturation-factor, 1)*31%) 71%;
            --brand-330-hsl: 41 calc(var(--saturation-factor, 1)*31%) 68%;
            --brand-345-hsl: 41 calc(var(--saturation-factor, 1)*31%) 64%;
            --brand-360-hsl: 41 calc(var(--saturation-factor, 1)*31%) 60%;
            --brand-400-hsl: 41 calc(var(--saturation-factor, 1)*31%) 57%;
            --brand-430-hsl: 41 calc(var(--saturation-factor, 1)*31%) 53%;
            --brand-460-hsl: 41 calc(var(--saturation-factor, 1)*31%) 50%;
            --brand-500-hsl: 41 calc(var(--saturation-factor, 1)*31%) 46%;
            --brand-530-hsl: 41 calc(var(--saturation-factor, 1)*31%) 42%;
            --brand-560-hsl: 41 calc(var(--saturation-factor, 1)*31%) 39%;
            --brand-600-hsl: 41 calc(var(--saturation-factor, 1)*31%) 35%;
            --brand-630-hsl: 41 calc(var(--saturation-factor, 1)*31%) 32%;
            --brand-660-hsl: 41 calc(var(--saturation-factor, 1)*31%) 28%;
            --brand-700-hsl: 41 calc(var(--saturation-factor, 1)*31%) 24%;
            --brand-730-hsl: 41 calc(var(--saturation-factor, 1)*31%) 21%;
            --brand-760-hsl: 41 calc(var(--saturation-factor, 1)*31%) 17%;
            --brand-800-hsl: 41 calc(var(--saturation-factor, 1)*31%) 14%;
            --brand-830-hsl: 41 calc(var(--saturation-factor, 1)*31%) 10%;
            --brand-860-hsl: 41 calc(var(--saturation-factor, 1)*31%) 6%;
            --brand-900-hsl: 41 calc(var(--saturation-factor, 1)*31%) 3%;
            --mention-foreground: black !important;
            --primary-800-hsl: 52 calc(var(--saturation-factor, 1)*29%) 19%;
            --primary-730-hsl: 53 calc(var(--saturation-factor, 1)*29%) 28%;
            --primary-700-hsl: 53 calc(var(--saturation-factor, 1)*29%) 28%;
            --primary-660-hsl: 47 calc(var(--saturation-factor, 1)*34%) 24%;
            --primary-645-hsl: 41 calc(var(--saturation-factor, 1)*31%) 33%;
            --primary-630-hsl: 47 calc(var(--saturation-factor, 1)*33%) 30%;
            --primary-600-hsl: 41 calc(var(--saturation-factor, 1)*31%) 38%;
            --primary-560-hsl: 41 calc(var(--saturation-factor, 1)*31%) 46%;
            --primary-530-hsl: 41 calc(var(--saturation-factor, 1)*31%) 46%;
            --primary-500-hsl: 41 calc(var(--saturation-factor, 1)*31%) 46%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 41 calc(var(--saturation-factor, 1)*31%) 38.8%;
            --primary-400-hsl: 41 calc(var(--saturation-factor, 1)*31%) 35.2%;
        }
        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }
        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }
        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }
        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }
        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }
        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: black;
        }
        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: black;
            opacity: .6;
        }
        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }
        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/
        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(47.05882352941176, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(47.05882352941176, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }
        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }
        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }
        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }
        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(47.05882352941176, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }
        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }
        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/
        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }
        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }
        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }
        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/
        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }
        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "AMOLED",
            "original": true,
            "accent": "hsl(235 85.6% 64.7%)",
            "primary": "#000000",
            "secondary": "#000000",
            "tertiary": "#000000",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --mention-foreground: white !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-730-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-700-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-660-hsl: 0 calc(var(--saturation-factor, 1)*0%) 0%;
            --primary-645-hsl: 240 calc(var(--saturation-factor, 1)*100%) -5%;
            --primary-630-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-600-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-560-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-530-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-500-hsl: 240 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 240 calc(var(--saturation-factor, 1)*100%) -7.2%;
            --primary-400-hsl: 240 calc(var(--saturation-factor, 1)*100%) -10.8%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(240, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(240, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(240, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Zorin",
            "original": false,
            "accent": "hsl(200, 89%, 86%)",
            "primary": "#171d20",
            "secondary": "#171d20",
            "tertiary": "#1e2529",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 200 calc(var(--saturation-factor, 1)*89%) 133%;
            --brand-130-hsl: 200 calc(var(--saturation-factor, 1)*89%) 129%;
            --brand-160-hsl: 200 calc(var(--saturation-factor, 1)*89%) 126%;
            --brand-200-hsl: 200 calc(var(--saturation-factor, 1)*89%) 122%;
            --brand-230-hsl: 200 calc(var(--saturation-factor, 1)*89%) 118%;
            --brand-260-hsl: 200 calc(var(--saturation-factor, 1)*89%) 115%;
            --brand-300-hsl: 200 calc(var(--saturation-factor, 1)*89%) 111%;
            --brand-330-hsl: 200 calc(var(--saturation-factor, 1)*89%) 108%;
            --brand-345-hsl: 200 calc(var(--saturation-factor, 1)*89%) 104%;
            --brand-360-hsl: 200 calc(var(--saturation-factor, 1)*89%) 100%;
            --brand-400-hsl: 200 calc(var(--saturation-factor, 1)*89%) 97%;
            --brand-430-hsl: 200 calc(var(--saturation-factor, 1)*89%) 93%;
            --brand-460-hsl: 200 calc(var(--saturation-factor, 1)*89%) 90%;
            --brand-500-hsl: 200 calc(var(--saturation-factor, 1)*89%) 86%;
            --brand-530-hsl: 200 calc(var(--saturation-factor, 1)*89%) 82%;
            --brand-560-hsl: 200 calc(var(--saturation-factor, 1)*89%) 79%;
            --brand-600-hsl: 200 calc(var(--saturation-factor, 1)*89%) 75%;
            --brand-630-hsl: 200 calc(var(--saturation-factor, 1)*89%) 72%;
            --brand-660-hsl: 200 calc(var(--saturation-factor, 1)*89%) 68%;
            --brand-700-hsl: 200 calc(var(--saturation-factor, 1)*89%) 64%;
            --brand-730-hsl: 200 calc(var(--saturation-factor, 1)*89%) 61%;
            --brand-760-hsl: 200 calc(var(--saturation-factor, 1)*89%) 57%;
            --brand-800-hsl: 200 calc(var(--saturation-factor, 1)*89%) 54%;
            --brand-830-hsl: 200 calc(var(--saturation-factor, 1)*89%) 50%;
            --brand-860-hsl: 200 calc(var(--saturation-factor, 1)*89%) 46%;
            --brand-900-hsl: 200 calc(var(--saturation-factor, 1)*89%) 43%;
            --mention-foreground: black !important;
            --primary-800-hsl: 206 calc(var(--saturation-factor, 1)*14%) 10%;
            --primary-730-hsl: 202 calc(var(--saturation-factor, 1)*16%) 14%;
            --primary-700-hsl: 202 calc(var(--saturation-factor, 1)*16%) 14%;
            --primary-660-hsl: 197 calc(var(--saturation-factor, 1)*16%) 8%;
            --primary-645-hsl: 200 calc(var(--saturation-factor, 1)*16%) 6%;
            --primary-630-hsl: 200 calc(var(--saturation-factor, 1)*16%) 11%;
            --primary-600-hsl: 200 calc(var(--saturation-factor, 1)*16%) 11%;
            --primary-560-hsl: 202 calc(var(--saturation-factor, 1)*17%) 13%;
            --primary-530-hsl: 202 calc(var(--saturation-factor, 1)*17%) 13%;
            --primary-500-hsl: 202 calc(var(--saturation-factor, 1)*17%) 13%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 202 calc(var(--saturation-factor, 1)*17%) 5.8%;
            --primary-400-hsl: 202 calc(var(--saturation-factor, 1)*17%) 2%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(200, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(200, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(200, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: black !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: black !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Desaturated",
            "original": false,
            "accent": "hsl(227, 58%, 65%)",
            "primary": "#35383d",
            "secondary": "#2c2f34",
            "tertiary": "#1e1f24",
            "import": `/*Automatically Generated - Colorway Creator V1.12 - Preset: Hue Rotation*/
        :root {
          --brand-100-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 112%;
          --brand-130-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 108%;
          --brand-160-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 105%;
          --brand-200-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 101%;
          --brand-230-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 97%;
          --brand-260-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 94%;
          --brand-300-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 90%;
          --brand-330-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 87%;
          --brand-345-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 83%;
          --brand-360-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 79%;
          --brand-400-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 76%;
          --brand-430-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 72%;
          --brand-460-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 69%;
          --brand-500-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 65%;
          --brand-530-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 61%;
          --brand-560-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 58%;
          --brand-600-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 54%;
          --brand-630-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 51%;
          --brand-660-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 47%;
          --brand-700-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 43%;
          --brand-730-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 40%;
          --brand-760-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 36%;
          --brand-800-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 33%;
          --brand-830-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 29%;
          --brand-860-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 25%;
          --brand-900-hsl: 227 calc(var(--saturation-factor, 1) * 58%) 22%;
          --primary-800-hsl: 227 calc(var(--saturation-factor, 1) * 12%) 7%;
          --primary-730-hsl: 227 calc(var(--saturation-factor, 1) * 10%) 13%;
          --primary-700-hsl: 227 calc(var(--saturation-factor, 1) * 10%) 13%;
          --primary-660-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 15%;
          --primary-645-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 16%;
          --primary-630-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 18%;
          --primary-600-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 21%;
          --primary-560-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 24%;
          --primary-530-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 24%;
          --primary-500-hsl: 227 calc(var(--saturation-factor, 1) * 11%) 24%;
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Crimson",
            "original": false,
            "accent": "hsl(0, 100%, 50%)",
            "primary": "#050000",
            "secondary": "#0a0000",
            "tertiary": "#0f0000",
            "import": `/*Automatically Generated - Colorway Creator V1.12 - By Riddim_GLiTCH*/
        :root {
            --brand-100-hsl: 0 calc(var(--saturation-factor, 1)*100%) 97%;
            --brand-130-hsl: 0 calc(var(--saturation-factor, 1)*100%) 93%;
            --brand-160-hsl: 0 calc(var(--saturation-factor, 1)*100%) 90%;
            --brand-200-hsl: 0 calc(var(--saturation-factor, 1)*100%) 86%;
            --brand-230-hsl: 0 calc(var(--saturation-factor, 1)*100%) 82%;
            --brand-260-hsl: 0 calc(var(--saturation-factor, 1)*100%) 79%;
            --brand-300-hsl: 0 calc(var(--saturation-factor, 1)*100%) 75%;
            --brand-330-hsl: 0 calc(var(--saturation-factor, 1)*100%) 72%;
            --brand-345-hsl: 0 calc(var(--saturation-factor, 1)*100%) 68%;
            --brand-360-hsl: 0 calc(var(--saturation-factor, 1)*100%) 64%;
            --brand-400-hsl: 0 calc(var(--saturation-factor, 1)*100%) 61%;
            --brand-430-hsl: 0 calc(var(--saturation-factor, 1)*100%) 57%;
            --brand-460-hsl: 0 calc(var(--saturation-factor, 1)*100%) 54%;
            --brand-500-hsl: 0 calc(var(--saturation-factor, 1)*100%) 50%;
            --brand-530-hsl: 0 calc(var(--saturation-factor, 1)*100%) 46%;
            --brand-560-hsl: 0 calc(var(--saturation-factor, 1)*100%) 43%;
            --brand-600-hsl: 0 calc(var(--saturation-factor, 1)*100%) 39%;
            --brand-630-hsl: 0 calc(var(--saturation-factor, 1)*100%) 36%;
            --brand-660-hsl: 0 calc(var(--saturation-factor, 1)*100%) 32%;
            --brand-700-hsl: 0 calc(var(--saturation-factor, 1)*100%) 28%;
            --brand-730-hsl: 0 calc(var(--saturation-factor, 1)*100%) 25%;
            --brand-760-hsl: 0 calc(var(--saturation-factor, 1)*100%) 21%;
            --brand-800-hsl: 0 calc(var(--saturation-factor, 1)*100%) 18%;
            --brand-830-hsl: 0 calc(var(--saturation-factor, 1)*100%) 14%;
            --brand-860-hsl: 0 calc(var(--saturation-factor, 1)*100%) 10%;
            --brand-900-hsl: 0 calc(var(--saturation-factor, 1)*100%) 7%;
            --mention-foreground: white !important;
            --primary-800-hsl: 0 calc(var(--saturation-factor, 1)*100%) 2%;
            --primary-730-hsl: 0 calc(var(--saturation-factor, 1)*100%) 3%;
            --primary-700-hsl: 0 calc(var(--saturation-factor, 1)*100%) 3%;
            --primary-660-hsl: 0 calc(var(--saturation-factor, 1)*100%) 2%;
            --primary-645-hsl: 0 calc(var(--saturation-factor, 1)*100%) -4%;
            --primary-630-hsl: 0 calc(var(--saturation-factor, 1)*100%) 2%;
            --primary-600-hsl: 0 calc(var(--saturation-factor, 1)*100%) 1%;
            --primary-560-hsl: 0 calc(var(--saturation-factor, 1)*100%) 1%;
            --primary-530-hsl: 0 calc(var(--saturation-factor, 1)*100%) 1%;
            --primary-500-hsl: 0 calc(var(--saturation-factor, 1)*100%) 1%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430-hsl: 0 calc(var(--saturation-factor, 1)*100%) -6.2%;
            --primary-400-hsl: 0 calc(var(--saturation-factor, 1)*100%) -9.8%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: gray !important;
            --channel-icon: gray !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: gray !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "Riddim_GLiTCH",
            "authorID": "801089753038061669"
        },
        {
            "name": "Jupiter",
            "original": true,
            "accent": "#ffd89b",
            "primary": "#ffd89b",
            "secondary": "#19547b",
            "tertiary": "#1e1f22",
            "import": `/*Automatically Generated - Colorway Creator V1.12 - Preset: Gradient Type 2*/
        @import url(//dablulite.github.io/css-snippets/NoLightInDark/import.css);
        @import url(//dablulite.github.io/css-snippets/NitroThemesFix/import.css);
        :root {
            --brand-100-hsl: 37 calc(var(--saturation-factor, 1)*100%) 127%;
            --brand-130-hsl: 37 calc(var(--saturation-factor, 1)*100%) 123%;
            --brand-160-hsl: 37 calc(var(--saturation-factor, 1)*100%) 120%;
            --brand-200-hsl: 37 calc(var(--saturation-factor, 1)*100%) 116%;
            --brand-230-hsl: 37 calc(var(--saturation-factor, 1)*100%) 112%;
            --brand-260-hsl: 37 calc(var(--saturation-factor, 1)*100%) 109%;
            --brand-300-hsl: 37 calc(var(--saturation-factor, 1)*100%) 105%;
            --brand-330-hsl: 37 calc(var(--saturation-factor, 1)*100%) 102%;
            --brand-345-hsl: 37 calc(var(--saturation-factor, 1)*100%) 98%;
            --brand-360-hsl: 37 calc(var(--saturation-factor, 1)*100%) 94%;
            --brand-400-hsl: 37 calc(var(--saturation-factor, 1)*100%) 91%;
            --brand-430-hsl: 37 calc(var(--saturation-factor, 1)*100%) 87%;
            --brand-460-hsl: 37 calc(var(--saturation-factor, 1)*100%) 84%;
            --brand-500-hsl: 37 calc(var(--saturation-factor, 1)*100%) 80%;
            --brand-530-hsl: 37 calc(var(--saturation-factor, 1)*100%) 76%;
            --brand-560-hsl: 37 calc(var(--saturation-factor, 1)*100%) 73%;
            --brand-600-hsl: 37 calc(var(--saturation-factor, 1)*100%) 69%;
            --brand-630-hsl: 37 calc(var(--saturation-factor, 1)*100%) 66%;
            --brand-660-hsl: 37 calc(var(--saturation-factor, 1)*100%) 62%;
            --brand-700-hsl: 37 calc(var(--saturation-factor, 1)*100%) 58%;
            --brand-730-hsl: 37 calc(var(--saturation-factor, 1)*100%) 55%;
            --brand-760-hsl: 37 calc(var(--saturation-factor, 1)*100%) 51%;
            --brand-800-hsl: 37 calc(var(--saturation-factor, 1)*100%) 48%;
            --brand-830-hsl: 37 calc(var(--saturation-factor, 1)*100%) 44%;
            --brand-860-hsl: 37 calc(var(--saturation-factor, 1)*100%) 40%;
            --brand-900-hsl: 37 calc(var(--saturation-factor, 1)*100%) 37%;
        }
        :root {
            --bg-overlay-1: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-2: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-3: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-4: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-5: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-6: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-hover: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-active: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-selected: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-chat: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-home: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-home-card: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-app-frame: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
        }
        .theme-dark {
            --bg-overlay-color: 0 0 0;
            --bg-overlay-color-inverse: 255 255 255;
            --bg-overlay-opacity-1: 0.85;
            --bg-overlay-opacity-2: 0.8;
            --bg-overlay-opacity-3: 0.7;
            --bg-overlay-opacity-4: 0.5;
            --bg-overlay-opacity-5: 0.4;
            --bg-overlay-opacity-6: 0.1;
            --bg-overlay-opacity-hover: 0.5;
            --bg-overlay-opacity-hover-inverse: 0.08;
            --bg-overlay-opacity-active: 0.45;
            --bg-overlay-opacity-active-inverse: 0.1;
            --bg-overlay-opacity-selected: 0.4;
            --bg-overlay-opacity-selected-inverse: 0.15;
            --bg-overlay-opacity-chat: 0.8;
            --bg-overlay-opacity-home: 0.85;
            --bg-overlay-opacity-home-card: 0.8;
            --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4);
        }
        .theme-light {
            --bg-overlay-color: 255 255 255;
            --bg-overlay-color-inverse: 0 0 0;
            --bg-overlay-opacity-1: 0.9;
            --bg-overlay-opacity-2: 0.8;
            --bg-overlay-opacity-3: 0.7;
            --bg-overlay-opacity-4: 0.6;
            --bg-overlay-opacity-5: 0.3;
            --bg-overlay-opacity-6: 0.15;
            --bg-overlay-opacity-hover: 0.7;
            --bg-overlay-opacity-hover-inverse: 0.02;
            --bg-overlay-opacity-active: 0.65;
            --bg-overlay-opacity-active-inverse: 0.03;
            --bg-overlay-opacity-selected: 0.6;
            --bg-overlay-opacity-selected-inverse: 0.04;
            --bg-overlay-opacity-chat: 0.9;
            --bg-overlay-opacity-home: 0.7;
            --bg-overlay-opacity-home-card: 0.9;
            --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
        }
        .children-3xh0VB:after, .form-3gdLxP:before {
            content: none;
        }
        .scroller-3X7KbA {
            background: var(--bg-overlay-app-frame,var(--background-tertiary));
        }
        .expandedFolderBackground-1kSAf6 {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .wrapper-3kah-n:not(:hover):not(.selected-1Drb7Z) .childWrapper-1j_1ub {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .folder-241Joy:has(.expandedFolderIconWrapper-3RwQpD) {
            background: var(--bg-overlay-6,var(--background-secondary));
        }
        .circleIconButton-1VxDrg:not(.selected-2r1Hvo) {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .auto-2TJ1RH::-webkit-scrollbar-thumb,
        .thin-RnSY0a::-webkit-scrollbar-thumb {
            background-size: 200vh;
            background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),to(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)))),var(--custom-theme-background);
            background-image: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),var(--custom-theme-background);
        }
        .auto-2TJ1RH::-webkit-scrollbar-track {
            background-size: 200vh;
            background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color)/.4)),to(rgb(var(--bg-overlay-color)/.4))),var(--custom-theme-background);
            background-image: linear-gradient(rgb(var(--bg-overlay-color)/.4),rgb(var(--bg-overlay-color)/.4)),var(--custom-theme-background);
        }
        :root {
            --custom-theme-background: linear-gradient(48.17deg,
                hsl(37 calc(var(--saturation-factor, 1)*100%) 80%) 11.21%,
                hsl(204 calc(var(--saturation-factor, 1)*66%) 29%) 61.92%);
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594",
            "isGradient": true,
            "colors": ["accent", "primary", "secondary"]
        },
        {
            "name": "Neon Candy",
            "original": true,
            "accent": "#FC00FF",
            "primary": "#00DBDE",
            "secondary": "#00DBDE",
            "tertiary": "#00DBDE",
            "import": `@import url(//dablulite.github.io/css-snippets/NoLightInDark/import.css);
        @import url(//dablulite.github.io/css-snippets/NitroThemesFix/import.css);
        :root {
            --brand-100-hsl: 299 calc(var(--saturation-factor, 1)*100%) 97%;
            --brand-130-hsl: 299 calc(var(--saturation-factor, 1)*100%) 93%;
            --brand-160-hsl: 299 calc(var(--saturation-factor, 1)*100%) 90%;
            --brand-200-hsl: 299 calc(var(--saturation-factor, 1)*100%) 86%;
            --brand-230-hsl: 299 calc(var(--saturation-factor, 1)*100%) 82%;
            --brand-260-hsl: 299 calc(var(--saturation-factor, 1)*100%) 79%;
            --brand-300-hsl: 299 calc(var(--saturation-factor, 1)*100%) 75%;
            --brand-330-hsl: 299 calc(var(--saturation-factor, 1)*100%) 72%;
            --brand-345-hsl: 299 calc(var(--saturation-factor, 1)*100%) 68%;
            --brand-360-hsl: 299 calc(var(--saturation-factor, 1)*100%) 64%;
            --brand-400-hsl: 299 calc(var(--saturation-factor, 1)*100%) 61%;
            --brand-430-hsl: 299 calc(var(--saturation-factor, 1)*100%) 57%;
            --brand-460-hsl: 299 calc(var(--saturation-factor, 1)*100%) 54%;
            --brand-500-hsl: 299 calc(var(--saturation-factor, 1)*100%) 50%;
            --brand-530-hsl: 299 calc(var(--saturation-factor, 1)*100%) 46%;
            --brand-560-hsl: 299 calc(var(--saturation-factor, 1)*100%) 43%;
            --brand-600-hsl: 299 calc(var(--saturation-factor, 1)*100%) 39%;
            --brand-630-hsl: 299 calc(var(--saturation-factor, 1)*100%) 36%;
            --brand-660-hsl: 299 calc(var(--saturation-factor, 1)*100%) 32%;
            --brand-700-hsl: 299 calc(var(--saturation-factor, 1)*100%) 28%;
            --brand-730-hsl: 299 calc(var(--saturation-factor, 1)*100%) 25%;
            --brand-760-hsl: 299 calc(var(--saturation-factor, 1)*100%) 21%;
            --brand-800-hsl: 299 calc(var(--saturation-factor, 1)*100%) 18%;
            --brand-830-hsl: 299 calc(var(--saturation-factor, 1)*100%) 14%;
            --brand-860-hsl: 299 calc(var(--saturation-factor, 1)*100%) 10%;
            --brand-900-hsl: 299 calc(var(--saturation-factor, 1)*100%) 7%;
        }
        :root {
            --bg-overlay-1: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-1))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-2: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-3: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-4: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-4))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-5: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-5))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-6: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-hover: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-hover-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-hover))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-active: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-active-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-active))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-selected: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-selected-inverse))) fixed 0 0/cover,linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-selected))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-chat: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-chat))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-home: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-home-card: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-home-card))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --bg-overlay-app-frame: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-app-frame))) fixed 0 0/cover,var(--custom-theme-background) fixed 0 0/cover;
            --custom-theme-background: linear-gradient(90deg,
            hsl(181, calc(var(--saturation-factor, 1)*100%), 44%) 0%,
            hsl(299, calc(var(--saturation-factor, 1)*100%), 50%) 100%);
        }
        .theme-dark {
            --bg-overlay-color: 20 20 20;
            --bg-overlay-color-inverse: 255 255 255;
            --bg-overlay-opacity-1: 0.85;
            --bg-overlay-opacity-2: 0.8;
            --bg-overlay-opacity-3: 0.7;
            --bg-overlay-opacity-4: 0.5;
            --bg-overlay-opacity-5: 0.4;
            --bg-overlay-opacity-6: 0.1;
            --bg-overlay-opacity-hover: 0.5;
            --bg-overlay-opacity-hover-inverse: 0.08;
            --bg-overlay-opacity-active: 0.45;
            --bg-overlay-opacity-active-inverse: 0.1;
            --bg-overlay-opacity-selected: 0.4;
            --bg-overlay-opacity-selected-inverse: 0.15;
            --bg-overlay-opacity-chat: 0.8;
            --bg-overlay-opacity-home: 0.85;
            --bg-overlay-opacity-home-card: 0.8;
            --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-4);
        }
        .theme-light {
            --bg-overlay-color: 230 230 230;
            --bg-overlay-color-inverse: 0 0 0;
            --bg-overlay-opacity-1: 0.9;
            --bg-overlay-opacity-2: 0.8;
            --bg-overlay-opacity-3: 0.7;
            --bg-overlay-opacity-4: 0.6;
            --bg-overlay-opacity-5: 0.3;
            --bg-overlay-opacity-6: 0.15;
            --bg-overlay-opacity-hover: 0.7;
            --bg-overlay-opacity-hover-inverse: 0.02;
            --bg-overlay-opacity-active: 0.65;
            --bg-overlay-opacity-active-inverse: 0.03;
            --bg-overlay-opacity-selected: 0.6;
            --bg-overlay-opacity-selected-inverse: 0.04;
            --bg-overlay-opacity-chat: 0.9;
            --bg-overlay-opacity-home: 0.7;
            --bg-overlay-opacity-home-card: 0.9;
            --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5);
        }
        .children-3xh0VB:after, .form-3gdLxP:before {
            content: none;
        }
        .scroller-3X7KbA {
            background: var(--bg-overlay-app-frame,var(--background-tertiary));
        }
        .expandedFolderBackground-1kSAf6 {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .wrapper-3kah-n:not(:hover):not(.selected-1Drb7Z) .childWrapper-1j_1ub {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .folder-241Joy:has(.expandedFolderIconWrapper-3RwQpD) {
            background: var(--bg-overlay-6,var(--background-secondary));
        }
        .circleIconButton-1VxDrg:not(.selected-2r1Hvo) {
            background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6));
        }
        .auto-2TJ1RH::-webkit-scrollbar-thumb,
        .thin-RnSY0a::-webkit-scrollbar-thumb {
            background-size: 200vh;
            background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),to(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)))),var(--custom-theme-background);
            background-image: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),var(--custom-theme-background);
        }
        .auto-2TJ1RH::-webkit-scrollbar-track {
            background-size: 200vh;
            background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color)/.4)),to(rgb(var(--bg-overlay-color)/.4))),var(--custom-theme-background);
            background-image: linear-gradient(rgb(var(--bg-overlay-color)/.4),rgb(var(--bg-overlay-color)/.4)),var(--custom-theme-background);
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594",
            "isGradient": true,
            "colors": ["accent", "primary"]
        },
        {
            "name": "Wildberry",
            "original": false,
            "accent": "#f40172",
            "primary": "#180029",
            "secondary": "#340057",
            "tertiary": "#4b007a",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 332 calc(var(--saturation-factor, 1)*99%) 95%;
            --brand-130-hsl: 332 calc(var(--saturation-factor, 1)*99%) 91%;
            --brand-160-hsl: 332 calc(var(--saturation-factor, 1)*99%) 88%;
            --brand-200-hsl: 332 calc(var(--saturation-factor, 1)*99%) 84%;
            --brand-230-hsl: 332 calc(var(--saturation-factor, 1)*99%) 80%;
            --brand-260-hsl: 332 calc(var(--saturation-factor, 1)*99%) 77%;
            --brand-300-hsl: 332 calc(var(--saturation-factor, 1)*99%) 73%;
            --brand-330-hsl: 332 calc(var(--saturation-factor, 1)*99%) 70%;
            --brand-345-hsl: 332 calc(var(--saturation-factor, 1)*99%) 66%;
            --brand-360-hsl: 332 calc(var(--saturation-factor, 1)*99%) 62%;
            --brand-400-hsl: 332 calc(var(--saturation-factor, 1)*99%) 59%;
            --brand-430-hsl: 332 calc(var(--saturation-factor, 1)*99%) 55%;
            --brand-460-hsl: 332 calc(var(--saturation-factor, 1)*99%) 52%;
            --brand-500-hsl: 332 calc(var(--saturation-factor, 1)*99%) 48%;
            --brand-530-hsl: 332 calc(var(--saturation-factor, 1)*99%) 44%;
            --brand-560-hsl: 332 calc(var(--saturation-factor, 1)*99%) 41%;
            --brand-600-hsl: 332 calc(var(--saturation-factor, 1)*99%) 37%;
            --brand-630-hsl: 332 calc(var(--saturation-factor, 1)*99%) 34%;
            --brand-660-hsl: 332 calc(var(--saturation-factor, 1)*99%) 30%;
            --brand-700-hsl: 332 calc(var(--saturation-factor, 1)*99%) 26%;
            --brand-730-hsl: 332 calc(var(--saturation-factor, 1)*99%) 23%;
            --brand-760-hsl: 332 calc(var(--saturation-factor, 1)*99%) 19%;
            --brand-800-hsl: 332 calc(var(--saturation-factor, 1)*99%) 16%;
            --brand-830-hsl: 332 calc(var(--saturation-factor, 1)*99%) 12%;
            --brand-860-hsl: 332 calc(var(--saturation-factor, 1)*99%) 8%;
            --brand-900-hsl: 332 calc(var(--saturation-factor, 1)*99%) 5%;
            --mention-foreground: white !important;
            --primary-800-hsl: 277 calc(var(--saturation-factor, 1)*100%) 17%;
            --primary-730-hsl: 277 calc(var(--saturation-factor, 1)*100%) 24%;
            --primary-700-hsl: 277 calc(var(--saturation-factor, 1)*100%) 24%;
            --primary-660-hsl: 276 calc(var(--saturation-factor, 1)*100%) 14%;
            --primary-645-hsl: 275 calc(var(--saturation-factor, 1)*100%) 3%;
            --primary-630-hsl: 276 calc(var(--saturation-factor, 1)*100%) 17%;
            --primary-600-hsl: 275 calc(var(--saturation-factor, 1)*100%) 8%;
            --primary-560-hsl: 274 calc(var(--saturation-factor, 1)*100%) 10%;
            --primary-530-hsl: 274 calc(var(--saturation-factor, 1)*100%) 10%;
            --primary-500-hsl: 274 calc(var(--saturation-factor, 1)*100%) 10%;
            --primary-460: gray;
            --primary-430-hsl: 274 calc(var(--saturation-factor, 1)*100%) 2.8%;
            --primary-400-hsl: 274 calc(var(--saturation-factor, 1)*100%) -0.8000000000000007%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(275.8620689655172, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --channel-icon: hsl(275.8620689655172, calc(var(--saturation-factor, 1)*100%), 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(275.8620689655172, calc(var(--saturation-factor, 1)*100%), 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Facebook",
            "original": false,
            "accent": "#2375e1",
            "primary": "#18191a",
            "secondary": "#242526",
            "tertiary": "#3a3b3c",
            "import": `/*Automatically Generated - Colorway Creator V1.13*/
        :root {
            --brand-100-hsl: 214 calc(var(--saturation-factor, 1)*76%) 98%;
            --brand-130-hsl: 214 calc(var(--saturation-factor, 1)*76%) 94%;
            --brand-160-hsl: 214 calc(var(--saturation-factor, 1)*76%) 91%;
            --brand-200-hsl: 214 calc(var(--saturation-factor, 1)*76%) 87%;
            --brand-230-hsl: 214 calc(var(--saturation-factor, 1)*76%) 83%;
            --brand-260-hsl: 214 calc(var(--saturation-factor, 1)*76%) 80%;
            --brand-300-hsl: 214 calc(var(--saturation-factor, 1)*76%) 76%;
            --brand-330-hsl: 214 calc(var(--saturation-factor, 1)*76%) 73%;
            --brand-345-hsl: 214 calc(var(--saturation-factor, 1)*76%) 69%;
            --brand-360-hsl: 214 calc(var(--saturation-factor, 1)*76%) 65%;
            --brand-400-hsl: 214 calc(var(--saturation-factor, 1)*76%) 62%;
            --brand-430-hsl: 214 calc(var(--saturation-factor, 1)*76%) 58%;
            --brand-460-hsl: 214 calc(var(--saturation-factor, 1)*76%) 55%;
            --brand-500-hsl: 214 calc(var(--saturation-factor, 1)*76%) 51%;
            --brand-530-hsl: 214 calc(var(--saturation-factor, 1)*76%) 47%;
            --brand-560-hsl: 214 calc(var(--saturation-factor, 1)*76%) 44%;
            --brand-600-hsl: 214 calc(var(--saturation-factor, 1)*76%) 40%;
            --brand-630-hsl: 214 calc(var(--saturation-factor, 1)*76%) 37%;
            --brand-660-hsl: 214 calc(var(--saturation-factor, 1)*76%) 33%;
            --brand-700-hsl: 214 calc(var(--saturation-factor, 1)*76%) 29%;
            --brand-730-hsl: 214 calc(var(--saturation-factor, 1)*76%) 26%;
            --brand-760-hsl: 214 calc(var(--saturation-factor, 1)*76%) 22%;
            --brand-800-hsl: 214 calc(var(--saturation-factor, 1)*76%) 19%;
            --brand-830-hsl: 214 calc(var(--saturation-factor, 1)*76%) 15%;
            --brand-860-hsl: 214 calc(var(--saturation-factor, 1)*76%) 11%;
            --brand-900-hsl: 214 calc(var(--saturation-factor, 1)*76%) 8%;
            --primary-800-hsl: 200 calc(var(--saturation-factor, 1)*4%) 16%;
            --primary-730-hsl: 200 calc(var(--saturation-factor, 1)*3%) 23%;
            --primary-700-hsl: 200 calc(var(--saturation-factor, 1)*3%) 23%;
            --primary-660-hsl: 210 calc(var(--saturation-factor, 1)*3%) 25.6%;
            --primary-645-hsl: 200 calc(var(--saturation-factor, 1)*6%) 5%;
            --primary-630-hsl: 210 calc(var(--saturation-factor, 1)*3%) 15%;
            --primary-600-hsl: 200 calc(var(--saturation-factor, 1)*6%) 10%;
            --primary-560-hsl: 195 calc(var(--saturation-factor, 1)*7%) 12%;
            --primary-530-hsl: 195 calc(var(--saturation-factor, 1)*7%) 12%;
            --primary-500-hsl: 195 calc(var(--saturation-factor, 1)*7%) 12%;
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Material You",
            "original": false,
            "accent": "#004977",
            "primary": "#1f1f1f",
            "secondary": "#28292a",
            "tertiary": "#2d2f31",
            "import": `/*Automatically Generated - Colorway Creator V1.12*/
        :root {
            --brand-100-hsl: 203 calc(var(--saturation-factor, 1)*100%) 70%;
            --brand-130-hsl: 203 calc(var(--saturation-factor, 1)*100%) 66%;
            --brand-160-hsl: 203 calc(var(--saturation-factor, 1)*100%) 63%;
            --brand-200-hsl: 203 calc(var(--saturation-factor, 1)*100%) 59%;
            --brand-230-hsl: 203 calc(var(--saturation-factor, 1)*100%) 55%;
            --brand-260-hsl: 203 calc(var(--saturation-factor, 1)*100%) 52%;
            --brand-300-hsl: 203 calc(var(--saturation-factor, 1)*100%) 48%;
            --brand-330-hsl: 203 calc(var(--saturation-factor, 1)*100%) 45%;
            --brand-345-hsl: 203 calc(var(--saturation-factor, 1)*100%) 41%;
            --brand-360-hsl: 203 calc(var(--saturation-factor, 1)*100%) 37%;
            --brand-400-hsl: 203 calc(var(--saturation-factor, 1)*100%) 34%;
            --brand-430-hsl: 203 calc(var(--saturation-factor, 1)*100%) 30%;
            --brand-460-hsl: 203 calc(var(--saturation-factor, 1)*100%) 27%;
            --brand-500-hsl: 203 calc(var(--saturation-factor, 1)*100%) 23%;
            --brand-530-hsl: 203 calc(var(--saturation-factor, 1)*100%) 19%;
            --brand-560-hsl: 203 calc(var(--saturation-factor, 1)*100%) 16%;
            --brand-600-hsl: 203 calc(var(--saturation-factor, 1)*100%) 12%;
            --brand-630-hsl: 203 calc(var(--saturation-factor, 1)*100%) 9%;
            --brand-660-hsl: 203 calc(var(--saturation-factor, 1)*100%) 5%;
            --brand-700-hsl: 203 calc(var(--saturation-factor, 1)*100%) 1%;
            --brand-730-hsl: 203 calc(var(--saturation-factor, 1)*100%) -2%;
            --brand-760-hsl: 203 calc(var(--saturation-factor, 1)*100%) -6%;
            --brand-800-hsl: 203 calc(var(--saturation-factor, 1)*100%) -9%;
            --brand-830-hsl: 203 calc(var(--saturation-factor, 1)*100%) -13%;
            --brand-860-hsl: 203 calc(var(--saturation-factor, 1)*100%) -17%;
            --brand-900-hsl: 203 calc(var(--saturation-factor, 1)*100%) -20%;
            --mention-foreground: white !important;
            --primary-800-hsl: 220 calc(var(--saturation-factor, 1)*5%) 13%;
            --primary-730-hsl: 210 calc(var(--saturation-factor, 1)*4%) 18%;
            --primary-700-hsl: 210 calc(var(--saturation-factor, 1)*4%) 18%;
            --primary-660-hsl: 240 calc(var(--saturation-factor, 1)*2%) 13%;
            --primary-645-hsl: 0 calc(var(--saturation-factor, 1)*0%) 7%;
            --primary-630-hsl: 210 calc(var(--saturation-factor, 1)*2%) 16%;
            --primary-600-hsl: 0 calc(var(--saturation-factor, 1)*0%) 12%;
            --primary-560-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-530-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-500-hsl: 0 calc(var(--saturation-factor, 1)*0%) 15%;
            --primary-460: gray;
            --primary-430-hsl: 0 calc(var(--saturation-factor, 1)*0%) 7.8%;
            --primary-400-hsl: 0 calc(var(--saturation-factor, 1)*0%) 4.199999999999999%;
        }

        /*Primary*/
        .theme-dark .container-2cd8Mz *,
        .theme-dark .body-16rSsp *,
        .theme-dark .toolbar-3_r2xA *,
        .theme-dark .container-89zvna *,
        .theme-dark .messageContent-2t3eCI,
        .theme-dark .attachButtonPlus-3IYelE,
        .theme-dark .username-h_Y3Us:not([style]),
        .theme-dark .children-3xh0VB *,
        .theme-dark .buttonContainer-1502pf *,
        .theme-dark .listItem-3SmSlK * {
            --white-500: white !important;
            --text-normal: white !important;
            --header-primary: white !important;
        }

        .theme-dark .contentRegionScroller-2_GT_N *:not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
            --white-500: white !important;
        }

        .theme-dark .container-1um7CU,
        .theme-dark .container-2IKOsH,
        .theme-dark .header-3xB4vB {
            background: transparent;
        }

        .theme-dark .header-3xB4vB *,
        .theme-dark .title-31SJ6t * {
            --channel-icon: white;
        }

        .theme-dark .callContainer-HtHELf * {
            --white-500: white !important;
        }

        .theme-dark .channelTextArea-1FufC0 * {
            --text-normal: white;
        }

        .theme-dark .placeholder-1rCBhr {
            --channel-text-area-placeholder: white;
            opacity: .6;
        }

        .theme-dark .colorwaySelectorIcon {
            background-color: white;
        }

        .theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
            color: white;
        }
        /*End Primary*/

        /*Secondary*/
        .theme-dark .wrapper-2RrXDg *,
        .theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
        .theme-dark .members-3WRCEx *:not([style]),
        .theme-dark .sidebarRegionScroller-FXiQOh *,
        .theme-dark .header-1XpmZs,
        .theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
            --white-500: white !important;
            --channels-default: hsl(209.9999999999999, 100%, 90%) !important;
            --channel-icon: hsl(209.9999999999999, 100%, 90%) !important;
            --interactive-normal: var(--white-500);
            --interactive-hover: var(--white-500);
            --interactive-active: var(--white-500);
        }

        .theme-dark .channelRow-4X_3fi {
            background-color: var(--background-secondary);
        }

        .theme-dark .channelRow-4X_3fi * {
            --channel-icon: white;
        }

        .theme-dark #app-mount .activity-2EQDZv,
        .theme-dark #app-mount .activity-2EQDZv * {
            --channels-default: var(--white-500) !important;
        }

        .theme-dark .nameTag-sc-gpq {
            --header-primary: white !important;
            --header-secondary: hsl(209.9999999999999, 100%, 90%) !important;
        }

        .theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
            color: #fff;
        }

        .theme-dark .embedFull-1HGV2S {
            --text-normal: white;
        }
        /*End Secondary*/

        /*Tertiary*/
        .theme-dark .winButton-3UMjdg,
        .theme-dark .searchBar-2aylmZ *,
        .theme-dark .wordmarkWindows-2dq6rw,
        .theme-dark .searchBar-jGtisZ *,
        .theme-dark .searchBarComponent-3N7dCG {
            --white-500: white !important;
        }

        .theme-dark [style="background-color: var(--background-secondary);"] {
            color: white;
        }

        .theme-dark .popout-TdhJ6Z > *,
        .theme-dark .colorwayHeaderTitle {
            --interactive-normal: white !important;
            --header-secondary: white !important;
        }

        .theme-dark .tooltip-33Jwqe {
            --text-normal: white !important;
        }
        /*End Tertiary*/

        /*Accent*/
        .selected-2r1Hvo *,
        .selected-1Drb7Z *,
        #app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
        .colorDefault-2_rLdz.focused-3LIdPu,
        .row-1qtctT:hover,
        .colorwayInfoIcon,
        .colorwayCheckIcon {
            --white-500: white !important;
        }

        .ColorwaySelectorBtn:hover .colorwaySelectorIcon {
            background-color: white !important;
        }
        /*End Accent*/`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "Discord Teal",
            "original": false,
            "accent": "#175f6d",
            "primary": "#313338",
            "secondary": "#2b2d31",
            "tertiary": "#1e1f22",
            "import": `:root {
            --brand-100-hsl: var(--teal-100-hsl);
            --brand-130-hsl: var(--teal-130-hsl);
            --brand-160-hsl: var(--teal-160-hsl);
            --brand-200-hsl: var(--teal-200-hsl);
            --brand-230-hsl: var(--teal-230-hsl);
            --brand-260-hsl: var(--teal-260-hsl);
            --brand-300-hsl: var(--teal-300-hsl);
            --brand-330-hsl: var(--teal-330-hsl);
            --brand-345-hsl: var(--teal-345-hsl);
            --brand-360-hsl: var(--teal-360-hsl);
            --brand-400-hsl: var(--teal-400-hsl);
            --brand-430-hsl: var(--teal-430-hsl);
            --brand-460-hsl: var(--teal-460-hsl);
            --brand-500-hsl: var(--teal-500-hsl);
            --brand-530-hsl: var(--teal-530-hsl);
            --brand-560-hsl: var(--teal-560-hsl);
            --brand-600-hsl: var(--teal-600-hsl);
            --brand-630-hsl: var(--teal-630-hsl);
            --brand-660-hsl: var(--teal-660-hsl);
            --brand-700-hsl: var(--teal-700-hsl);
            --brand-730-hsl: var(--teal-730-hsl);
            --brand-760-hsl: var(--teal-760-hsl);
            --brand-800-hsl: var(--teal-800-hsl);
            --brand-830-hsl: var(--teal-830-hsl);
            --brand-860-hsl: var(--teal-860-hsl);
            --brand-900-hsl: var(--teal-900-hsl);
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594",
            "colors": ["accent"]
        },
        {
            "name": "黄昏の花 (Twilight Blossom)",
            "original": true,
            "accent": "#e100ff",
            "primary": "#04000a",
            "secondary": "#0b0024",
            "tertiary": "#210042",
            "import": `/*Automatically Generated - Colorway Creator V1.14.1*/
        :root {
            --brand-100-hsl: 293 calc(var(--saturation-factor, 1)*100%) 97%;
            --brand-130-hsl: 293 calc(var(--saturation-factor, 1)*100%) 93%;
            --brand-160-hsl: 293 calc(var(--saturation-factor, 1)*100%) 90%;
            --brand-200-hsl: 293 calc(var(--saturation-factor, 1)*100%) 86%;
            --brand-230-hsl: 293 calc(var(--saturation-factor, 1)*100%) 82%;
            --brand-260-hsl: 293 calc(var(--saturation-factor, 1)*100%) 79%;
            --brand-300-hsl: 293 calc(var(--saturation-factor, 1)*100%) 75%;
            --brand-330-hsl: 293 calc(var(--saturation-factor, 1)*100%) 72%;
            --brand-345-hsl: 293 calc(var(--saturation-factor, 1)*100%) 68%;
            --brand-360-hsl: 293 calc(var(--saturation-factor, 1)*100%) 64%;
            --brand-400-hsl: 293 calc(var(--saturation-factor, 1)*100%) 61%;
            --brand-430-hsl: 293 calc(var(--saturation-factor, 1)*100%) 57%;
            --brand-460-hsl: 293 calc(var(--saturation-factor, 1)*100%) 54%;
            --brand-500-hsl: 293 calc(var(--saturation-factor, 1)*100%) 50%;
            --brand-530-hsl: 293 calc(var(--saturation-factor, 1)*100%) 46%;
            --brand-560-hsl: 293 calc(var(--saturation-factor, 1)*100%) 43%;
            --brand-600-hsl: 293 calc(var(--saturation-factor, 1)*100%) 39%;
            --brand-630-hsl: 293 calc(var(--saturation-factor, 1)*100%) 36%;
            --brand-660-hsl: 293 calc(var(--saturation-factor, 1)*100%) 32%;
            --brand-700-hsl: 293 calc(var(--saturation-factor, 1)*100%) 28%;
            --brand-730-hsl: 293 calc(var(--saturation-factor, 1)*100%) 25%;
            --brand-760-hsl: 293 calc(var(--saturation-factor, 1)*100%) 21%;
            --brand-800-hsl: 293 calc(var(--saturation-factor, 1)*100%) 18%;
            --brand-830-hsl: 293 calc(var(--saturation-factor, 1)*100%) 14%;
            --brand-860-hsl: 293 calc(var(--saturation-factor, 1)*100%) 10%;
            --brand-900-hsl: 293 calc(var(--saturation-factor, 1)*100%) 7%;
            --primary-800-hsl: 270 calc(var(--saturation-factor, 1)*100%) 20.2%;
            --primary-730-hsl: 270 calc(var(--saturation-factor, 1)*100%) 16.6%;
            --primary-700-hsl: 270 calc(var(--saturation-factor, 1)*100%) 13%;
            --primary-660-hsl: 258 calc(var(--saturation-factor, 1)*100%) 10.6%;
            --primary-645-hsl: 264 calc(var(--saturation-factor, 1)*100%) 0%;
            --primary-630-hsl: 258 calc(var(--saturation-factor, 1)*100%) 7%;
            --primary-600-hsl: 264 calc(var(--saturation-factor, 1)*100%) 2%;
            --primary-560-hsl: 264 calc(var(--saturation-factor, 1)*100%) 5.6%;
            --primary-530-hsl: 264 calc(var(--saturation-factor, 1)*100%) 9.2%;
            --primary-500-hsl: 264 calc(var(--saturation-factor, 1)*100%) 12.8%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430: hsl(258, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-400: hsl(258, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-360: hsl(258, calc(var(--saturation-factor, 1)*100%), 90%);
        }
        .emptyPage-2TGR7j,
        .scrollerContainer-y16Rs9,
        .container-2IKOsH,
        .header-3xB4vB {
            background-color: unset !important;
        }`,
            "author": "Riddim_GLiTCH",
            "authorID": "801089753038061669"
        },
        {
            "name": "Chai",
            "original": true,
            "accent": "#59cd51",
            "primary": "#1c1e15",
            "secondary": "#1e2118",
            "tertiary": "#24291e",
            "import": `/*Automatically Generated - Colorway Creator V1.14.1*/
        :root {
            --brand-100-hsl: 116 calc(var(--saturation-factor, 1)*55%) 100%;
            --brand-130-hsl: 116 calc(var(--saturation-factor, 1)*55%) 99%;
            --brand-160-hsl: 116 calc(var(--saturation-factor, 1)*55%) 96%;
            --brand-200-hsl: 116 calc(var(--saturation-factor, 1)*55%) 92%;
            --brand-230-hsl: 116 calc(var(--saturation-factor, 1)*55%) 88%;
            --brand-260-hsl: 116 calc(var(--saturation-factor, 1)*55%) 85%;
            --brand-300-hsl: 116 calc(var(--saturation-factor, 1)*55%) 81%;
            --brand-330-hsl: 116 calc(var(--saturation-factor, 1)*55%) 78%;
            --brand-345-hsl: 116 calc(var(--saturation-factor, 1)*55%) 74%;
            --brand-360-hsl: 116 calc(var(--saturation-factor, 1)*55%) 70%;
            --brand-400-hsl: 116 calc(var(--saturation-factor, 1)*55%) 67%;
            --brand-430-hsl: 116 calc(var(--saturation-factor, 1)*55%) 63%;
            --brand-460-hsl: 116 calc(var(--saturation-factor, 1)*55%) 60%;
            --brand-500-hsl: 116 calc(var(--saturation-factor, 1)*55%) 56%;
            --brand-530-hsl: 116 calc(var(--saturation-factor, 1)*55%) 52%;
            --brand-560-hsl: 116 calc(var(--saturation-factor, 1)*55%) 49%;
            --brand-600-hsl: 116 calc(var(--saturation-factor, 1)*55%) 45%;
            --brand-630-hsl: 116 calc(var(--saturation-factor, 1)*55%) 42%;
            --brand-660-hsl: 116 calc(var(--saturation-factor, 1)*55%) 38%;
            --brand-700-hsl: 116 calc(var(--saturation-factor, 1)*55%) 34%;
            --brand-730-hsl: 116 calc(var(--saturation-factor, 1)*55%) 31%;
            --brand-760-hsl: 116 calc(var(--saturation-factor, 1)*55%) 27%;
            --brand-800-hsl: 116 calc(var(--saturation-factor, 1)*55%) 24%;
            --brand-830-hsl: 116 calc(var(--saturation-factor, 1)*55%) 20%;
            --brand-860-hsl: 116 calc(var(--saturation-factor, 1)*55%) 16%;
            --brand-900-hsl: 116 calc(var(--saturation-factor, 1)*55%) 13%;
            --primary-800-hsl: 87 calc(var(--saturation-factor, 1)*16%) 21.2%;
            --primary-730-hsl: 87 calc(var(--saturation-factor, 1)*16%) 17.6%;
            --primary-700-hsl: 87 calc(var(--saturation-factor, 1)*16%) 14%;
            --primary-660-hsl: 80 calc(var(--saturation-factor, 1)*16%) 14.6%;
            --primary-645-hsl: 73 calc(var(--saturation-factor, 1)*18%) 5%;
            --primary-630-hsl: 80 calc(var(--saturation-factor, 1)*16%) 11%;
            --primary-600-hsl: 73 calc(var(--saturation-factor, 1)*18%) 10%;
            --primary-560-hsl: 73 calc(var(--saturation-factor, 1)*18%) 13.6%;
            --primary-530-hsl: 73 calc(var(--saturation-factor, 1)*18%) 17.2%;
            --primary-500-hsl: 73 calc(var(--saturation-factor, 1)*18%) 20.8%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430: hsl(80, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-400: hsl(80, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-360: hsl(80, calc(var(--saturation-factor, 1)*100%), 90%);
        }
        .emptyPage-2TGR7j,
        .scrollerContainer-y16Rs9,
        .container-2IKOsH,
        .header-3xB4vB {
            background-color: unset !important;
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        },
        {
            "name": "CS1.6",
            "original": false,
            "accent": "#929a8d",
            "primary": "#3f4738",
            "secondary": "#5b6c51",
            "tertiary": "#4d5945",
            "import": `/*Automatically Generated - Colorway Creator V1.14.1*/
        :root {
            --brand-100-hsl: 97 calc(var(--saturation-factor, 1)*6%) 100%;
            --brand-130-hsl: 97 calc(var(--saturation-factor, 1)*6%) 100%;
            --brand-160-hsl: 97 calc(var(--saturation-factor, 1)*6%) 98%;
            --brand-200-hsl: 97 calc(var(--saturation-factor, 1)*6%) 94%;
            --brand-230-hsl: 97 calc(var(--saturation-factor, 1)*6%) 90%;
            --brand-260-hsl: 97 calc(var(--saturation-factor, 1)*6%) 87%;
            --brand-300-hsl: 97 calc(var(--saturation-factor, 1)*6%) 83%;
            --brand-330-hsl: 97 calc(var(--saturation-factor, 1)*6%) 80%;
            --brand-345-hsl: 97 calc(var(--saturation-factor, 1)*6%) 76%;
            --brand-360-hsl: 97 calc(var(--saturation-factor, 1)*6%) 72%;
            --brand-400-hsl: 97 calc(var(--saturation-factor, 1)*6%) 69%;
            --brand-430-hsl: 97 calc(var(--saturation-factor, 1)*6%) 65%;
            --brand-460-hsl: 97 calc(var(--saturation-factor, 1)*6%) 62%;
            --brand-500-hsl: 97 calc(var(--saturation-factor, 1)*6%) 58%;
            --brand-530-hsl: 97 calc(var(--saturation-factor, 1)*6%) 54%;
            --brand-560-hsl: 97 calc(var(--saturation-factor, 1)*6%) 51%;
            --brand-600-hsl: 97 calc(var(--saturation-factor, 1)*6%) 47%;
            --brand-630-hsl: 97 calc(var(--saturation-factor, 1)*6%) 44%;
            --brand-660-hsl: 97 calc(var(--saturation-factor, 1)*6%) 40%;
            --brand-700-hsl: 97 calc(var(--saturation-factor, 1)*6%) 36%;
            --brand-730-hsl: 97 calc(var(--saturation-factor, 1)*6%) 33%;
            --brand-760-hsl: 97 calc(var(--saturation-factor, 1)*6%) 29%;
            --brand-800-hsl: 97 calc(var(--saturation-factor, 1)*6%) 26%;
            --brand-830-hsl: 97 calc(var(--saturation-factor, 1)*6%) 22%;
            --brand-860-hsl: 97 calc(var(--saturation-factor, 1)*6%) 18%;
            --brand-900-hsl: 97 calc(var(--saturation-factor, 1)*6%) 15%;
            --primary-800-hsl: 96 calc(var(--saturation-factor, 1)*13%) 38.2%;
            --primary-730-hsl: 96 calc(var(--saturation-factor, 1)*13%) 34.6%;
            --primary-700-hsl: 96 calc(var(--saturation-factor, 1)*13%) 31%;
            --primary-660-hsl: 98 calc(var(--saturation-factor, 1)*14%) 40.6%;
            --primary-645-hsl: 92 calc(var(--saturation-factor, 1)*12%) 20%;
            --primary-630-hsl: 98 calc(var(--saturation-factor, 1)*14%) 37%;
            --primary-600-hsl: 92 calc(var(--saturation-factor, 1)*12%) 25%;
            --primary-560-hsl: 92 calc(var(--saturation-factor, 1)*12%) 28.6%;
            --primary-530-hsl: 92 calc(var(--saturation-factor, 1)*12%) 32.2%;
            --primary-500-hsl: 92 calc(var(--saturation-factor, 1)*12%) 35.8%;
            --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
            --primary-430: hsl(98, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-400: hsl(98, calc(var(--saturation-factor, 1)*100%), 90%);
            --primary-360: hsl(98, calc(var(--saturation-factor, 1)*100%), 90%);
        }
        .emptyPage-2TGR7j,
        .scrollerContainer-y16Rs9,
        .container-2IKOsH,
        .header-3xB4vB {
            background-color: unset !important;
        }`,
            "author": "DaBluLite",
            "authorID": "582170007505731594"
        }
    ];

    function generateCss(primaryColor, secondaryColor, tertiaryColor, accentColor, tintedText) {
        const colorwayCss = `/*Automatically Generated - Colorway Creator V${plugin.creatorVersion}*/
:root {
    --brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 13)), 100)}%;
    --brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 12)), 100)}%;
    --brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 11)), 100)}%;
    --brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 10)), 100)}%;
    --brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 9)), 100)}%;
    --brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 8)), 100)}%;
    --brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 7)), 100)}%;
    --brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 6)), 100)}%;
    --brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 5)), 100)}%;
    --brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 4)), 100)}%;
    --brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 3)), 100)}%;
    --brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 2)), 100)}%;
    --brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + 3.6), 100)}%;
    --brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
    --brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - 3.6), 0)}%;
    --brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 2)), 0)}%;
    --brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 3)), 0)}%;
    --brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 4)), 0)}%;
    --brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 5)), 0)}%;
    --brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 6)), 0)}%;
    --brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 7)), 0)}%;
    --brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 8)), 0)}%;
    --brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 9)), 0)}%;
    --brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 10)), 0)}%;
    --brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 11)), 0)}%;
    --brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 12)), 0)}%;
    --primary-800-hsl: ${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.min(HexToHSL("#" + tertiaryColor)[2] + (3.6 * 2), 100)}%;
    --primary-730-hsl: ${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.min(HexToHSL("#" + tertiaryColor)[2] + 3.6, 100)}%;
    --primary-700-hsl: ${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${HexToHSL("#" + tertiaryColor)[2]}%;
    --primary-660-hsl: ${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${Math.min(HexToHSL("#" + secondaryColor)[2] + 3.6, 100)}%;
    --primary-645-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${Math.max(HexToHSL("#" + primaryColor)[2] - 5, 0)}%;
    --primary-630-hsl: ${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${HexToHSL("#" + secondaryColor)[2]}%;
    --primary-600-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${HexToHSL("#" + primaryColor)[2]}%;
    --primary-560-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + 3.6, 100)}%;
    --primary-530-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 2), 100)}%;
    --primary-500-hsl: ${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${Math.min(HexToHSL("#" + primaryColor)[2] + (3.6 * 3), 100)}%;${tintedText ? `\n    --primary-460-hsl: 0 calc(var(--saturation-factor, 1)*0%) 50%;
    --primary-430: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 90%)" : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")};
    --primary-400: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 90%)" : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")};
    --primary-360: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 90%)" : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")};` : ""}
}
.emptyPage-2TGR7j,
.scrollerContainer-y16Rs9,
.container-2IKOsH,
.header-3xB4vB {
    background-color: unset !important;
}${(Math.round(HexToHSL("#" + primaryColor)[2]) > 80) ? `\n\n/*Primary*/
.theme-dark .container-2cd8Mz,
.theme-dark .body-16rSsp,
.theme-dark .toolbar-3_r2xA,
.theme-dark .container-89zvna,
.theme-dark .messageContent-2t3eCI,
.theme-dark .attachButtonPlus-3IYelE,
.theme-dark .username-h_Y3Us:not([style]),
.theme-dark .children-3xh0VB,
.theme-dark .buttonContainer-1502pf,
.theme-dark .listItem-3SmSlK,
.theme-dark .body-16rSsp .caret-1le2LN,
.theme-dark .body-16rSsp .titleWrapper-24Kyzc > h1,
.theme-dark .body-16rSsp .icon-2xnN2Y {
    --white-500: black !important;
    --interactive-normal: black !important;
    --text-normal: black !important;
    --text-muted: black !important;
    --header-primary: black !important;
    --header-secondary: black !important;
}

.theme-dark .contentRegionScroller-2_GT_N :not(.mtk1,.mtk2,.mtk3,.mtk4,.mtk5,.mtk6,.mtk7,.mtk8,.mtk9,.monaco-editor .line-numbers) {
    --white-500: black !important;
}

.theme-dark .container-1um7CU,
.theme-dark .container-2IKOsH,
.theme-dark .header-3xB4vB {
    background: transparent;
}

.theme-dark .container-ZMc96U {
    --channel-icon: black;
}

.theme-dark .callContainer-HtHELf {
    --white-500: ${(HexToHSL("#" + tertiaryColor)[2] > 80) ? "black" : "white"} !important;
}

.theme-dark .channelTextArea-1FufC0 {
    --text-normal: ${(HexToHSL("#" + primaryColor)[2] + 3.6 > 80) ? "black" : "white"};
}

.theme-dark .placeholder-1rCBhr {
    --channel-text-area-placeholder: ${(HexToHSL("#" + primaryColor)[2] + 3.6 > 80) ? "black" : "white"};
    opacity: .6;
}

.theme-dark .colorwaySelectorIcon {
    background-color: black;
}

.theme-dark .root-1CAIjD > .header-1ffhsl > h1 {
    color: black;
}
/*End Primary*/`: ""}${(HexToHSL("#" + secondaryColor)[2] > 80) ? `\n\n/*Secondary*/
.theme-dark .wrapper-2RrXDg *,
.theme-dark .sidebar-1tnWFu *:not(.hasBanner-2IrYih *),
.theme-dark .members-3WRCEx *:not([style]),
.theme-dark .sidebarRegionScroller-FXiQOh *,
.theme-dark .header-1XpmZs,
.theme-dark .lookFilled-1H2Jvj.colorPrimary-2-Lusz {
    --white-500: black !important;
    --channels-default: black !important;
    --channel-icon: black !important;
    --interactive-normal: var(--white-500);
    --interactive-hover: var(--white-500);
    --interactive-active: var(--white-500);
}

.theme-dark .channelRow-4X_3fi {
    background-color: var(--background-secondary);
}

.theme-dark .channelRow-4X_3fi * {
    --channel-icon: black;
}

.theme-dark #app-mount .activity-2EQDZv {
    --channels-default: var(--white-500) !important;
}

.theme-dark .nameTag-sc-gpq {
    --header-primary: black !important;
    --header-secondary: ${HexToHSL("#" + secondaryColor)[0] === 0 ? "gray" : ((HexToHSL("#" + secondaryColor)[2] < 80) ? "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 90%)" : "hsl(" + HexToHSL("#" + secondaryColor)[0] + ", calc(var(--saturation-factor, 1)*100%), 20%)")} !important;
}

.theme-dark .bannerVisible-Vkyg1I .headerContent-2SNbie {
    color: #fff;
}

.theme-dark .embedFull-1HGV2S {
    --text-normal: black;
}
/*End Secondary*/`: ""}${HexToHSL("#" + tertiaryColor)[2] > 80 ? `\n\n/*Tertiary*/
.theme-dark .winButton-3UMjdg,
.theme-dark .searchBar-2aylmZ *,
.theme-dark .wordmarkWindows-2dq6rw,
.theme-dark .searchBar-jGtisZ *,
.theme-dark .searchBarComponent-3N7dCG {
    --white-500: black !important;
}

.theme-dark [style="background-color: var(--background-secondary);"] {
    color: ${HexToHSL("#" + secondaryColor)[2] > 80 ? "black" : "white"};
}

.theme-dark .popout-TdhJ6Z > *,
.theme-dark .colorwayHeaderTitle {
    --interactive-normal: black !important;
    --header-secondary: black !important;
}

.theme-dark .tooltip-33Jwqe {
    --text-normal: black !important;
}
/*End Tertiary*/`: ""}${HexToHSL("#" + accentColor)[2] > 80 ? `\n\n/*Accent*/
.selected-2r1Hvo *,
.selected-1Drb7Z *,
#app-mount .lookFilled-1H2Jvj.colorBrand-2M3O3N:not(.buttonColor-3bP3fX),
.colorDefault-2_rLdz.focused-3LIdPu,
.row-1qtctT:hover,
.colorwayInfoIcon,
.colorwayCheckIcon {
    --white-500: black !important;
}

.ColorwaySelectorBtn:hover .colorwaySelectorIcon {
    background-color: black !important;
}

:root {
    --mention-foreground: black !important;
}
/*End Accent*/`: ""}`;
        return colorwayCss;
    }

    function getPreset(primaryColor, secondaryColor, tertiaryColor, accentColor) {
        function cyan() {
            return `:root {
    --cyan-accent-color: ${"#" + accentColor};
    --cyan-background-primary: hsl(${HexToHSL("#" + primaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + primaryColor)[1]}%) ${HexToHSL("#" + primaryColor)[2]}%/40%);
    --cyan-background-secondary: hsl(${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.min(HexToHSL("#" + tertiaryColor)[2] + (3.6 * 2), 100)}%);
}`;
        }

        function virtualBoy() {
            return `:root {
    --VBaccent: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
    --VBaccent-muted: ${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.max(((HexToHSL("#" + tertiaryColor)[2]) - 10), 0)}%;
    --VBaccent-dimmest: ${HexToHSL("#" + tertiaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + tertiaryColor)[1]}%) ${Math.min((HexToHSL("#" + tertiaryColor)[2] + (3.6 * 5) - 3), 100)}%;
}`;
        }

        function modular() {
            return `:root {
    --modular-hue: ${HexToHSL("#" + accentColor)[0]};
    --modular-saturation: calc(var(--saturation-factor, 1)${HexToHSL("#" + accentColor)[1]}%);
    --modular-lightness: ${HexToHSL("#" + accentColor)[2]}%;
}`;
        }

        function solana() {
            return `:root {
    --accent-hue: ${HexToHSL("#" + accentColor)[0]};
    --accent-saturation: calc(var(--saturation-factor, 1)${HexToHSL("#" + accentColor)[1]}%);
    --accent-brightness: ${HexToHSL("#" + accentColor)[2]}%;
    --background-accent-hue: ${HexToHSL("#" + primaryColor)[0]};
    --background-accent-saturation: calc(var(--saturation-factor, 1)${HexToHSL("#" + primaryColor)[1]}%);
    --background-accent-brightness: ${HexToHSL("#" + primaryColor)[2]}%;
    --background-overlay-opacity: 0%;
}`;
        }

        function gradientType1() {
            return `${gradientBase(accentColor)}
:root {
    --custom-theme-background: linear-gradient(239.16deg, #${primaryColor} 10.39%, #${secondaryColor} 26.87%, #${tertiaryColor} 48.31%, hsl(${HexToHSL("#" + secondaryColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + secondaryColor)[1]}%) ${Math.min(HexToHSL("#" + secondaryColor)[2] + 3.6, 100)}%) 64.98%, #${primaryColor} 92.5%);
}`;
        }

        function gradientType2() {
            return `${gradientBase(accentColor)}
:root {
    --custom-theme-background: linear-gradient(48.17deg, #${primaryColor} 11.21%, #${secondaryColor} 61.92%);
}`;
        }

        function hueRotation() {
            return `:root {
    --brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 13)), 100)}%;
    --brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 12)), 100)}%;
    --brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 11)), 100)}%;
    --brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 10)), 100)}%;
    --brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 9)), 100)}%;
    --brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 8)), 100)}%;
    --brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 7)), 100)}%;
    --brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 6)), 100)}%;
    --brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 5)), 100)}%;
    --brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 4)), 100)}%;
    --brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 3)), 100)}%;
    --brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 2)), 100)}%;
    --brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + 3.6), 100)}%;
    --brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
    --brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - 3.6), 0)}%;
    --brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 2)), 0)}%;
    --brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 3)), 0)}%;
    --brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 4)), 0)}%;
    --brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 5)), 0)}%;
    --brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 6)), 0)}%;
    --brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 7)), 0)}%;
    --brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 8)), 0)}%;
    --brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 9)), 0)}%;
    --brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 10)), 0)}%;
    --brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 11)), 0)}%;
    --brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 12)), 0)}%;
    --primary-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 7%;
    --primary-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*10%) 13%;
    --primary-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*10%) 13%;
    --primary-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 15%;
    --primary-645-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 16%;
    --primary-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 18%;
    --primary-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 21%;
    --primary-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
    --primary-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
    --primary-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
}`;
        }

        function accentSwap() {
            return `:root {
    --brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 13)), 100)}%;
    --brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 12)), 100)}%;
    --brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 11)), 100)}%;
    --brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 10)), 100)}%;
    --brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 9)), 100)}%;
    --brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 8)), 100)}%;
    --brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 7)), 100)}%;
    --brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 6)), 100)}%;
    --brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 5)), 100)}%;
    --brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 4)), 100)}%;
    --brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 3)), 100)}%;
    --brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + (3.6 * 2)), 100)}%;
    --brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round(HexToHSL("#" + accentColor)[2] + 3.6), 100)}%;
    --brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
    --brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - 3.6), 0)}%;
    --brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 2)), 0)}%;
    --brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 3)), 0)}%;
    --brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 4)), 0)}%;
    --brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 5)), 0)}%;
    --brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 6)), 0)}%;
    --brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 7)), 0)}%;
    --brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 8)), 0)}%;
    --brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 9)), 0)}%;
    --brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 10)), 0)}%;
    --brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 11)), 0)}%;
    --brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round(HexToHSL("#" + accentColor)[2] - (3.6 * 12)), 0)}%;
}`;
        }

        return {
            cyan: {
                name: "Cyan",
                preset: cyan,
                id: "cyan",
                colors: ["primary", "secondary", "accent"]
            },
            virtualBoy: {
                name: "Virtual Boy",
                preset: virtualBoy,
                id: "virtualBoy",
                colors: ["tertiary", "accent"]
            },
            modular: {
                name: "Modular",
                preset: modular,
                id: "modular",
                colors: ["accent"]
            },
            solana: {
                name: "Solana",
                preset: solana,
                id: "solana",
                colors: ["primary", "accent"]
            },
            gradientType1: {
                name: "Gradient Type 1",
                preset: gradientType1,
                id: "gradientType1",
                colors: ["primary", "secondary", "tertiary", "accent"]
            },
            gradientType2: {
                name: "Gradient Type 2",
                preset: gradientType2,
                id: "gradientType2",
                colors: ["primary", "secondary", "accent"]
            },
            hueRotation: {
                name: "Hue Rotation",
                preset: hueRotation,
                id: "hueRotation",
                colors: ["accent"]
            },
            accentSwap: {
                name: "Accent Swap",
                preset: accentSwap,
                id: "accentSwap",
                colors: ["accent"]
            }
        };
    }

    function HexToHSL(H) {
        let r = 0, g = 0, b = 0;
        if (H.length === 4) r = "0x" + H[1] + H[1], g = "0x" + H[2] + H[2], b = "0x" + H[3] + H[3];
        else if (H.length === 7) r = "0x" + H[1] + H[2], g = "0x" + H[3] + H[4], b = "0x" + H[5] + H[6];
        r /= 255, g /= 255, b /= 255;
        var cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0;
        if (delta === 0) h = 0;
        else if (cmax === r) h = ((g - b) / delta) % 6;
        else if (cmax === g) h = (b - r) / delta + 2;
        else h = (r - g) / delta + 4;
        h = Math.round(h * 60);
        if (h < 0) h += 360;
        l = (cmax + cmin) / 2, s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1);

        return [Math.round(h), Math.round(s), Math.round(l)];
    }

    const colorVariables = [
        "brand-100",
        "brand-130",
        "brand-160",
        "brand-200",
        "brand-230",
        "brand-260",
        "brand-300",
        "brand-330",
        "brand-345",
        "brand-360",
        "brand-400",
        "brand-430",
        "brand-460",
        "brand-500",
        "brand-530",
        "brand-560",
        "brand-600",
        "brand-630",
        "brand-660",
        "brand-700",
        "brand-730",
        "brand-760",
        "brand-800",
        "brand-830",
        "brand-860",
        "brand-900",
        "primary-900",
        "primary-860",
        "primary-830",
        "primary-800",
        "primary-760",
        "primary-730",
        "primary-700",
        "primary-660",
        "primary-645",
        "primary-630",
        "primary-600",
        "primary-560",
        "primary-530",
        "primary-500",
        "primary-460",
        "primary-430",
        "primary-400",
        "primary-360",
        "primary-330",
        "primary-300",
        "primary-260",
        "primary-230",
        "primary-200",
        "primary-160",
        "primary-130",
        "primary-100",
        "white-900",
        "white-860",
        "white-830",
        "white-800",
        "white-760",
        "white-730",
        "white-700",
        "white-660",
        "white-630",
        "white-600",
        "white-560",
        "white-530",
        "white-500",
        "white-460",
        "white-430",
        "white-400",
        "white-360",
        "white-330",
        "white-300",
        "white-260",
        "white-230",
        "white-200",
        "white-160",
        "white-130",
        "white-100",
        "teal-900",
        "teal-860",
        "teal-830",
        "teal-800",
        "teal-760",
        "teal-730",
        "teal-700",
        "teal-660",
        "teal-630",
        "teal-600",
        "teal-560",
        "teal-530",
        "teal-500",
        "teal-460",
        "teal-430",
        "teal-400",
        "teal-360",
        "teal-330",
        "teal-300",
        "teal-260",
        "teal-230",
        "teal-200",
        "teal-160",
        "teal-130",
        "teal-100",
        "black-900",
        "black-860",
        "black-830",
        "black-800",
        "black-760",
        "black-730",
        "black-700",
        "black-660",
        "black-630",
        "black-600",
        "black-560",
        "black-530",
        "black-500",
        "black-460",
        "black-430",
        "black-400",
        "black-360",
        "black-330",
        "black-300",
        "black-260",
        "black-230",
        "black-200",
        "black-160",
        "black-130",
        "black-100",
        "red-900",
        "red-860",
        "red-830",
        "red-800",
        "red-760",
        "red-730",
        "red-700",
        "red-660",
        "red-630",
        "red-600",
        "red-560",
        "red-530",
        "red-500",
        "red-460",
        "red-430",
        "red-400",
        "red-360",
        "red-330",
        "red-300",
        "red-260",
        "red-230",
        "red-200",
        "red-160",
        "red-130",
        "red-100",
        "yellow-900",
        "yellow-860",
        "yellow-830",
        "yellow-800",
        "yellow-760",
        "yellow-730",
        "yellow-700",
        "yellow-660",
        "yellow-630",
        "yellow-600",
        "yellow-560",
        "yellow-530",
        "yellow-500",
        "yellow-460",
        "yellow-430",
        "yellow-400",
        "yellow-360",
        "yellow-330",
        "yellow-300",
        "yellow-260",
        "yellow-230",
        "yellow-200",
        "yellow-160",
        "yellow-130",
        "yellow-100",
        "green-900",
        "green-860",
        "green-830",
        "green-800",
        "green-760",
        "green-730",
        "green-700",
        "green-660",
        "green-630",
        "green-600",
        "green-560",
        "green-530",
        "green-500",
        "green-460",
        "green-430",
        "green-400",
        "green-360",
        "green-330",
        "green-300",
        "green-260",
        "green-230",
        "green-200",
        "green-160",
        "green-130",
        "green-100",
    ];

    var pluginCSSElem = document.createElement("style");
    pluginCSSElem.textContent = pluginCSS;
    document.head.append(pluginCSSElem);

    dataStore.getMany(["actveColorway", "actveColorwayID"]).then(store => {
        colorwayCSS.set(store[0], store[1]);
    });

    dataStore.getMany([
        "colorwaySourceFiles",
        "customColorways",
        "colorwaysBtnPos"
    ]).then(
        ([
            colorwaySourceFiles,
            customColorways,
            colorwaysBtnPos
        ]) => {
            if (!colorwaySourceFiles) dataStore.set("colorwaySourceFiles", ["https://raw.githubusercontent.com/DaBluLite/DiscordColorways/master/index.json"]);
            if (!customColorways) dataStore.set("customColorways", []);
            if (!colorwaysBtnPos) dataStore.set("colorwaysBtnPos", "bottom");
        });

    function PalleteIcon() {
        return React.createElement("svg", {
            role: "img",
            width: 24,
            height: 24,
            className: "vc-pallete-icon vc-icon",
            viewBox: "0 0 24 24"
        }, React.createElement("path", {
            fill: "currentColor",
            d: "M 12 7.5 C 13.242188 7.5 14.25 6.492188 14.25 5.25 C 14.25 4.007812 13.242188 3 12 3 C 10.757812 3 9.75 4.007812 9.75 5.25 C 9.75 6.492188 10.757812 7.5 12 7.5 Z M 18 12 C 19.242188 12 20.25 10.992188 20.25 9.75 C 20.25 8.507812 19.242188 7.5 18 7.5 C 16.757812 7.5 15.75 8.507812 15.75 9.75 C 15.75 10.992188 16.757812 12 18 12 Z M 8.25 10.5 C 8.25 11.742188 7.242188 12.75 6 12.75 C 4.757812 12.75 3.75 11.742188 3.75 10.5 C 3.75 9.257812 4.757812 8.25 6 8.25 C 7.242188 8.25 8.25 9.257812 8.25 10.5 Z M 9 19.5 C 10.242188 19.5 11.25 18.492188 11.25 17.25 C 11.25 16.007812 10.242188 15 9 15 C 7.757812 15 6.75 16.007812 6.75 17.25 C 6.75 18.492188 7.757812 19.5 9 19.5 Z M 9 19.5 M 24 12 C 24 16.726562 21.199219 15.878906 18.648438 15.105469 C 17.128906 14.644531 15.699219 14.210938 15 15 C 14.09375 16.023438 14.289062 17.726562 14.472656 19.378906 C 14.738281 21.742188 14.992188 24 12 24 C 5.371094 24 0 18.628906 0 12 C 0 5.371094 5.371094 0 12 0 C 18.628906 0 24 5.371094 24 12 Z M 12 22.5 C 12.917969 22.5 12.980469 22.242188 12.984375 22.234375 C 13.097656 22.015625 13.167969 21.539062 13.085938 20.558594 C 13.066406 20.304688 13.03125 20.003906 12.996094 19.671875 C 12.917969 18.976562 12.828125 18.164062 12.820312 17.476562 C 12.804688 16.417969 12.945312 15.0625 13.875 14.007812 C 14.429688 13.382812 15.140625 13.140625 15.78125 13.078125 C 16.390625 13.023438 17 13.117188 17.523438 13.234375 C 18.039062 13.351562 18.574219 13.515625 19.058594 13.660156 L 19.101562 13.675781 C 19.621094 13.832031 20.089844 13.972656 20.53125 14.074219 C 21.511719 14.296875 21.886719 14.199219 22.019531 14.109375 C 22.074219 14.070312 22.5 13.742188 22.5 12 C 22.5 6.199219 17.800781 1.5 12 1.5 C 6.199219 1.5 1.5 6.199219 1.5 12 C 1.5 17.800781 6.199219 22.5 12 22.5 Z M 12 22.5"
        })
        );
    }

    function SettingsTab({ title, children }) {
        return React.createElement(
            FormSection,
            null,
            [
                React.createElement(ModalText, {
                    variant: "heading-lg/semibold",
                    tag: "h2",
                    className: marginBottom20
                }, title),
                children
            ]
        );
    }

    function SelectorSettingsTab() {
        const [currentColorway, setCurrentColorway] = React.useState("");
        const [searchString, setSearchString] = React.useState("");
        const [colorways, setColorways] = React.useState([]);
        const [customColorways, setCustomColorways] = React.useState([]);
        const [visibility, setVisibility] = React.useState("all");
        const [searchBarVisibility, setSearchBarVisibility] = React.useState(false);
        async function searchColorways(e) {
            if (!e) {
                cached_loadUI();
                return;
            }
            const colorwaySourceFiles = await dataStore.get("colorwaySourceFiles");
            const data = await Promise.all(
                colorwaySourceFiles.map((url) =>
                    fetch(url).then((res) => res.json().catch(() => { return { colorways: fallbackColorways }; })).catch(() => { return { colorways: fallbackColorways }; })
                )
            );
            const colorways = data.flatMap((json) => json.colorways);
            const baseData = await dataStore.get("customColorways");
            var results = [];
            (colorways || fallbackColorways).find((Colorway) => {
                if (Colorway.name.toLowerCase().includes(e.toLowerCase()))
                    results.push(Colorway);
            });
            var customResults = [];
            baseData.find((Colorway) => {
                if (Colorway.name.toLowerCase().includes(e.toLowerCase()))
                    customResults.push(Colorway);
            });
            setColorways(results);
            setCustomColorways(customResults);
        }

        async function loadUI() {
            const colorwaySourceFiles = await dataStore.get("colorwaySourceFiles");
            const data = await Promise.all(colorwaySourceFiles.map((url) => fetch(url).then((res) => res.json().catch(() => { return { colorways: fallbackColorways }; })).catch(() => { return { colorways: fallbackColorways }; })));
            const colorways = data.flatMap((json) => json.colorways);
            const baseData = await dataStore.getMany([
                "customColorways",
                "actveColorwayID",
            ]);
            setColorways(colorways);
            setCustomColorways(baseData[0]);
            setCurrentColorway(baseData[1]);
        }

        const cached_loadUI = React.useCallback(loadUI, [setColorways, setCustomColorways, setCurrentColorway]);

        React.useEffect(() => {
            if (!searchString) {
                cached_loadUI();
            }
        }, [searchString]);

        var visibleColorwayArray;

        switch (visibility) {
            case "all":
                visibleColorwayArray = [...colorways, ...customColorways];
                break;
            case "official":
                visibleColorwayArray = [...colorways];
                break;
            case "custom":
                visibleColorwayArray = [...customColorways];
                break;
            default:
                visibleColorwayArray = [...colorways, ...customColorways];
                break;
        }
        return React.createElement(SettingsTab, { title: "Colors" },
            React.createElement("div", { className: "colorwaysSettingsSelector-wrapper" }, [
                React.createElement("div", { className: "colorwaySelector-doublePillBar" }, [
                    searchBarVisibility === true ? React.createElement(TextInput, {
                        inputClassName: "colorwaySelector-searchInput",
                        className: "colorwaySelector-search",
                        placeholder: "Search for Colorways...",
                        value: searchString,
                        onChange: (e) => {
                            searchColorways(e);
                            setSearchString(e);
                        }
                    }) : React.createElement("div", { className: "colorwaySelector-pillWrapper" },
                        React.createElement("div", { className: `colorwaySelector-pill${visibility === "all" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("all") }, "All"),
                        React.createElement("div", { className: `colorwaySelector-pill${visibility === "official" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("official") }, "Official"),
                        React.createElement("div", { className: `colorwaySelector-pill${visibility === "custom" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("custom") }, "Custom"),
                    ),
                    React.createElement("div", { className: "colorwaySelector-pillWrapper" },
                        React.createElement(Tooltip, { text: "Refresh Colorways..." },
                            ({ onMouseEnter, onMouseLeave }) => {
                                return React.createElement("div", {
                                    className: "colorwaySelector-pill",
                                    id: "colorway-refreshcolorway",
                                    onMouseEnter: onMouseEnter,
                                    onMouseLeave: onMouseLeave,
                                    onClick: () => cached_loadUI()
                                },
                                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
                                        React.createElement("g", { id: "Frame_-_24px" }, React.createElement("rect", { y: "0", fill: "none", width: "24", height: "24" })),
                                        React.createElement("g", { id: "Filled_Icons" },
                                            React.createElement("g", null, [
                                                React.createElement("path", { d: "M6.351,6.351C7.824,4.871,9.828,4,12,4c4.411,0,8,3.589,8,8h2c0-5.515-4.486-10-10-10 C9.285,2,6.779,3.089,4.938,4.938L3,3v6h6L6.351,6.351z" }),
                                                React.createElement("path", { d: "M17.649,17.649C16.176,19.129,14.173,20,12,20c-4.411,0-8-3.589-8-8H2c0,5.515,4.486,10,10,10 c2.716,0,5.221-1.089,7.062-2.938L21,21v-6h-6L17.649,17.649z" })
                                            ])
                                        )
                                    )
                                );
                            }
                        ),
                        React.createElement(Tooltip, { text: "Create Colorway..." },
                            ({ onMouseEnter, onMouseLeave }) => {
                                return React.createElement("div", {
                                    className: "colorwaySelector-pill", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
                                        if (!findByCode("showEyeDropper")) {
                                            extractAndRequireModuleIds(
                                                findByCode(
                                                    "Promise.all",
                                                    "openModalLazy",
                                                    "location_page"
                                                )
                                            );
                                        };
                                        openModal(props => React.createElement(CreatorModal, { modalProps: props, loadUIProps: cached_loadUI }));
                                    }
                                },
                                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "14", height: "14", viewBox: "0 0 24 24" },
                                        React.createElement("path", { fill: "currentColor", d: "M20 11.1111H12.8889V4H11.1111V11.1111H4V12.8889H11.1111V20H12.8889V12.8889H20V11.1111Z" })
                                    )
                                );
                            }
                        ),
                        searchBarVisibility === false ? React.createElement(Tooltip, { text: "Search..." },
                            ({ onMouseEnter, onMouseLeave }) => {
                                return React.createElement("div", { className: "colorwaySelector-pill", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => setSearchBarVisibility(true) },
                                    React.createElement(SearchIcon, { width: 14, height: 14, viewboxX: 24, viewboxY: 24 })
                                );
                            }
                        ) : React.createElement(Tooltip, { text: "Close Search" },
                            ({ onMouseEnter, onMouseLeave }) => {
                                return React.createElement(
                                    "div",
                                    {
                                        className: "colorwaySelector-pill",
                                        onMouseEnter: onMouseEnter,
                                        onMouseLeave: onMouseLeave,
                                        onClick: () => {
                                            searchColorways("");
                                            setSearchString("");
                                            setSearchBarVisibility(false);
                                        }
                                    },
                                    React.createElement(CloseIcon, { width: 14, height: 14, viewboxX: 24, viewboxY: 24 })
                                );
                            }
                        )
                    )
                ]
                ),
                React.createElement("div", { className: "ColorwaySelectorWrapper" }, [
                    visibleColorwayArray.length > 0 ? visibleColorwayArray.map((color) => {
                        var colors = color.colors || ["accent", "primary", "secondary", "tertiary"];
                        return React.createElement(Tooltip, { text: color.name },
                            ({ onMouseEnter, onMouseLeave }) => {
                                return React.createElement("div", {
                                    className: `discordColorway${colorwayCSS.get().name === color.name ? " active" : ""}`,
                                    id: "colorway-" + color.name,
                                    onMouseEnter: onMouseEnter,
                                    onMouseLeave: onMouseLeave
                                }, [
                                    React.createElement("div", { className: "colorwayCheckIconContainer" },
                                        React.createElement("div", { className: "colorwayCheckIcon" },
                                            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", viewBox: "0 0 24 24" },
                                                React.createElement("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7.00003L19.5899 5.59003L8.99991 16.17Z" })
                                            )
                                        )
                                    ),
                                    React.createElement("div", {
                                        className: "colorwayInfoIconContainer", onClick: () => {
                                            openModal(props => React.createElement(InfoModal, { modalProps: props, colorwayProps: color, discrimProps: customColorways.includes(color) }));
                                        }
                                    },
                                        React.createElement("div", { className: "colorwayInfoIcon" },
                                            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" },
                                                React.createElement("path", { d: "m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" })
                                            )
                                        )
                                    ),
                                    React.createElement("div", {
                                        className: "discordColorwayPreviewColorContainer",
                                        onClick: () => {
                                            if (currentColorway === color.name) {
                                                dataStore.set("actveColorwayID", null);
                                                dataStore.set("actveColorway", null);
                                                colorwayCSS.remove();
                                            } else {
                                                dataStore.set("actveColorwayID", color.name);
                                                dataStore.set("actveColorway", color.import);
                                                colorwayCSS.set(color.import, color.name);
                                            }
                                            setCurrentColorway(colorwayCSS.get().name);
                                        }
                                    }, colors.map((colorItm) => {
                                        return (
                                            React.createElement("div", { className: "discordColorwayPreviewColor", style: { backgroundColor: color[colorItm] } })
                                        );
                                    }))
                                ]);
                            }
                        );
                    }) : React.createElement(FormTitle, { style: { marginBottom: 0, width: "100%", textAlign: "center" } }, "No colorways..."),
                ]
                )
            ]));
    }

    function ColorwaySelectorBtn({ position = "top" }) {
        const [activeColorway, setActiveColorway] = React.useState("None");
        const [pillState, setPillState] = React.useState("");
        const [colorwaysBtnPos, setColorwaysBtnPos] = React.useState("bottom");
        async function loadUI() {
            const colorwaysBtnPos = await dataStore.get("colorwaysBtnPos");
            setColorwaysBtnPos(colorwaysBtnPos);
        }

        React.useEffect(() => {
            loadUI();
        });

        return React.createElement(Tooltip, {
            text: [
                React.createElement("span", null, "Colorways"),
                React.createElement(ModalText, { variant: "text-xs/normal", style: { color: "var(--text-muted)", fontWeight: 500 } }, "Active Colorway: " + activeColorway)
            ], position: "right", tooltipContentClassName: "colorwaysBtn-tooltipContent", shouldShowTooltip: true
        },
            ({ onMouseEnter, onMouseLeave }) => {
                if (colorwaysBtnPos === position) {
                    return React.createElement("div", {
                        className: "ColorwaySelectorBtnContainer"
                    }, [
                        React.createElement(PillContainer, { hovered: pillState === "hovered", className: "colorwaysButton-pill" }),
                        React.createElement("div", {
                            className: "ColorwaySelectorBtn" + (position === "bottom" ? " ColorwaySelectorBtn_green" : ""),
                            onClick: () => openModal(props => React.createElement(SelectorModal, { modalProps: props })),
                            onContextMenu: () => openModal(props => React.createElement(SelectorModal, { modalProps: props, visibleTabProps: "toolbox" })),
                            onMouseEnter: async () => {
                                onMouseEnter();
                                setActiveColorway(await dataStore.get("actveColorwayID") || "None");
                                setPillState("hovered");
                            },
                            onMouseLeave: () => {
                                onMouseLeave();
                                setPillState("");
                            }
                        }, React.createElement(PalleteIcon))
                    ]);
                } else {
                    return null;
                }
            }
        );
    };

    function canonicalizeMatch(match) {
        if (typeof match === "string") return match;
        const canonSource = match.source
            .replaceAll("\\i", "[A-Za-z_$][\\w$]*");
        return new RegExp(canonSource, match.flags);
    }

    async function extractAndRequireModuleIds(code) {
        const chunksAndModule = code.toString()
            .match(canonicalizeMatch(/Promise\.all\(\[((?:\i\.\i\(\d+\),?)+)\]\).then\(\i\.bind\(\i,(\d+)\)\)/));

        if (!chunksAndModule) throw new Error("Couldn't extract anything of relevance");
        else if (!chunksAndModule[1]) throw new Error("Couldn't extract any chunk requires");
        else if (!chunksAndModule[2]) throw new Error("Couldn't extract module ID");

        const chunkIds = Array.from(chunksAndModule[1].matchAll(/(\d+)/g)).map(cId => parseInt(cId[0]));
        const moduleId = parseInt(chunksAndModule[2]);

        return Promise.all(chunkIds.map(i => _mods_unparsed.e(i))).then(_mods_unparsed.bind(_mods_unparsed, moduleId));
    }

    function CloseIcon({
        height = 24,
        width = 24,
        viewboxX = width,
        viewboxY = height,
        className,
        style
    }) {
        return React.createElement(
            "svg",
            {
                "aria-label": "Clear",
                "aria-hidden": "false",
                role: "img",
                className: className,
                width: width,
                height: height,
                viewBox: `0 0 ${viewboxX} ${viewboxY}`,
                style: style
            },
            React.createElement("path", {
                fill: "currentColor",
                d: "M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"
            })
        );
    }

    function SearchIcon({
        height = 24,
        width = 24,
        viewboxX = width,
        viewboxY = height,
        className,
        style
    }) {
        return React.createElement(
            "svg",
            {
                className: className,
                "aria-label": "Search",
                "aria-hidden": "false",
                role: "img",
                width: width,
                height: height,
                viewBox: `0 0 ${viewboxX} ${viewboxY}`,
                style: style
            },
            React.createElement("path", {
                fill: "currentColor",
                d: "M21.707 20.293L16.314 14.9C17.403 13.504 18 11.799 18 10C18 7.863 17.167 5.854 15.656 4.344C14.146 2.832 12.137 2 10 2C7.863 2 5.854 2.832 4.344 4.344C2.833 5.854 2 7.863 2 10C2 12.137 2.833 14.146 4.344 15.656C5.854 17.168 7.863 18 10 18C11.799 18 13.504 17.404 14.9 16.314L20.293 21.706L21.707 20.293ZM10 16C8.397 16 6.891 15.376 5.758 14.243C4.624 13.11 4 11.603 4 10C4 8.398 4.624 6.891 5.758 5.758C6.891 4.624 8.397 4 10 4C11.603 4 13.109 4.624 14.242 5.758C15.376 6.891 16 8.398 16 10C16 11.603 15.376 13.11 14.242 14.243C13.109 15.376 11.603 16 10 16Z"
            })
        );
    }

    function CreatorModal({ modalProps, loadUIProps }) {
        const [colorwayName, setColorwayName] = React.useState("");
        const [accentColor, setAccentColor] = React.useState("5865f2");
        const [primaryColor, setPrimaryColor] = React.useState("313338");
        const [secondaryColor, setSecondaryColor] = React.useState("2b2d31");
        const [tertiaryColor, setTertiaryColor] = React.useState("1e1f22");
        const [preset, setPreset] = React.useState("default");
        const [collapsedSettings, setCollapsedSettings] = React.useState(true);
        const [tintedText, setTintedText] = React.useState(true);
        const [collapsedPresets, setCollapsedPresets] = React.useState(true);
        const [presetColorArray, setPresetColorArray] = React.useState(["primary", "secondary", "tertiary", "accent"]);
        const ColorPicker = findByCode("showEyeDropper") || (() => { return React.createElement(Text, { variant: "heading-lg/semibold", tag: "h3", className: "colorways-creator-module-warning" }, "Module is lazyloaded, open Settings first"); });
        return React.createElement(ModalRoot, { ...modalProps, className: "colorwayCreator-modal" }, [
            React.createElement(ModalHeader, null,
                React.createElement(Text, { variant: "heading-lg/semibold", tag: "h1" }, "Create Colorway")
            ),
            React.createElement(ModalContent, { className: "colorwayCreator-menuWrapper" }, [
                React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Name:"),
                React.createElement(TextInput, {
                    placeholder: "Give your Colorway a name",
                    value: colorwayName,
                    onChange: setColorwayName
                }),
                React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Colors:"),
                React.createElement("div", { className: "colorwayCreator-colorPreviews" }, [
                    presetColorArray.includes("primary") ?
                        React.createElement(ColorPicker, {
                            color: parseInt(primaryColor, 16),
                            onChange: (color) => {
                                let hexColor = color.toString(16);
                                while (hexColor.length < 6) {
                                    hexColor = "0" + hexColor;
                                }
                                setPrimaryColor(hexColor);
                            },
                            showEyeDropper: true,
                            suggestedColors: [
                                "#313338",
                                "#2b2d31",
                                "#1e1f22",
                                "#5865f2",
                            ],
                            label: React.createElement(ModalText, { className: "colorwaysPicker-colorLabel" }, "Primary")
                        }) : null,
                    presetColorArray.includes("secondary") ?
                        React.createElement(ColorPicker, {
                            color: parseInt(secondaryColor, 16),
                            onChange: (color) => {
                                let hexColor = color.toString(16);
                                while (hexColor.length < 6) {
                                    hexColor = "0" + hexColor;
                                }
                                setSecondaryColor(hexColor);
                            },
                            showEyeDropper: true,
                            suggestedColors: [
                                "#313338",
                                "#2b2d31",
                                "#1e1f22",
                                "#5865f2",
                            ],
                            label: React.createElement(ModalText, { className: "colorwaysPicker-colorLabel" }, "Secondary")
                        }) : null,
                    presetColorArray.includes("tertiary") ?
                        React.createElement(ColorPicker, {
                            color: parseInt(tertiaryColor, 16),
                            onChange: (color) => {
                                let hexColor = color.toString(16);
                                while (hexColor.length < 6) {
                                    hexColor = "0" + hexColor;
                                }
                                setTertiaryColor(hexColor);
                            },
                            showEyeDropper: true,
                            suggestedColors: [
                                "#313338",
                                "#2b2d31",
                                "#1e1f22",
                                "#5865f2",
                            ],
                            label: React.createElement(ModalText, { className: "colorwaysPicker-colorLabel" }, "Tertiary")
                        }) : null,
                    presetColorArray.includes("accent") ?
                        React.createElement(ColorPicker, {
                            color: parseInt(accentColor, 16),
                            onChange: (color) => {
                                let hexColor = color.toString(16);
                                while (hexColor.length < 6) {
                                    hexColor = "0" + hexColor;
                                }
                                setAccentColor(hexColor);
                            },
                            showEyeDropper: true,
                            suggestedColors: [
                                "#313338",
                                "#2b2d31",
                                "#1e1f22",
                                "#5865f2",
                            ],
                            label: React.createElement(ModalText, { className: "colorwaysPicker-colorLabel" }, "Accent")
                        }) : null
                ]),
                React.createElement("div", { className: `colorwaysCreator-settingCat${collapsedSettings ? " colorwaysCreator-settingCat-collapsed" : ""}` }, [
                    React.createElement("div", { className: "colorwaysCreator-settingItm colorwaysCreator-settingHeader", onClick: () => setCollapsedSettings(!collapsedSettings) }, [
                        React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Settings"),
                        React.createElement("svg", { className: "expand-3Nh1P5 transition-30IQBn directionDown-2w0MZz", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true", role: "img" },
                            React.createElement("path", { fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M7 10L12 15 17 10", "aria-hidden": "true" })
                        )
                    ]),
                    React.createElement(ScrollerThin, { orientation: "vertical", className: "colorwaysCreator-settingsList", paddingFix: true }, [
                        React.createElement("div", { className: "colorwaysCreator-settingItm", onCLick: () => setTintedText(!tintedText) }, [
                            React.createElement(Text, { variant: "eyebrow", tag: "h5" }, "Use colored text"),
                            React.createElement(Switch, { value: tintedText, onChange: setTintedText, hideBorder: true, style: { marginBottom: 0 } })
                        ])
                    ])
                ]),
                React.createElement("div", { className: `colorwaysCreator-settingCat${collapsedPresets ? " colorwaysCreator-settingCat-collapsed" : ""}` }, [
                    React.createElement("div", { className: "colorwaysCreator-settingItm colorwaysCreator-settingHeader", onClick: () => setCollapsedPresets(!collapsedPresets) }, [
                        React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Presets"),
                        React.createElement("svg", { className: "expand-3Nh1P5 transition-30IQBn directionDown-2w0MZz", width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true", role: "img" },
                            React.createElement("path", { fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M7 10L12 15 17 10", "aria-hidden": "true" })
                        )
                    ]),
                    React.createElement(ScrollerThin, { orientation: "vertical", className: "colorwaysCreator-settingsList", paddingFix: true }, [
                        React.createElement("div", { className: "colorwaysCreator-settingItm colorwaysCreator-preset", onClick: () => setPreset("default") }, [
                            React.createElement("svg", { "aria-hidden": "true", role: "img", width: "24", height: "24", viewBox: "0 0 24 24" },
                                React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor" }),
                                preset === "default" ? React.createElement("circle", { cx: "12", cy: "12", r: "5", className: "radioIconForeground-3wH3aU", fill: "currentColor" }) : null
                            ),
                            React.createElement(Text, { variant: "eyebrow", tag: "h5" }, "Default")
                        ]),
                        Object.values(getPreset()).map(presetItm => {
                            return React.createElement("div", {
                                className: "colorwaysCreator-settingItm colorwaysCreator-preset", onClick: () => {
                                    setPreset(presetItm.id);
                                    setPresetColorArray(presetItm.colors);
                                }
                            }, [
                                React.createElement("svg", { "aria-hidden": "true", role: "img", width: "24", height: "24", viewBox: "0 0 24 24" },
                                    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor" }),
                                    preset === presetItm.id ? React.createElement("circle", { cx: "12", cy: "12", r: "5", className: "radioIconForeground-3wH3aU", fill: "currentColor" }) : null
                                ),
                                React.createElement(Text, { variant: "eyebrow", tag: "h5" }, presetItm.name)
                            ]);
                        })
                    ])
                ])
            ]),
            React.createElement(ModalFooter, null, [
                React.createElement(Button, {
                    style: { marginLeft: 8 },
                    color: Button.Colors.BRAND,
                    size: Button.Sizes.MEDIUM,
                    look: Button.Looks.FILLED,
                    onClick: () => {
                        var customColorwayCSS = "";
                        if (preset === "default") {
                            customColorwayCSS = generateCss(primaryColor, secondaryColor, tertiaryColor, accentColor, tintedText);
                        } else {
                            customColorwayCSS = getPreset(primaryColor, secondaryColor, tertiaryColor, accentColor)[preset].preset();
                        }
                        const customColorway = {
                            name: (colorwayName || "Colorway") + (preset === "default" ? "" : ": Made for " + getPreset()[preset].name),
                            import: customColorwayCSS,
                            accent: "#" + accentColor,
                            primary: "#" + primaryColor,
                            secondary: "#" + secondaryColor,
                            tertiary: "#" + tertiaryColor,
                            author: UserStore.getCurrentUser().username,
                            authorID: UserStore.getCurrentUser().id
                        };
                        const customColorwaysArray = [customColorway];
                        dataStore.get("customColorways").then(customColorways => {
                            customColorways.forEach((color, i) => {
                                if (color.name !== customColorway.name) {
                                    customColorwaysArray.push(color);
                                }
                            });
                            dataStore.set("customColorways", customColorwaysArray);
                        });
                        modalProps.onClose();
                        if (loadUIProps) {
                            loadUIProps();
                        }
                    }
                }, "Finish"),
                React.createElement(Button, {
                    style: { marginLeft: 8 },
                    color: Button.Colors.PRIMARY,
                    size: Button.Sizes.MEDIUM,
                    look: Button.Looks.FILLED,
                    onClick: () => {
                        function getHex(str) {
                            return Object.assign(document.createElement("canvas").getContext("2d"), { fillStyle: str }).fillStyle;
                        }
                        setPrimaryColor(getHex(getComputedStyle(document.body).getPropertyValue("--background-primary")).split("#")[1]);
                        setSecondaryColor(getHex(getComputedStyle(document.body).getPropertyValue("--background-secondary")).split("#")[1]);
                        setTertiaryColor(getHex(getComputedStyle(document.body).getPropertyValue("--background-tertiary")).split("#")[1]);
                        setAccentColor(getHex(getComputedStyle(document.body).getPropertyValue("--brand-experiment")).split("#")[1]);
                    }
                }, "Copy Current Colors"),
                React.createElement(Button, {
                    style: { marginLeft: 8 },
                    color: Button.Colors.PRIMARY,
                    size: Button.Sizes.MEDIUM,
                    look: Button.Looks.FILLED,
                    onClick: () => {
                        let colorwayID = "";
                        function setColorwayID(e) {
                            colorwayID = e;
                        }
                        const hexToString = (hex) => {
                            let str = "";
                            for (let i = 0; i < hex.length; i += 2) {
                                const hexValue = hex.substr(i, 2);
                                const decimalValue = parseInt(hexValue, 16);
                                str += String.fromCharCode(decimalValue);
                            }
                            return str;
                        };
                        openModal(props => React.createElement(ModalRoot, { ...props, className: "colorwaysCreator-noMinHeight" }, [
                            React.createElement(ModalContent, { className: "colorwaysCreator-noHeader colorwaysCreator-noMinHeight" }, [
                                React.createElement(FormTitle, null, "Colorway ID:"),
                                React.createElement(TextInput, { placeholder: "Enter Colorway ID", onInput: e => setColorwayID(e.currentTarget.value) })
                            ]),
                            React.createElement(ModalFooter, null, [
                                React.createElement(Button, {
                                    style: { marginLeft: 8 },
                                    color: Button.Colors.BRAND,
                                    size: Button.Sizes.MEDIUM,
                                    look: Button.Looks.FILLED,
                                    onClick: () => {
                                        const allEqual = (arr) => arr.every(v => v === arr[0]);
                                        if (!colorwayID) {
                                            throw new Error("Please enter a Colorway ID");
                                        } else if (colorwayID.length < 62) {
                                            throw new Error("Invalid Colorway ID");
                                        } else if (!hexToString(colorwayID).includes(",")) {
                                            throw new Error("Invalid Colorway ID");
                                        } else if (!allEqual(hexToString(colorwayID).split(",").map((e) => e.match("#")?.length)) && hexToString(colorwayID).split(",").map((e) => e.match("#")?.length)[0] !== 1) {
                                            throw new Error("Invalid Colorway ID");
                                        } else {
                                            const colorArray = hexToString(colorwayID).split(",");
                                            setAccentColor(colorArray[0].split("#")[1]);
                                            setPrimaryColor(colorArray[1].split("#")[1]);
                                            setSecondaryColor(colorArray[2].split("#")[1]);
                                            setTertiaryColor(colorArray[3].split("#")[1]);
                                            props.onClose();
                                        }
                                    }
                                }, "Finish"),
                                React.createElement(Button, {
                                    style: { marginLeft: 8 },
                                    color: Button.Colors.PRIMARY,
                                    size: Button.Sizes.MEDIUM,
                                    look: Button.Looks.FILLED,
                                    onClick: () => {
                                        props.onClose();
                                    }
                                }, "Cancel")
                            ])
                        ]));
                    }
                }, "Enter Colorway ID"),
                React.createElement(Button, {
                    style: { marginLeft: 8 },
                    color: Button.Colors.PRIMARY,
                    size: Button.Sizes.MEDIUM,
                    look: Button.Looks.FILLED,
                    onClick: () => {
                        modalProps.onClose();
                    }
                }, "Cancel")
            ])
        ]);
    }

    function InfoModal({ modalProps, colorwayProps, discrimProps = false }) {
        const colors = colorwayProps.colors || [
            "accent",
            "primary",
            "secondary",
            "tertiary",
        ];
        return React.createElement(ModalRoot, { ...modalProps, className: "colorwayCreator-modal" }, [
            React.createElement(ModalHeader, null, React.createElement(Text, { variant: "heading-lg/semibold", tag: "h1" }, "Colorway Details: " + colorwayProps.name)),
            React.createElement(ModalContent, null, React.createElement("div", { className: "colorwayInfo-wrapper" }, [
                React.createElement("div", { className: "colorwayInfo-colorSwatches" }, colors.map(color => {
                    return React.createElement("div", {
                        className: "colorwayInfo-colorSwatch", style: { backgroundColor: colorwayProps[color] }, onClick: () => {
                            navigator.clipboard.writeText(String(colorwayProps[color]));
                            showToast({
                                message:
                                    "Copied color successfully",
                                type: 1,
                                id: "copy-colorway-color-notify",
                            });
                        }
                    });
                })),
                React.createElement("div", { className: "colorwayInfo-row colorwayInfo-author" }, [
                    React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Author:"),
                    React.createElement(Button, { color: Button.Colors.PRIMARY, size: Button.Sizes.MEDIUM, look: Button.Looks.FILLED, onClick: () => openUserProfile(colorwayProps.authorID) }, colorwayProps.author)
                ]),
                React.createElement("div", { className: "colorwayInfo-row colorwayInfo-css" }, [
                    React.createElement(FormTitle, { style: { marginBottom: 0 } }, "CSS:"),
                    React.createElement(Text, { variant: "code", selectable: true, className: "colorwayInfo-cssCodeblock" }, colorwayProps.import)
                ])
            ])),
            discrimProps ? React.createElement(ModalFooter, null, [
                React.createElement(Button, {
                    color: Button.Colors.RED, size: Button.Sizes.MEDIUM, look: Button.Looks.FILLED, style: { marginLeft: 8 }, onClick: () => {
                        dataStore.get("customColorways").then((customColorways) => {
                            if (customColorways.length > 0) {
                                const customColorwaysArray = [];
                                dataStore.get("customColorways").then(customColorways => {
                                    customColorways.forEach((color, i) => {
                                        if (color.name !== colorwayProps.name) {
                                            customColorwaysArray.push(color);
                                        }
                                        if (i + 1 === customColorways.length) {
                                            dataStore.set("customColorways", customColorwaysArray);
                                        }
                                    });
                                });
                                dataStore.get("actveColorwayID").then((actveColorwayID) => {
                                    if (actveColorwayID === colorwayProps.name) {
                                        dataStore.set("actveColorway", null);
                                        dataStore.set("actveColorwayID", null);
                                    }
                                });
                                modalProps.onClose();
                                document.getElementById("colorway-refreshcolorway")?.click();
                            }
                        });
                    }
                }, "Delete Colorway"),
                React.createElement(Button, {
                    color: Button.Colors.PRIMARY, size: Button.Sizes.MEDIUM, look: Button.Looks.FILLED, style: { marginLeft: 8 }, onClick: () => {
                        const stringToHex = (str) => {
                            let hex = "";
                            for (let i = 0; i < str.length; i++) {
                                const charCode = str.charCodeAt(i);
                                const hexValue = charCode.toString(16);
                                hex += hexValue.padStart(2, "0");
                            }
                            return hex;
                        };
                        const colorwayIDArray = `${colorwayProps.accent},${colorwayProps.primary},${colorwayProps.secondary},${colorwayProps.tertiary}`;
                        const colorwayID = stringToHex(colorwayIDArray);
                        navigator.clipboard.writeText(colorwayID);
                        showToast({
                            message: "Copied Colorway ID Successfully",
                            type: 1,
                            id: "copy-colorway-id-notify",
                        });
                    }
                }, "Copy Colorway ID"),
                React.createElement(Button, {
                    color: Button.Colors.PRIMARY, size: Button.Sizes.MEDIUM, look: Button.Looks.FILLED, style: { marginLeft: 8 }, onClick: () => {
                        navigator.clipboard.writeText(colorwayProps.import);
                        showToast({
                            message: "Copied CSS to Clipboard",
                            type: 1,
                            id: "copy-colorway-css-notify",
                        });
                    }
                }, "Copy CSS"),
                React.createElement(Button, {
                    color: Button.Colors.PRIMARY, size: Button.Sizes.MEDIUM, look: Button.Looks.FILLED, style: { marginLeft: 8 }, onClick: () => {
                        modalProps.onClose();
                    }
                }, "Cancel")
            ]) : null
        ]);
    }

    function SelectorModal({ modalProps, visibleTabProps = "all" }) {
        const [currentColorway, setCurrentColorway] = React.useState("");
        const [searchString, setSearchString] = React.useState("");
        const [colorways, setColorways] = React.useState([]);
        const [customColorways, setCustomColorways] = React.useState([]);
        const [visibility, setVisibility] = React.useState(visibleTabProps);
        const [searchBarVisibility, setSearchBarVisibility] = React.useState(false);

        async function searchColorways(e) {
            if (!e) {
                cached_loadUI();
                return;
            }
            const colorwaySourceFiles = await dataStore.get("colorwaySourceFiles");
            const data = await Promise.all(
                colorwaySourceFiles.map((url) =>
                    fetch(url).then((res) => res.json().catch(() => { return { colorways: fallbackColorways }; })).catch(() => { return { colorways: fallbackColorways }; })
                )
            );
            const colorways = data.flatMap((json) => json.colorways);
            const baseData = await dataStore.get("customColorways");
            var results = [];
            (colorways || fallbackColorways).find((Colorway) => {
                if (Colorway.name.toLowerCase().includes(e.toLowerCase()))
                    results.push(Colorway);
            });
            var customResults = [];
            baseData.find((Colorway) => {
                if (Colorway.name.toLowerCase().includes(e.toLowerCase()))
                    customResults.push(Colorway);
            });
            setColorways(results);
            setCustomColorways(customResults);
        }

        async function loadUI() {
            const colorwaySourceFiles = await dataStore.get("colorwaySourceFiles");
            const data = await Promise.all(colorwaySourceFiles.map((url) => fetch(url).then((res) => res.json().catch(() => { return { colorways: fallbackColorways }; })).catch(() => { return { colorways: fallbackColorways }; })));
            const colorways = data.flatMap((json) => json.colorways);
            const baseData = await dataStore.getMany([
                "customColorways",
                "actveColorwayID",
            ]);
            setColorways(colorways);
            setCustomColorways(baseData[0]);
            setCurrentColorway(baseData[1]);
        }

        const cached_loadUI = React.useCallback(loadUI, [setColorways, setCustomColorways, setCurrentColorway]);

        React.useEffect(() => {
            if (!searchString) {
                cached_loadUI();
            }
        }, [searchString]);

        var visibleColorwayArray;

        switch (visibility) {
            case "all":
                visibleColorwayArray = [...colorways, ...customColorways];
                break;
            case "official":
                visibleColorwayArray = [...colorways];
                break;
            case "custom":
                visibleColorwayArray = [...customColorways];
                break;
            default:
                visibleColorwayArray = [...colorways, ...customColorways];
                break;
        }

        return (
            React.createElement(ModalRoot, { ...modalProps, className: "colorwaySelectorModal" },
                React.createElement(ModalContent, { className: "colorwaySelectorModalContent" }, [
                    React.createElement("div", { className: "colorwaySelector-doublePillBar" }, [
                        searchBarVisibility === true ? React.createElement(TextInput, {
                            inputClassName: "colorwaySelector-searchInput",
                            className: "colorwaySelector-search",
                            placeholder: "Search for Colorways...",
                            value: searchString,
                            onChange: (e) => {
                                searchColorways(e);
                                setSearchString(e);
                            }
                        }) : React.createElement("div", { className: "colorwaySelector-pillWrapper" },
                            React.createElement("div", { className: `colorwaySelector-pill${visibility === "all" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("all") }, "All"),
                            React.createElement("div", { className: `colorwaySelector-pill${visibility === "official" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("official") }, "Official"),
                            React.createElement("div", { className: `colorwaySelector-pill${visibility === "custom" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("custom") }, "Custom"),
                            React.createElement("div", { className: "colorwaySelector-pillSeparator" }),
                            React.createElement("div", { className: `colorwaySelector-pill${visibility === "toolbox" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => setVisibility("toolbox") }, "Toolbox"),
                            React.createElement("div", {
                                className: `colorwaySelector-pill${visibility === "info" ? " colorwaySelector-pill_selected" : " "}`, onClick: () => {
                                    setVisibility("info");
                                }
                            }, "Info")
                        ),
                        React.createElement("div", { className: "colorwaySelector-pillWrapper" },
                            React.createElement(Tooltip, { text: "Refresh Colorways..." },
                                ({ onMouseEnter, onMouseLeave }) => {
                                    return React.createElement("div", {
                                        className: "colorwaySelector-pill",
                                        id: "colorway-refreshcolorway",
                                        onMouseEnter: onMouseEnter,
                                        onMouseLeave: onMouseLeave,
                                        onClick: () => cached_loadUI()
                                    },
                                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
                                            React.createElement("g", { id: "Frame_-_24px" }, React.createElement("rect", { y: "0", fill: "none", width: "24", height: "24" })),
                                            React.createElement("g", { id: "Filled_Icons" },
                                                React.createElement("g", null, [
                                                    React.createElement("path", { d: "M6.351,6.351C7.824,4.871,9.828,4,12,4c4.411,0,8,3.589,8,8h2c0-5.515-4.486-10-10-10 C9.285,2,6.779,3.089,4.938,4.938L3,3v6h6L6.351,6.351z" }),
                                                    React.createElement("path", { d: "M17.649,17.649C16.176,19.129,14.173,20,12,20c-4.411,0-8-3.589-8-8H2c0,5.515,4.486,10,10,10 c2.716,0,5.221-1.089,7.062-2.938L21,21v-6h-6L17.649,17.649z" })
                                                ])
                                            )
                                        )
                                    );
                                }
                            ),
                            React.createElement(Tooltip, { text: "Create Colorway..." },
                                ({ onMouseEnter, onMouseLeave }) => {
                                    return React.createElement("div", {
                                        className: "colorwaySelector-pill", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
                                            if (!findByCode("showEyeDropper")) {
                                                extractAndRequireModuleIds(
                                                    findByCode(
                                                        "Promise.all",
                                                        "openModalLazy",
                                                        "location_page"
                                                    )
                                                );
                                            };
                                            openModal(props => React.createElement(CreatorModal, { modalProps: props, loadUIProps: cached_loadUI }));
                                        }
                                    },
                                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "14", height: "14", viewBox: "0 0 24 24" },
                                            React.createElement("path", { fill: "currentColor", d: "M20 11.1111H12.8889V4H11.1111V11.1111H4V12.8889H11.1111V20H12.8889V12.8889H20V11.1111Z" })
                                        )
                                    );
                                }
                            ),
                            searchBarVisibility === false ? React.createElement(Tooltip, { text: "Search..." },
                                ({ onMouseEnter, onMouseLeave }) => {
                                    return React.createElement("div", { className: "colorwaySelector-pill", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => setSearchBarVisibility(true) },
                                        React.createElement(SearchIcon, { width: 14, height: 14, viewboxX: 24, viewboxY: 24 })
                                    );
                                }
                            ) : React.createElement(Tooltip, { text: "Close Search" },
                                ({ onMouseEnter, onMouseLeave }) => {
                                    return React.createElement(
                                        "div",
                                        {
                                            className: "colorwaySelector-pill",
                                            onMouseEnter: onMouseEnter,
                                            onMouseLeave: onMouseLeave,
                                            onClick: () => {
                                                searchColorways("");
                                                setSearchString("");
                                                setSearchBarVisibility(false);
                                            }
                                        },
                                        React.createElement(CloseIcon, { width: 14, height: 14, viewboxX: 24, viewboxY: 24 })
                                    );
                                }
                            )
                        )
                    ]
                    ),
                    React.createElement("div", { className: "ColorwaySelectorWrapper" }, [
                        ["all", "official", "custom"].includes(visibility) ? (visibleColorwayArray.length > 0 ? visibleColorwayArray.map((color) => {
                            var colors = color.colors || ["accent", "primary", "secondary", "tertiary"];
                            return React.createElement(Tooltip, { text: color.name },
                                ({ onMouseEnter, onMouseLeave }) => {
                                    return React.createElement("div", {
                                        className: `discordColorway${colorwayCSS.get().name === color.name ? " active" : ""}`,
                                        id: "colorway-" + color.name,
                                        onMouseEnter: onMouseEnter,
                                        onMouseLeave: onMouseLeave
                                    }, [
                                        React.createElement("div", { className: "colorwayCheckIconContainer" },
                                            React.createElement("div", { className: "colorwayCheckIcon" },
                                                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "18", height: "18", viewBox: "0 0 24 24" },
                                                    React.createElement("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7.00003L19.5899 5.59003L8.99991 16.17Z" })
                                                )
                                            )
                                        ),
                                        React.createElement("div", {
                                            className: "colorwayInfoIconContainer", onClick: () => {
                                                openModal(props => React.createElement(InfoModal, { modalProps: props, colorwayProps: color, discrimProps: customColorways.includes(color) }));
                                            }
                                        },
                                            React.createElement("div", { className: "colorwayInfoIcon" },
                                                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16" },
                                                    React.createElement("path", { d: "m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" })
                                                )
                                            )
                                        ),
                                        React.createElement("div", {
                                            className: "discordColorwayPreviewColorContainer",
                                            onClick: () => {
                                                if (currentColorway === color.name) {
                                                    dataStore.set("actveColorwayID", null);
                                                    dataStore.set("actveColorway", null);
                                                    colorwayCSS.remove();
                                                } else {
                                                    dataStore.set("actveColorwayID", color.name);
                                                    dataStore.set("actveColorway", color.import);
                                                    colorwayCSS.set(color.import, color.name);
                                                }
                                                setCurrentColorway(colorwayCSS.get().name);
                                            }
                                        }, colors.map((colorItm) => {
                                            return (
                                                React.createElement("div", { className: "discordColorwayPreviewColor", style: { backgroundColor: color[colorItm] } })
                                            );
                                        }))
                                    ]);
                                }
                            );
                        }) : React.createElement(FormTitle, { style: { marginBottom: 0, width: "100%", textAlign: "center" } }, "No colorways...")) : null,
                        visibility === "info" ? [
                            React.createElement("div", { className: "colorwaysSelector-infoRow" },
                                [React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Plugin Name:"),
                                React.createElement(Text, { variant: "text-xs/normal", style: { color: "var(--text-muted)", fontWeight: 500, fontSize: "14px" } }, "Discord Colorways")]
                            ),
                            React.createElement("div", { className: "colorwaysSelector-infoRow" },
                                [React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Plugin Version:"),
                                React.createElement(Text, { variant: "text-xs/normal", style: { color: "var(--text-muted)", fontWeight: 500, fontSize: "14px" } }, (plugin.pluginVersion + " (Official) (Universal)"))]
                            ),
                            React.createElement("div", { className: "colorwaysSelector-infoRow" },
                                [React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Creator Version:"),
                                React.createElement(Text, { variant: "text-xs/normal", style: { color: "var(--text-muted)", fontWeight: 500, fontSize: "14px" } }, (plugin.creatorVersion + " (Stable)"))]
                            ),
                            React.createElement("div", { className: "colorwaysSelector-infoRow" }, [
                                React.createElement(FormTitle, { style: { marginBottom: 0 } }, "Loaded Colorways:"),
                                React.createElement(Text, { variant: "text-xs/normal", style: { color: "var(--text-muted)", fontWeight: 500, fontSize: "14px" } }, ([...colorways, ...customColorways].length))
                            ]
                            )] : null
                    ]
                    )
                ])
            )
        );
    }
})();