Created
November 1, 2023 16:32
-
-
Save sdarwin/08ecbfb17f8dbeaed60917db791d22d7 to your computer and use it in GitHub Desktop.
Rocket.Chat Slack Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From approximately June 2022, so if you would like to
diffthe code and compare it with eitherrocketchat-dark-modeor Rocket Chat, start in that time frame.