Skip to content

Instantly share code, notes, and snippets.

@sdarwin

sdarwin/rc-slack.css

Created November 1, 2023 16:32
Show Gist options
  • Save sdarwin/08ecbfb17f8dbeaed60917db791d22d7 to your computer and use it in GitHub Desktop.
Save sdarwin/08ecbfb17f8dbeaed60917db791d22d7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sdarwin created this gist Nov 1, 2023.
    1,383 changes: 1,383 additions & 0 deletions rc-slack.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1383 @@
    /* Instructions
    This guide assume that admin has added dark-mode from https://github.com/pbaity/rocketchat-dark-mode/blob/master/dark-mode.css and
    https://github.com/pbaity/rocketchat-dark-mode/blob/master/dark-mode-toggle.js
    for more detail about how to install these files, please refer to : https://github.com/pbaity/rocketchat-dark-mode
    ## Updating RC with Slack Style
    1. Navigate to [rocket-chat-url]/admin/settings/General, and disable: "Enable Content-Security-Policy"
    2. Navigate to [rocket-chat-url]/admin/settings/Layout -> Fonts, and change: "Body Font Family" to `Lato,sans-serif, -apple-system, BlinkMacSystemFont`
    3. Navigate to [rocket-chat-url]/admin/settings/Layout -> Custom CSS, and replace the content with the `rc-slack.css`
    */

    /******************************************
    *************General Settings*************
    ******************************************/

    :root {
    --primary-font-color: #1d1c1d;
    --info-font-color: #a0a0a0;
    --color-darker: #272c33;

    --body-font-family: Lato;
    --rcx-font-family-sans: Lato;
    --text-small-size: 0.875rem;
    --sidebar-width: 260px;
    }

    /******************************************
    *********Custom Settings Begins***********
    ******************************************/

    @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

    body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    /* set message font size */
    .message-body-wrapper {
    line-height: 22px;
    font-size: 15px;
    }

    /* set main font color */
    body.dark-mode {
    --primary-font-color: #d1d2d3;
    }

    body .color-primary-font-color {
    color: #1d1c1d;
    }

    /***** Message area *****/
    /* */

    /* set message font color */
    body.dark-mode .color-primary-font-color {
    color: #d1d2d3;
    }

    /* adjust messages box padding */
    footer > .rc-message-box {
    padding: 0px 24px 24px 24px;
    }

    /* adjust whitespace between messages */
    ul.messages-list .message {
    padding: 4px 50px 4px 70px;
    }

    /* adjust whitespace between messages | Version 4.7.4 */
    ul .message {
    padding: 4px 50px 4px 70px;
    }

    /* adjust avatar & messages alignment */
    .message .thumb {
    top: 9px;
    }

    /* adjust whitespace in the bottom of last messages */
    .messages-box ul.messages-list {
    padding: 21px 0 15px;
    }

    /* adjust whitespace in the bottom of last messages | Version 4.7.4 */
    .messages-box ul {
    padding: 21px 0 15px;
    }

    /* adjust font-size in input box */
    footer .js-input-message {
    font-size: 15px;
    line-height: 22px;
    }

    /***** sidebar *****/

    /* set sidebar bg color */
    body:not(.dark-mode) .rcx-sidebar {
    background-color: #3f0e40;
    }

    /* set sidebar icon color */
    body:not(.dark-mode) aside .rcx-button--ghost {
    background-color: #3f0e40;
    border-color: #3f0e40;
    }

    #rocket-chat .rcx-sidebar-title {
    font-size: 15px;
    font-weight: 400;
    }

    /* set omnichannel text color */
    body:not(.dark-mode) #rocket-chat .rcx-sidebar-title {
    color: rgba(255, 255, 255, 0.7);
    }

    #rocket-chat .rcx-sidebar-item__title {
    font-size: 15px;
    }

    /* set sidebar text highlight bg */
    body aside .rcx-sidebar-item--selected {
    background: #1164A3 !important;
    }

    /* set sidebar text highlight text color */
    body #rocket-chat aside .rcx-sidebar-item--selected .rcx-sidebar-item__title,
    body #rocket-chat aside .rcx-sidebar-item--selected .rcx-icon {
    color: white;
    }

    body:not(.dark-mode) aside .rcx-sidebar-item--clickable:hover {
    background-color: #350d36;
    }

    body:not(.dark-mode) #rocket-chat .rcx-sidebar-item__title {
    color: rgba(255, 255, 255, 0.7);
    }

    body:not(.dark-mode) .rcx-sidebar-item {
    color: rgba(255, 255, 255, 0.7);
    }

    /* set cross icon in admin sidebar to white in light-mode */
    body:not(.dark-mode) aside .rcx-button--ghost .rcx-icon--name-cross {
    color: white;
    }

    /* set icon hover bg color */
    body:not(.dark-mode) aside .rcx-button--ghost.hover,
    body:not(.dark-mode) aside .rcx-button--ghost.is-hovered,
    body:not(.dark-mode) aside .rcx-button--ghost:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: transparent !important;
    }

    body.dark-mode #dark-mode-button:hover {
    border-color: var(--color-dark-medium) !important;
    background-color: var(--color-dark-medium) !important
    }

    aside .rcx-sidebar-top-bar__title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    }

    body:not(.dark-mode) aside .rcx-sidebar-top-bar__title {
    color: #bcabbc;
    }

    /***** Code block & inline *****/

    /* change code typography*/
    code.code-colors {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px
    }

    /* set block code color */
    body.dark-mode .wrapper .code-colors, {
    background: #2a2d30;

    }

    /* set inline code color in dark mode */
    body.dark-mode .wrapper .code-colors.inline {
    background: #2a2d30;
    color: #e8912d;
    }

    /* set inline code color in light mode */
    .wrapper .code-colors.inline {
    color: #e01e5a;
    }

    /* set code border-color */
    body.dark-mode .rc-old .code-colors {
    border: 1px solid rgba( 232,232,232 ,0.13);
    }

    /* set link color on dark-mode */
    body.dark-mode #rocket-chat .main-content a {
    background: #2a2d30;
    color: #1d9bd1;
    }

    /* set link color on light-mode */
    body #rocket-chat .main-content a {
    color: #1d9bd1;
    }

    /* set username font-weight & font-size*/
    .message .user {
    font-size: 15px;
    font-weight: 900;
    }

    .message .mention-link {
    background-color: rgba(29, 155, 209, 0.1);
    }

    /* set time text line-height */
    time.time {
    line-height: 18px
    }

    /* set left padding on username row (time text) */
    .message .time {
    padding-left: 8px;
    }

    /* set vertical alignment on username row */
    .message-body-wrapper .title {
    align-items: flex-end;
    }

    /* set avatar border-radius */
    .avatar {
    border-radius: 4px;
    }

    /* set channel name bold*/
    #rocket-chat .rc-old.main-content header > .rcx-box--full div:nth-child(2) > .rcx-box--full div:nth-child(2) {
    font-size: 18px !important;
    font-weight: 900 !important;
    }

    /* set # symbol to black */
    #rocket-chat .rc-old.main-content header .rcx-box--full > i {
    color : #1d1c1d !important;
    }

    /* set User profile title font-size */
    #rocket-chat aside.rcx-box h3 > .rcx-box > i + .rcx-box {
    font-size: 18px !important;
    }

    /* set User profile details font-size */
    .rc-scrollbars-view > div > .rcx-box > .rcx-box > .rcx-box > .rcx-box {
    font-size: 15px !important;
    }

    /* set User profile - role tag */
    .rc-scrollbars-view span.rcx-tag.rcx-tag--default {
    font-size: 15px;
    padding: 4px;
    line-height: 1;
    }


    /******************************************
    **********Custom Settings Ends************
    ******************************************/

    /* Reset global font color so that it's changable more easily */
    .color-primary-font-color, textarea {
    color: var(--primary-font-color);
    }

    .color-info-font-color {
    color: var(--info-font-color);
    }

    input, select, textarea {
    color: var(--input-text-color);
    }

    .error-color {
    color: var(--rc-color-error);
    }

    .js-button[aria-label="Toggle Dark Mode"] {
    transition: filter 150ms;
    }

    .rcx-icon--name-darkmode {
    height: 1em;
    font-size: 1rem !important;
    }

    @media (min-width: 1372px) {
    .sidebar__toolbar-button {
    margin: 0 3px;
    }
    }

    @keyframes highlight {
    from {
    background-color: hsl(216, 92%, 54%);
    }
    }

    /******************************************
    ************Transition Effect*************
    ******************************************/
    input,
    textarea,
    select,
    .color-primary-font-color,
    .color-info-font-color,
    .background-info-font-color,
    .background-transparent-darker-before::before,
    .messages-box .message .body, /* override for opacity transition */
    .rc-header__name,
    .rc-header__wrap,
    .message .reactions>li,
    .message .title .is-bot,
    .message .title .role-tag,
    .message.new-day::before,
    .code-colors,
    .hljs-selector-id,
    .hljs-selector-tag,
    .hljs-attribute,
    .hljs-keyword,
    .hljs-title,
    .hljs-doctag,
    .hljs-string,
    .hljs-type,
    .hljs-literal,
    .hljs-number,
    .hljs-tag,
    .hljs-name,
    .hljs-attr,
    .hljs-template-variable,
    .hljs-variable,
    .rc-message-box__container,
    .messages-container .footer,
    .content-background-color,
    .message.new-day::after,
    .message .reactions>li,
    .border-component-color,
    .contextual-bar__header,
    .contextual-bar__content,
    .sidebar__footer {
    transition: opacity 300ms linear, color 150ms, background-color 150ms, border-color 150ms;
    }

    /******************************************
    *************Dark Mode Settings***********
    ******************************************/
    body.dark-mode {

    /****************************** Custom Variables ******************************/
    --primary-font-color: var(--color-gray-lightest);
    --info-font-color: var(--color-gray-light);
    --message-box-background: hsla(0, 0, 100%, 0.1);

    --button-outline-color: var(--color-gray-medium);
    --button-close-color: var(--color-gray-medium);

    /********************** Overridden Rocket.Chat Variables **********************/

    /* General Colors */
    --rc-color-alert-message-warning-background: hsl(352, 83%, 20%);
    --rc-color-primary: var(--color-gray-lightest);
    --rc-color-primary-lightest: var(--color-dark-medium);
    --rcx-color-neutral-100: var(--rc-color-primary-dark);

    /* Forms - Button */
    --button-disabled-background: var(--color-dark-70);
    --button-disabled-text-color: var(--color-dark-80);

    /* Forms - Input */
    --input-text-color: var(--color-gray-lightest);
    --input-icon-color: var(--color-gray-lightest);

    /* Forms - popup list */
    --popup-list-background: var(--color-dark);
    --popup-list-background-hover: var(--color-darkest);
    --popup-list-selected-background: var(--color-dark);
    --popup-list-name-color: var(--color-white);

    /* Forms - tags */
    --tags-text-color: var(--color-white);
    --tags-background: var(--color-blue);

    /* Sidebar */
    --sidebar-background: var(--color-dark);
    --sidebar-background-hover: var(--color-darkest);

    /* Chip */
    --chip-background: var(--color-blue);

    /* Mention link */
    --mention-link-background: var(--color-dark-medium);
    --mention-link-text-color: var(--color-light-blue);
    --mention-link-me-background: var(--alerts-background);
    --mention-link-me-text-color: var(--color-white);
    --mention-link-group-background: var(--alerts-background);
    --mention-link-group-text-color: var(--color-white);

    /* Message box */
    --message-box-user-activity-color: var(--color-gray-lightest);
    --message-box-user-activity-user-color: var(--color-gray-lightest);

    /* Header */
    --header-title-username-color-darker: var(--color-gray-lightest);
    --header-background-color: var(--color-darkest);

    /* Popover */
    --popover-background: var(--color-dark);
    --popover-background-hover: var(--color-dark-medium);
    --popover-title-color: var(--color-white);
    --popover-item-color: var(--color-white);

    /* Tooltip */
    --tooltip-background: var(--color-darkest);
    --tooltip-text-color: var(--color-white);

    /* alert */
    --alerts-background: #1d73f5;
    --alerts-color: var(--color-white);

    --message-box-editing-color: var(--rc-color-alert-message-warning-background);
    --rc-color-alert: var(--color-dark-red);
    }

    /******************************************
    *********Manual Dark Theme Overrides******
    ******************************************/

    /***************Main Chat*****************/

    /* Breadcrumbs discussions */
    body.dark-mode .rcx-room-header .rcx-tag--default {
    background-color: unset;
    }

    /* Blockquote */
    body.dark-mode .rcx-css-1d5cod7 {
    background-color: var(--color-darkest) !important;
    }

    body.dark-mode blockquote.rcx-attachment__details .rcx-box--full {
    color: var(--secondary-font-color);
    }

    body.dark-mode .rcx-css-11c35pn:hover .rcx-attachment__details,
    body.dark-mode .rcx-css-11c35pn:focus .rcx-attachment__details {
    background-color: var(--color-dark) !important;
    }

    /* Attachements content */
    body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full {
    color: var(--primary-font-color);
    }

    body.dark-mode .rcx-message-attachment .rcx-attachment__content .rcx-box--full.rcx-box--with-block-elements pre code {
    background-color: var(--color-dark);
    color: var(--primary-font-color);
    }

    /* Pinned messages content */
    body.dark-mode .rcx-css-ntpg4f {
    color: var(--rc-color-primary) !important;
    }

    /* Message "You joined a new private conversation with" */
    body.dark-mode .rcx-css-dlop43 {
    color: var(--rc-color-primary) !important;
    }

    body.dark-mode .main-content a {
    color: var(--color-light-blue);
    }

    body.dark-mode .main-content .messages-box .wrapper {
    background-color: var(--color-darkest);
    }

    body.dark-mode .mention-link--group {
    color: var(--mention-link-group-text-color) !important;
    }

    body.dark-mode .mention-link--me {
    color: var(--mention-link-me-text-color) !important;
    }

    body.dark-mode select {
    background-color: var(--color-dark);
    }

    body.dark-mode select option {
    color: var(--color-white);
    }

    body.dark-mode .sidebar-item > a {
    color: inherit;
    }

    body.dark-mode .highlight-text {
    background-color: var(--color-blue);
    }

    body.dark-mode .rc-switch__text {
    color: var(--color-white);
    }

    body.dark-mode .rc-switch-double {
    color: var(--color-white);
    }

    body.dark-mode .rc-switch__button {
    background-color: var(--color-dark);
    }

    body.dark-mode .error-border {
    border-color: var(--color-dark-red);
    }

    body.dark-mode .background-component-color {
    background-color: var(--color-dark-blue);
    }

    body.dark-mode .upload-progress-progress {
    background-color: var(--color-blue);
    }

    body.dark-mode .container-bars .color-primary-action-color {
    color: var(--color-white);
    }

    body.dark-mode .burger i {
    background-color: var(--color-white);
    }

    body.dark-mode .rc-member-list__user.active,
    body.dark-mode .rc-member-list__user:hover {
    background-color: var(--color-darkest);
    }

    body.dark-mode .rc-user-info-details {
    background-color: var(--color-dark-medium);
    }

    body.dark-mode p.rc-user-info-details__info {
    color: var(--color-white);
    }

    body.dark-mode .messages-container .footer,
    body.dark-mode .content-background-color {
    background-color: var(--header-background-color);
    }

    body.dark-mode .message {
    background-color: var(--color-darkest);
    }

    body.dark-mode .message.new-day::after,
    body.dark-mode .message .reactions>li,
    body.dark-mode .border-component-color {
    border-color: var(--rc-color-primary-lightest);
    }

    body.dark-mode .message .reactions>li,
    body.dark-mode .message .title .is-bot,
    body.dark-mode .message .title .role-tag,
    body.dark-mode .message.new-day::before {
    background-color: var(--rc-color-primary-dark);
    }

    body.dark-mode .message.active,
    body.dark-mode .message:hover {
    background-color: var(--color-darker);
    }

    body.dark-mode .message.editing {
    background-color: var(--color-dark-blue);
    }

    body.dark-mode .message.first-unread .body:after {
    background-color: var(--header-background-color);
    }

    body.dark-mode .rc-message-box__container {
    background-color: var(--message-box-background);
    }

    body.dark-mode .rc-old .rc-message-box .reply-preview {
    background-color: var(--color-dark);
    }

    body.dark-mode .message-actions,
    body.dark-mode .rc-member-list__counter {
    color: var(--color-gray-light);
    background-color: var(--color-darkest);
    border-color: var(--color-dark);
    }

    body.dark-mode .message-actions__button:hover,
    body.dark-mode .message-actions__menu:hover {
    background-color: var(--color-dark);
    }

    body.dark-mode .message .body > table thead tr {
    background-color: var(--color-darkest);
    }

    body.dark-mode .message .body > table tr {
    background-color: var(--color-dark-medium);
    }

    body.dark-mode .message .body > table tr:nth-child(2n) {
    background-color: var(--color-dark);
    }

    body.dark-mode .background-transparent-darker-before::before {
    background-color: var(--color-dark-medium);
    }

    /* User card */
    body.dark-mode .rcx-user-card {
    background-color: var(--color-dark) !important;
    }

    body.dark-mode .rcx-user-card .rcx-button:not(.rcx-css-ue04py) {
    background-color: var(--color-dark-medium);
    border: none;
    }

    body.dark-mode .rcx-user-card .rcx-button:hover {
    background-color: var(--color-dark-light);
    border: none;
    }

    /* Modals */

    body.dark-mode .rcx-modal__header .rcx-button--ghost.rcx-button:hover {
    color: var(--rc-color-primary-lightest);
    }

    /* Temporary fix for modals where "Cancel" button is missing 'rcx-button--ghost' class */
    body.dark-mode .rcx-modal__footer .rcx-box.rcx-box--full.rcx-box--animated.rcx-button.rcx-button-group__item:first-of-type:not(.rcx-button--ghost) {
    color: var(--rc-color-primary-lightest);
    }

    /*body.dark-mode .background-info-font-color {
    background-color: var(--color-dark-medium);
    }*/

    body.dark-mode .rcx-modal__inner,
    body.dark-mode .rcx-modal__footer {
    background: var(--color-dark);
    }

    body.dark-mode .rc-modal__footer,
    body.dark-mode .rc-modal {
    background: var(--color-darkest);
    }

    body.dark-mode .rc-modal__content,
    body.dark-mode .rc-modal__header,
    body.dark-mode .rcx-modal__content,
    body.dark-mode .rcx-modal__inner,
    body.dark-mode .rcx-modal__header,
    body.dark-mode .rcx-modal__title {
    color: var(--color-white);
    }

    body.dark-mode .rc-button--outline {
    border-color: var(--button-outline-color);
    color: var(--button-outline-color);
    }

    body.dark-mode .rc-button--outline.js-close,
    body.dark-mode .rc-button--nude.js-close {
    border-color: var(--button-close-color);
    color: var(--button-close-color);
    }

    body.dark-mode .rc-button--cancel,
    body.dark-mode .rc-button--danger {
    background-color: var(--button-cancel-color);
    border-color: var(--button-cancel-color);
    color: var(--button-primary-text-color);
    }

    body.dark-mode .contextual-bar {
    background-color: var(--color-dark);
    border-left: 2px solid var(--color-dark-medium);
    }

    body.dark-mode .contextual-bar__header {
    background-color: var(--color-dark);
    border-bottom: 1px solid var(--color-dark-medium);
    }

    body.dark-mode .contextual-bar__content {
    background-color: var(--color-dark);
    }

    body.dark-mode .rc-member-list__counter {
    background-color: var(--color-dark);
    }

    /* Modal : message info (read by) */
    body.dark-mode .rcx-css-bcrfr1:hover {
    background-color: var(--rcx-color-neutral-100);
    }

    /**** Select / Dropdowns ****/

    body.dark-mode .rcx-select {
    background-color: var(--rc-color-primary-darkest) !important;
    }

    body.dark-mode .rcx-options > .rcx-tile {
    background-color: var(--rc-color-primary-darkest) !important;
    }

    body.dark-mode .rcx-options .rcx-option,
    body.dark-mode .rcx-options .rcx-option--focus /* Temporary fix while focus is not refreshed */ {
    background-color: var(--rc-color-primary-darkest) !important;
    color: var(--color-white) !important;
    }

    body.dark-mode .rc-popover__content .rcx-option:hover,
    /* body.dark-mode .rcx-options .rcx-option--focus, */ /* Temporary fix while focus is not refreshed */
    body.dark-mode .rcx-options .rcx-option--selected {
    background-color: var(--color-dark-light) !important;
    }

    body.dark-mode .rcx-options .rcx-option:hover,
    body.dark-mode .rcx-options .rcx-option--selected:hover {
    background-color: var(--color-dark) !important;
    }

    /***** Buttons *****/

    /* Regular button style */
    body.dark-mode .main-content .rcx-button:not(.rcx-button--ghost) { /* Default */
    background-color: var(--color-dark) !important;
    }
    body.dark-mode .main-content .rcx-button:is(.rcx-button--ghost, .rcx-button):hover { /* Hovered or selected */
    background-color: var(--color-darkest) !important;
    }

    /* Square (icon) button style */
    body.dark-mode .main-content .rcx-button--square:not(.rcx-button--ghost), /* Default */
    body.dark-mode .main-content .rcx-button--square:is(.rcx-button--ghost, .rcx-button):hover { /* Hovered or selected */
    background-color: var(--color-darkest) !important;
    border-color: transparent !important;
    }

    body.dark-mode .main-content .rcx-button--square:is(.rcx-button--ghost, .rcx-button):focus {
    background-color: var(--color-darkest);
    border-color: transparent !important;
    box-shadow: 0 0 0 .1rem var(--color-gray);
    }

    /* Menu buttons on top right (threads, search, etc.) */
    body.dark-mode .rcx-css-15vvv6z:hover,
    body.dark-mode .rcx-css-ue04py:hover,
    body.dark-mode .rcx-css-15vvv6z:active,
    body.dark-mode .rcx-css-ue04py:active {
    border-color: var(--color-dark-medium) !important;
    background-color: var(--color-dark-medium) !important;
    }

    body.dark-mode .rcx-css-136xdpx {
    background-color: var(--color-darkest);
    }

    body.dark-mode .rcx-button {
    color: var(--info-font-color);
    }

    body.dark-mode .rcx-button--ghost:not(.rcx-button--square):hover {
    color: var(--color-dark) !important;
    }

    body.dark-mode .rcx-button--primary {
    color: var(--info-font-color);
    background-color: #095ad2
    }

    body.dark-mode .rcx-button--primary:disabled {
    color: var(--color-gray);
    }

    body.dark-mode .rcx-button--danger {
    color: var(--rcx-button-colors-secondary-danger-color,var(--rcx-color-danger-500,#f5455c));
    }

    /***** Left sidebar *****/

    body.dark-mode .rcx-box.rcx-box--full.rcx-tile--elevation-2.rcx-tile {
    background-color: var(--color-dark-medium);
    color: var(--primary-font-color);
    }

    body.dark-mode .rcx-box.rcx-box--full.rcx-tile--elevation-2.rcx-tile .rcx-option__title,
    body.dark-mode .rcx-box.rcx-box--full.rcx-tile--elevation-2.rcx-tile .rcx-option {
    color: var(--primary-font-color);
    }

    body.dark-mode .rcx-box.rcx-box--full.rcx-tile--elevation-2.rcx-tile .rcx-option:hover {
    background-color: var(--color-dark-light);
    }

    /***** Right sidebar *****/

    /* TODO : switch toggle */

    body.dark-mode .rcx-vertical-bar {
    background-color: var(--rc-color-primary-background) !important;
    }

    body.dark-mode .rcx-css-136xdpx:hover, /* Thread list item */
    body.dark-mode .rcx-css-136xdpx:focus,
    body.dark-mode .rcx-css-1es44sn:hover, /* Files list item */
    body.dark-mode .rcx-css-1es44sn:focus {
    background-color: var(--rc-color-primary-dark);
    }

    /* Targets unread message indicator in threads panel. */
    body.dark-mode button.rcx-contextual-message__follow + div.rcx-box--full {
    background-color: #1d74f5 !important;
    }
    /***** Members list *****/

    body.dark-mode .rcx-option__content {
    color: var(--color-gray-light);
    }

    /***** Chat file list *****/

    body.dark-mode .rcx-css-18t0quo {
    background-color: var(--color-darkest);
    }

    body.dark-mode .rcx-css-18t0quo:hover {
    background-color: var(--color-dark-medium);
    }

    body.dark-mode .attachments__item:hover, .attachments__item:active {
    background-color: var(--color-darkest);
    }

    body.dark-mode .attachments__content:hover, .attachments__content:active {
    color: var(--primary-font-color);
    }

    body.dark-mode .attachments__name {
    color: var(--color-blue);
    }

    body.dark-mode .attachments__name:hover, .attachments__name:active {
    color: var(--color-light-blue);
    }

    body.dark-mode .rc-popover__item:hover {
    background-color: var(--popover-background-hover);
    }

    body.dark-mode .rc-popover__content {
    background-color: var(--popover-background);
    box-shadow: 0px 0px 2px var(--color-dark-20);
    }

    body.dark-mode .emoji-picker .filter-item.active {
    border-color: var(--color-light-blue);
    }

    body.dark-mode .rcx-room-header hr.rcx-divider {
    border-color: var(--color-dark-medium);
    }

    body.dark-mode aside.rcx-box.rcx-box--full.rcx-vertical-bar, /* right aside (threads, search, etc.) */
    body.dark-mode .rcx-css-ccvr3m, /* thread list message */
    body.dark-mode .rcx-css-1j3nsmc, /* thread list message */
    body.dark-mode .rcx-css-1bmadou, /* thread list header */
    body.dark-mode .rcx-css-1yhzjdg /* thread list search bar */
    {
    border-color: var(--color-dark-medium) !important;
    }

    body.dark-mode .room-leader:hover {
    background-color: var(--color-darkest);
    }

    body.dark-mode .chat-now {
    color: var(--color-white);
    }

    body.dark-mode .message-popup-title {
    background-color: var(--color-dark);
    }

    /**************Code Highlights*****************/

    body.dark-mode .code-colors,
    body.dark-mode .rc-old code.inline {
    background: var(--color-dark-100);
    color: var(--color-gray-light);
    }

    body.dark-mode .hljs-selector-id,
    body.dark-mode .hljs-keyword {
    color: var(--color-light-blue);
    }

    body.dark-mode .hljs-title {
    color: var(--color-gray-light);
    }

    body.dark-mode .hljs-literal,
    body.dark-mode .hljs-number,
    body.dark-mode .hljs-attr,
    body.dark-mode .hljs-template-variable,
    body.dark-mode .hljs-variable {
    color: var(--color-dark-green);
    }

    body.dark-mode .hljs-tag,
    body.dark-mode .hljs-name {
    color: var(--color-light-blue);
    }

    body.dark-mode .hljs-selector-tag,
    body.dark-mode .hljs-subst {
    color: var(--color-green);
    }

    body.dark-mode .hljs-doctag,
    body.dark-mode .hljs-string {
    color: var(--color-red);
    }

    body.dark-mode .hljs-attribute,
    body.dark-mode .hljs-type,
    body.dark-mode .hljs-number {
    color: var(--color-orange);
    }

    body.dark-mode .hljs-addition {
    background-color: #1e3a21;
    }
    body.dark-mode .hljs-deletion {
    background-color: #472d2e;
    }

    /***** My Account *****/

    body.dark-mode .rc-form-legend,
    body.dark-mode .rc-form-label {
    color: var(--primary-font-color);
    }

    body.dark-mode .js-logout {
    color: var(--primary-font-color);
    border-color: var(--primary-font-color);
    }

    /* Security - 2FA */
    body.dark-mode .rcx-css-9zx50y, body.dark-mode .rcx-css-zl15hy {
    background-color: transparent !important;
    }

    /***** Omnichannel *****/

    body.dark-mode .rcx-css-110cgdy {
    background-color: transparent !important;
    }

    /************** Admin panel & Account panel ******************/

    .page-list a:not(.rc-button), .page-settings a:not(.rc-button) {
    color: var(--primary-font-color);
    }

    /*body.dark-mode .simplebar-content > .rcx-box => will also modify sidebar background */
    body.dark-mode .simplebar-content > .rcx-css-fr02gd { /* main content */
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-css-txktj6 { /* Account settings page background */
    background-color: var(--color-dark) !important;
    }

    body.dark-mode .rcx-css-1wm5na { /* Account settings page header title */
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .rc-scrollbars-container { /* Panels sidebar */
    background-color: var(--sidebar-background);
    }

    body.dark-mode .rcx-css-15hfnte { /* Panels sidebar header */
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-css-10ij0kz .rcx-box { /* Panels sidebar header text and button (with cross icon) */
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .rcx-css-1l00c5f,
    body.dark-mode .rcx-css-1ky5rco { /* Panels sidebar item */
    color: var(--rcx-sidebar-item-color,var(--rcx-color-foreground-hint,#9ea2a8)) !important;
    }

    body.dark-mode .rcx-css-1l00c5f.active { /* Panels sidebar item selected */
    background-color: rgba(108, 114, 122, 0.3);
    }

    body.dark-mode .rcx-css-1l00c5f:hover, .rcx-css-1l00c5f:focus, .rcx-css-1l00c5f.active:focus, .rcx-css-1l00c5f.active:hover { /* Panels sidebar item hovered */
    background-color: var(--color-darkest);
    }

    body.dark-mode .rcx-css-kyq2rf { /* Admin panel info & stats (Deployment, License, Usage) */
    background-color: var(--color-dark) !important;
    }

    body.dark-mode .rcx-css-61di5s { /* Admin panel info & stats (Deployment, License, Usage) */
    color: var(--color-gray) !important;
    }

    body.dark-mode .rcx-pagination__link:disabled { /* Admin panel pagination (e.g., in App Marketplace) */
    color: var(--color-white);
    }

    body.dark-mode .rcx-select__item {
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .sidebar-flex__header {
    background-color: var(--color-dark);
    }

    body.dark-mode .sidebar-light {
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-accordion-item__title,
    body.dark-mode .rcx-label__text,
    body.dark-mode .rcx-field__label{
    color: var(--color-white);
    }

    body.dark-mode .sidebar-flex__search .rc-input__element {
    color: var(--color-dark);
    }

    body.dark-mode .rcx-input-box__wrapper {
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-box * .rcx-input-box {
    background-color: var(--color-dark);
    color: var(--rc-color-primary);
    }

    /* .rcx-autocomplete, .rcx-input-box:not(.rcx-input-box--undecorated), .rcx-input-box__wrapper, .rcx-select */
    body.dark-mode .rcx-autocomplete {
    background-color: transparent;
    }

    body.dark-mode .rcx-table__cell {
    color: var(--color-gray) !important;
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-table__cell--header {
    color: var(--color-gray-lightest) !important;
    }

    body.dark-mode .rcx-table__cell--align-end {
    color: var(--color-gray);
    background-color: var(--color-gray);
    }

    body.dark-mode .rcx-css-18up6l1,
    body.dark-mode .rcx-css-zvbm6,
    body.dark-mode .rcx-css-n6qrb5 { /* Table cells content text*/
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .rc-input__element:disabled{
    background-color: var(--color-gray);
    }

    body.dark-mode .admin-table-row {
    background-color: hsl(219, 16%, 25%);
    }

    body.dark-mode .sidebar-light .sidebar-item {
    color: inherit;
    }

    body.dark-mode .admin-table-row:nth-child(even) {
    background-color: hsl(219, 15%, 33%);
    }

    body.dark-mode .permissions-manager .permission-grid .id-styler {
    color: var(--info-font-color);
    }

    body.dark-mode .rcx-accordion-item__bar:hover {
    background-color: var(--color-dark-30);
    }

    body.dark-mode .rcx-box--text-style-h1,
    body.dark-mode .rcx-subtitle,
    body.dark-mode .rcx-box--text-color-default,
    body.dark-mode .rcx-box--text-color-info {
    color: var(--color-gray-lightest);
    }

    body.dark-mode .permissions-manager .permission-grid .role-name {
    background: var(--color-dark);
    }

    body.dark-mode .rc-apps-marketplace .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover,
    body.dark-mode .rc-apps-section .rc-table-content tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover {
    background-color: var(--color-dark);
    }

    body.dark-mode .rc-apps-marketplace .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category,
    body.dark-mode .rc-apps-section .rc-table-content .rc-table-info .rc-apps-categories .rc-apps-category {
    color: var(--primary-font-color);
    background-color: var(--color-dark-medium);
    }

    /*body.dark-mode .rcx-box * .rcx-input-box,*/
    body.dark-mode .rcx-box * .rcx-select {
    /*color: var(--color-dark-medium);*/
    background-color: var(--color-white);
    }

    body.dark-mode .rcx-banner {
    background-color: var(--color-dark-medium);
    color: var(--info-font-color) !important;
    }

    body.dark-mode .rcx-banner__close-button .rcx-button:hover {
    background-color: var(--color-dark-light);
    border: none;
    }

    body.dark-mode .mail-messages__instructions {
    background-color: var(--color-dark);
    }

    body.dark-mode .rcx-tag--secondary {
    background-color: var(--color-dark-medium);
    }

    body.dark-mode .rcx-table__cell--align-end {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark-medium) !important;
    }

    /* Apply info (white) font *everywhere* */
    body.dark-mode .rcx-css-ps0pgs, /* Channel name */
    body.dark-mode .rcx-room-header .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3):not(.rcx-toggle-switch__input):not(.rcx-toggle-switch__fake), /* omit buttons/icons (.rcx-css-1fgkscl is .rcx-icon parent) */
    body.dark-mode .rcx-vertical-bar .rcx-box:not(.rcx-button-group):not(.rcx-button):not(.rcx-css-1fgkscl):not(.rcx-css-4pvxx3):not(.rcx-toggle-switch__input):not(.rcx-toggle-switch__fake):not(.rcx-css-trljwa) {
    color: var(--info-font-color) !important;
    /*background-color: var(--color-darkest) !important;*/
    }

    /* body.dark-mode .main-content .rcx-box {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark) !important;
    } */

    /* body.dark-mode .rcx-modal__backdrop {
    background-color: transparent !important;
    } */

    body.dark-mode .rcx-table__cell--align-start {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark-medium) !important;
    }

    body.dark-mode .rcx-field__description code {
    background-color: var(--color-dark);
    }

    body.dark-mode .table-fake-th {
    color: var(--info-font-color);
    }

    body.dark-mode .rc-input__element {
    background-color: var(--color-dark-medium);
    color: var(--info-font-color) !important;
    }

    body.dark-mode .rcx-check-box.is-focused,
    body.dark-mode .rcx-check-box__input:checked+.rcx-check-box__fake,
    body.dark-mode .rcx-check-box.is-focused,
    body.dark-mode .rcx-check-box__input:indeterminate+.rcx-check-box__fake,
    body.dark-mode .rcx-check-box__input:checked:focus+.rcx-check-box__fake,
    body.dark-mode .rcx-check-box__input:indeterminate:focus+.rcx-check-box__fake,
    body.dark-mode .rcx-radio-button.is-focused
    body.dark-mode .rcx-radio-button__input:checked+.rcx-radio-button__fake,
    body.dark-mode .rcx-radio-button__input:checked:focus+.rcx-radio-button__fake,
    body.dark-mode .rcx-toggle-switch.is-focused
    body.dark-mode .rcx-toggle-switch__input:checked+.rcx-toggle-switch__fake,
    body.dark-mode .rcx-toggle-switch__input:checked:focus+.rcx-toggle-switch__fake {
    background-color: #1d74f5 !important;
    }

    body.dark-mode .CodeMirror {
    background-color: var(--color-gray-light);
    }

    body.dark-mode .CodeMirror-gutter {
    background-color: var(--color-dark);
    }

    body.dark-mode .setting-action {
    border: var(--button-border-width) solid var(--info-font-color);
    color: var(--info-font-color);
    }


    /**************Login Page******************/

    body.dark-mode main#rocket-chat {
    background-color: var(--color-dark);
    }

    body.dark-mode section.full-page.color-tertiary-font-color {
    background-color: var(--color-dark);
    }

    body.dark-mode .rc-button.rc-button--nude.forgot-password,
    body.dark-mode .rc-button.rc-button--nude.back-to-login,
    body.dark-mode .rc-button.rc-button--nude.register,
    body.dark-mode .rc-button.rc-button--nude i.icon-cancel,
    body.dark-mode .register-link-replacement {
    color: var(--color-white);
    }

    body.dark-mode #login-card {
    background-color: var(--color-darkest);
    }


    /**************Scrollbars******************/
    body.dark-mode .main-content *::-webkit-scrollbar {
    background-color: rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .main-content *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    }

    body.dark-mode .main-content *::-webkit-scrollbar-corner {
    background-color: rgba(255, 255, 255, 0.05);
    }

    /***** Poll App *****/
    body.dark-mode .rcx-css-erwtrf {
    color: var(--primary-font-color) !important;
    }

    /* Style the browser scroll bars to avoid visually clashing with the rest of Rocket.Chat in dark mode. */

    /*
    body.dark-mode * {
    scrollbar-color: #777 transparent;
    }
    */

    body.dark-mode *::-webkit-scrollbar {
    width: .75rem;
    }

    body.dark-mode *::-webkit-scrollbar-track {
    background-color: transparent;
    }

    body.dark-mode *::-webkit-scrollbar-thumb {
    background-color: #777;
    }

    /* Firefox does the dimming on hover automatically. We emulate it for Webkit-based browsers. */
    body.dark-mode *::-webkit-scrollbar-thumb:hover {
    background-color: #666;
    }

    body.dark-mode *::-webkit-scrollbar-thumb:active {
    background-color: #444;
    }

    /***** Changes for 3.9.1 *****/

    /* aside.sidebar--main .rcx-sidebar-topbar .rcx-button--small-square {
    width: 1.35rem;
    }
    body.dark-mode .main-content .rcx-box {
    color: var(--info-font-color) !important;
    background-color: var(--color-darkest) !important;
    }
    body.dark-mode div[class*="user-card"] {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark) !important;
    }
    body.dark-mode .rcx-box {
    color: var(--info-font-color) !important;
    background-color: var(--color-dark-medium);
    }
    body.dark-mode .rcx-status-bullet--online {
    background: #2de0a5 !important;
    }
    body.dark-mode .rcx-box--full {
    background-color: var(--color-dark);
    }
    body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__title,
    body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__subtitle,
    body.dark-mode .rc-box.rcx-box--full.rcx-sidebar-item__time {
    color: var(--sidebar-item-text-color);
    }
    body.dark-mode .rcx-sidebar-topbar button.rcx-button-group__item .rcx-icon,
    body.dark-mode .rcx-box.rcx-box--full.rcx-icon--name-hashtag,
    body.dark-mode .rcx-box.rcx-box--full.rcx-sidebar-title {
    color: var(--sidebar-item-text-color) !important;
    }
    body.dark-mode .rcx-sidebar-item--highlighted {
    color: #fff !important;
    }
    body.dark-mode .rcx-sidebar-item__container span.rcx-box.rcx-box--full.rcx-badge {
    background-color: var(--rc-color-alert);
    } */

    body.dark-mode figcaption.rcx-box.rcx-box--full.rcx-attachment__details {
    background-color: var(--color-darker) !important;
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .rcx-css-z2kk2c {
    color: var(--primary-font-color) !important;
    }

    body.dark-mode .rcx-box--with-inline-elements code, .rcx-field__description code, .rcx-field__error code, .rcx-field__hint code{
    background-color: var(--color-dark-100) !important;
    color: var(--primary-font-color) !important;
    }

    /* This CSS block is used to counter RocketChat's bug which crop the end of custom CSS. */
    .dummy-entry {
    color: whitesmoke;
    }