giscus-dark.css

/* Custom Giscus Dark Theme - matches yashgarg.dev cherry scheme */

/* Custom fonts */
@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/Literata.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/NotoSerif.ttf') format('truetype');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://yashgarg.dev/fonts/IBMPlexMono.ttf') format('truetype');
}

/* Main theme variables - cherry dark mode */
main {
    /* Primary: Rose #e11d48 = 225, 29, 72 */
    --primary-default: 225, 29, 72;
    /* Background: #1a1a1a = 26, 26, 26 */
    --bg-default: 26, 26, 26;

    /* Syntax highlighting - Dracula-inspired (matching your syntax.css dark mode) */
    --color-prettylights-syntax-comment: #6272a4;
    --color-prettylights-syntax-constant: #bd93f9;
    --color-prettylights-syntax-entity: #8be9fd;
    --color-prettylights-syntax-storage-modifier-import: #f8f8f2;
    --color-prettylights-syntax-entity-tag: #50fa7b;
    --color-prettylights-syntax-keyword: #ff79c6;
    --color-prettylights-syntax-string: #f1fa8c;
    --color-prettylights-syntax-variable: #ffb86c;
    --color-prettylights-syntax-brackethighlighter-unmatched: #ff5555;
    --color-prettylights-syntax-invalid-illegal-text: #f8f8f2;
    --color-prettylights-syntax-invalid-illegal-bg: #ff5555;
    --color-prettylights-syntax-carriage-return-text: #f8f8f2;
    --color-prettylights-syntax-carriage-return-bg: #ff5555;
    --color-prettylights-syntax-string-regexp: #50fa7b;
    --color-prettylights-syntax-markup-list: #f1fa8c;
    --color-prettylights-syntax-markup-heading: #bd93f9;
    --color-prettylights-syntax-markup-italic: #f8f8f2;
    --color-prettylights-syntax-markup-bold: #f8f8f2;
    --color-prettylights-syntax-markup-deleted-text: #ff5555;
    --color-prettylights-syntax-markup-deleted-bg: #44475a;
    --color-prettylights-syntax-markup-inserted-text: #50fa7b;
    --color-prettylights-syntax-markup-inserted-bg: #44475a;
    --color-prettylights-syntax-markup-changed-text: #ffb86c;
    --color-prettylights-syntax-markup-changed-bg: #44475a;
    --color-prettylights-syntax-markup-ignored-text: #f8f8f2;
    --color-prettylights-syntax-markup-ignored-bg: #6272a4;
    --color-prettylights-syntax-meta-diff-range: #bd93f9;
    --color-prettylights-syntax-brackethighlighter-angle: #6272a4;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #44475a;
    --color-prettylights-syntax-constant-other-reference-link: #8be9fd;

    /* Button styles */
    --color-btn-text: #f8f8f2;
    --color-btn-bg: #2d2d2d;
    --color-btn-border: #3d3d3d;
    --color-btn-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --color-btn-hover-bg: #3d3d3d;
    --color-btn-hover-border: #4d4d4d;
    --color-btn-active-bg: rgba(var(--primary-default), 0.2);
    --color-btn-active-border: rgba(var(--primary-default), 1);
    --color-btn-selected-bg: rgba(var(--primary-default), 0.15);

    /* Primary button (rose accent) */
    --color-btn-primary-text: #fff;
    --color-btn-primary-bg: rgba(var(--primary-default), 0.85);
    --color-btn-primary-border: rgba(var(--primary-default), 0.9);
    --color-btn-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --color-btn-primary-hover-bg: rgba(var(--primary-default), 1);
    --color-btn-primary-hover-border: rgba(var(--primary-default), 1);
    --color-btn-primary-selected-bg: rgba(var(--primary-default), 0.85);
    --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
    --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.6);
    --color-btn-primary-disabled-bg: rgba(var(--primary-default), 0.4);
    --color-btn-primary-disabled-border: rgba(var(--primary-default), 0.4);

    /* UI colors */
    --color-action-list-item-default-hover-bg: rgba(255, 255, 255, 0.08);
    --color-segmented-control-bg: #2d2d2d;
    --color-segmented-control-button-bg: #1a1a1a;
    --color-segmented-control-button-selected-border: #3d3d3d;

    /* Foreground colors */
    --color-fg-default: #f8f8f2;
    --color-fg-muted: rgba(248, 248, 242, 0.7);
    --color-fg-subtle: rgba(248, 248, 242, 0.5);

    /* Canvas/background colors */
    --color-canvas-default: #1a1a1a;
    --color-canvas-overlay: #1e1e1e;
    --color-canvas-inset: #161616;
    --color-canvas-subtle: #2d2d2d;

    /* Border colors */
    --color-border-default: #3d3d3d;
    --color-border-muted: rgba(255, 255, 255, 0.1);

    /* Neutral */
    --color-neutral-muted: rgba(255, 255, 255, 0.1);

    /* Accent (rose primary) */
    --color-accent-fg: rgba(var(--primary-default), 1);
    --color-accent-emphasis: rgba(var(--primary-default), 1);
    --color-accent-muted: rgba(var(--primary-default), 0.4);
    --color-accent-subtle: rgba(var(--primary-default), 0.15);

    /* Status colors */
    --color-success-fg: #50fa7b;
    --color-attention-fg: #f1fa8c;
    --color-attention-muted: rgba(241, 250, 140, 0.4);
    --color-attention-subtle: rgba(241, 250, 140, 0.15);
    --color-danger-fg: #ff5555;
    --color-danger-muted: rgba(255, 85, 85, 0.4);
    --color-danger-subtle: rgba(255, 85, 85, 0.15);

    /* Shadow */
    --color-primer-shadow-inset: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);

    /* Scale colors */
    --color-scale-gray-7: #2d2d2d;
    --color-scale-blue-8: rgba(var(--primary-default), 0.15);

    /* Social reaction */
    --color-social-reaction-bg-hover: var(--color-scale-gray-7);
    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
}

/* Loading indicators */
main .pagination-loader-container {
    background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg);
}

main .gsc-loading-image {
    background-image: url(https://github.githubassets.com/images/mona-loading-dark.gif);
}

/* Typography overrides */
body,
.gsc-comment-content,
.gsc-textarea,
.gsc-comment-author,
.gsc-reply-author {
    font-family: 'Literata', Georgia, serif !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Headings */
.gsc-comment-header,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Serif', Georgia, serif !important;
    font-weight: 600 !important;
}

/* Code */
code,
pre,
.gsc-comment-content code,
.gsc-comment-content pre {
    font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
    font-size: 0.9em !important;
}

/* Code blocks */
pre {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
    padding: 1rem !important;
    border-radius: 0.375rem !important;
}

/* Link styling - wavy underlines */
a {
    text-decoration-style: wavy !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    color: rgba(var(--primary-default), 1) !important;
}

a:hover {
    color: rgba(var(--primary-default), 0.8) !important;
}

.gsc-main {
    border: none !important;
}

.gsc-comment:not(.gsc-reply-box) .gsc-replies {
    border-radius: unset;
}