☰

Custom Dark Mode perplexity

the,e style Darkmode !

Versione datata 29/03/2025. Vedi la nuova versione l'ultima versione.

// ==UserScript==
// @name         Custom Dark Mode perplexity
// @namespace    http://tampermonkey.net/
// @version       1.1.2
// @description  the,e style Darkmode !
// @author       Gullampis810
// @license      MIT
// @match        https://www.perplexity.ai/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=perplexity.ai 
// @grant        GM_addStyle
// ==/UserScript==


(function() {
    'use strict';

    // Функция для добавления стилей
    function addStyle(css) {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(css));
        document.head.appendChild(style);
    }

    // Переопределение стилей
    var customStyles = `
    @media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark\\/50 {
            --tw-ring-color: oklch(0.9 0.18 188.26);
        }
        .bg-background-100.-mx-md.px-md.mb-md.-top-0.z-10.md\\:sticky {
            background: #1f1225 !important;
            border: 2px #8a6a98 solid !important;
            border-radius: 15px !important;
        }
        .-mx-sm.relative.flex.gap-1\\.5 {
            background: #1f1225 !important;
        }
        :root:not([data-color-scheme=light]) .dark\\:bg-backgroundDark {
            --tw-bg-opacity: 1;
            background: linear-gradient(45deg, #392a3d 0%, #4b9b8894 50%, #231c2d 100%);
        }
        :root:not([data-color-scheme=light]) .dark\\:bg-offsetDark {
            --tw-bg-opacity: 1;
            background-color: oklch(0.21 0.04 315.27); /*Основной фиолетовый цвет фона бордов*/
        }
        :root:not([data-color-scheme=light]) .dark\\:scrollbar-thumb-idleDark {
            --scrollbar-thumb: #3febc6 !important;
        }
        :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark\\/50 {
            --tw-ring-color: oklch(0.9 0.18 188.26);
        }
        .px-md\\.md\\:px-lg\\.min-h-\\[calc\\(100dvh-var\\(--header-height\\)\\)\\].border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
            background: linear-gradient(45deg, #833f00, #0f092c, #28d0adcc);
            background-size: 155%;
        }

        @media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme=light]) .dark\\:bg-offsetPlusDark {
            --tw-bg-opacity: 1;
            background-color: oklch(0.42 0.08 314.19); /* цвет кнопок */
        }

         @media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme=light]) .dark\\:ring-borderMainDark {
            --tw-ring-opacity: 1;
            --tw-ring-color: oklch(0.79 0.15 190.71); /* border граница чат - голубой  */
        }

         @media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme=light]) .dark\\:text-textOffDark {
            --tw-text-opacity: 1;
            color: oklch(0.71 0.09 191.87);
        }

         .shrink-0 {
        color: #71b672;
    }
    audio, canvas, embed, iframe, img, object, svg, video {
        color: #20b8cd;
    }

    @media (min-width: 768px) {
        body {
            background: #342542;
        }
    }

    /*hover button*/
@media (min-width: 768px) {
        @media (prefers-color-scheme: dark) {
            :root:not([data-color-scheme="light"]) .md\\:dark\\:hover\\:bg-offsetPlusDark:hover {
                --tw-bg-opacity: 1;
                background-color: #68527f !important;
            }

    .flex.items-center.justify-between.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #2c1b34;
        border-radius: 5px;
        padding: 5px;
    }

    .bg-background.p-xs.px-md.py-sm.dark\\:border-borderMainDark\\/50.dark\\:bg-backgroundDark.w-80.rounded-lg.border.shadow-lg {
        background: #1b3434;
    }

    .text-text-200.bg-background-300.py-xs.px-sm.inline-block.rounded-br.rounded-tl-\\[3px\\].font-thin {
        background: #a585bf;
        color: black;
    }

    button.bg-idle.text-textOff.dark\\:bg-idleDark.dark\\:text-textOffDark.\\!duration-100.font-sans.focus\\:outline-none.outline-none.outline-transparent.transition.duration-300.ease-out.font-sans.select-none.items-center.relative.group\\/button.justify-center.text-center.items-center.rounded-full.cursor-default.opacity-50.whitespace-nowrap.inline-flex.text-sm.h-8.aspect-square {
        background: #417870;
    }


 .shadow-subtle.flex.min-h-0.min-w-0.rounded-md.border.data-\\[placement\\=bottom-end\\]\\:origin-top-right.data-\\[placement\\=bottom-start\\]\\:origin-top-left.data-\\[placement\\=top-end\\]\\:origin-bottom-right.data-\\[placement\\=top-start\\]\\:origin-bottom-left.duration-150.p-xs.animate-in.fade-in.zoom-in-\\[0\\.97\\].ease-out.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #6f5686;
        border: 2px solid #59a38e;
    }

@media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme=light]) .md\\:dark\\:hover\\:bg-offsetDark:hover {
            --tw-bg-opacity: 1;
            background-color: oklch(0.31 0.07 312.34);
        }
    }

.sticky.-top-12.z-20.flex.justify-center.border-b.md\\:top-0.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #4f3b59;
    }

.sticky.left-0.right-0.top-0.z-10.border-b.md\\:mb-0.md\\:rounded-t-xl.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #46324f;
    }

    .bg-background.dark\\:bg-backgroundDark.absolute.inset-0.z-\\[1\\].opacity-90 {
        background: #1f1225b8;
        border-radius: 0px 0px 30px 30px;
    }

    .px-md.py-sm.md\\:py-md.sticky.top-0.z-\\[22\\].w-full.border-b.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #3b2a46;
    }

    .p-md.relative.rounded-lg.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
        background: #12221e;
        border-radius: 0px 0px 30px 30px;
    }

    .flex.h-full.w-\\[100vw\\].grow.flex-col.md\\:w-\\[unset\\].md\\:grow-\\[unset\\].border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
        background: blanchedalmond;
        border-radius: 32px;
    }

    .bg-background.dark\\:bg-backgroundDark.shadow-md.overflow-y-auto.scrollbar-thin.scrollbar-thumb-idle.dark\\:scrollbar-thumb-idleDark.scrollbar-track-transparent.fill-mode-both.md\\:rounded-lg.md\\:min-w-\\[600px\\].max-w-screen-sm.shadow-md.relative.h-full.max-h-\\[100vh\\].md\\:max-h-\\[95vh\\].overflow-auto.md\\:w-full {
        border-radius: 30px;
    }

     .flex.select-none.items-center.justify-between.pl-1.pr-3 {
            background: #46324f;
        }

        .overflow-hidden.px-sm.rounded-lg.border.py-1\\.5.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent {
            background: #0d1f1f;
        }

        p.my-0 {
            background: #321d385c;
            filter: drop-shadow(2px 4px 6px black);
            border-radius: 4px;
        }

        .erp-tab\\:rounded-none.erp-new_tab\\:rounded-none.erp-tab\\:shadow-none.erp-new_tab\\:shadow-none.erp-tab\\:shadow-left-sm.erp-new_tab\\:shadow-left-sm.flex-1.overflow-clip.bg-clip-border.shadow-sm.lg\\:rounded-lg.md\\:dark\\:border.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
            border-radius: 13px;
        }

        h2.mb-xs.mt-5.text-base.font-\\[525\\].first\\:mt-3 {
            background: #76511b;
            border-radius: 25px;
            padding: 5px;
        }

        .hover\\:bg-background-200:hover {
        --tw-bg-opacity: 1;
        background-color: #68527f !important;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-color-scheme="light"]) .dark\\:hover\\:bg-offsetPlusDark:hover {
            --tw-bg-opacity: 1;
            background-color: #68527f !important;
        }

@media (prefers-color-scheme: dark) {
            :root:not([data-color-scheme=light]) .dark\\:bg-background-200 {
                --tw-bg-opacity: 1;
                background-color: #2d253a !important;
            }
        }

@media (prefers-color-scheme: dark) {
            :root:not([data-color-scheme=light]) .dark\\:border-borderMain {
                --tw-border-opacity: 1;
                border: 1px solid oklch(0.73 0.13 192.91) !important;
            }
        }

        .w-lg.text-textMain.dark\\:text-textMainDark.flex.aspect-square.shrink-0.items-center.justify-center.rounded-full.border.\\!bg-textMain.\\!text-background.dark\\:\\!bg-textMainDark.dark\\:\\!text-backgroundDark.border-0.border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-background.dark\\:bg-backgroundDark {
            background: oklab(0.31 0.05 -0.04) !important;
        }

 button.bg-textMain.text-textMainDark.dark\\:bg-textMainDark.dark\\:text-light-text.hover\\:text-superDuper.hover\\:dark\\:text-superDuper.font-sans.focus\\:outline-none.outline-none.outline-transparent.transition.duration-300.ease-out.font-sans.select-none.items-center.relative.group\\/button.justify-center.text-center.items-center.rounded-full.cursor-pointer.active\\:scale-\\[0\\.97\\].active\\:duration-150.active\\:ease-outExpo.origin-center.whitespace-nowrap.inline-flex.text-sm.h-8.aspect-square {
            background: #1f1225 !important;
        }

        .grow.flex.flex-col.justify-center.py-md.px-md {
    background: #3b2a46;
}
    }`;

    addStyle(customStyles);
})();