-
-
Save x0341/4ad2084560998c646b095b0c51e91ab7 to your computer and use it in GitHub Desktop.
Rocket.Chat dark mode theme JSON draft
This file contains 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
| { | |
| "_id": "generic_theme", | |
| "name": "Rocket.Chat Theme", | |
| "description": "An overview of the theming JSON for Rocket.Chat.", | |
| "variables": { | |
| "main": { | |
| "error": "#CC243A", | |
| "error-light": "#A6303F", | |
| "alert": "#E8BE19", | |
| "alert-light": "#CEAB20", | |
| "variables-listed-under-Colors-go-here": "#FFFFFF", | |
| "these-will-be-editable-like-in-Layout": "#000000" | |
| }, | |
| "old_major": { | |
| "content-background-color": "#1E1E1E", | |
| "primary-background-color": "#224D79", | |
| "primary-font-color": "#CCCCCC", | |
| "primary-action-color": "#13679A", | |
| "variables-listed-under-Colors-Old-go-here": "#FFFFFF", | |
| "these-will-be-editable-like-in-Layout": "#000000" | |
| }, | |
| "old_minor": { | |
| "tertiary-background-color": "@rc_dark-component-color", | |
| "tertiary-font-color": "@transparent-lightest", | |
| "link-font-color": "@rc_dark-primary-action-color", | |
| "info-font-color": "@rc_dark-secondary-font-color", | |
| "variables-listed-under-Colors-Old-Minor-go-here": "#FFFFFF", | |
| "these-will-be-editable-like-in-Layout": "#000000" | |
| }, | |
| "derivative": { | |
| "default-action-color": "darken(@secondary-background-color, 15%)", | |
| "default-action-contrast": "contrast(@rc_dark-default-action-color, #444444)", | |
| "primary-background-contrast": "contrast(@rc_dark-primary-background-color, #444444)", | |
| "primary-action-contrast": "contrast(@rc_dark-primary-action-color, #444444)", | |
| "these-are-the-derivative-colors-seen-in-colors.less": "#FFFFFF", | |
| "these-will-not-be-editable": "#000000" | |
| }, | |
| "overrides": { | |
| "status-online": "#00FF00", | |
| "status-away": "#FFFF00", | |
| "status-busy": "#FF0000", | |
| "status-invisible": "#661111", | |
| "these-are-the-overridden-semihardcoded-colors-seen-in-variables.css": "#FFFFFF", | |
| "these-will-not-be-editable": "#000000" | |
| } | |
| }, | |
| "additional_less": ".my-class { color: white; } .this-is-just-extra-less { color: red; }", | |
| "additional_css": "" | |
| } |
This file contains 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
| { | |
| "_id": "rc_dark", | |
| "name": "Rocket.Chat Dark", | |
| "description": "A dark theme for Rocket.Chat.", | |
| "variables": { | |
| "main": { | |
| "error": "#CC243A", | |
| "error-light": "#A6303F", | |
| "alert": "#E8BE19", | |
| "alert-light": "#CEAB20", | |
| "success": "#20CE41", | |
| "success-light": "#0FA224", | |
| "button-primary": "#1d74f5", | |
| "button-primary-light": "#175cc4", | |
| "alert-message-primary": "var(--rc-color-rc_dark-button-primary)", | |
| "alert-message-primary-background": "#2E2F30", | |
| "alert-message-secondary": "#556F22", | |
| "alert-message-secondary-background": "#272825", | |
| "alert-message-warning": "#d52d24", | |
| "alert-message-warning-background": "#341818", | |
| "primary": "#1A1A1A", | |
| "primary-darkest": "#060606", | |
| "primary-dark": "#151515", | |
| "primary-light": "#242424", | |
| "primary-light-medium": "#282828", | |
| "primary-lightest": "#3D3D3D", | |
| "content": "#CCCCCC", | |
| "link-active": "var(--rc-color-rc_dark-button-primary)" | |
| }, | |
| "old_major": { | |
| "content-background-color": "#1E1E1E", | |
| "primary-background-color": "#224D79", | |
| "primary-font-color": "#CCCCCC", | |
| "primary-action-color": "#13679A", | |
| "secondary-background-color": "#323232", | |
| "secondary-font-color": "#606060", | |
| "secondary-action-color": "#222222", | |
| "component-color": "#1F1F1F", | |
| "success-color": "#0CAC0C", | |
| "pending-color": "#FCB316", | |
| "error-color": "#BC2031", | |
| "selection-color": "#066C92", | |
| "attention-color": "#913CA0" | |
| }, | |
| "old_minor": { | |
| "tertiary-background-color": "@rc_dark-component-color", | |
| "tertiary-font-color": "@transparent-lightest", | |
| "link-font-color": "@rc_dark-primary-action-color", | |
| "info-font-color": "@rc_dark-secondary-font-color", | |
| "custom-scrollbar-color": "@transparent-darker", | |
| "status-online": "@rc_dark-success-color", | |
| "status-away": "@rc_dark-pending-color", | |
| "status-busy": "@rc_dark-error-color", | |
| "status-offline": "@transparent-darker" | |
| }, | |
| "derivative": { | |
| "default-action-color": "darken(@secondary-background-color, 15%)", | |
| "default-action-contrast": "contrast(@rc_dark-default-action-color, #444444)", | |
| "primary-background-contrast": "contrast(@rc_dark-primary-background-color, #444444)", | |
| "primary-action-contrast": "contrast(@rc_dark-primary-action-color, #444444)", | |
| "secondary-background-contrast": "contrast(@rc_dark-secondary-background-color, #444444)", | |
| "secondary-action-contrast": "contrast(@rc_dark-secondary-action-color, #444444)", | |
| "selection-background": "darken(@rc_dark-selection-color, 30%)", | |
| "success-background": "darken(@rc_dark-success-color, 45%)", | |
| "success-border": "lighten(@rc_dark-success-color, 30%)", | |
| "error-background": "darken(@rc_dark-error-color, 45%)", | |
| "error-border": "lighten(@rc_dark-error-color, 30%)", | |
| "error-contrast": "contrast(@rc_dark-error-color)", | |
| "pending-background": "darken(@rc_dark-pending-color, 45%)", | |
| "pending-border": "lighten(@rc_dark-pending-color, 30%)" | |
| }, | |
| "overrides": { | |
| "rc-color-alert-message-primary": "var(--rc-color-rc_dark-button-primary)", | |
| "rc-color-alert-message-primary-background": "#282F3D", | |
| "rc-color-alert-message-secondary": "#7ca52b", | |
| "rc-color-alert-message-secondary-background": "#2F4011", | |
| "rc-color-alert-message-warning": "#d52d24", | |
| "rc-color-alert-message-warning-background": "#582626", | |
| "status-online": "var(--rc-color-rc_dark-success)", | |
| "status-away": "var(--rc-color-rc_dark-alert)", | |
| "status-busy": "var(--rc-color-rc_dark-error)", | |
| "status-invisible": "var(--color-gray-medium)", | |
| "status-invisible-sidebar": "#AAAAAA", | |
| "button-disabled-background": "#060606", | |
| "button-disabled-text-color": "#555555", | |
| "button-primary-background": "var(--rc-color-rc_dark-button-primary)", | |
| "button-primary-text-color": "var(--color-white)", | |
| "button-cancel-color": "var(--rc-color-rc_dark-error)", | |
| "button-secondary-background": "#323232", | |
| "button-secondary-text-color": "var(--color-dark-medium)", | |
| "input-title-color": "#737373", | |
| "input-text-color": "#C9C9C9", | |
| "input-placeholder-color": "#444444", | |
| "input-icon-color": "#444444", | |
| "input-border-color": "#444444", | |
| "input-description-text-color": "#666666", | |
| "input-error-color": "var(--rc-color-rc_dark-error)", | |
| "popup-list-background": "#181818", | |
| "popup-list-background-hover": "#212121", | |
| "popup-list-selected-background": "#313131", | |
| "popup-list-name-color": "#C9C9C9", | |
| "tags-border-color": "#202020", | |
| "tags-text-color": "#AAAAAA", | |
| "tags-background": "#141414", | |
| "select-avatar-upload-background": "#202020", | |
| "select-avatar-upload-color": "#C9C9C9", | |
| "sidebar-background": "var(--rc-color-rc_dark-primary)", | |
| "sidebar-background-hover": "var(--rc-color-rc_dark-primary-dark)", | |
| "sidebar-background-light": "var(--rc-color-rc_dark-primary-lightest)", | |
| "sidebar-background-light-hover": "var(--rc-color-rc_dark-primary-light)", | |
| "sidebar-flex-search-background": "#141414", | |
| "sidebar-flex-search-placeholder-color": "#444444", | |
| "sidebar-account-username-color": "var(--color-white)", | |
| "sidebar-account-username-color-darker": "#666666", | |
| "sidebar-account-status-color": "var(--color-gray)", | |
| "sidebar-item-text-color": "var(--color-gray)", | |
| "sidebar-item-hover-background": "var(--rc-color-rc_dark-primary-darkest)", | |
| "sidebar-item-active-background": "var(--rc-color-rc_dark-primary-dark)", | |
| "sidebar-item-active-color": "var(--sidebar-item-text-color)", | |
| "sidebar-item-unread-color": "var(--color-white)", | |
| "sidebar-item-popup-background": "#555555", | |
| "modal-back-button-color": "var(--color-gray)", | |
| "create-channel-title-color": "#DDDDDD", | |
| "create-channel-description-color": "var(--color-gray)", | |
| "toolbar-placeholder-color": "var(--color-gray)", | |
| "rooms-list-title-color": "var(--color-gray)", | |
| "rooms-list-empty-text-color": "var(--color-gray)", | |
| "chip-background": "#222222", | |
| "badge-text-color": "var(--color-white)", | |
| "badge-background": "var(--rc-color-rc_dark-primary-dark)", | |
| "badge-unread-background": "var(--rc-color-rc_dark-button-primary)", | |
| "message-box-placeholder-color": "#444444", | |
| "message-box-markdown-color": "var(--color-gray)", | |
| "message-box-markdown-hover-color": "#999999", | |
| "message-box-user-typing-color": "#888888", | |
| "message-box-user-typing-user-color": "#AAAAAA", | |
| "message-box-container-border-color": "#444444", | |
| "message-box-editing-color": "#604408", | |
| "message-box-popover-title-text-color": "var(--color-gray)", | |
| "header-toggle-favorite-color": "#444444", | |
| "header-toggle-favorite-star-color": "var(--rc-color-rc_dark-alert-light)", | |
| "header-title-username-color-darker": "#CCCCCC", | |
| "header-title-status-color": "var(--color-gray)", | |
| "header-background-color": "#222222", | |
| "flex-nav-background": "#161616", | |
| "tooltip-background": "#000000", | |
| "tooltip-text-color": "var(--color-white)", | |
| "alerts-background": "#1d73f5", | |
| "alerts-color": "var(--color-white)" | |
| } | |
| }, | |
| "additional_less": "/** ----------------------------------------------------------------------------\n * Classes for variables\n */\n\n// Major colors\n\n.content-background-color {\n background-color: @rc_dark-content-background-color;\n}\n\n.color-content-background-color {\n color: @rc_dark-content-background-color;\n}\n\n.primary-background-color {\n background-color: @rc_dark-primary-background-color;\n}\n\n.color-primary-font-color {\n color: @rc_dark-primary-font-color;\n}\n&.color-primary-font-color {\n color: @rc_dark-primary-font-color;\n}\n\n.color-primary-action-color {\n color: @rc_dark-primary-action-color;\n}\n\n.background-primary-action-color {\n background-color: @rc_dark-primary-action-color;\n}\n\n.secondary-background-color {\n background-color: @rc_dark-secondary-background-color;\n}\n\n.border-secondary-background-color {\n border-color: @rc_dark-secondary-background-color;\n}\n\n.secondary-font-color {\n color: @rc_dark-secondary-font-color;\n}\n\n.border-component-color {\n border-color: @rc_dark-component-color;\n}\n\n.background-component-color {\n background-color: @rc_dark-component-color;\n}\n\n.color-component-color {\n color: @rc_dark-component-color;\n}\n\n.success-color {\n color: @rc_dark-success-color;\n}\n\n.pending-color {\n color: @rc_dark-pending-color;\n}\n\n.pending-background {\n background-color: @rc_dark-pending-background;\n}\n\n.pending-border {\n border-color: @rc_dark-pending-border;\n}\n\n.error-color {\n color: @rc_dark-error-color;\n}\n\n.background-error-color {\n background-color: @rc_dark-error-color;\n}\n\n.color-info-font-color {\n color: @rc_dark-info-font-color;\n}\n\n.background-info-font-color {\n background-color: @rc_dark-info-font-color;\n}\n\n.background-attention-color {\n background-color: @rc_dark-attention-color;\n}\n\n// Minor Colors\n\n.tertiary-background-color {\n background-color: @rc_dark-tertiary-background-color;\n}\n\n.border-tertiary-background-color {\n border-color: @rc_dark-tertiary-background-color;\n}\n\n// Derivative Colors\n\n.color-tertiary-font-color {\n color: @rc_dark-tertiary-font-color;\n}\n\n.error-background {\n background-color: @rc_dark-error-background;\n}\n\n.error-border {\n border-color: @rc_dark-error-border;\n}\n\n.color-error-contrast {\n color: @rc_dark-error-contrast;\n}\n\n/** ----------------------------------------------------------------------------\n * Override hardcoded components\n */\n\n.contextual-bar {\n background-color: #161616;\n}\n\n.rc-user-info-container {\n background-color: #161616;\n}\n\n.rc-user-info-details {\n background-color: #101010;\n\n .rc-user-info-details__info {\n color: @rc_dark-primary-font-color;\n }\n}\n\n.rc-button {\n color: rgba(255, 255, 255, 0.9);\n border-color: rgba(255, 255, 255, 0.9);\n}\n\n.attachments__item {\n .attachments__name {\n color: #DDDDDD;\n }\n\n &:hover {\n background-color: #222222;\n }\n}\n\n.rc-switch-double {\n color: @rc_dark-primary-font-color;\n}\n\n.rc-switch--blue .rc-switch__button {\n background-color: #111111;\n}\n\n.rc-switch--blue .rc-switch__input:checked + .rc-switch__button {\n background-color: var(--button-primary-background);\n}\n\n.rc-switch__text {\n color: @rc_dark-primary-font-color;\n}\n\n.rc-old blockquote::before {\n background-color: #444444;\n}\n\n.message-actions {\n color: #888888;\n}\n\n.reply-preview {\n background-color: #111111;\n}\n\n.toolbar .rc-input__element {\n background-color: #111111;\n}\n\n.rc-table {\n color: @rc_dark-primary-font-color;\n}\n\n.rc-table-body .rc-table-tr:hover {\n background-color: #111111;\n}\n\n.code-colors {\n background-color: #999999;\n border-color: #555555;\n}\n\n.rc-form-legend {\n color: #AAAAAA;\n}\n\n.sidebar-light .sidebar-item {\n color: #CCCCCC;\n}\n\n.rc-form-label {\n color: #CCCCCC;\n}\n\n.admin-table-row {\n background-color: transparent;\n}\n\n.admin-table-row:nth-of-type(2n) {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.rc-old .page-settings .section {\n background-color: #161616;\n border-color: #444444;\n}\n\n.flex-tab-bar .tab-button-icon {\n color: #AAAAAA;\n fill: #AAAAAA;\n}\n\n.admin-integrations-new-panel .admin-integrations-new-item {\n border-color: #333333;\n\n &:hover {\n background-color: #222222;\n }\n}\n\n.message.new-day.first-unread::after {\n border-color: @rc_dark-error-color;\n}\n\n.first-unread .body::after {\n background-color: @rc_dark-content-background-color;\n}\n\n.messages-box .new-message {\n color: #FFFFFF !important;\n}\n\n.message .reactions > li {\n background-color: #333333;\n border-color: #444444;\n\n &.selected {\n background-color: @rc_dark-primary-action-color;\n border-color: #FFFFFF;\n color: #FFFFFF;\n }\n}\n\n&~.rc-popover,\n&~.rc-popover__content {\n .rc-input__wrapper {\n color: #AAAAAA;\n }\n\n .rc-input__element {\n color: #AAAAAA;\n border-color: #AAAAAA;\n }\n}\n\n&~.emoji-picker .filter-item {\n border-color: #444444;\n\n &:hover {\n border-color: #666666;\n }\n\n &.active {\n border-color: @rc_dark-primary-action-color;\n }\n}\n\n&~.rc-modal-wrapper {\n background-color: rgba(12, 12, 15, 0.8);\n\n .rc-modal {\n background-color: #090909;\n color: #AAAAAA;\n\n .rc-modal__footer {\n background-color: #0C0C0C;\n color: #CCCCCC;\n }\n\n .rc-button {\n color: #CCCCCC;\n }\n\n .rc-input__element {\n color: #AAAAAA;\n }\n }\n}\n\n&~.connection-status .alert-warning {\n color: #FFB128;\n background-color: #48391F;\n}\n\n/** ----------------------------------------------------------------------------\n * Special components\n */\n\n.filter-item {\n &:hover {\n border-color: @rc_dark-info-font-color;\n }\n\n &.active {\n border-color: @rc_dark-primary-background-color;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Document components\n */\n\n.page-container {\n tr:hover td {\n background-color: @rc_dark-content-background-color;\n }\n}\n\n.burger i {\n background-color: @rc_dark-primary-font-color;\n}\n\n/** ----------------------------------------------------------------------------\n * Forms\n */\n\ninput,\nselect,\ntextarea {\n color: @rc_dark-primary-font-color;\n border-color: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 10%);\n\n &::placeholder {\n color: mix(@rc_dark-primary-font-color, @rc_dark-content-background-color, 75%);\n }\n\n &[disabled] {\n background-color: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 10%);\n }\n}\n\n.disabled label,\n[disabled] label {\n color: mix(@rc_dark-primary-font-color, @rc_dark-content-background-color, 75%);\n}\n\n.-autocomplete-container {\n background-color: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 10%);\n}\n\n.-autocomplete-item.selected {\n background-color: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 20%);\n}\n\n.rc-old input[type='button'],\n.rc-old input[type='submit'] {\n color: @rc_dark-primary-font-color;\n background: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 10%);\n border-color: mix(contrast(@rc_dark-content-background-color), @rc_dark-content-background-color, 10%);\n}\n\n.toolbar-search__input {\n &:focus {\n border-color: fade(@rc_dark-primary-background-contrast, 50%);\n }\n}\n\n.toolbar-search__buttons i:hover {\n color: fade(@rc_dark-primary-background-contrast, 50%);\n}\n\n.input-line {\n &.setting-changed > label {\n color: @rc_dark-selection-color;\n }\n}\n\ninput:-webkit-autofill {\n color: @rc_dark-primary-font-color !important;\n}\n\n.input {\n &.radio {\n label {\n &::before {\n border-color: lighten(@rc_dark-secondary-background-contrast, 30%);\n background-color: @rc_dark-content-background-color;\n }\n\n &::after {\n background-color: @rc_dark-secondary-background-contrast;\n }\n }\n }\n\n &.checkbox.toggle {\n input:checked + label::before {\n background-color: @rc_dark-secondary-background-contrast;\n }\n\n input:disabled + label::before {\n background-color: lighten(@rc_dark-secondary-background-contrast, 50%) !important;\n }\n\n label {\n &::before {\n background-color: lighten(@rc_dark-secondary-background-contrast, 30%);\n }\n\n &::after {\n background-color: @rc_dark-content-background-color;\n }\n\n &:hover {\n &::before {\n background-color: lighten(@rc_dark-secondary-background-contrast, 20%);\n }\n }\n }\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Misc typography variants\n */\n\n.message,\n.flex-tab {\n a i,\n a[class^='icon-'] {\n color: @rc_dark-primary-font-color;\n\n &:hover {\n color: darken(@rc_dark-primary-font-color, 10%);\n }\n }\n}\n\n.error {\n border-color: @rc_dark-error-color;\n}\n\n/** ----------------------------------------------------------------------------\n * Admin and settings styles\n */\n\n.page-list,\n.page-settings {\n a:not(.rc-button) {\n color: @rc_dark-primary-font-color;\n\n &:hover {\n color: @rc_dark-primary-action-color;\n }\n }\n}\n\n.new-logs {\n background: @rc_dark-primary-action-contrast;\n}\n\n.avatar-suggestion-item {\n .question-mark::before {\n color: @rc_dark-secondary-font-color;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Asides (external to main application views)\n */\n\n.full-page,\n.page-loading {\n a {\n color: @rc_dark-tertiary-font-color;\n }\n\n a:hover {\n color: @rc_dark-primary-background-contrast;\n }\n}\n\n#login-card {\n .input-text {\n input:-webkit-autofill {\n -webkit-box-shadow: 0 0 0 20px @rc_dark-content-background-color inset;\n }\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Room components\n */\n\n.toggle-favorite {\n color: @rc_dark-component-color;\n}\n\n.upload-progress-progress {\n background-color: @rc_dark-success-background;\n}\n\n.messages-container {\n .edit-room-title {\n color: @rc_dark-secondary-font-color;\n\n &:hover {\n color: @rc_dark-primary-font-color;\n }\n }\n\n .footer {\n background: @rc_dark-content-background-color;\n }\n}\n\n.message-form {\n .message-buttons {\n .buttonColors(lighten(@rc_dark-primary-font-color, 25%), @rc_dark-secondary-background-color);\n\n &:hover {\n background-color: mix(@rc_dark-secondary-background-color, contrast(@rc_dark-primary-font-color), 20%);\n }\n }\n\n .message-form-text {\n &.editing {\n background-color: lighten(@rc_dark-pending-color, 40%);\n }\n }\n}\n\n.message.editing {\n background-color: #644B1F;\n}\n\n.rc-old {\n & .popup-item {\n &.selected {\n color: @rc_dark-primary-action-contrast;\n background-color: @rc_dark-primary-action-color;\n }\n }\n}\n\n.messages-box {\n &.selectable .selected {\n background-color: @rc_dark-selection-background;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Message content\n */\n\n.message {\n &.new-day::before {\n background-color: @rc_dark-content-background-color;\n }\n\n &.new-day::after {\n border-color: #282828;\n }\n\n .message-dropdown,\n .options-menu {\n color: lighten(@rc_dark-primary-font-color, 13%);\n\n ul li:hover {\n background-color: @rc_dark-tertiary-background-color;\n }\n }\n\n .is-bot,\n .role-tag {\n color: contrast(@rc_dark-info-font-color);\n }\n\n a {\n color: @rc_dark-link-font-color;\n\n &:hover {\n color: darken(@rc_dark-link-font-color, 10%);\n }\n }\n\n .mention-link {\n &.mention-link-me {\n color: @rc_dark-primary-action-contrast;\n }\n\n &.mention-link-all {\n color: @rc_dark-primary-action-contrast;\n }\n }\n\n .highlight-text {\n background-color: @rc_dark-selection-background;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Side nav\n */\n.side-nav {\n .arrow::before,\n .arrow::after {\n background-color: @rc_dark-tertiary-font-color;\n }\n\n .has-alert .name {\n color: @rc_dark-primary-background-contrast;\n }\n\n .unread {\n color: @rc_dark-success-color;\n border: 1px solid @rc_dark-success-color;\n }\n\n .unread.unread-mention {\n background-color: @rc_dark-success-color;\n color: contrast(@rc_dark-success-color, #000000, #ffffff, 50%);\n }\n\n .button {\n .buttonColors(@rc_dark-tertiary-font-color, mix(@rc_dark-primary-action-color, @rc_dark-primary-background-color));\n }\n\n .options button {\n .buttonColors(@rc_dark-tertiary-font-color, @rc_dark-primary-background-color);\n }\n}\n\n.sidebar-item__last-message {\n a:not(.mention-link) {\n color: @rc_dark-link-font-color;\n\n &:hover {\n color: darken(@rc_dark-link-font-color, 10%);\n }\n }\n}\n\n.message-popup.search-results-list {\n background-color: lighten(@rc_dark-primary-background-color, 2.5%);\n}\n\n.rc-member-list__counter {\n color: #AAAAAA;\n}\n\n.rc-member-list__user:hover {\n background-color: #222222;\n}\n\n/** ----------------------------------------------------------------------------\n * Flex tabs / admin fly-out panels\n */\n.flex-tab {\n .message {\n &.new-day::before {\n background-color: #161616;\n }\n }\n\n .channel-settings {\n .buttons {\n .button {\n .buttonColors(lighten(@rc_dark-primary-font-color, 25%), @rc_dark-secondary-background-color);\n }\n }\n\n .input.checkbox.toggle {\n input:checked + label::before {\n background-color: @rc_dark-primary-background-color;\n }\n }\n }\n}\n\n.flex-tab-bar {\n .tab-button {\n &:hover {\n background-color: @rc_dark-secondary-background-color;\n }\n\n &.active {\n background-color: @rc_dark-secondary-background-color;\n border-right-color: @rc_dark-selection-color;\n }\n }\n\n .counter {\n background: @rc_dark-secondary-font-color;\n color: #111111;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * User status / user meta\n */\ni.status-online {\n color: @rc_dark-status-online;\n}\n\n.status-bg-online {\n background-color: @rc_dark-status-online;\n}\n\n.account-box .status-online .thumb::after,\n.account-box .status.online::after,\n.popup-user-status-online,\n.status-online::after,\n.user-image.status-online .avatar::after {\n background-color: @rc_dark-status-online;\n border-color: darken(@rc_dark-status-online, 10%);\n}\n\ni.status-away {\n color: @rc_dark-status-away;\n}\n\n.status-bg-away {\n background-color: @rc_dark-status-away;\n}\n\n.account-box .status-away .thumb::after,\n.account-box .status.away::after,\n.popup-user-status-away,\n.status-away::after,\n.status-pending::after,\n.user-image.status-away .avatar::after {\n background-color: @rc_dark-status-away;\n border-color: darken(@rc_dark-status-away, 10%);\n}\n\ni.status-busy {\n color: @rc_dark-status-busy;\n}\n\n.status-bg-busy {\n background-color: @rc_dark-status-busy;\n}\n\n.account-box .status-busy .thumb::after,\n.account-box .status.busy::after,\n.popup-user-status-busy,\n.status-busy::after,\n.user-image.status-busy .avatar::after {\n background-color: @rc_dark-status-busy;\n border-color: darken(@rc_dark-status-busy, 10%);\n}\n\ni.status-offline {\n color: @rc_dark-status-offline;\n}\n\n.status-bg-offline {\n background-color: @rc_dark-status-offline;\n}\n\n.popup-user-status-offline,\n.status-offline::after,\n.user-image.status-offline .avatar::after {\n background-color: @rc_dark-status-offline;\n border-color: darken(@rc_dark-status-offline, 10%);\n}\n\n/** ----------------------------------------------------------------------------\n * Buttons!\n */\n.actionLinks li .action-link {\n .buttonColors(@rc_dark-primary-action-contrast, @rc_dark-primary-action-color);\n}\n\n// new layout buttons\n\n.button {\n .buttonColors(@rc_dark-default-action-contrast, @rc_dark-default-action-color);\n\n &.primary {\n .buttonColors(@rc_dark-primary-action-contrast, @rc_dark-primary-action-color);\n\n &[disabled] {\n background-color: lighten(desaturate(@rc_dark-primary-action-color, 50%), 30%);\n }\n }\n\n &.secondary {\n .buttonColors(@rc_dark-secondary-action-contrast, @rc_dark-secondary-action-color);\n\n &[disabled] {\n background-color: lighten(desaturate(@rc_dark-secondary-action-color, 50%), 30%);\n }\n }\n\n &.tertiary {\n .buttonColors(@rc_dark-primary-action-contrast, @rc_dark-selection-color);\n\n &[disabled] {\n background-color: lighten(desaturate(@rc_dark-selection-color, 50%), 30%);\n }\n }\n\n &.danger {\n .buttonColors(@rc_dark-error-contrast, @rc_dark-error-color);\n\n &[disabled] {\n background-color: lighten(desaturate(@rc_dark-error-color, 50%), 30%);\n }\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Feedback and overlay content\n */\n\n.alert-warning {\n color: darken(@rc_dark-pending-color, 25%);\n background-color: @rc_dark-pending-background;\n}\n\n.alert-link {\n color: @rc_dark-link-font-color;\n\n &:hover {\n color: darken(@rc_dark-link-font-color, 10%);\n }\n}\n\nlabel.required::after {\n color: @rc_dark-error-color;\n}\n\n/** ----------------------------------------------------------------------------\n * Loading\n */\n\n.main-content,\n.flex-tab {\n .loading-animation > .bounce {\n background-color: @rc_dark-primary-font-color;\n }\n}\n\n.loading-animation.loading-animation--primary > .bounce {\n background-color: @rc_dark-primary-font-color;\n}\n\n@keyframes blink {\n from {\n color: @rc_dark-selection-color;\n }\n\n to {\n opacity: inherit;\n }\n}\n\n/** ----------------------------------------------------------------------------\n * Input Range Slider\n */\n\n.range-slider-range::-webkit-slider-thumb {\n background-color: @rc_dark-primary-background-color;\n}\n\n.range-slider-range::-webkit-slider-thumb:hover {\n background-color: darken(@rc_dark-success-color, 30%);\n}\n\n.range-slider-range:active::-webkit-slider-thumb {\n background-color: darken(@rc_dark-success-color, 10%);\n}\n\n.range-slider-range::-moz-range-thumb {\n background-color: @rc_dark-primary-background-color;\n}\n\n.range-slider-range::-moz-range-thumb:hover {\n background-color: darken(@rc_dark-success-color, 30%);\n}\n\n.range-slider-range:active::-moz-range-thumb {\n background-color: darken(@rc_dark-success-color, 10%);\n}\n\n.range-slider-value {\n color: lighten(@rc_dark-tertiary-background-color, 50%);\n background-color: @rc_dark-primary-background-color;\n}\n\n.range-slider-value::after {\n border-right-color: @rc_dark-primary-background-color;\n}\n\n.range-slider-range::-moz-range-track {\n background-color: @rc_dark-tertiary-background-color;\n}\n\n.announcement {\n background-color: @rc_dark-primary-background-color;\n border-color: @rc_dark-primary-action-color;\n &.warning {\n background-color: var(--rc-color-rc_dark-alert);\n }\n &.error {\n background-color: var(--rc-color-rc_dark-alert-message-warning);\n }\n} & ~ .rc-popover__content,\n& ~ .rc-popover {\n --popover-background: #242424;\n --popover-title-color: #DDDDDD;\n --popover-item-color: #DDDDDD;\n --popover-divider-color: #333333;\n}", | |
| "additional_css": "" | |
| } |
This file contains 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
| _id => the theme ID | |
| name => the display name for the theme | |
| description => a description for the theme (perhaps for an author) | |
| variables { | |
| main => these are from variables.css and will be prepended with --rc-color-THEMEID- | |
| they are editable like the current colors are in Layout | |
| old_major => currently seen in variables.js, also editable | |
| old_minor => currently seen in variables.js, also editable | |
| derivative => seen in colors.less / colors-dark.less, prepended with @THEMEID-, not editable | |
| overrides => these edit the value of other css variables within the theme's scope | |
| as seen in variables.css, not editable | |
| } | |
| additional_less => speaks for itself, itll just be extra LESS to add | |
| additional_css => speaks for itself, extra CSS to add (can be edited) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment