ChatGPT - Deep Dark by xiggi

/* ==UserStyle==
@name         ChatGPT - Deep Dark
@version      20250502.18.21
@namespace    ?
@description  Deep Dark theme for ChatGPT.
@license      No License
==/UserStyle== */

@-moz-document domain("chatgpt.com") {
:root {
    --main-bg: #000;
    --second-bg: #0f0f0f;
    --hover-bg: #282828;
    
    --main-surface-primary: var(--main-bg);
    --sidebar-surface-primary: var(--main-bg);
    --main-surface-secondary: var(--hover-bg);
    --sidebar-surface-tertiary: var(--hover-bg);
    --sidebar-surface-secondary: var(--hover-bg);
    --message-surface: var(--hover-bg);
    --dot-color: #ccc !important;
    
    --text-primary: #ccc;
    --text-secondary: #ccc;
    --text-tertiary: #8f8f8f;
    --text-inverted: #fff;
    --text-inverted-static: #fff;
    --tw-prose-headings: #fff;
}

.border-token-border-default.flex.w-full.cursor-text.flex-col.items-center.justify-center.rounded-\[28px\].border.bg-clip-padding.contain-inline-size.overflow-clip.shadow-sm.sm\:shadow-lg.dark\:shadow-none\!.bg-token-main-surface-primary.dark\:bg-\[\#303030\] {
    background-color: var(--second-bg);
}

.prose {
    color: #ccc;
        --tw-prose-headings: #fff;
    --tw-prose-bold: #fff;
}

.dark .light, .light, html {
    --main-surface-primary: var(--main-bg);
    --text-secondary: #ccc;
}

button.not-prose.group\/footnote.border-token-border-default.bg-token-main-surface-primary.hover\:bg-token-main-surface-secondary.mt-3.mb-2.flex.h-\[38px\].w-fit.items-center.gap-1\.5.rounded-3xl.border.py-2.ps-3.pe-3 {
    background: var(--hover-bg);
    color: #ccc;
}

*, ::backdrop, :after, :before {
    border-color: transparent;
}

.markdown li::marker {
    color: #999;
    opacity: .6;
}

.inline-flex.rounded-xl.border.border-gray-100.dark\:border-gray-700 {
    background: var(--second-bg);
}

.bg-token-main-surface-tertiary {
    background-color: transparent;
}

button.text-token-text-secondary.hover\:text-token-text-primary:hover {
    color: #fff;
}

.can-hover\:hover\:bg-token-main-surface-secondary:hover, .hover\:bg-token-main-surface-secondary:hover, .btn-secondary:hover, .can-hover\:hover\:bg-token-sidebar-surface-secondary:hover {
    color: #fff;
}

.bg-token-main-surface-primary {
    background-color: var(--second-bg);
    color: #ccc;
}

.btn-secondary {
    background-color: var(--hover-bg);
}

.hover\:bg-token-main-surface-secondary:hover {
    background-color: var(--hover-bg);
    color: #fff;
}

.markdown a {
    color: #ccc;
    text-decoration: underline;
}

.prose :where(code):not(:where([class~=not-prose] *)) {
    background: var(--hover-bg);
    color: #ccc;
}

.bg-\[\#F4F4F4\]\!, .bg-\[\#FCECC1\], a.flex.h-4\.5.overflow-hidden.rounded-xl.px-2.text-\[0\.5625em\].font-medium.text-token-text-secondary\!.bg-\[\#F4F4F4\]\!.dark\:bg-\[\#303030\]\!.transition-colors.duration-150.ease-in-out, span.ms-1.inline-flex.max-w-full.items-center.relative.top-\[-0\.094rem\].animate-\[show_150ms_ease-in\] {
    background: var(--hover-bg) !important;
}

.bg-white {
    background: var(--second-bg);
}

    /** Scrollbar **/
    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: var(--main-bg);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #999;
    }
}