Hacker News CSS Styles - Dark Theme and Bigger Fonts (used with Stylus extension)

styles.css

/* ==UserStyle==
@name           news.ycombinator.com/item
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://news.ycombinator.com") {
    /* ========== Hacker News Dark Mode (with ~1.25x fonts) ========== */
    :root {
        --hn-bg: #020617;
        /* main page background */
        --hn-surface: #020617;
        /* table / content background */
        --hn-header: #020617;
        /* top bar */
        --hn-border: #111827;
        --hn-border-soft: #1f2933;

        --hn-text-primary: #e5e7eb;
        --hn-text-muted: #9ca3af;
        --hn-text-subtle: #6b7280;

        --hn-link: #f97316;
        --hn-link-hover: #fdba74;
        --hn-link-visited: #f97316;

        --hn-accent: #f97316;
        /* logo / scores / points */
        --hn-score: #f97316;
        --hn-tag-bg: #111827;
    }

    /* Base layout */
    html,
    body {
        background-color: var(--hn-bg) !important;
        color: var(--hn-text-primary) !important;
    }

    /* Main table container */
    #hnmain {
        background-color: var(--hn-surface) !important;
        border: 1px solid var(--hn-border) !important;
    }

    /* Top header bar */
    body > center > table:first-of-type {
        background-color: var(--hn-header) !important;
        border-bottom: 1px solid var(--hn-border) !important;
    }

    /* ===== Typography (bump ~1.25x) ===== */
    /* Original 10pt → ~12.5pt (13pt); 8pt → ~10pt; 7pt → ~9pt; 9pt → ~11pt */
    body,
    td,
    .default,
    .title,
    .pagetop,
    .hnmore {
        font-family: Verdana, Geneva, sans-serif !important;
        font-size: 13pt !important;
        color: var(--hn-text-primary) !important;
    }

    .comment {
        font-family: system-ui, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        font-size: 14pt !important;
        line-height: 1.55 !important;
        letter-spacing: 0.1px !important;
        color: var(--hn-text-primary) !important;
        max-width: 70ch !important; /* optional: limits line length for reading */
    }
    
    /* Improve paragraph spacing */
    .comment p {
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }

    /* Admin + small metadata */
    .admin,
    .admin td,
    .comhead,
    .yclinks {
        font-size: 10pt !important;
        color: var(--hn-text-muted) !important;
    }

    /* Subtext (scores, bylines, age, etc.) */
    .subtext,
    .subtext td {
        font-size: 9pt !important;
        color: var(--hn-text-subtle) !important;
    }

    /* Inputs / textareas */
    input,
    textarea {
        font-family: monospace !important;
        font-size: 13pt !important;
        background-color: #020617 !important;
        color: var(--hn-text-primary) !important;
        border: 1px solid white !important;
        padding: 8px !important;
    }

    input[type="submit"] {
        font-family: Verdana, Geneva, sans-serif !important;
        background-color: var(--hn-accent) !important;
        color: #111827 !important;
        border-radius: 4px !important;
        border: none !important;
        padding: 3px 10px !important;
        cursor: pointer !important;
    }
    input[type="submit"]:hover {
        filter: brightness(1.1) !important;
    }

    /* ===== Links ===== */
    a:link,
    a:visited {
        color: var(--hn-link) !important;
        text-decoration: none !important;
    }

    a:hover {
        color: var(--hn-link-hover) !important;
        text-decoration: underline !important;
    }

    /* Title row links */
    .title a:link,
    .title a:visited {
        color: var(--hn-link) !important;
    }

    /* HN logo/name */
    .hnname a:link,
    .hnname a:visited {
        color: var(--hn-accent) !important;
        font-weight: bold !important;
    }

    /* Pagetop links (top nav) */
    .pagetop {
        color: var(--hn-text-primary) !important;
    }
    .pagetop a:link,
    .pagetop a:visited {
        color: var(--hn-text-primary) !important;
    }

    /* Comment links */
    .comment a:link,
    .comment a:visited {
        color: var(--hn-link) !important;
        text-decoration: underline !important;
    }

    /* Subtext links */
    .subtext a:link,
    .subtext a:visited {
        color: var(--hn-text-subtle) !important;
    }

    /* ===== Score / metadata tweaks ===== */
    .score {
        color: var(--hn-score) !important;
    }

    /* ===== Utility color classes remapped for dark mode ===== */
    .c00,
    .c00 a:link,
    .c00 a:visited {
        color: var(--hn-text-primary) !important;
    }
    .c5a,
    .c5a a:link,
    .c5a a:visited {
        color: #d1d5db !important;
    }
    .c73,
    .c73 a:link,
    .c73 a:visited {
        color: #9ca3af !important;
    }
    .c82,
    .c82 a:link,
    .c82 a:visited {
        color: var(--hn-text-subtle) !important;
    }
    .c88,
    .c88 a:link,
    .c88 a:visited {
        color: #9ca3af !important;
    }
    .c9c,
    .c9c a:link,
    .c9c a:visited {
        color: #9ca3af !important;
    }
    .cae,
    .cae a:link,
    .cae a:visited {
        color: #d1d5db !important;
    }
    .cbe,
    .cbe a:link,
    .cbe a:visited {
        color: #e5e7eb !important;
    }
    .cce,
    .cce a:link,
    .cce a:visited {
        color: #e5e7eb !important;
    }
    .cdd,
    .cdd a:link,
    .cdd a:visited {
        color: #f3f4f6 !important;
    }

    /* "alert" red */
    .ca2 {
        color: #f97373 !important;
    }

    /* ===== Tables / rows / subtle striping ===== */
    tr,
    td {
        background-color: transparent !important;
        border-color: var(--hn-border-soft) !important;
    }

    table {
        background-color: transparent !important;
    }
    
    tr.spacer {
        height: 12px !important;
    }

    /* Optional: add very subtle row separation in lists */
    table.itemlist tr:nth-child(odd) td {
        background-color: rgba(15, 23, 42, 0.7) !important;
    }
    table.itemlist tr:nth-child(even) td {
        background-color: rgba(15, 23, 42, 0.9) !important;
    }

    /* The tiny "More" link row */
    .hnmore {
        color: var(--hn-text-subtle) !important;
    }

    /* ===== Code blocks / preformatted ===== */
    pre {
        background-color: #020617 !important;
        border-radius: 4px !important;
        border: 1px solid var(--hn-border-soft) !important;
        padding: 6px 8px !important;
        color: #e5e7eb !important;
    }

    /* ===== Voting arrow ===== */
    .votearrow {
        filter: invert(75%) sepia(70%) saturate(400%) hue-rotate(5deg) !important;
    }

    /* ===== Comment layout / width ===== */
    .comment {
        max-width: 1215px;
        overflow-wrap: anywhere;
    }

    /* Keep your existing responsive max-width rules for .comment if you like;
       they will still apply on top of these. */
    /* ===== Mobile tweaks (keep spirit of original, just colors/fonts) ===== */
    @media only screen and (min-width: 300px) and (max-width: 750px) {
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            background-color: var(--hn-bg) !important;
        }

        #hnmain {
            width: 100% !important;
            min-width: 0 !important;
            border-left: none !important;
            border-right: none !important;
        }

        span.pagetop {
            display: block;
            margin: 3px 5px;
            font-size: 13pt !important;
            line-height: normal;
        }

        span.pagetop b {
            display: block;
            font-size: 16pt !important;
        }

        .title {
            font-size: 13pt !important;
            line-height: 16pt !important;
        }

        .subtext {
            font-size: 11pt !important;
        }

        input[type='text'],
        input[type='number'],
        textarea {
            font-size: 16pt !important;
            width: 90% !important;
        }
    }
}