Dark Mode for Zenn.dev: Add This to Your Stylus Settings

zenn.css

@-moz-document domain("zenn.dev") {
    :root {
        color-scheme: light dark;
        --c-blue-100: light-dark(#f0f7ff, #1b1e2e);
        --c-blue-200: light-dark(#ecf5ff, #1f2233);
        --c-blue-300: light-dark(#e0efff, #242741);
        --c-blue-400: light-dark(#bfdcff, #2b3558);
        --c-blue-500: light-dark(#3ea8ff, #3ea8ff);
        --c-blue-600: light-dark(#0f83fd, #4d6eb4);
        --c-blue-700: light-dark(#0868ce, #6079b5);
        --c-gray-100: light-dark(#f5f9fc, #1c1e23);
        --c-gray-200: light-dark(#f1f5f9, #23252b);
        --c-gray-300: light-dark(#edf2f7, #2a2c33);
        --c-gray-400: light-dark(#e4edf4, #33353d);
        --c-gray-500: light-dark(#d6e3ed, #40434d);
        --c-gray-600: light-dark(#acbcc7, #5b5f6b);
        --c-gray-700: light-dark(#8f9faa, #747986);
        --c-gray-800: light-dark(#65717b, #8e93a0);
        --c-general-primary: light-dark(var(--c-blue-500), #3a579d);
        --c-general-secondary: light-dark(#807aff, #474a9a);
        --c-general-alert: light-dark(#ff6868, #b34747);
        --c-general-like: light-dark(#f76685, #b34760);
        --c-button-primary: light-dark(var(--c-blue-500), var(--c-blue-500));
        --c-button-primary-hover: light-dark(var(--c-blue-600), #4d6eb4);
        --c-text-body: light-dark(#000000d1, #d1d1d1);
        --c-text-low-priority: light-dark(var(--c-gray-800), #8e93a0);
        --c-text-lower-priority: light-dark(var(--c-gray-700), #747986);
        --c-text-link-primary: light-dark(var(--c-blue-600), #4d6eb4);
        --c-bg-base: light-dark(#fff, #121212);
        --c-bg-neutral: light-dark(var(--c-gray-300), #2a2c33);
        --c-bg-neutral-lighter: light-dark(var(--c-gray-200), #23252b);
        --c-bg-neutral-lightest: light-dark(var(--c-gray-100), #1c1e23);
        --c-bg-primary: light-dark(var(--c-blue-300), #242741);
        --c-bg-primary-lighter: light-dark(var(--c-blue-200), #1f2233);
        --c-bg-secondary: light-dark(#f3f2ff, #1f1e2b);
        --c-bg-alert: light-dark(#fff0f0, #2f1e1e);
        --c-bg-like: light-dark(#ffeaf4, #2f1e25);
        --c-neutral-border: light-dark(var(--c-gray-500), #40434d);
        --c-neutral-border-lighter: light-dark(var(--c-gray-400), #33353d);
        --c-focus-shadow: light-dark(var(--c-blue-400), #2b3558);
        --c-selection-highlight: light-dark(#ffdc0059, #595100);
    }
}