zulip/static/styles/night_mode.scss

body.night-mode {
    background-color: hsl(212, 28%, 18%);
    color: hsl(236, 33%, 90%);

    a:hover {
        color: hsl(200, 79%, 66%);
    }

    ul.filters a:hover {
        color: inherit;
    }

    .app-main,
    .header-main,
    #tab_bar_underpadding,
    .floating_recipient .message-header-wrapper,
    .column-middle,
    #compose,
    .column-left .left-sidebar,
    .column-right .right-sidebar,
    #subscription_overlay .right,
    #settings_page .form-sidebar,
    #settings_page .right {
        background-color: hsl(212, 28%, 18%);
    }

    .message_embed .data-container::after {
        background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 100%);
    }

    .column-left .left-sidebar,
    #settings_page .form-sidebar,
    .column-right .right-sidebar {
        border-color: hsla(0, 0%, 0%, 0.2);
    }

    .dark .message_label_clickable.stream_label,
    .dark .stream_label,
    .stream_label {
        color: hsl(212, 28%, 18%);
    }

    .new-style label.checkbox input[type=checkbox] ~ span {
        border-color: hsla(0, 0%, 100%, 0.4);
    }

    .modal-bg {
        background-color: hsl(212, 28%, 18%);
    }

    .streams_popover .sp-container {
        background-color: transparent;
    }

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

    .dark_background a,
    a.dark_background:hover,
    .dark_background,
    .message_reactions .message_reaction_count,
    .message_reactions .reaction_button i,
    .message_reactions:hover .message_reaction + .reaction_button {
        color: inherit !important;
    }

    /* It's a little annoying that we need to specify the different
       background colors for these, but this alert feature can't use a
       transparent background without creating other problems */
    .alert-msg {
        background-color: hsl(212, 28%, 18%);
    }

    .private-message .alert-msg {
        background-color: hsl(208, 17%, 29%);
    }

    /* do not turn the .message_header .stream_label text dark on hover because they're
on a dark background, and don't change the dark labels dark either. */
    .message_header:not(.dark_background) a.stream_label:not(.dark_background):hover,
    #tab_list li.stream:not(.dark_background) {
        color: hsl(212, 28%, 18%) !important;
    }

    /* these are converting grey things to "new grey" */
    *[disabled=disabled],
    .sidebar-title,
    .recipient_row_date {
        color: inherit;
        opacity: 0.5;
    }

    .new-style .button {
        background-color: hsla(0, 0%, 0%, 0.2);

        &:not(.sea-green):not(.btn-danger):not(.btn-warning):not(.btn-link) {
            border-color: hsla(0, 0%, 0%, 0.6);
            color: inherit;
        }

        &.btn-link {
            border-color: hsla(0, 0%, 0%, 0.6);
            color: hsl(200, 79%, 66%);
        }

        &:hover,
        &:focus,
        &:active {
            background-color: hsla(0, 0%, 0%, 0.15);
        }
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    textarea,
    .new-style .tab-switcher .ind-tab:not(.selected),
    select,
    .pill-container {
        background-color: hsla(0, 0%, 0%, 0.2);
        border-color: hsla(0, 0%, 0%, 0.6);
        color: inherit;
    }

    select option {
        background-color: hsl(212, 28%, 18%);
        color: hsl(236, 33%, 90%);
    }

    .topic-unread-count,
    .private_message_count {
        background-color: hsla(105, 2%, 50%, 0.5);
    }

    .pill-container {
        border-style: solid;
        border-width: 1px;
    }

    #search_arrows .pill,
    .pm_recipient .pill-container .pill {
        color: inherit;
        border: 1px solid hsla(0, 0%, 0%, 0.50);
        background-color: hsla(0, 0%, 0%, 0.25);
        font-weight: 600;
    }

    #search_arrows .pill:focus,
    .pm_recipient .pill-container .pill:focus {
        color: hsl(0, 0%, 100%);
        border: 1px solid hsla(176, 78%, 28%, 0.6);
        background-color: hsla(176, 49%, 42%, 0.4);
    }

    .new-style .button.no-style {
        background-color: transparent;
    }

    .emoji-info-popover .emoji-popover .emoji-popover-category-tabs .emoji-popover-tab-item.active {
        background-color: hsla(0, 0%, 0%, 0.5);
    }

    .new-style .tab-switcher .ind-tab.selected,
    div.message_content thead,
    .table-striped thead th,
    .emoji-popover .reaction.reacted,
    .message_reactions .message_reaction.reacted {
        background-color: hsla(0, 0%, 0%, 0.5);
        border-color: hsla(0, 0%, 0%, 0.9);
    }

    .message_reactions:hover .message_reaction + .reaction_button,
    .message_reactions .message_reaction {
        background-color: transparent;
        border-color: hsla(0, 0%, 0%, 0.8);
        color: inherit;

        &:hover {
            border-color: hsl(236, 33%, 90%);
        }
    }

    .emoji-popover .reaction:focus {
        box-shadow: 0 0 1px hsl(0, 0%, 98%);
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    textarea.new_message_textarea:focus,
    .compose_table .recipient_box:focus {
        border-color: hsla(0, 0%, 0%, 0.9);
    }

    .message-header-contents,
    .message_header_private_message .message-header-contents,
    #tab_bar #tab_list li.active {
        background-color: hsla(0, 0%, 0%, 0.2);
    }

    .message-header-contents,
    .message_header_private_message .message-header-contents {
        border-color: transparent;
    }

    /* Not that .message_row (below) needs to be more contrast on dark mode */
    .compose-content,
    .message_list .recipient_row,
    .message_row,
    .draft-row .draft-info-box,
    .preview_message_area {
        border-color: hsla(0, 0%, 0%, 0.2);
    }

    #searchbox_legacy {
        border-color: hsla(0, 0%, 0%, 0.6);
    }

    .overlay,
    #subscription_overlay #stream-creation #stream_creation_form #stream_creating_indicator:not(:empty),
    .emoji-info-popover .emoji-popover .emoji-popover-emoji:not(.reacted):focus {
        background-color: hsla(212, 28%, 8%, 0.75);
    }

    .overlay .flex.overlay-content > div,
    #settings_page,
    .informational-overlays .overlay-content {
        box-shadow: 0px 0px 30px hsl(212, 32%, 7%);
    }

    .dropdown .dropdown-menu,
    .popover,
    .popover-title,
    .popover-content {
        background-color: hsl(212, 32%, 14%);
    }

    .dropdown-menu a {
        color: inherit;
    }

    .dropdown .dropdown-menu li.divider,
    .popover hr,
    hr {
        color: hsl(212, 28%, 18%);
        opacity: 0.2;
    }

    .nav .dropdown-menu::after,
    .popover.bottom .arrow {
        border-bottom-color: hsl(235, 18%, 7%);
    }

    .popover.left .arrow {
        border-left-color: hsl(235, 18%, 7%);
    }

    .popover.top .arrow {
        border-top-color: hsl(235, 18%, 7%);
    }

    .popover.right .arrow {
        border-right-color: hsl(235, 18%, 7%);
    }

    #message_edit_tooltip,
    .clear_search_button,
    .clear_search_button:focus,
    .clear_search_button:active,
    .clear_search_button[disabled]:hover,
    #user-groups .save-instructions,
    #searchbox_legacy a.search_icon,
    #searchbox_legacy .search_button,
    #searchbox a.search_icon,
    #searchbox .search_button,
    .close,
    #user_presences li:hover .user-list-arrow,
    li.top_left_all_messages:hover .all-messages-arrow,
    li.top_left_starred_messages:hover .starred-messages-sidebar-arrow,
    #stream_filters li:hover .stream-sidebar-arrow,
    li.topic-list-item:hover .topic-sidebar-arrow {
        color: hsl(236, 33%, 80%);
    }

    #message_edit_tooltip:hover,
    .clear_search_button:hover,
    #searchbox_legacy a.search_icon:hover,
    #searchbox_legacy .search_button:hover,
    #searchbox a.search_icon:hover,
    #searchbox .search_button:hover,
    .close:hover {
        color: hsl(0, 0%, 100%);
    }

    #user_presences li .user-list-arrow:hover,
    .all-messages-arrow:hover,
    .starred-messages-sidebar-arrow:hover,
    .stream-sidebar-arrow:hover,
    .topic-sidebar-arrow:hover {
        color: hsl(0, 0%, 100%) !important;
    }

    #streamlist-toggle,
    #userlist-toggle {
        border-color: hsla(199, 33%, 46%, 0.2);
    }

    #streamlist-toggle-button,
    #userlist-toggle-button {
        color: inherit;
        background-color: inherit;
    }

    li.active-filter,
    li.active-sub-filter {
        background-color: hsla(199, 33%, 46%, 0.2);
    }

    .top_left_row:hover,
    .bottom_left_row:hover,
    #stream_filters li.highlighted_stream,
    #group-pms li:hover,
    #user_presences li:hover,
    #user_presences li.highlighted_user {
        background-color: hsla(136, 25%, 73%, 0.2);
    }

    #stream_filters li.active-sub-filter:hover {
        background-color: hsla(136, 25%, 73%, 0.5);
    }

    .floating_recipient .recipient_row {
        border-top: none;
    }

    .stream-row.active,
    .emoji-info-popover .emoji-showcase-container,
    .emoji-info-popover .emoji-popover .emoji-popover-category-tabs,
    .emoji-info-popover .emoji-popover .emoji-popover-top {
        background-color: hsla(0, 0%, 0%, 0.2);
    }

    thead,
    #searchbox,
    #searchbox_legacy,
    .drafts-header,
    .nav > li > a:hover,
    .subscriptions-container .subscriptions-header,
    .grey-box,
    .white-box,
    .stream-email,
    #settings_page .settings-header,
    #settings_page .form-sidebar .title,
    #settings_page .sidebar li.active,
    #settings_page .sidebar .tab-container,
    .table-striped tbody tr:nth-child(even) td,
    .table-striped tbody tr:nth-child(odd) th,
    .modal-footer,
    .modal-bg .modal-header {
        border-color: hsla(0, 0%, 0%, 0.2);
        background-color: hsla(0, 0%, 0%, 0.2);
    }

    .table-striped tbody tr:nth-child(odd) td {
        background-color: hsl(212, 28%, 18%);
    }

    .modal-footer {
        -webkit-box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
        box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
    }

    #invite_user_form .modal-footer {
        // no transperancy prevents overlap issues
        background-color: hsl(211, 28%, 14%);
    }

    .subscriptions-container .right .display-type,
    .stream-row,
    .subscriptions-container .left .search-container,
    .subscriptions-container .left,
    .subscriber-list-box,
    .subscriber-list-box .subscriber_list_container .subscriber-list tr,
    #subscription_overlay ul.grey-box li,
    #stream_privacy_modal ul.grey-box li,
    #settings_page .sidebar,
    #settings_page .sidebar *,
    table,
    table th,
    table td {
        border-color: hsla(0, 0%, 0%, 0.2);
    }

    .draft-row .draft-info-box,
    .message_header_private_message .message-header-contents {
        box-shadow: none;
    }

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

    .nav-list > li > a,
    .nav-list .nav-header {
        text-shadow: none;
    }

    .mention .messagebox {
        background-color: hsla(8, 78%, 43%, 0.15);
    }

    .rendered_markdown .user-mention,
    .rendered_markdown .user-group-mention {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 0%, 0.1)), color-stop(100%, hsla(0, 0%, 0%, 0.0)));
        background: -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
        background: -o-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
        background: -ms-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
        background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
        box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4);
    }

    .rendered_markdown .user-mention-me :not(.silent) {
        background-color: hsla(355, 37%, 31%, 1);
        box-shadow: 0px 0px 0px 1px hsla(330, 40%, 20%, 1);
    }

    .tip {
        color: inherit;
        background-color: hsla(46, 28%, 38%, 0.27);
        border: 1px solid hsl(49, 38%, 46%);
    }

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

    .alert {
        text-shadow: none;
    }

    .alert.alert-success {
        color: inherit;
        background-color: hsla(161, 60%, 46%, 0.20);
        border-color: hsl(165, 68%, 37%);
    }

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

    .alert .close {
        color: inherit;
    }

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

    .alert-box .alert.alert-error::before {
        color: 1px solid hsl(0, 75%, 65%);
    }

    /* Popover: */
    .hotspot.overlay .hotspot-popover,
    #hotspot_intro_reply_icon {
        border-color: hsla(0, 0%, 0%, 0.2) !important;
        /* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
    color. */
        box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.4);
    }

    /* Arrows: */
    .hotspot.overlay .hotspot-popover.arrow-right::before {
        border-left-color: hsla(0, 0%, 0%, 0.2);
    }

    .hotspot.overlay .hotspot-popover.arrow-right::after {
        border-left-color: hsl(212, 28%, 18%);
    }

    .hotspot.overlay .hotspot-popover.arrow-bottom::before {
        border-top-color: hsla(0, 0%, 0%, 0.2);
    }

    .hotspot.overlay .hotspot-popover.arrow-bottom::after {
        border-top-color: hsl(212, 28%, 18%);
    }

    .hotspot.overlay .hotspot-popover.arrow-left::before {
        border-right-color: hsla(0, 0%, 0%, 0.2);
    }

    .hotspot.overlay .hotspot-popover.arrow-left::after {
        border-right-color: hsl(212, 28%, 18%);
    }

    .hotspot.overlay .hotspot-popover.arrow-top::before {
        border-bottom-color: hsla(0, 0%, 0%, 0.2);
    }

    .hotspot.overlay .hotspot-popover.arrow-top::after {
        border-bottom-color: hsl(212, 28%, 18%);
    }

    /* Content: */
    .hotspot.overlay .hotspot-popover .hotspot-popover-content,
    #hotspot_intro_reply_icon,
    .hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
        background-color: hsl(212, 28%, 18%);
    }

    .top-messages-logo svg path {
        fill: hsl(214, 27%, 18%);
        stroke: hsl(214, 27%, 18%);
    }

    .top-messages-logo svg circle {
        fill: hsl(0, 0%, 100%);
        stroke: hsl(0, 0%, 100%);
    }

    .history-limited-box {
        background-color: hsla(0, 0%, 0%, 0.2);
    }

    #feedback_container,
    .rendered_markdown code,
    .typeahead.dropdown-menu {
        background-color: hsl(212, 25%, 15%);
        border-color: hsla(0, 0%, 0%, 0.5);
        color: inherit;
    }

    .highlight {
        background-color: hsla(51, 100%, 64%, 0.42);
    }

    .highlight_text_inserted {
        color: hsl(122, 100%, 81%);
        background-color: hsla(120, 64%, 95%, 0.3);
    }

    .highlight_text_deleted {
        text-decoration: line-through;
        background-color: hsla(7, 54%, 62%, 0.38);
    }

    .sub-unsub-message span::before,
    .sub-unsub-message span::after,
    .date_row span::before,
    .date_row span::after {
        opacity: 0.2;
    }

    .star:not(.empty-star),
    .empty-star:hover {
        color: hsla(126, 66%, 72%, 0.75);
    }

    #out-of-view-notification {
        border: 1px solid 1px solid hsl(144, 45%, 62%);
    }

    .email_tooltip {
        background-color: hsl(211, 16%, 30%);
    }

    .email_tooltip::after {
        border-bottom-color: hsl(211, 16%, 30%) !important;
    }

    #bots_lists_navbar .active a {
        color: hsl(0, 0%, 87%);
        background-color: hsl(212, 28%, 18%);
        border-color: hsl(0, 0%, 87%);
        border-bottom-color: transparent;
    }

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

    .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.33);
    }

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

    #loading_more_messages_indicator path {
        fill: hsl(0, 0%, 100%);
    }

    .small_square_button {
        &.small_square_check {
            background-color: hsl(166, 35%, 52%);
            color: hsl(0, 0%, 90%);

            &:hover {
                background-color: hsl(156, 30%, 45%);
                color: hsl(0, 0%, 95%);
            }
        }

        &.small_square_x {
            background-color: hsl(0, 0%, 95%);
            color: hsl(0, 0%, 42%);

            &:hover {
                color: hsl(0, 0%, 18%);
            }
        }
    }
}

@-moz-document url-prefix() {
    body.night-mode #settings_page select {
        background-color: hsla(0, 0%, 0%, 0.2);
    }
}