Dark Mode with CSS
Add this custom CSS to your website to make plugin appear in dark mode.
This is just example and you can modify or improve it in your own way.
:root{ --main-bm-color: #ffffff; --main-bm-bg-color: #1d2333; } .bp-messages-wrap { border: none; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .06) !important; color: white !important; } .bp-messages-wrap h3, .bp-messages-wrap h4{ color: white; } .bp-messages-wrap label{ color: white; } .bp-messages-user-list{ background-color: #1d2333; color: white; } .bp-messages-wrap.bp-messages-mobile .reply .send button[type=submit], .bp-messages-wrap.bp-messages-mobile .reply .send button.bpbm-record-voice-button{ background-color: #1d2333 !important; } #bp-better-messages-mini-mobile-container, #bp-better-messages-mobile-view-container, #bp-better-messages-mini-mobile-open{ background-color: #1d2333 !important; } .bp-messages-user-list .user, .bp-messages-user-list .user *{ color: white; } .bp-messages-wrap .chat-header .bpbm-search form .close i { color: black !important; } .bp-messages-wrap .threads-list .thread .info > *{ color: white; } .bp-messages-wrap.bp-better-messages-list .tabs { background-color: #1d2333; border-bottom: 1px solid #2f3749; } .bp-messages-wrap.bp-better-messages-list .tabs > div { color: #ffffff; } .bp-messages-wrap.bp-better-messages-list .tabs > div .fas { color: #ffffff; } .bp-messages-wrap.bp-better-messages-list .tabs > div.active { background-color: #343c52; } .bp-messages-wrap.bp-better-messages-list .tabs-content { background-color: #21283b; } .bp-messages-wrap.bp-better-messages-list .tabs-content .bp-messages-user-list { background-color: #21283b; } .bp-messages-wrap.bp-better-messages-list .tabs-content .bp-messages-user-list .user .name { color: #ffffff; } .bp-messages-wrap.bp-better-messages-list .tabs-content .bp-messages-user-list .user .actions .fas { color: #ffffff; } .bp-messages-wrap .chat-header { border-bottom: 1px solid #2f3749 !important; background-color: #21283b !important; color: #ffffff !important; } .bp-messages-wrap .chat-footer { border-top: 1px solid #2f3749; background-color: #21283b; } .bp-messages-wrap .chat-header .bpbm-search form input { border: 1px solid #3f485f; background-color: #1d2333; } .bp-messages-wrap .chat-header .bpbm-search form input:focus { border-color: #7750f8; box-shadow: none; } .bp-messages-wrap .chat-header .fas, .bp-messages-wrap .chat-header .far { color: #ffffff; } .bp-messages-wrap .chat-header .starred-messages { color: #ffffff !important; } .bp-messages-wrap .chat-header .bpbm-deleted-user-link, .bp-messages-wrap .chat-header .user { color: #ffffff !important; } .bp-messages-wrap .chat-footer .fas, .bp-messages-wrap .chat-footer .far { color: #ffffff; } .bp-messages-wrap .bp-messages-side-threads { border-right: 1px solid #2f3749; } .bp-messages-wrap .bpbm-os-theme-dark > .bpbm-os-scrollbar > .bpbm-os-scrollbar-track { background-color: #1d2333; } .bp-messages-wrap .bpbm-os-theme-dark > .bpbm-os-scrollbar > .bpbm-os-scrollbar-track > .bpbm-os-scrollbar-handle { background-color: #adafca; opacity: .4; } .bp-messages-wrap .threads-list .thread > * { border-bottom: none; } .bp-messages-wrap .threads-list .thread:hover { background-color: #293249; } .bp-messages-wrap .threads-list .thread:hover > * { background-color: #293249; } .bp-messages-wrap .threads-list .thread.bp-messages-active-thread { background-color: #293249; } .bp-messages-wrap .threads-list .thread.unread { background-color: #21283b; } .bp-messages-wrap .threads-list .thread .time { color: #9aa4bf; } .bp-messages-wrap .threads-list .thread .time .delete { color: #ffffff; } .bp-messages-wrap .threads-list .thread .deleted { color: #ffffff; background-color: #1d2333 !important; } .bp-messages-wrap .list .messages-stack .content .info .time { color: #9aa4bf; } .bp-messages-wrap .list .messages-stack .content .messages-list .message-content { color: #ffffff; } .bp-messages-wrap .reply { background-color: #21283b !important; border-top: 1px solid #262d3f !important; } .bp-messages-wrap .reply .send button[type="submit"] { color: #ffffff; } .bp-messages-wrap .empty { color: #ffffff; } .bp-messages-wrap .bpbm-user-options .bpbm-user-option .bpbm-user-option-description { color: #9aa4bf; } .bp-messages-wrap div.new-message form > div > input[type="text"], .bp-messages-wrap div.bulk-message form > div > input[type="text"] { border: 1px solid #3f485f !important; background-color: #1d2333!important; box-shadow: none!important; } .bp-messages-wrap .taggle_input{ color: white !important; } .bp-messages-wrap div.new-message form > div > input[type="text"]:focus, .bp-messages-wrap div.bulk-message form > div > input[type="text"]:focus { border-color: #ffffff !important; color:white !important; box-shadow: none !important; } .bp-messages-wrap div.new-message form button[type="submit"], .bp-messages-wrap div.bulk-message form button[type="submit"] { background-color: #ffffff!important; color: #000!important; } .bp-messages-wrap div.new-message form button[type="submit"]:hover, .bp-messages-wrap div.bulk-message form button[type="submit"]:hover { } .bp-messages-wrap div.bulk-message .box { padding: 0; background-color: #1d2333; } .bp-messages-wrap div.bulk-message .box ul.send-to li p, .bp-messages-wrap div.bulk-message .box ul.options li p { color: #9aa4bf; } .bp-messages-wrap div.bulk-message .progress { border: none !important; background-color: #21283b !important; } .bp-messages-wrap div.bulk-message .progress .progress-text { color: #ffffff; } .bp-messages-wrap .taggle_list { border: 1px solid #3f485f; background-color: #1d2333; box-shadow: none; } .bp-messages-wrap .active .taggle_list { border-color: #7750f8; box-shadow: none; } .bp-messages-wrap .bp-emojionearea { background-color: #1d2333; border: 1px solid #3f485f; color: #ffffff; box-shadow: none; } .bp-messages-wrap .bp-emojionearea.focused { border-color: white; box-shadow: none; } .bp-messages-wrap .bp-emojionearea .bp-emojionearea-editor:empty::before { color: #9aa4bf; } .bp-messages-wrap .bpbm-user-options .bpbm-user-option, .bp-messages-wrap .bpbm-user-option-title{ color: white; } .bp-better-messages-list .tabs>div[data-tab=messages] .unread-count, .bp-better-messages-mini .chats .chat .head .unread-count{ background: #3c496a !important; } .bp-messages-group-list { background: #21283b; color: white; } .bp-messages-group-list .group .actions > a{ color: white; } .bp-better-messages-list, .bp-better-messages-mini .chats .chat{ background: #21283b; color: white; box-shadow: none; border: 1px solid #262d3f !important; } .bp-better-messages-mini .chats .chat .head{ background: #1d2333; border-bottom: 1px solid #262d3f; } .bp-messages-wrap .expandingButtons .bpbm-dropdown-menu{ color: #ffffff; background-color: #21283b; border: 1px solid #2b3345; } .bp-messages-wrap .expandingButtons .bpbm-dropdown-menu .bpbm-dropdown-item{ color: white; } .bpbm-gifs-selector .bpbm-gifs-head, .bpbm-stickers-selector .bpbm-stickers-search, .bpbm-gifs-selector .bpbm-gifs-head .bpbm-gifs-tabs, .bpbm-stickers-selector .bpbm-stickers-head .bpbm-stickers-tabs, .bpbm-stickers-selector .bpbm-stickers-head{ border-color: #2b3345; } .bpbm-gifs-selector, .bpbm-stickers-selector { background: #1d2333; border-color: #2b3345; } .bp-better-messages-mini .chats .chat .head.blink { background: #343c51; } .bp-messages-group-list .group .loading, .bp-messages-user-list .user .loading, .bp-messages-wrap .threads-list .thread .loading { background: #1d2333; } .bp-messages-wrap .threads-list .thread .deleted a{ color: white; font-weight: bold; } .bp-messages-wrap .bp-verified-badge{ background-color: #1DA1F2 !important; } .bp-messages-wrap .chat-footer .bpbm-user-me .bpbm-user-me-popup { background: #1d2333; border: 1px solid #2d3447; box-shadow: none !important; } .bp-messages-wrap .ui-state-active, .bp-messages-wrap .ui-widget-content .ui-state-active, .bp-messages-wrap .ui-widget-header .ui-state-active, .bp-messages-wrap .ui-widget-content { background: #21283b; color: #fff; box-shadow: none !important; } .uppy-Dashboard-browse{ text-decoration: underline; } .uppy-Dashboard--modal .uppy-Dashboard-overlay{ background-color: hsl(224deg 28% 18% / 43%); } .uppy-Dashboard-innerWrap, .uppy-Dashboard-filesContainer { background: #21283b; color: white; } .bpbm-send-files { background-color: #1c212f; } .uppy-Dashboard--wide .uppy-DashboardItem-name, .uppy-Dashboard--wide .uppy-DashboardTabs-title, .uppy-Dashboard-dropFilesTitle{ color: white; } .uppy-Dashboard-bgIcon .UppyIcon { stroke: #ffffff; } .bp-messages-wrap #send-to .ui-autocomplete li { color: white; } .bp-messages-wrap .taggle_list .taggle { background: #373f54; } .bp-messages-wrap .taggle_list .taggle:hover { background: #57627c; } .bp-messages-wrap .list .messages-stack .content .messages-list > li.selected { background: #474f66; } .bp-messages-wrap .writing{ background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #21283b 100%); } .bpbm-preview-message { border-top: 1px solid #2f3749; background: #1d2333; } .bpbm-context-menu-list { background: #1d2333 !important; border-color: #2f3749 !important; color: white; } .bpbm-context-menu-item { background: #1d2333 !important; color: white; } .bp-messages-wrap .bp-emojionearea .bp-emojionearea-editor{ color: white; } .bp-messages-wrap.bpbm-template-modern .list .messages-stack.incoming .content .messages-list li .message-content { border-color: #404e72; background: #404e72; } .bp-messages-wrap .thread-not-selected .empty .bpbm-empty-link a{ color: white; } .bp-messages-wrap.bp-messages-mobile .reply .message .bpbm-medium-editor-element{ background-color: #1d2333; border: 1px solid #3f485f; color: white; } .bp-messages-wrap div.new-message h4{ color: white; } .bmselectise-input{ background: #1d2333 !important; border-color: #3f485f !important; } #send-to-bmselectised{ background: none !important; color: white !important; } .bmselectise-input.input-active{ box-shadow: none !important; } .bmselectise-dropdown{ box-shadow: none !important; background: #1d2333; border-color: white !important; } .bmselectise-dropdown .bmselectise-dropdown-content > div{ color: white !important; } .bmselectise-control.multi .bmselectise-input > div, .bmselectise-control.multi .bmselectise-input > div.active{ background: #3d4760; color: #ffffff; } .bp-messages-wrap a{ color: white !important; } .bp-messages-wrap .chat-tabs { background: #21283b; } .bp-messages-wrap .chat-tabs > div.active{ background: #1d2334; } .bp-messages-wrap .chat-tabs.chat-tabs-border-bottom > div { border-bottom: 1px solid #2f3749; } .bp-messages-wrap .chat-tabs.chat-tabs-border-bottom > div.active { border-bottom: 1px solid #55617a; } .bp-messages-side-threads .bpbm-groups-list .bp-messages-group-list, .bp-messages-column .bpbm-groups-list .bp-messages-group-list { background: #1d2333; } .bp-messages-wrap .chat-tabs.bpbm-mobile-only.chat-tabs-border-top > div{ border-color: #2f3749 !important; } .bp-messages-wrap .chat-tabs.bpbm-mobile-only.chat-tabs-border-top > div.active{ border-color: #505a72 !important; } .bp-messages-wrap .bpbm-user-options button{ color: black !important; } .bpbm-checkbox:checked + label::before{ background-color: transparent !important; } .bp-messages-wrap .bm-medium-editor-mention-at{ color: inherit !important } .bp-messages-wrap .chat-footer .bpbm-user-me .bpbm-user-me-popup .bpbm-user-me-popup-list .bpbm-user-me-popup-list-item + .bpbm-user-me-popup-list-hr { border-bottom: 1px solid #293042; } .bp-messages-wrap.bpbm-template-modern .list .messages-stack .bpbm-replied-message .bpbm-replied-message-name{ color: black !important; } .bp-messages-wrap.bpbm-template-modern .list .messages-stack .bpbm-replied-message{ border-color: black !important; } .bp-messages-wrap .bpbm-user-options .bpbm-user-option-toggle label{ color: white !important; }