zulip/web/styles/dark_theme.css

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

%dark-theme {
    color-scheme: dark;

    .placeholder {
        color: hsl(0deg 0% 55%);
        opacity: 1;
    }

    & textarea::placeholder,
    input::placeholder {
        @extend .placeholder;
    }

    & a:hover {
        color: hsl(200deg 79% 66%);

        & code {
            color: hsl(200deg 79% 66%);
        }
    }

    & ul.pm-list,
    & ul.filters {
        color: hsl(0deg 0% 100% / 80%);

        & a:hover {
            color: inherit;
        }

        .has-unmuted-mentions .unread_mention_info {
            color: hsl(236deg 33% 90%);
        }

        & li.muted_topic,
        li.out_of_home_view {
            color: hsl(236deg 33% 90%/50%);
        }

        & li.unmuted_topic {
            color: hsl(236deg 33% 90%);
        }

        & li.out_of_home_view {
            &:hover {
                color: hsl(236deg 33% 90%/ 75%);
            }
        }
    }

    /************************* MODAL DARK THEME *******************/
    .dialog_cancel_button {
        background-color: hsl(211deg 29% 14%);
        color: hsl(0deg 0% 100%);
        border: 1px solid hsl(0deg 0% 0% / 60%);
    }

    .modal__content.simplebar-scrollable-y + .modal__footer {
        border-top: 1px solid hsl(0deg 0% 100% / 20%);
    }

    .modal__close {
        &::before {
            color: hsl(236deg 33% 90%);
        }

        &:hover {
            background: hsl(0deg 0% 91% / 10%);
        }
    }

    .modal-footer {
        box-shadow: inset 0 1px 0 hsl(0deg 0% 0% / 20%);
    }

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

        & kbd {
            background-color: hsl(211deg 29% 14%);
            border-color: hsl(211deg 29% 14%);
            box-shadow: inset 0 -1px 0 hsl(210deg 5% 34% / 20%);
            text-shadow: none;
            color: hsl(236deg 33% 90%);
        }

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

    .modal__btn:disabled,
    .disabled-compose-send-button-container button {
        opacity: 1;
        background-color: hsl(0deg 0% 83% / 50%);
    }

    & table.table-striped thead.table-sticky-headers th {
        background-color: hsl(0deg 0% 0%);

        &[data-sort]:hover {
            background-color: hsl(211deg 29% 14%) !important;
        }
    }

    /* Extend the 'light-border' TippyJS theme, which is intended for
       popovers/menus that should use default background colors, to use
       our dark theme colors in Zulip's dark theme.
     */
    .tippy-box[data-theme~="light-border"] {
        .tippy-content a,
        p {
            color: hsl(236deg 33% 90%);

            &.compose_control_button:hover {
                color: hsl(200deg 79% 66%);
            }
        }

        &[data-placement^="top"] {
            > .tippy-arrow {
                &::before {
                    border-top-color: hsl(235deg 18% 7%);
                }
            }
        }

        &[data-placement^="bottom"] {
            > .tippy-arrow {
                &::before {
                    border-bottom-color: hsl(235deg 18% 7%);
                }
            }
        }

        &[data-placement^="left"] {
            > .tippy-arrow {
                &::before {
                    border-left-color: hsl(235deg 18% 7%);
                }
            }
        }

        &[data-placement^="right"] {
            > .tippy-arrow {
                &::before {
                    border-right-color: hsl(235deg 18% 7%);
                }
            }
        }
    }

    .tippy-box:not([data-theme]) {
        background: hsl(0deg 0% 0%);

        &[data-placement^="top"] > .tippy-arrow::before {
            border-top-color: hsl(0deg 0% 0%);
        }

        &[data-placement^="bottom"] > .tippy-arrow::before {
            border-bottom-color: hsl(0deg 0% 0%);
        }

        &[data-placement^="left"] > .tippy-arrow::before {
            border-left-color: hsl(0deg 0% 0%);
        }

        &[data-placement^="right"] > .tippy-arrow::before {
            border-right-color: hsl(0deg 0% 0%);
        }
    }

    .tippy-box[data-theme="dropdown-widget"] {
        background-color: hsl(240deg 5% 16%);
        border: 1px solid hsl(0deg 0% 0%);
        box-shadow: 0 7px 13px hsl(0deg 0% 0% / 35%),
            0 5px 8px hsl(0deg 0% 0% / 32%), 0 2px 4px hsl(0deg 0% 0% / 20%);
    }

    .dropdown-list-container .dropdown-list .list-item {
        &:focus {
            background-color: hsl(220deg 12% 95.1% / 5%);
        }

        & > a {
            color: hsl(0deg 0% 75%);

            &:hover {
                background-color: hsl(220deg 12% 95.1% / 5%);
            }
        }
    }

    #navbar-middle .column-middle-inner,
    #userlist-toggle-button,
    .top_navbar_full_width,
    #message_view_header {
        background-color: hsl(0deg 0% 13%);
    }

    & body,
    .app-main,
    .column-middle,
    #streams_header,
    .private_messages_container,
    .header {
        background-color: var(--color-background);
    }

    #scroll-to-bottom-button-container {
        background: transparent;

        & span {
            color: hsl(0deg 0% 27%);
        }
    }

    .compose_banner {
        .above_compose_banner_action_link {
            color: hsl(200deg 100% 50%);
        }

        &.success {
            background-color: hsl(147deg 100% 8%);
            border-color: hsl(149deg 48% 52% / 40%);
            color: hsl(147deg 51% 80%);

            .compose_banner_close_button {
                color: hsl(147deg 51% 55% / 50%);

                &:hover {
                    color: hsl(147deg 51% 55%);
                }

                &:active {
                    color: hsl(147deg 51% 55% / 75%);
                }
            }

            .compose_banner_action_button {
                background-color: hsl(147deg 51% 55% / 10%);
                color: inherit;

                &:hover {
                    background-color: hsl(147deg 51% 55% / 15%);
                }

                &:active {
                    background-color: hsl(147deg 51% 55% / 20%);
                }
            }
        }

        &.warning,
        &.warning-style {
            background-color: hsl(53deg 100% 11%);
            border-color: hsl(38deg 44% 60% / 40%);
            color: hsl(50deg 45% 80%);

            .compose_banner_close_button {
                color: hsl(50deg 45% 61% / 50%);

                &:hover {
                    color: hsl(50deg 45% 61%);
                }

                &:active {
                    color: hsl(50deg 45% 61% / 75%);
                }
            }

            .compose_banner_action_button {
                background-color: hsl(50deg 45% 61% / 10%);
                color: hsl(50deg 45% 61%);

                &:hover {
                    background-color: hsl(50deg 45% 61% / 15%);
                }

                &:active {
                    background-color: hsl(50deg 45% 61% / 20%);
                }
            }
        }

        &.error {
            background-color: hsl(0deg 60% 19%);
            border-color: hsl(3deg 73% 74% / 40%);
            color: hsl(3deg 73% 80%);

            .compose_banner_close_button {
                color: hsl(3deg 73% 74% / 50%);

                &:hover {
                    color: hsl(3deg 73% 74%);
                }

                &:active {
                    color: hsl(3deg 73% 74% / 75%);
                }
            }

            .compose_banner_action_button {
                background-color: hsl(3deg 73% 74% / 10%);
                color: hsl(3deg 73% 74%);

                &:hover {
                    background: hsl(3deg 73% 74% / 15%);
                }

                &:active {
                    background: hsl(3deg 73% 74% / 20%);
                }
            }
        }

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

            .compose_banner_close_button {
                color: hsl(205deg 58% 69% / 50%);

                &:hover {
                    color: hsl(205deg 58% 69%);
                }

                &:active {
                    color: hsl(205deg 58% 69% / 75%);
                }
            }
        }
    }

    .upload_banner {
        .moving_bar {
            background: hsl(204deg 63% 18%);
        }
    }

    & textarea.new_message_textarea {
        &.invalid,
        &.invalid:focus {
            border-color: hsl(3deg 73% 74%);
            box-shadow: 0 0 2px hsl(3deg 73% 74%);
        }
    }

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

    .column-left .left-sidebar,
    .stream_name_search_section,
    .group_name_search_section,
    .column-right .right-sidebar {
        border-color: hsl(0deg 0% 0% / 20%);
    }

    .new-style label.checkbox input[type="checkbox"] ~ span {
        border-color: hsl(0deg 0% 100% / 40%);
    }

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

        & button {
            background-color: hsl(208deg 35% 11%);
            border: 1px solid hsl(210deg 36% 4%);
            color: hsl(236deg 31% 90%);
        }

        .sp-picker-container {
            border-left: solid 1px hsl(210deg 36% 4%);
        }
    }

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

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

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

    .active_private_messages_section {
        #private_messages_section,
        #private_messages_list,
        #hide_more_private_messages {
            background-color: hsl(199deg 33% 46% / 20%);
        }
    }

    /* these are converting grey things to "new grey" */
    :disabled,
    input:not([type="radio"]):read-only,
    textarea:read-only {
        color: inherit;
        opacity: 0.5;
    }

    .sidebar-title {
        color: inherit;
        opacity: 0.75;
    }

    .rendered_markdown button,
    .new-style .button {
        background-color: hsl(0deg 0% 0% / 20%);

        &:not(
                .sea-green,
                .btn-danger,
                .btn-warning,
                .btn-link,
                .poll-vote,
                button.poll-option,
                button.add-task
            ) {
            border-color: hsl(0deg 0% 0% / 60%);
            color: inherit;
        }

        &.btn-link {
            border-color: hsl(0deg 0% 0% / 60%);
            color: hsl(200deg 79% 66%);
        }

        &:hover,
        &:focus,
        &:active {
            background-color: hsl(0deg 0% 0% / 15%);
        }
    }

    .rendered_markdown .message_inline_image {
        background: hsl(0deg 0% 100% / 3%);

        &:hover {
            background: hsl(0deg 0% 100% / 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,
    .user-status-content-wrapper {
        background-color: hsl(0deg 0% 0% / 20%);
        border-color: hsl(0deg 0% 0% / 60%);
        color: inherit;
    }

    .dropdown-list-search .dropdown-list-search-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%);
    }

    .dropdown-widget-button {
        border-color: hsl(0deg 0% 0% / 60%);
        background-color: hsl(0deg 0% 0% / 20%);
    }

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

    .unread_count,
    /* The actions_popover unread_count object has its own variable CSS,
       and thus needs to be repeated here with all three classes for precedence) */
    .actions_popover .mark_as_unread .unread_count {
        background-color: hsl(105deg 2% 50% / 50%);
    }

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

    .deactivated-pill {
        background-color: hsl(0deg 86% 14%) !important;
    }

    #compose-direct-recipient.pill-container {
        background-color: hsl(0deg 0% 0% / 20%);
    }

    #search_arrows .pill,
    #compose-direct-recipient.pill-container .pill {
        color: inherit;
        border: 1px solid hsl(0deg 0% 0% / 50%);
        background-color: hsl(0deg 0% 0% / 25%);
        font-weight: 600;
    }

    #search_arrows .pill:focus,
    #compose-direct-recipient.pill-container .pill:focus {
        color: hsl(0deg 0% 100%);
        border: 1px solid hsl(176deg 78% 28% / 60%);
        background-color: hsl(176deg 49% 42% / 40%);
    }

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

    .create_user_group_plus_button,
    .create_stream_plus_button {
        color: hsl(0deg 0% 100%);
        background-color: hsl(0deg 0% 0% / 20%);
        border-color: hsl(0deg 0% 0% / 60%);
    }

    .emoji-info-popover
        .emoji-popover
        .emoji-popover-category-tabs
        .emoji-popover-tab-item.active {
        background-color: hsl(0deg 0% 0% / 50%);
    }

    .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: hsl(0deg 0% 0% / 50%);
        border-color: hsl(0deg 0% 0% / 90%);
    }

    .ind-tab.disabled {
        color: hsl(0deg 0% 42% / 90%) !important;
    }

    .message_reactions:hover .message_reaction + .reaction_button,
    .message_reactions .message_reaction {
        background-color: transparent;
        border-color: hsl(0deg 0% 0% / 80%);
        color: inherit;

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

    .emoji-popover .reaction:focus {
        box-shadow: 0 0 1px hsl(0deg 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: hsl(0deg 0% 0% / 90%);
    }

    .compose_control_buttons_container .divider {
        color: hsl(236deg 33% 90% / 50%);
    }

    #compose-content {
        background-color: hsl(228deg 11% 17%);
        border-color: hsl(0deg 0% 0% / 60%);
    }

    .compose_table .stream-selection-header-colorblock {
        border-color: hsl(240deg 11% 5%);
    }

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

    .preview_message_area {
        background-color: inherit;
    }

    .spectator_narrow_login_button,
    .top-navbar-border {
        border-color: hsl(0deg 0% 0% / 60%);
    }

    #message_view_header .sub_count {
        &::before,
        &::after {
            color: hsl(0deg 0% 100% / 50%);
        }
    }

    & div.overlay,
    #subscription_overlay
        #stream-creation
        #stream_creation_form
        #stream_creating_indicator:not(:empty),
    #groups_overlay
        #user-group-creation
        #user_group_creation_form
        #user_group_creating_indicator:not(:empty),
    .emoji-info-popover
        .emoji-popover
        .emoji-popover-emoji:not(.reacted):focus {
        background-color: hsl(212deg 28% 8% / 75%);
    }

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

    #draft_overlay,
    #scheduled_messages_overlay_container {
        .flex.overlay-content > div {
            box-shadow: 0 0 30px hsl(213deg 31% 0%);
            background-color: var(--color-background);
        }
    }

    .tippy-box[data-theme~="light-border"],
    .dropdown-menu ul,
    .dropdown .dropdown-menu,
    .popover,
    .popover-title,
    .popover-content {
        background-color: hsl(212deg 32% 14%);
    }

    .dropdown-menu a {
        color: inherit;
    }

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

    #gear_menu_about_zulip {
        .white_zulip_icon_without_text {
            filter: invert(10%) sepia(16%) saturate(175%) hue-rotate(194deg)
                brightness(99%) contrast(89%);
        }
    }

    #gear-menu {
        .dark-theme {
            display: none;
        }

        .light-theme {
            display: block;
        }

        .dropdown-menu a:hover {
            color: hsl(0deg 0% 100%);
        }
    }

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

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

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

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

    .narrow_to_compose_recipients,
    .expand_composebox_button,
    .collapse_composebox_button,
    #message_edit_tooltip,
    .clear_search_button,
    .clear_search_button:focus,
    .clear_search_button:active,
    .clear_search_button:disabled:hover,
    #user-groups .save-instructions,
    .close,
    #user_presences li:hover .user-list-sidebar-menu-icon,
    li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
    li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
    li.top_left_drafts:hover .drafts-sidebar-menu-icon,
    #stream_filters li:hover .stream-sidebar-menu-icon,
    li.topic-list-item:hover .topic-sidebar-menu-icon {
        color: hsl(236deg 33% 80%);
    }

    #message_edit_tooltip:hover,
    .clear_search_button:hover {
        color: hsl(0deg 0% 100%);
    }

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

        &:hover {
            color: hsl(0deg 0% 100%);
        }
    }

    .spectator_narrow_login_button .login_button i {
        color: hsl(236deg 33% 90%);
    }

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

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

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

    #userlist-toggle-button {
        color: hsl(221deg 9% 54%);

        &:hover {
            color: inherit;
        }
    }

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

    #topics_header {
        .show-all-streams {
            color: hsl(236deg 33% 90%);
            opacity: 0.75;
        }
    }

    #user_presences li:hover,
    #user_presences li.highlighted_user {
        background-color: hsl(136deg 25% 73% / 20%);
    }

    .group-row.active,
    .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: hsl(0deg 0% 0% / 20%);
    }

    .recent_topics_participant_overflow {
        color: hsl(0deg 0% 100%) !important;
        background-color: hsl(211deg 18% 25%) !important;
    }

    .recent_topics_container #recent_topics_table .btn-recent-filters {
        background-color: hsl(211deg 29% 14%);
        border-color: hsl(0deg 0% 0%);
        color: hsl(0deg 0% 100%);

        &:focus {
            background-color: hsl(0deg 0% 0% / 50%) !important;
            outline: 0;
        }

        &.fake_disabled_button {
            cursor: not-allowed;
            opacity: 0.5;

            &:hover {
                background-color: hsl(0deg 0% 0% / 50%);
                border-color: hsl(0deg 0% 0%);
            }
        }
    }

    #recent_topics_table tr {
        background-color: var(--color-background);

        &:hover {
            background-color: hsl(208deg 26% 11% / 60%);
        }
    }

    #recent_topics_table .unread_topic {
        background-color: hsl(212deg 30% 22% / 40%);

        &:hover {
            background-color: hsl(212deg 30% 22% / 60%);
        }
    }

    .btn-recent-selected,
    #recent_topics_table thead th {
        background-color: hsl(228deg 11% 17%) !important;

        &[data-sort]:hover {
            background-color: hsl(211deg 29% 14%) !important;
        }
    }

    #recent_topics_table td a {
        color: hsl(206deg 89% 74%);
        text-decoration: none;

        &:hover {
            color: hsl(208deg 64% 52%);
        }
    }

    #recent_topics_table {
        border-color: hsl(0deg 0% 0% / 60%);

        .fa-envelope,
        .fa-group {
            opacity: 0.7;
        }
    }

    & thead,
    .drafts-container .drafts-header,
    .nav > li > a:focus,
    .nav > li > a:hover,
    .subscriptions-container .subscriptions-header,
    .user-groups-container .user-groups-header,
    .overlay-messages-header,
    .grey-box,
    .white-box,
    .stream-email,
    #settings_page .settings-header,
    #settings_page .sidebar li.active,
    #settings_page .sidebar-wrapper .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: hsl(0deg 0% 0% / 20%);
        background-color: hsl(0deg 0% 0% / 20%);
    }

    .table-striped tbody tr:nth-child(odd) td {
        background-color: var(--color-background-modal);
    }

    .user-groups-container .right .display-type,
    .subscriptions-container .right .display-type,
    .stream-row,
    .group-row,
    .subscriptions-container .left .search-container,
    .subscriptions-container .left,
    .user-groups-container .left,
    .subscriber-list-box,
    .subscriber-list-box .subscriber_list_container .subscriber-list tr,
    .member-list-box,
    .member-list-box .member_list_container .member-list tr,
    #subscription_overlay .subsection-parent div,
    #subscription_overlay .settings-radio-input-parent,
    #settings_page .sidebar-wrapper,
    #settings_page .sidebar-wrapper *,
    table,
    table th,
    table td {
        border-color: hsl(0deg 0% 0% / 20%);
    }

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

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

    /* There is no lefthand border to cover in
      dark mode, so don't apply negative margin
      that would otherwise pull the unread marker
      to the left. */
    .unread_marker {
        margin-left: 0;
    }

    .selected_message .messagebox-content {
        border-color: hsl(217deg 64% 59% / 70%);
    }

    .rendered_markdown {
        .alert-word {
            background-color: hsl(22deg 70% 35%);
        }

        .codehilite code,
        .codehilite pre {
            color: hsl(212deg 98% 82%);
            background-color: hsl(212deg 0% 11%);
        }

        .codehilite pre {
            border: 1px solid hsl(0deg 0% 0% / 50%);
        }

        .codehilite .hll {
            background-color: hsl(0deg 0% 13%);
        }

        .codehilite .err {
            color: hsl(1deg 67% 66%);
            background-color: hsl(0deg 7% 22%);
        }

        .codehilite .k {
            color: hsl(31deg 85% 59%);
        }

        .codehilite .p {
            color: hsl(179deg 27% 35%);
        }

        .codehilite .cs {
            color: hsl(0deg 100% 40%);
            font-weight: 700;
        }

        .codehilite .gd {
            color: hsl(0deg 100% 40%);
        }

        .codehilite .ge {
            color: hsl(0deg 0% 80%);
            font-style: italic;
        }

        .codehilite .gr {
            color: hsl(0deg 100% 50%);
        }

        .codehilite .go {
            color: hsl(0deg 0% 50%);
        }

        .codehilite .gs {
            color: hsl(0deg 0% 80%);
            font-weight: 700;
        }

        .codehilite .gu {
            color: hsl(300deg 100% 25%);
            font-weight: 700;
        }

        .codehilite .gt {
            color: hsl(222deg 100% 41%);
        }

        .codehilite .kc {
            color: hsl(0deg 45% 75%);
        }

        .codehilite .kd {
            color: hsl(60deg 100% 76%);
        }

        .codehilite .kn {
            color: hsl(24deg 56% 72%);
            font-weight: 700;
        }

        .codehilite .kp {
            color: hsl(62deg 36% 71%);
        }

        .codehilite .kr {
            color: hsl(359deg 58% 56%);
        }

        .codehilite .ni {
            color: hsl(359deg 35% 63%);
        }

        .codehilite .ne {
            color: hsl(53deg 23% 69%);
            font-weight: 700;
        }

        .codehilite .nn {
            color: hsl(204deg 54% 72%);
        }

        .codehilite .vi {
            color: hsl(60deg 100% 89%);
        }

        .codehilite .c,
        .codehilite .g,
        .codehilite .cm,
        .codehilite .cp,
        .codehilite .c1 {
            color: hsl(209deg 15% 55%);
        }

        .codehilite .l,
        .codehilite .x,
        .codehilite .no,
        .codehilite .nd,
        .codehilite .nl,
        .codehilite .nx,
        .codehilite .py,
        .codehilite .w {
            color: hsl(0deg 0% 80%);
        }

        .codehilite .n,
        .codehilite .nv,
        .codehilite .vg {
            color: hsl(60deg 19% 83%);
        }

        .codehilite .o,
        .codehilite .ow {
            color: hsl(58deg 52% 88%);
        }

        .codehilite .gh,
        .codehilite .gp {
            color: hsl(60deg 19% 83%);
            font-weight: 700;
        }

        .codehilite .gi,
        .codehilite .kt {
            color: hsl(120deg 100% 40%);
        }

        .codehilite .ld,
        .codehilite .s,
        .codehilite .sb,
        .codehilite .sc,
        .codehilite .sd,
        .codehilite .s2,
        .codehilite .se,
        .codehilite .sh,
        .codehilite .si,
        .codehilite .sx,
        .codehilite .sr,
        .codehilite .s1,
        .codehilite .ss {
            color: hsl(0deg 36% 69%);
        }

        .codehilite .m,
        .codehilite .mf,
        .codehilite .mh,
        .codehilite .mi,
        .codehilite .mo,
        .codehilite .il {
            color: hsl(183deg 45% 69%);
        }

        .codehilite .na,
        .codehilite .nt {
            color: hsl(127deg 25% 68%);
        }

        .codehilite .nb,
        .codehilite .nc,
        .codehilite .nf,
        .codehilite .bp,
        .codehilite .vc {
            color: hsl(60deg 75% 75%);
        }
    }

    #message-edit-history {
        .message_edit_history_content {
            .highlight_text_inserted {
                color: hsl(122deg 100% 81%);
                background-color: hsl(120deg 64% 95% / 30%);
            }

            .highlight_text_deleted {
                color: hsl(0deg 90% 67%);
                background-color: hsl(7deg 54% 62% / 38%);
            }
        }
    }

    & 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 {
        color: inherit;
        background-color: hsl(46deg 28% 38% / 27%);
        border: 1px solid hsl(49deg 38% 46%);
    }

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

        .alert-content {
            color: hsl(236deg 33% 90%);
        }
    }

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

    .alert {
        text-shadow: none;

        .close {
            color: inherit;
            opacity: 0.8;
        }

        .close:hover {
            opacity: 1;
        }
    }

    .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%);

            .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%);
                }
            }
        }
    }

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

    #invite-user-modal {
        #clipboard_image {
            & path {
                fill: hsl(236deg 33% 90%);
            }
        }
    }

    #user-profile-modal {
        #default-section {
            .default-field {
                .name {
                    color: hsl(236deg 33% 90%);
                }
            }
        }

        #content {
            .field-section {
                .name {
                    color: hsl(236deg 33% 90%);
                }
            }
        }

        .subscription-group-list,
        .subscription-stream-list,
        .subscription-stream-list .user-stream-list tr,
        .subscription-group-list .user-group-list tr {
            border-color: hsl(0deg 0% 0% / 40%);
        }
    }

    /* Arrows: */
    .hotspot.overlay {
        .hotspot-popover.arrow-right::before {
            border-left-color: hsl(0deg 0% 0% / 20%);
        }

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

        .hotspot-popover.arrow-bottom::before {
            border-top-color: hsl(0deg 0% 0% / 20%);
        }

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

        .hotspot-popover.arrow-left::before {
            border-right-color: hsl(0deg 0% 0% / 20%);
        }

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

        .hotspot-popover.arrow-top::before {
            border-bottom-color: hsl(0deg 0% 0% / 20%);
        }

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

    /* Content: */
    .hotspot.overlay .hotspot-popover .hotspot-popover-content,
    .hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
        background-color: var(--color-background);
    }

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

    .scheduled-messages-loading-logo,
    .alert-zulip-logo,
    .top-messages-logo,
    .bottom-messages-logo {
        & svg path {
            fill: hsl(214deg 27% 18%);
            stroke: hsl(214deg 27% 18%);
        }

        & svg circle {
            fill: hsl(0deg 0% 100%);
            stroke: hsl(0deg 0% 100%);
        }
    }

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

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

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

    .streams_subheader {
        color: hsl(240deg 11% 85%);

        & span::before,
        span::after {
            border-color: hsl(240deg 11% 85%);
        }
    }

    .sub-unsub-message span::before,
    .sub-unsub-message span::after,
    .date_row span::before,
    .date_row span::after {
        opacity: 0.15;
        border-bottom: 1px solid hsl(0deg 0% 100%);
    }

    .star:not(.empty-star),
    .empty-star:hover {
        color: hsl(126deg 66% 72% / 75%);
    }

    #bots_lists_navbar .active a {
        color: hsl(0deg 0% 87%);
        background-color: var(--color-background);
        border-color: hsl(0deg 0% 87%);
        border-bottom-color: transparent;
    }

    .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-btn:hover {
        color: hsl(200deg 79% 66%);
    }

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

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

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

    & a:not(:active):focus,
    button:focus,
    .new-style label.checkbox input[type="checkbox"]:focus ~ span,
    i.fa:focus,
    i.zulip-icon:focus,
    .auto-select:focus,
    [role="button"]:focus {
        outline-color: hsl(0deg 0% 67%);
    }

    .animated-purple-button:focus {
        box-shadow: 0 1px 4px 0 hsl(0deg 0% 100% / 66.6%);
    }

    .color_animated_button {
        background-color: hsl(211deg 29% 14%);

        * {
            color: hsl(0deg 0% 100%);
        }

        &:hover {
            background-color: hsl(240deg 96% 68%);
        }
    }

    /* Widgets: Poll */
    .poll-widget {
        .poll-vote {
            color: hsl(185deg 35% 65%);
            border-color: hsl(185deg 35% 35%);

            &:hover {
                color: hsl(185deg 50% 70%);
                border-color: hsl(185deg 40% 40%);
                background-color: hsl(185deg 20% 20%);
            }

            &:focus {
                color: hsl(185deg 50% 65%);
                border-color: hsl(185deg 40% 50%);
                background-color: hsl(185deg 40% 35%);
            }
        }

        .poll-names {
            color: hsl(236deg 15% 70%);
        }
    }

    /* Widgets: Todo */
    .todo-widget {
        & label.checkbox {
            & input[type="checkbox"] {
                ~ span {
                    border-color: hsl(185deg 40% 45%);
                    opacity: 0.7;
                }

                &:hover ~ span {
                    background-color: hsl(185deg 20% 20%);
                    border-color: hsl(185deg 40% 35%);
                }

                &:checked ~ span {
                    background-color: hsl(185deg 40% 45%);
                }

                &:focus ~ span {
                    outline-color: hsl(0deg 0% 100% / 0%);
                }
            }
        }
    }

    /* Originally the icon inherits the color of label, but when the setting
    is disabled, the color of the label is changed and thus the icon becomes
    too light. So, we set the color explicitly to original color of label to
    keep the color of the icon same even when the setting is disabled. */
    #id_realm_enable_spectator_access_label a {
        color: hsl(236deg 33% 90%);
    }

    #stream-specific-notify-table .unmute_stream {
        &:hover {
            color: hsl(0deg 0% 100%);
        }
    }

    #read_receipts_modal #read_receipts_list li {
        &:hover {
            background-color: hsl(0deg 0% 100% / 5%);
        }

        &:active,
        &:focus {
            background-color: hsl(0deg 0% 100% / 10%);
        }
    }

    #settings_page,
    #stream_settings {
        .save-button-controls .discard-button {
            color: hsl(0deg 0% 80%);

            &:hover {
                .save-discard-widget-button-text {
                    color: hsl(0deg 0% 100%);
                }
            }
        }
    }

    #mark_as_read_turned_off_banner {
        &.warning {
            background-color: hsl(53deg 100% 11%);
            border-color: hsl(38deg 44% 60% / 40%);
            color: hsl(50deg 45% 80%);

            #mark_as_read_close {
                color: hsl(50deg 45% 61% / 50%);

                &:hover {
                    color: hsl(50deg 45% 61%);
                }

                &:active {
                    color: hsl(50deg 45% 61% / 75%);
                }
            }

            .banner-action-button {
                background-color: hsl(50deg 45% 61% / 10%);
                color: hsl(50deg 45% 61%);

                &:hover {
                    background-color: hsl(50deg 45% 61% / 15%);
                }

                &:active {
                    background-color: hsl(50deg 45% 61% / 20%);
                }
            }
        }

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

            #mark_as_read_close {
                color: hsl(205deg 58% 69% / 50%);

                &:hover {
                    color: hsl(205deg 58% 69%);
                }

                &:active {
                    color: hsl(205deg 58% 69% / 75%);
                }
            }

            .banner-action-button {
                background-color: hsl(205deg 58% 69% / 10%);
                color: hsl(205deg 58% 69%);

                &:hover {
                    background-color: hsl(205deg 58% 69% / 15%);
                }

                &:active {
                    background-color: hsl(205deg 58% 69% / 20%);
                }
            }
        }
    }
}

@supports (-moz-appearance: none) {
    %dark-theme #settings_page select {
        background-color: hsl(0deg 0% 0% / 20%);
    }
}

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

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