stylus-claude-v1

stylus.claude.css

/* ==UserStyle==
@name           ClaudePurpleRead
@namespace      ClaudePurpleRead
@version        2.0.0
@description    Purple dark theme for claude.ai
@author         Goldman
==/UserStyle== */

@import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@-moz-document domain("claude.ai") {

:root, html, body {
    --font-claude-response: 'IBM Plex Sans', system-ui, sans-serif !important;
    --cds-font-voice: 'IBM Plex Sans', system-ui, sans-serif !important;
    --font-ui: 'IBM Plex Sans', system-ui, sans-serif !important;
    --cds-font-sans: 'IBM Plex Sans', system-ui, sans-serif !important;

    --brand-000: 272 70% 62% !important;
    --brand-100: 272 60% 50% !important;
    --brand-200: 272 55% 42% !important;
    --accent-000: 272 70% 62% !important;
    --accent-100: 272 60% 50% !important;
    --accent-200: 272 50% 40% !important;
    --accent-main-000: 272 70% 62% !important;
    --accent-main-100: 272 60% 50% !important;
    --accent-main-200: 272 50% 40% !important;

    --bg-000: 272 12% 10% !important;
    --bg-100: 272 11% 12% !important;
    --bg-200: 272 10% 15% !important;
    --bg-300: 272 10% 18% !important;
    --bg-400: 272 9% 22% !important;
    --bg-500: 272 8% 26% !important;

    --surface-000: 272 11% 12% !important;
    --surface-100: 272 10% 15% !important;
    --surface-200: 272 10% 18% !important;

    --text-000: 272 10% 90% !important;
    --text-100: 272 8% 84% !important;
    --text-200: 272 7% 68% !important;
    --text-300: 272 6% 54% !important;
    --text-400: 272 6% 38% !important;
    --text-500: 272 5% 78% !important;

    --border-100: 272 8% 12% !important;
    --border-200: 272 8% 16% !important;
    --border-300: 272 8% 20% !important;
}

/* reading comfort */
.max-w-3xl {
    max-width: 90ch !important;
}

.prose {
    line-height: 1.65 !important;
    font-size: 1.02rem !important;
    color: hsl(272, 8%, 78%) !important;
}

.prose strong {
    color: hsl(272, 8%, 92%) !important;
}

.prose a {
    color: hsl(272, 70%, 65%) !important;
}

/* code */
pre {
    border-radius: 12px !important;
    overflow: hidden !important;
}

pre code {
    background: transparent !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

:not(pre) > code {
    background: hsl(272, 10%, 16%) !important;
    border-radius: 5px !important;
    padding: 1px 5px !important;
    color: hsl(272, 70%, 72%) !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* selection */
::selection {
    background: hsl(272 55% 30% / 0.55) !important;
    color: #f2eaff !important;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: hsl(272, 30%, 18%) !important;
    border-radius: 10px !important;
}

/* hide disclaimer */
[data-disclaimer="true"] {
    display: none !important;
}

.prose,
.prose p,
.prose li,
.prose h1, .prose h2, .prose h3, .prose h4,
.prose blockquote,
.prose td, .prose th {
    font-family: 'Cantarell', system-ui, sans-serif !important;
}

.tiptap.ProseMirror,
.tiptap.ProseMirror p {
    font-family: 'Cantarell', system-ui, sans-serif !important;
}
    
}