@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/dist/esm/index.d.css

@@ -1,270 +1,3 @@
-.tui-conversation {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-}
-[data-uikit-theme=light] .tui-conversation {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-uikit-theme=dark] .tui-conversation {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-.tui-conversation .tui-conversation-header {
-  display: flex;
-  padding: 10px 20px;
-}
-.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-}
-.tui-conversation .no-result {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.tui-conversation .no-result-icon {
-  margin: 100px auto 50px;
-}
-.tui-conversation .no-result-message {
-  color: #999;
-  font-weight: 400;
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
-}
-
-.tui-conversation-h5 .tui-conversation-header {
-  padding: 10px;
-}
-.tui-conversation-h5 .conversation-list-container .conversation-preview-container {
-  padding: 0 10px;
-}
-.tui-kit-avatar {
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-.tui-kit-avatar.circle .avatar-image {
-  border-radius: 50%;
-}
-.tui-kit-avatar.square .avatar-image {
-  border-radius: 4px;
-}
-.tui-kit-avatar img {
-  width: 100%;
-  height: 100%;
-}
-.tui-kit-avatar:hover .tui-kit-avatar-edit {
-  display: flex;
-}
-.tui-kit-avatar-edit {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.33);
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-  display: none;
-  justify-content: center;
-  align-items: center;
-}
-.tui-kit-avatar-list {
-  position: absolute;
-  z-index: 2;
-  top: 100%;
-  background: #FFFFFF;
-  border-radius: 5px;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: 100%;
-  min-width: 200px;
-  max-width: 400px;
-  padding: 10px;
-}
-.tui-kit-avatar-list-item {
-  padding: 10px;
-}
-.tui-kit-avatar-list-item img {
-  width: 40px;
-}
-.conversation-list-container {
-  overflow-x: hidden;
-  height: 100%;
-}
-
-.conversation-preview-container {
-  display: flex;
-  align-items: center;
-  border: none;
-  width: 100%;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
-}
-[data-uikit-theme=light] .conversation-preview-container {
-  background-color: var(--chat-theme-light-bg-primary);
-}
-[data-uikit-theme=dark] .conversation-preview-container {
-  background-color: var(--chat-theme-dark-bg-primary);
-}
-.conversation-preview-container .content {
-  flex: 1 1 auto;
-  text-align: left;
-  margin-left: 10px;
-  min-width: 0;
-}
-.conversation-preview-container .content .title {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 17px;
-  font-family: PingFangSC-Medium;
-  padding: 1px 0;
-  width: 100%;
-}
-[data-uikit-theme=light] .conversation-preview-container .content .title {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-uikit-theme=dark] .conversation-preview-container .content .title {
-  color: var(--chat-theme-dark-text-primary);
-}
-.conversation-preview-container .content .message {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
-}
-[data-uikit-theme=light] .conversation-preview-container .content .message {
-  color: var(--chat-theme-light-text-secondary);
-}
-[data-uikit-theme=dark] .conversation-preview-container .content .message {
-  color: var(--chat-theme-dark-text-secondary);
-}
-.conversation-preview-container .external {
-  text-align: right;
-  flex: 0 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-.conversation-preview-container .external .unread {
-  height: 19px;
-  padding: 1px 0;
-}
-.conversation-preview-container .external .time {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 14px;
-  padding: 1px 0;
-}
-[data-uikit-theme=light] .conversation-preview-container .external .time {
-  color: var(--chat-theme-light-text-secondary);
-}
-[data-uikit-theme=dark] .conversation-preview-container .external .time {
-  color: var(--chat-theme-dark-text-secondary);
-}
-.conversation-preview-container .external .more--hover {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
-}
-.conversation-preview-container .external .more--hover .icon-more {
-  transform: scale(1.5);
-}
-.conversation-preview-container .external .more--hover .more-handle-box {
-  top: 0;
-  right: 0;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  bottom: initial;
-  padding: 14px 0;
-  box-sizing: border-box;
-  text-align: start;
-  white-space: nowrap;
-}
-.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
-  font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 19px;
-  padding: 6px 16px;
-  cursor: pointer;
-  font-weight: 500;
-  box-sizing: border-box;
-}
-[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-light-status-danger);
-}
-[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-dark-status-danger);
-}
-[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background-color: var(--chat-theme-light-bg-active);
-}
-[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background-color: var(--chat-theme-dark-bg-active);
-}
-[data-uikit-theme=light] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-light-bg-active);
-}
-[data-uikit-theme=dark] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-dark-bg-active);
-}
-[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-light-bg-secondary);
-}
-[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-dark-bg-secondary);
-}
-[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-light-bg-active);
-}
-[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-dark-bg-active);
-}
-[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-light-status-info);
-}
-[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--active .title {
-  color: var(--chat-theme-dark-status-info);
-}
-.conversation-preview-container.conversation-preview-content--unread .unread {
-  width: 16px;
-  height: 13px;
-  border-radius: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2px 5px 1px;
-  font-size: 11px;
-  font-weight: 700;
-  margin: 2px 0 2px auto;
-  color: #fff;
-}
-[data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-light-status-danger);
-}
-[data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-dark-status-danger);
-}
 .tui-message-input {
   display: flex;
   flex-direction: column;
@@ -316,10 +49,12 @@
   background: none;
 }
 [data-uikit-theme=light] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-light-text-primary);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-message-input-main .input-box textarea {
-  color: var(--chat-theme-dark-text-primary);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
   border: none;
@@ -400,8 +135,21 @@ ul li {
   padding: 10px 16px;
   min-width: 180px;
 }
-.upload-picker:hover {
-  color: #147aff;
+[data-uikit-theme=light] .upload-picker {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .upload-picker {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .upload-picker:hover {
+  background-color: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .upload-picker:hover {
+  background-color: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 .upload-picker input {
   position: absolute;
@@ -415,10 +163,17 @@ ul li {
 
 .input-quote {
   padding: 7px 16px;
-  background: #f9f9f9;
   display: flex;
   align-items: center;
 }
+[data-uikit-theme=light] .input-quote {
+  background: var(--uikit-theme-light-bg-color-bubble-reciprocal);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .input-quote {
+  background: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
+  transition: background-color 0.3s ease-in-out;
+}
 .input-quote-content {
   flex: 1;
   background: #fff;
@@ -428,7 +183,6 @@ ul li {
   flex-direction: column;
   font-weight: 500;
   font-size: 14px;
-  font-family: PingFangSC-Medium;
   line-height: 17px;
   color: #000;
 }
@@ -450,7 +204,6 @@ ul li {
 }
 
 .tui-forward {
-  background: #fff;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
@@ -458,18 +211,32 @@ ul li {
   width: 300px;
   max-height: 90%;
 }
+[data-uikit-theme=light] .tui-forward {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-forward-header {
   display: flex;
   align-items: center;
   padding: 24px 20px;
 }
+[data-uikit-theme=light] .tui-forward-header {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward-header {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-forward-title {
   padding: 0 16px;
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
-  line-height: 17px;
 }
 .tui-forward-main {
   padding: 0 20px;
@@ -477,13 +244,17 @@ ul li {
   overflow-y: auto;
 }
 .tui-forward-main .no-result {
-  font-family: PingFangSC-Medium;
   font-size: 14px;
-  font-style: normal;
-  line-height: 20px;
   padding: 10px;
   text-align: center;
-  color: #999;
+}
+[data-uikit-theme=light] .tui-forward-main .no-result {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward-main .no-result {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-forward-search {
   padding: 10px 15px;
@@ -492,7 +263,6 @@ ul li {
   padding: 13px 0;
 }
 .tui-forward-list-title {
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
@@ -500,7 +270,6 @@ ul li {
 }
 .tui-forward-list-item {
   padding: 6px 0;
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -514,11 +283,9 @@ ul li {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  width: 100%;
 }
 .tui-forward-list-item .info-nick {
   padding: 0 13px;
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -531,18 +298,24 @@ ul li {
   width: 80%;
 }
 .tui-forward-footer {
-  background: rgba(249, 249, 249, 0.94);
   padding: 13px 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+[data-uikit-theme=light] .tui-forward-footer {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward-footer {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-forward-footer .button {
   cursor: pointer;
   background: #0365f9;
   border-radius: 31px;
   padding: 10px 21px;
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -559,6 +332,14 @@ ul li {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
+[data-uikit-theme=light] .tui-forward-footer-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-forward-footer-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 
 .transmitter {
   padding: 0 10px;
@@ -568,36 +349,57 @@ ul li {
 }
 
 [data-uikit-theme=light] .tui-message-input {
-  background-color: var(--chat-theme-light-bg-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-message-input {
-  background-color: var(--chat-theme-dark-bg-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid var(--chat-theme-light-status-info);
+  outline: 1px solid var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid var(--chat-theme-dark-status-info);
+  outline: 1px solid var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .tui-message-input .input-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  border: 1px solid var(--chat-theme-light-border-5);
+  background-color: var(--uikit-theme-light-bg-color-input);
+  border: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-message-input .input-box {
-  background-color: var(--chat-theme-dark-bg-primary);
-  border: 1px solid var(--chat-theme-dark-border-5);
+  background-color: var(--uikit-theme-dark-bg-color-input);
+  border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .input-plugin-popup-box {
   border-radius: 16px;
 }
 [data-uikit-theme=light] .input-plugin-popup-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  box-shadow: var(--chat-theme-light-box-shadow-1);
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .input-plugin-popup-box {
-  background-color: var(--chat-theme-dark-bg-3);
-  box-shadow: var(--chat-theme-dark-box-shadow-1);
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.input-icon {
+  width: 20px;
+  height: 20px;
+}
+[data-uikit-theme=light] .input-icon {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .input-icon {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .message-default {
   width: 100%;
@@ -605,7 +407,6 @@ ul li {
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-family: SF Pro Text;
   font-size: 14px;
   font-family: PingFangSC-Medium;
   font-style: normal;
@@ -629,10 +430,12 @@ ul li {
   max-width: 60%;
 }
 [data-uikit-theme=light] .message-default .content .name {
-  color: var(--chat-theme-light-text-primary);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .message-default .content .name {
-  color: var(--chat-theme-dark-text-primary);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .in {
@@ -668,13 +471,13 @@ ul li {
   padding: 8px 16px;
 }
 .bubble-in {
-  border-radius: 0px 16px 16px 16px;
+  border-radius: 0 16px 16px;
 }
 .bubble-in.group {
-  border-radius: 0px 16px 16px 16px;
+  border-radius: 0 16px 16px;
 }
 .bubble-out {
-  border-radius: 16px 16px 0 16px;
+  border-radius: 16px 16px 0;
 }
 
 .message-status {
@@ -687,30 +490,45 @@ ul li {
   font-weight: 400;
   padding: 5px 0 0 10px;
   font-size: 12px;
-  font-family: PingFangSC-Medium;
   line-height: 14px;
   text-align: right;
 }
 [data-uikit-theme=light] .message-status .time {
-  color: var(--chat-theme-light-text-secondary);
+  color: var(--uikit-theme-light-text-color-anti-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .message-status .time {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-anti-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .bubble-in .message-status .time {
+  color: var(--uikit-theme-light-text-color-tertiary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .bubble-in .message-status .time {
+  color: var(--uikit-theme-dark-text-color-tertiary);
+  transition: background-color 0.3s ease-in-out;
 }
 
-.message-image, .message-video {
+.message-image,
+.message-video {
   position: relative;
 }
-.message-image .message-status, .message-video .message-status {
+.message-image .message-status,
+.message-video .message-status {
   position: absolute;
   bottom: 10px;
   right: 10px;
 }
-[data-uikit-theme=light] .message-image .message-status .time, [data-uikit-theme=light] .message-video .message-status .time {
-  color: var(--chat-theme-light-text-primary);
+[data-uikit-theme=light] .message-image .message-status .time,
+[data-uikit-theme=light] .message-video .message-status .time {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-uikit-theme=dark] .message-image .message-status .time, [data-uikit-theme=dark] .message-video .message-status .time {
-  color: var(--chat-theme-dark-text-primary);
+[data-uikit-theme=dark] .message-image .message-status .time,
+[data-uikit-theme=dark] .message-video .message-status .time {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .message-text {
@@ -719,23 +537,14 @@ ul li {
 .message-text-content {
   display: inline;
   word-break: break-word;
-  font-family: PingFangSC-Regular;
-  font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 24px;
 }
 .message-text-content-p {
   white-space: pre-wrap;
   display: inline;
   vertical-align: middle;
 }
-[data-uikit-theme=light] .message-text-content-p {
-  color: var(--chat-theme-light-text-primary);
-}
-[data-uikit-theme=dark] .message-text-content-p {
-  color: var(--chat-theme-dark-text-primary);
-}
 .message-text-content .message-status {
   display: inline-flex;
   float: right;
@@ -744,11 +553,8 @@ ul li {
 
 .message-text,
 .message-tip {
-  font-family: PingFangSC-Regular;
-  font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 17px;
 }
 .message-text .text-img,
 .message-tip .text-img {
@@ -758,7 +564,7 @@ ul li {
 }
 
 .message-image {
-  background: #FFFFFF;
+  background: transparent;
 }
 .message-image img {
   max-width: 300px;
@@ -784,10 +590,10 @@ ul li {
   position: absolute;
   z-index: 1;
   content: "";
-  width: 0px;
-  height: 0px;
+  width: 0;
+  height: 0;
   border: 15px solid transparent;
-  border-left: 20px solid #ffffff;
+  border-left: 20px solid #fff;
   top: 0;
   left: 0;
   bottom: 0;
@@ -818,7 +624,7 @@ ul li {
   display: flex;
   align-items: center;
   padding: 12px;
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 4px;
 }
 .message-file-main .icon {
@@ -838,13 +644,13 @@ ul li {
   font-size: 12px;
   font-family: PingFangSC-Medium;
   line-height: 14px;
-  color: #7A7A7A;
+  color: #7a7a7a;
 }
 
 .message-merger {
   display: flex;
   flex-direction: column;
-  background: #ECEBEB;
+  background: #ecebeb;
 }
 .message-merger h3 {
   padding-bottom: 4px;
@@ -861,16 +667,18 @@ ul li {
   padding: 8px 16px;
 }
 [data-uikit-theme=light] .meesage-bubble-reply {
-  background-color: var(--chat-theme-light-bg-secondary);
+  background-color: var(--uikit-theme-light-bg-color-bubble-own);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply {
-  background-color: var(--chat-theme-dark-bg-secondary);
+  background-color: var(--uikit-theme-dark-bg-color-bubble-own);
+  transition: background-color 0.3s ease-in-out;
 }
 .meesage-bubble-reply-in {
   border-radius: 16px 16px 16px 0;
 }
 .meesage-bubble-reply-out {
-  border-radius: 16px 16px 0px 16px;
+  border-radius: 16px 16px 0;
 }
 .meesage-bubble-reply .message-text {
   border: none !important;
@@ -887,10 +695,12 @@ ul li {
   margin-bottom: 10px;
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-light-bg-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main {
-  background-color: var(--chat-theme-dark-bg-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .meesage-bubble-reply-main::before {
   content: "";
@@ -901,10 +711,10 @@ ul li {
   left: 0;
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-light-bg-5);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main::before {
-  background-color: var(--chat-theme-dark-bg-5);
+  transition: background-color 0.3s ease-in-out;
 }
 .meesage-bubble-reply-main .title {
   font-weight: 500;
@@ -912,10 +722,12 @@ ul li {
   padding-bottom: 10px;
 }
 [data-uikit-theme=light] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-light-text-primary);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply-main .title {
-  color: var(--chat-theme-dark-text-primary);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .meesage-bubble-reply-main .message-context {
   opacity: 0.6;
@@ -942,7 +754,7 @@ ul li {
   height: 14px;
   border-radius: 14px;
   position: relative;
-  background: #FA5151;
+  background: #fa5151;
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -950,7 +762,7 @@ ul li {
 .icon-fail::before {
   position: absolute;
   content: "!";
-  color: #FFFFFF;
+  color: #fff;
   font-size: 12px;
   font-family: PingFangSC-Medium;
 }
@@ -967,13 +779,15 @@ ul li {
   display: inline-block;
   position: relative;
 }
-.loading .img, .loading video {
+.loading .img,
+.loading video {
   min-width: 60px;
   min-height: 60px;
   max-width: 300px;
   border-radius: 10px;
 }
-.loading .img-h5, .loading .video-h5 {
+.loading .img-h5,
+.loading .video-h5 {
   min-width: 60px;
   min-height: 60px;
   max-width: 200px;
@@ -1041,12 +855,29 @@ ul li {
   font-family: PingFangSC-Medium;
   line-height: 15px;
 }
-.message-plugin-item:hover {
-  background: rgba(0, 110, 255, 0.1);
-  color: #147aff;
+[data-uikit-theme=light] .message-plugin-item {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-plugin-item {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-plugin-item .del {
-  color: #FF584C;
+[data-uikit-theme=light] .message-plugin-item:hover {
+  background: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-plugin-item:hover {
+  background: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .message-plugin-item .del {
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-plugin-item .del {
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .message-custom {
@@ -1071,7 +902,7 @@ ul li {
 }
 
 .message-revoke {
-  color: #999999;
+  color: #999;
 }
 
 .message-audio {
@@ -1143,35 +974,43 @@ ul li {
   background: #147aff;
   height: 5px;
   border-radius: 2px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
 }
 
 .website {
   color: #147aff !important;
 }
 
-[data-uikit-theme=light] .message-text,
 [data-uikit-theme=light] .message-custom {
-  border: 1px solid var(--chat-theme-light-border-5);
+  border: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-uikit-theme=dark] .message-text,
 [data-uikit-theme=dark] .message-custom {
-  border: 1px solid var(--chat-theme-dark-border-5);
+  border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 [data-uikit-theme=light] .bubble {
-  background-color: var(--chat-theme-light-bg-primary);
+  background-color: var(--uikit-theme-light-bg-color-bubble-reciprocal);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .bubble {
-  background-color: var(--chat-theme-dark-bg-primary);
+  background-color: var(--uikit-theme-dark-bg-color-bubble-reciprocal);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .bubble-out {
   border: none;
-  background-color: var(--chat-theme-light-bg-secondary);
+  background-color: var(--uikit-theme-light-bg-color-bubble-own);
+  color: var(--uikit-theme-light-text-color-anti-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .bubble-out {
   border: none;
-  background-color: var(--chat-theme-dark-bg-secondary);
+  background-color: var(--uikit-theme-dark-bg-color-bubble-own);
+  color: var(--uikit-theme-dark-text-color-anti-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
@@ -1179,10 +1018,12 @@ ul li {
 }
 
 [data-uikit-theme=light] .message-tip {
-  color: var(--chat-theme-light-text-secondary);
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .message-tip {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .tip .bubble .edit {
@@ -1211,20 +1052,17 @@ ul li {
 
 .plugin-popup-box {
   border-radius: 16px;
+  overflow: hidden;
 }
 [data-uikit-theme=light] .plugin-popup-box {
-  color: var(--chat-theme-light-text-primary);
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .plugin-popup-box {
-  color: var(--chat-theme-dark-text-primary);
-}
-[data-uikit-theme=light] .plugin-popup-box {
-  background-color: var(--chat-theme-light-bg-primary);
-  box-shadow: var(--chat-theme-light-box-shadow-1);
-}
-[data-uikit-theme=dark] .plugin-popup-box {
-  background-color: var(--chat-theme-dark-bg-3);
-  box-shadow: var(--chat-theme-dark-box-shadow-1);
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1234,10 +1072,12 @@ ul li {
   align-items: center;
 }
 [data-uikit-theme=light] .tui-chat-header {
-  background-color: var(--chat-theme-light-bg-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-chat-header {
-  background-color: var(--chat-theme-dark-bg-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header-left {
   display: flex;
@@ -1247,20 +1087,25 @@ ul li {
   flex: 1;
   padding: 0 8px;
 }
-.tui-chat-header-right .header-handle-more {
-  padding: 10px 3px;
+.tui-chat-header .call-btn-container {
+  display: flex;
+  margin-right: 10px;
+}
+.tui-chat-header .call-btn-container .call-btn {
+  margin-right: 16px;
 }
 .tui-chat-header .title {
-  font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
 }
 [data-uikit-theme=light] .tui-chat-header .title {
-  color: var(--chat-theme-light-text-primary);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .tui-chat-header .title {
-  color: var(--chat-theme-dark-text-primary);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-chat-header .system {
   height: 32px;
@@ -1273,9 +1118,21 @@ ul li {
   display: flex;
   flex-direction: column;
   position: relative;
-  background: #FFFFFF;
 }
-ul, li, div, p, label, span {
+[data-uikit-theme=light] .chat {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .chat {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+ul,
+li,
+div,
+p,
+label,
+span {
   margin: 0;
   padding: 0;
 }
@@ -1287,16 +1144,17 @@ ul li {
 .message-list {
   flex: 1;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   position: relative;
   padding: 0 20px;
 }
 [data-uikit-theme=light] .message-list {
-  background-color: var(--chat-theme-light-bg-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .message-list {
-  background-color: var(--chat-theme-dark-bg-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .message-list.hide {
   opacity: 0;
@@ -1305,38 +1163,843 @@ ul li {
   display: grid;
   padding: 5px 0;
 }
-.message-list .no-more {
-  text-align: center;
-  font-family: PingFangSC-Medium;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 17px;
+.message-list .no-more {
+  text-align: center;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+}
+[data-uikit-theme=light] .message-list .no-more {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-list .no-more {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.message-list-time {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+  padding: 10px;
+  text-align: center;
+}
+[data-uikit-theme=light] .message-list-time {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .message-list-time {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-chat-list__header {
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-width: 0;
+}
+[data-uikit-theme=light] .uikit-chat-list__header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-chat-list__header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-chat-list__header .uikit-conversation-search + .uikit-conversation-create-container .uikit-conversation-create-button {
+  margin-left: 0;
+}
+.uikit-chat-list__header .uikit-chat-list__header__left,
+.uikit-chat-list__header .uikit-chat-list__header__right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.uikit-chat-list__container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden auto;
+  box-sizing: border-box;
+  min-width: 0;
+  text-align: initial;
+}
+[data-uikit-theme=light] .uikit-chat-list__container {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-chat-list__container {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-kit-input-box {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 0 8px;
+  height: 36px;
+  box-sizing: border-box;
+}
+[data-uikit-theme=light] .tui-kit-input-box {
+  background-color: var(--uikit-theme-light-bg-color-input);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box {
+  background-color: var(--uikit-theme-dark-bg-color-input);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-box--focus {
+  outline: 1px solid var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-kit-input-box.tui-kit-input-border--bottom {
+  outline: none;
+  border-radius: 0;
+}
+[data-uikit-theme=light] .tui-kit-input-box.tui-kit-input-border--bottom {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box.tui-kit-input-border--bottom {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-kit-input-box .tui-kit-input {
+  margin-left: 6px;
+  margin-right: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 10px;
+  border: none;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+[data-uikit-theme=light] .tui-kit-input-box .tui-kit-input {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-kit-input-box .tui-kit-input:focus {
+  border: none;
+  outline: none;
+}
+.tui-kit-input-box .tui-kit-input::placeholder {
+  padding: 2px 0;
+}
+[data-uikit-theme=light] .tui-kit-input-box .tui-kit-input::placeholder {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-input-box .tui-kit-input::placeholder {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-search-input {
+  height: 36px;
+  align-self: stretch;
+  margin: 10px;
+  box-sizing: border-box;
+}
+[data-uikit-theme=light] .uikit-conversation-search-input {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-search-input {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-kit-avatar {
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.tui-kit-avatar.circle .avatar-image {
+  border-radius: 50%;
+}
+.tui-kit-avatar.square .avatar-image {
+  border-radius: 4px;
+}
+.tui-kit-avatar img {
+  width: 100%;
+  height: 100%;
+}
+.tui-kit-avatar:hover .tui-kit-avatar-edit {
+  display: flex;
+}
+.tui-kit-avatar-edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.33);
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.tui-kit-avatar-list {
+  position: absolute;
+  z-index: 2;
+  top: 100%;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  min-width: 200px;
+  max-width: 400px;
+  padding: 10px;
+}
+.tui-kit-avatar-list-item {
+  padding: 10px;
+}
+.tui-kit-avatar-list-item img {
+  width: 40px;
+}
+.uikit-conversation-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1 1;
+}
+.uikit-conversation-actions .uikit-conversation-actions__container {
+  top: 0;
+  right: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  bottom: initial;
+  padding: 14px 0;
+  box-sizing: border-box;
+  text-align: start;
+  white-space: nowrap;
+}
+.uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item {
+  font-size: 16px;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  line-height: 19px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+[data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
+  background-color: var(--uikit-theme-light-dropdown-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item:hover {
+  background-color: var(--uikit-theme-dark-dropdown-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-actions .uikit-conversation-actions__container .uikit-conversation-actions__item--delete {
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-actions .uikit-conversation-actions__popup-icon {
+  transform: scale(1.5);
+}
+.uikit-conversation-preview {
+  display: flex;
+  align-items: center;
+  border: none;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
+  padding: 0 20px;
+  flex: 0 0 auto;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+}
+[data-uikit-theme=light] .uikit-conversation-preview {
+  background-color: var(--uikit-theme-light-list-color-default);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview {
+  background-color: var(--uikit-theme-dark-list-color-default);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview:hover {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview:hover {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview.uikit-conversation-preview--mobile {
+  padding: 0 10px;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--pin {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--pin {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active {
+  background-color: var(--uikit-theme-light-list-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active {
+  background-color: var(--uikit-theme-dark-list-color-active);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--active .uikit-conversation-preview__title {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  color: #fff;
+}
+[data-uikit-theme=light] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  background-color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview.uikit-conversation-preview--unread .uikit-conversation-preview__unread {
+  background-color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-left: 10px;
+  min-width: 0;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+  padding: 1px 0;
+  width: 100%;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--normal {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__title .uikit-conversation-preview__title--highlight {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__content .uikit-conversation-preview__abstract {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external {
+  text-align: right;
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__unread {
+  box-sizing: border-box;
+  height: 16px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px;
+  font-size: 11px;
+  font-weight: 700;
+  margin: 2px 0 2px auto;
+}
+.uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+  text-wrap: nowrap;
+}
+[data-uikit-theme=light] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-preview .uikit-conversation-preview__external .uikit-conversation-preview__time {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-search-result {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: auto;
+}
+[data-uikit-theme=light] .uikit-conversation-search-result {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-search-result {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-search {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+}
+[data-uikit-theme=light] .uikit-conversation-search {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .uikit-conversation-search {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.uikit-conversation-search.uikit-conversation-search--active {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.uikit-conversation-create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-conversation-create {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+[data-uikit-theme=light] .tui-conversation-create {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-conversation-create-header {
+  display: flex;
+  flex-direction: row;
+  padding: 16px 20px;
+  align-items: center;
+  text-align: center;
+}
+[data-uikit-theme=light] .tui-conversation-create-header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-create-header .title {
+  margin-left: 10px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 32px;
+  letter-spacing: -0.41px;
+}
+[data-uikit-theme=light] .tui-conversation-create-header .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-header .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tui-conversation-create-search-input {
+  margin: 10px;
+}
+
+.tui-user {
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+}
+[data-uikit-theme=light] .tui-user:hover {
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user:hover {
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-user .tui-user-name {
+  margin-left: 10px;
+  font-size: 14px;
+  width: 80%;
+  text-align: left;
+}
+[data-uikit-theme=light] .tui-user .tui-user-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user .tui-user-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-user .tui-user-name.active {
+  font-weight: 600;
+  font-size: 14px;
+}
+[data-uikit-theme=light] .tui-user .tui-user-name.active {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-user .tui-user-name.active {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-user-checkbox-label .tui-user-checkbox {
+  margin-left: auto;
+}
+.tui-user-checkbox-label input[type=checkbox] {
+  cursor: pointer;
+}
+
+.tui-conversation-create-next-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto 10px;
+}
+.tui-conversation-create-next-container .tui-conversation-create-next {
+  cursor: pointer;
+  text-align: center;
+  border-radius: 31px;
+  font-size: 14px;
+  color: #fff;
+  padding: 12px 36px;
+}
+[data-uikit-theme=light] .tui-conversation-create-next-container .tui-conversation-create-next {
+  background-color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-next-container .tui-conversation-create-next {
+  background-color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+
+.tui-conversation-create-select-list-container {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 10px;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list {
+  position: relative;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-container {
+  width: 100%;
+}
+.tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  font-weight: 600;
+  font-size: 14px;
+  padding: 10px;
+}
+[data-uikit-theme=light] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-select-list-container .tui-conversation-create-select-list .tui-group-box .title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.conversation-create-select-view {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+[data-uikit-theme=light] .conversation-create-select-view {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .conversation-create-select-view {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.conversation-create-select-view .select-view-info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: calc((100% - 10px) / 5);
+  padding: 6px;
+  box-sizing: border-box;
+  position: relative;
+}
+.conversation-create-select-view .select-view-info .select-view-info-close {
+  position: absolute;
+  right: 15px;
+  top: 6px;
+  z-index: 2;
+}
+.conversation-create-select-view .select-view-info .select-view-info-nick {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  text-align: center;
+}
+.tui-conversation-create-group-detail {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+[data-uikit-theme=light] .tui-conversation-create-group-detail {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-create-group-detail {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-create-group-detail .create-group-box {
+  padding: 10px 0;
+}
+.tui-conversation-create-group-detail .input-group-text {
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .create-group-name .input-group-name {
+  font-weight: 700;
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .input-group-title {
+  width: 106px;
+  font-size: 14px;
+}
+.tui-conversation-create-group-detail .create-group-illustrate {
+  font-size: 12px;
+  text-align: justify;
+  padding-left: 8px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-title {
+  font-weight: 600;
+  font-size: 14px;
+  padding: 20px 0 20px 8px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+  padding: 0 10px;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container .create-group-portrait-info {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  box-sizing: border-box;
+}
+.tui-conversation-create-group-detail .create-group-portrait .create-group-portrait-info-container .create-group-portrait-info-nick {
+  font-size: 12px;
+  margin-top: 6px;
+}
+.tui-conversation-group-type-info {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-group-type-info .group-type-info-box {
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  padding: 12px 16px;
+  margin-top: 12px;
+  cursor: pointer;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-box {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  border: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-box {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  border: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+.tui-conversation-group-type-info .group-type-info-box:hover {
+  border: 1px solid #147aff;
+}
+.tui-conversation-group-type-info .group-type-info-box.group-type-info-box--active {
+  border: 1px solid #147aff;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-title {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-title .box-active-icon {
+  margin-right: 8px;
+}
+.tui-conversation-group-type-info .group-type-info-box .group-type-info-description {
+  font-size: 12px;
+  text-align: justify;
+}
+.tui-conversation-group-type-info .group-type-info-document {
+  font-size: 16px;
+  text-align: justify;
+  text-decoration: none;
+  margin: 1rem auto;
+}
+[data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=light] .tui-conversation-group-type-info .group-type-info-document:visited {
+  color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:link, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:active, [data-uikit-theme=dark] .tui-conversation-group-type-info .group-type-info-document:visited {
+  color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-uikit-theme=light] .message-list .no-more {
-  color: var(--chat-theme-light-text-secondary);
+.tui-conversation-create-button {
+  display: flex;
+  align-items: center;
+  margin: 10px;
 }
-[data-uikit-theme=dark] .message-list .no-more {
-  color: var(--chat-theme-dark-text-secondary);
+.uikit-chat-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
 }
-.message-list-time {
-  font-family: PingFangSC-Medium;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 14px;
-  padding: 10px;
-  text-align: center;
+[data-uikit-theme=light] .uikit-chat-list {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-uikit-theme=light] .message-list-time {
-  color: var(--chat-theme-light-text-secondary);
+[data-uikit-theme=dark] .uikit-chat-list {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
-[data-uikit-theme=dark] .message-list-time {
-  color: var(--chat-theme-dark-text-secondary);
+.uikit-chat-list .uikit-chat-list__header--searching {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.uikit-chat-list .uikit-chat-list__header--creating {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
+}
+[data-uikit-theme=light] .tui-profile {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile-header {
   box-sizing: border-box;
@@ -1368,7 +2031,6 @@ ul li {
 .tui-profile-nick {
   font-weight: 700;
   font-size: 24px;
-  font-family: PingFangSC-Medium;
   line-height: 29px;
   text-align: center;
 }
@@ -1376,15 +2038,18 @@ ul li {
   padding-left: 25px;
 }
 .tui-profile-ID {
-  padding: 6px 0;
-  margin: 0;
+  margin: 6px 0;
   display: flex;
   align-items: center;
-  font-weight: 400;
   font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
-  color: #666;
+}
+[data-uikit-theme=light] .tui-profile-ID {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile-ID {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile-ID h5 {
   margin: 0;
@@ -1402,17 +2067,19 @@ ul li {
   cursor: pointer;
 }
 .tui-profile-list-item h4 {
-  padding-bottom: 3px;
-  font-weight: 400;
   font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
   margin: 10px 0;
-  color: rgba(0, 0, 0, 0.6);
 }
 .tui-profile-div-with-edit {
-  padding: 4px 0;
-  border-bottom: 1px solid #eee;
+  height: auto !important;
+}
+[data-uikit-theme=light] .tui-profile-div-with-edit {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-profile-div-with-edit {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile-edit {
   border-bottom: none !important;
@@ -1432,72 +2099,13 @@ ul li {
   border: none !important;
 }
 
-.tui-profile {
-  background: #ffffff;
-}
-.tui-profile-header {
-  background: #f9fafb;
-}
-.conversation-search-result.no-result {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.conversation-search-result.no-result-icon {
-  margin: 100px auto 50px;
-}
-.conversation-search-result.no-result-message {
-  color: #999999;
-  font-weight: 400;
-  font-family: PingFangSC-Medium;
-  font-size: 16px;
-  line-height: 22px;
-}
-
-.conversation-search-input {
-  height: 36px;
-  width: 100%;
-}
-.tui-kit-input-box {
-  display: flex;
-  align-items: center;
-  border-radius: 10px;
-  background: rgba(249, 249, 249, 0.94);
-  padding: 0 8px;
-  height: 36px;
-  box-sizing: border-box;
-}
-.tui-kit-input-box.tui-kit-input-box--focus {
-  outline: 1px solid #147aff;
-}
-.tui-kit-input-box.tui-kit-input-border--bottom {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  outline: none;
-  border-radius: 0;
-}
-.tui-kit-input-box .tui-kit-input {
-  margin-left: 6px;
-  margin-right: auto;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  background-color: transparent;
-  border-radius: 10px;
-  border: none;
-  box-sizing: border-box;
-  font-size: 14px;
-}
-.tui-kit-input-box .tui-kit-input:focus {
-  border: none;
-  outline: none;
+[data-uikit-theme=light] .tui-profile {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-kit-input-box .tui-kit-input::placeholder {
-  font-weight: 400;
-  color: rgba(67, 60, 63, 0.6);
-  padding: 2px 0;
+[data-uikit-theme=dark] .tui-profile {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-manage {
   display: flex;
@@ -1505,7 +2113,18 @@ ul li {
   width: 22%;
   max-width: 300px;
   min-width: 200px;
-  border-left: 1px solid #f9fafb;
+}
+[data-uikit-theme=light] .tui-manage {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  border-left: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  border-left: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-manage .red {
   color: #ff584c !important;
@@ -1519,8 +2138,6 @@ ul li {
   margin-right: 10px;
   font-weight: 700;
   font-size: 14px;
-  font-family: PingFangSC-Medium;
-  line-height: 17px;
 }
 .tui-manage .tui-manage-container .tui-manage-info {
   display: flex;
@@ -1535,26 +2152,34 @@ ul li {
   text-align: center;
   font-weight: 700;
   font-size: 24px;
-  font-family: PingFangSC-Medium;
-  line-height: 29px;
   margin-bottom: 10px;
 }
 .tui-manage .tui-manage-container .tui-manage-info .info-id {
-  font-weight: 400;
-  font-size: 12px;
-  font-family: PingFangSC-Medium;
-  line-height: 14px;
-  color: #666;
+  font-size: 16px;
   margin-bottom: 30px;
   text-align: center;
 }
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-info .info-id {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-info .info-id {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
   display: flex;
-  background: rgba(249, 249, 249, 0.94);
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  box-sizing: border-box;
+}
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box:nth-child(2) {
   margin-top: 10px;
@@ -1562,9 +2187,14 @@ ul li {
 }
 .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
   font-size: 16px;
-  font-family: PingFangSC-Medium;
-  line-height: 22px;
-  color: rgba(0, 0, 0, 0.6);
+}
+[data-uikit-theme=light] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .tui-manage.tui-h5-manage {
@@ -1578,7 +2208,14 @@ ul li {
   max-width: 100%;
   min-width: 100%;
   z-index: 1;
-  background: #fff;
+}
+[data-uikit-theme=light] .tui-manage.tui-h5-manage {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-manage.tui-h5-manage {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .popup {
   opacity: 0;
@@ -1612,18 +2249,37 @@ ul li {
   opacity: 0;
 }
 
-.info {
-  background: #FFFFFF;
+[data-uikit-theme=light] .info {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .info {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 
-.warn {
-  color: #FFFFFF;
-  background: #faad14;
+[data-uikit-theme=light] .warn {
+  background-color: var(--uikit-theme-light-text-color-warning);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .warn {
+  background-color: var(--uikit-theme-dark-text-color-warning);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
 }
 
-.error {
-  color: #FFFFFF;
-  background: #ff4d4f;
+[data-uikit-theme=light] .error {
+  background-color: var(--uikit-theme-light-text-color-error);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .error {
+  background-color: var(--uikit-theme-dark-text-color-error);
+  color: #fff;
+  transition: background-color 0.3s ease-in-out;
 }
 .div-with-edit {
   flex: 1;
@@ -1645,12 +2301,12 @@ ul li {
   position: relative;
   word-break: break-all;
 }
-.div-with-edit .show:hover .icon-edit {
-  display: flex;
-}
 .div-with-edit .show .icon-edit {
   display: none;
 }
+.div-with-edit .show:hover .icon-edit {
+  display: flex;
+}
 .div-with-edit .icon {
   margin-left: 10px;
   width: 25px;
@@ -1661,9 +2317,16 @@ ul li {
   align-items: center;
   justify-content: space-between;
   position: relative;
-  border-bottom: 1px solid #EEEEEE;
   padding: 0 10px;
 }
+[data-uikit-theme=light] .div-with-edit .edit {
+  border-bottom: 1px solid var(--uikit-theme-light-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit {
+  border-bottom: 1px solid var(--uikit-theme-dark-stroke-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .div-with-edit .edit input {
   flex: 1;
   font-size: inherit;
@@ -1675,20 +2338,32 @@ ul li {
 }
 .div-with-edit .edit .select {
   position: absolute;
-  box-sizing: border-box;
   min-width: 100%;
   z-index: 2;
-  background: #FFFFFF;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
   top: 100%;
   border-radius: 5px;
   padding: 10px 0;
 }
+[data-uikit-theme=light] .div-with-edit .edit .select {
+  background: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 11px 20px 0 var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit .select {
+  background: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 11px 20px 0 var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
 .div-with-edit .edit .select-list-item {
   padding: 7px 10px;
 }
-.div-with-edit .edit .select-list-item:hover {
-  background: #f2f7ff;
+[data-uikit-theme=light] .div-with-edit .edit .select-list-item:hover {
+  background: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .div-with-edit .edit .select-list-item:hover {
+  background: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-kit-icon {
   display: flex;
@@ -1696,13 +2371,14 @@ ul li {
   align-items: center;
   cursor: pointer;
   position: relative;
+  user-select: none;
 }
 .tui-kit-icon .icon-image {
   width: 100%;
 }
 .tui-kit-icon:hover {
   color: royalblue;
-  border-color: currentColor;
+  border-color: currentcolor;
 }
 .tui-kit-icon::after {
   content: "";
@@ -1718,6 +2394,74 @@ ul li {
   opacity: 0.4;
   transition: 0s;
 }
+
+.tui-kit-icon-loading {
+  cursor: wait;
+  border-radius: 100%;
+  animation: circle infinite 1s linear;
+}
+[data-uikit-theme=light] .tui-kit-icon-loading {
+  border: 3px solid var(--uikit-theme-light-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-icon-loading {
+  border: 3px solid var(--uikit-theme-dark-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-kit-icon-loading:hover {
+  border: 3px solid var(--uikit-theme-light-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-kit-icon-loading:hover {
+  border: 3px solid var(--uikit-theme-dark-text-color-disable);
+  border-top-color: transparent;
+  transition: background-color 0.3s ease-in-out;
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.tui-place-holder {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+.tui-place-holder .tui-place-holder__icon {
+  margin: 10px;
+}
+.tui-place-holder .tui-place-holder__label {
+  color: #999;
+  font-weight: 400;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  font-size: 16px;
+  line-height: 22px;
+}
+.tui-place-holder .tui-place-holder__button {
+  margin: 20px;
+  background-color: #0365f9;
+  border-radius: 31px;
+  color: #fff;
+  cursor: pointer;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 12px 36px;
+  text-align: center;
+  user-select: none;
+}
 .model {
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
@@ -1773,7 +2517,7 @@ ul li {
   z-index: 10;
   margin: 20px;
   padding: 10px;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
+  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
   max-width: 50%;
   word-break: break-all;
   border-radius: 5px;
@@ -1799,10 +2543,16 @@ ul li {
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  overflow: hidden scroll;
+}
+[data-uikit-theme=light] .tui-contacts-list {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts-list {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-contacts-list .tui-contacts-title {
   display: flex;
@@ -1811,6 +2561,7 @@ ul li {
 .tui-contacts-list .tui-contacts-list-title {
   display: flex;
   padding: 10px 20px;
+  cursor: pointer;
 }
 .tui-contacts-list .tui-contacts-list-icon {
   display: flex;
@@ -1818,15 +2569,24 @@ ul li {
   justify-content: center;
   margin-right: 20px;
 }
+.tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  font-size: 12px;
+}
+[data-uikit-theme=light] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts-list .tui-contacts-list-icon .contacts-list-icon {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts-list .tui-contacts-list-item {
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: 10px 20px;
   text-align: center;
-  font-family: PingFangSC-Medium;
   font-size: 14px;
-  line-height: 20px;
 }
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-card {
   display: flex;
@@ -1839,6 +2599,11 @@ ul li {
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-container {
   margin-left: 10px;
 }
+.tui-contacts-list .tui-contacts-list-item .text-ellipsis, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text {
   color: #999;
   font-size: 12px;
@@ -1849,22 +2614,11 @@ ul li {
   font-size: 12px;
   text-align: left;
 }
-.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
-  color: #000;
-  font-weight: 400;
-  text-align: left;
-}
-.tui-contacts-list .text-ellipsis, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .tui-contacts-list .application-btn {
   width: 30px;
   height: 14px;
   padding: 5px;
   border-radius: 15px;
-  border: none;
   font-size: 10px;
   text-align: center;
   line-height: 14px;
@@ -1872,8 +2626,8 @@ ul li {
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
-  border: 1px solid #006EFF;
-  background: #006EFF;
+  border: 1px solid #006eff;
+  background: #006eff;
   color: #fff;
 }
 
@@ -1891,10 +2645,17 @@ ul li {
   height: 100%;
   display: flex;
   padding: 60px;
-  box-sizing: border-box;
   flex-direction: column;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contact-info {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-header {
   padding-bottom: 15px;
   border-bottom: 1px solid #ddd;
@@ -1914,30 +2675,50 @@ ul li {
   font-size: 24px;
   padding: 15px;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-name {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  margin-top: 20px;
   font-size: 16px;
-  line-height: 50px;
-  font-weight: 400;
-  color: #999999;
   word-break: break-all;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-content {
   padding: 15px 0;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contact-info .tui-contact-info-content .content-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 6px 0;
   font-size: 16px;
-  font-weight: 400;
   min-height: 56px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-wording {
   padding: 6px 0;
   font-size: 16px;
-  font-weight: 400;
   min-height: 56px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-wording-text {
@@ -1952,14 +2733,12 @@ ul li {
   width: 95%;
 }
 .tui-contact-info .tui-contact-info-content .content-item-label {
-  color: #999;
   margin-right: 5px;
 }
 .tui-contact-info .tui-contact-info-content .content-item-text {
   flex: 1;
   display: flex;
   flex-direction: row;
-  color: #333;
   overflow: hidden;
 }
 .tui-contact-info .tui-contact-info-content .content-btn-container {
@@ -1969,30 +2748,36 @@ ul li {
 }
 .tui-contact-info .tui-contact-info-content .content-btn-container .content-item-btn {
   margin: 15px;
-  width: 122px;
-  height: 26px;
   padding: 8px 20px;
   border-radius: 25px;
   border: none;
   font-size: 14px;
   text-align: center;
-  line-height: 26px;
-  font-weight: 400;
   letter-spacing: 0;
   min-width: 100px;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
 }
-.tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
-  border: 1px solid #e54545;
-  background: transparent;
-  color: #e54545;
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
+  color: var(--uikit-theme-light-text-color-error);
+  border: 1px solid;
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
-  border: 1px solid #006eff;
-  background: #006eff;
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
+  color: var(--uikit-theme-dark-text-color-error);
+  border: 1px solid;
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=light] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
+  color: #fff;
+  background-color: var(--uikit-theme-light-text-color-link);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
   color: #fff;
+  background-color: var(--uikit-theme-dark-text-color-link);
+  transition: background-color 0.3s ease-in-out;
 }
 
 .tui-contact-info-h5 {
@@ -2008,6 +2793,14 @@ ul li {
   text-align: initial;
   overflow: hidden;
 }
+[data-uikit-theme=light] .tui-contacts {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .tui-contacts-header {
   position: relative;
   display: flex;
@@ -2018,8 +2811,7 @@ ul li {
   width: 100%;
 }
 .tui-contacts .tui-contacts-add {
-  display: flex;
-  color: #147AFF;
+  color: #147aff;
   font-size: 20px;
   align-items: center;
   cursor: pointer;
@@ -2033,22 +2825,33 @@ ul li {
 }
 .tui-contacts .tui-contacts-add-header {
   align-items: center;
-  background-color: #f9fafb;
   display: flex;
   flex-direction: row;
   padding: 16px 20px;
   text-align: center;
   margin-bottom: 10px;
 }
+[data-uikit-theme=light] .tui-contacts .tui-contacts-add-header {
+  background-color: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header {
+  background-color: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
-  color: #000;
-  font-family: PingFangSC-Medium;
   font-size: 20px;
   font-weight: 600;
-  letter-spacing: -0.41px;
-  line-height: 32px;
   margin-left: 10px;
 }
+[data-uikit-theme=light] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 .tui-contacts .no-result {
   padding: 0 20px;
   display: flex;
@@ -2059,12 +2862,17 @@ ul li {
   margin: 100px auto 50px;
 }
 .tui-contacts .no-result-message {
-  color: #999999;
-  font-weight: 400;
   font-size: 16px;
-  font-family: PingFangSC-Medium;
   line-height: 22px;
 }
+[data-uikit-theme=light] .tui-contacts .no-result-message {
+  color: var(--uikit-theme-light-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .tui-contacts .no-result-message {
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
+}
 
 .tui-contacts-h5 {
   min-width: 100%;