zulip/web/styles/dark_theme.css

@import url("flatpickr/dist/themes/dark.css");

%dark-theme {
    color-scheme: dark;

    kbd {
        text-shadow: none;
    }

    /************************* MODAL DARK THEME *******************/

    #message-formatting,
    #keyboard-shortcuts {
        & kbd {
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            color: var(--color-hotkey-hint);
            opacity: 0.8;
        }
    }

    .enter_sends_choices {
        color: hsl(236deg 33% 90%);

        .enter_sends_minor {
            color: hsl(0deg 0% 80%);
        }
    }

    .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: color-mix(
            in oklch,
            hsl(7deg 100% 74%) 70%,
            transparent
        ) !important;

        &:hover {
            color: hsl(7deg 100% 74%) !important;
        }
    }

    /* this one is because in the app we have blue and in dark-theme it should be white. */
    .popover a {
        color: inherit;
    }

    /* these are converting grey things to "new grey".
       :disabled rules are exploded for CSS selector performance reasons. */
    button:disabled:not(.action-button, .icon-button, .info-density-button),
    option:disabled,
    select:disabled,
    textarea:disabled,
    input:disabled,
    input:not([type="radio"]):read-only,
    textarea:read-only,
    #organization-permissions .dropdown-widget-button:disabled,
    #organization-settings .dropdown-widget-button:disabled {
        color: inherit;
        opacity: 0.5;
    }

    button.info-density-button:disabled {
        color: inherit;
        opacity: 0.4;
    }

    textarea,
    select,
    .user-status-content-wrapper,
    .custom-time-input-value,
    #organization-permissions .dropdown-widget-button,
    #organization-settings .dropdown-widget-button {
        background-color: hsl(0deg 0% 0% / 20%);
        border-color: hsl(0deg 0% 0% / 60%);
    }

    .popover-filter-input-wrapper .popover-filter-input:focus {
        background-color: hsl(225deg 6% 7%);
        border: 1px solid hsl(0deg 0% 100% / 50%);
        box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
    }

    & select option {
        background-color: var(--color-background);
        color: hsl(236deg 33% 90%);
    }

    .pill-container.not-editable-by-user {
        opacity: 0.5;
    }

    #searchbox {
        /* Light theme shows hover mostly through box-shadow,
          and dark theme shows it mostly through changing color
          of the search button. */
        .navbar-search:not(.expanded)
            #searchbox-input-container:hover
            .search_icon {
            opacity: 0.75;
        }
    }

    textarea:focus,
    textarea.new_message_textarea:focus,
    #compose_recipient_box:focus {
        border-color: hsl(0deg 0% 0% / 90%);
    }

    .popover hr,
    hr {
        opacity: 0.2;
    }

    .zoom-in {
        #topics_header {
            background-color: var(--color-background);
        }
    }

    #recent_view_table {
        .zulip-icon-user {
            opacity: 0.7;
        }
    }

    #recent_view
        .change_visibility_policy
        .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
        filter: invert(1);
    }

    .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228deg 11% 17%);
    }

    .table-striped tbody tr:nth-child(even) td {
        border-color: hsl(0deg 0% 0% / 20%);
        background-color: color-mix(
            in srgb,
            hsl(0deg 0% 0%) 20%,
            var(--color-background-modal)
        );
    }

    .overlay-message-row
        .message_header_private_message
        .message_label_clickable {
        padding: 4px 6px 3px;
        color: inherit;
    }

    & time {
        background: hsl(0deg 0% 0% / 20%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
    }

    .upgrade-tip,
    .upgrade-or-sponsorship-tip,
    .tip,
    .invite-stream-notice {
        color: inherit;
    }

    #request-progress-status-banner {
        background-color: hsl(212deg 32% 14%);
    }

    .alert.home-error-bar {
        color: hsl(236deg 33% 90%);
        background-color: hsl(35deg 84% 62% / 25%);
        border: 1px solid hsl(11deg 46% 54%);
    }

    .alert.alert-success {
        color: inherit;
        background-color: hsl(161deg 60% 46% / 20%);
        border-color: hsl(165deg 68% 37%);
    }

    .alert.alert-info {
        color: hsl(205deg 58% 80%);
        background-color: hsl(204deg 100% 12%);
        border-color: hsl(205deg 58% 69% / 40%);
    }

    .alert.alert-error,
    .alert.alert-danger {
        background-color: hsl(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 75% 65%);
    }

    .alert-box .alert,
    .alert-box .stacktrace,
    .alert.alert-error {
        background-color: hsl(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 75% 65%);
    }

    .alert-box {
        .alert.alert-error::before {
            color: hsl(0deg 75% 65%);
        }
    }

    .stacktrace {
        color: hsl(314deg 22% 85%);
        background-color: hsl(318deg 12% 21%);
        border: 1px solid hsl(0deg 75% 65%);

        .expand {
            color: hsl(318deg 14% 36%);
        }

        .subtle {
            color: hsl(314deg 19% 63%);
        }

        .stacktrace-more-info {
            background-color: hsl(312deg 7% 14%);
        }

        .code-context {
            color: hsl(314deg 27% 82%);
            background-color: hsl(312deg 7% 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0deg 0% 6%),
                inset 0 -11px 10px -10px hsl(0deg 0% 6%);

            .line-number {
                color: hsl(318deg 14% 44%);
            }

            .focus-line {
                background-color: hsl(307deg 9% 19%);
            }
        }
    }

    .top-messages-logo {
        opacity: 0.7;
    }

    .history-limited-box,
    .all-messages-search-caution {
        background-color: hsl(0deg 0% 0% / 20%);
    }

    /* Search highlight used in both topics and rendered_markdown */
    .highlight {
        background-color: hsl(51deg 100% 23%);
    }

    .searching-for-more-topics img {
        filter: invert(100%);
    }

    .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0deg 0% 100%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
    }

    .collapse-settings-button:hover {
        color: hsl(200deg 79% 66%);
    }

    #request-progress-status-banner .loading-indicator,
    #loading_older_messages_indicator,
    #recent_view_loading_messages_indicator {
        & path {
            fill: hsl(0deg 0% 100%);
        }
    }

    & a:not(:active):focus,
    button:not(.action-button, .icon-button):focus-visible,
    i.fa:focus,
    i.zulip-icon:focus,
    [role="button"]:focus {
        outline-color: hsl(0deg 0% 67%);
    }

    .color_animated_button {
        .zulip-icon {
            color: hsl(0deg 0% 100%);
        }
    }

    .panel_user_list > .pill-container,
    .creator_details > .display_only_pill {
        &:hover {
            color: inherit;
        }

        > .pill {
            &:focus,
            &:hover {
                color: inherit;
            }
        }
    }

    .help_link_widget:hover {
        color: inherit;
    }
}

@media screen {
    :root.dark-theme {
        @extend %dark-theme;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root.color-scheme-automatic {
        @extend %dark-theme;
    }
}