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;
}