@tencentcloud/chat-uikit-react 2.2.6 → 2.2.7

package/dist/cjs/index.d.css

@@ -1,18 +1,19 @@
 .tui-conversation {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
   text-align: initial;
+  overflow: auto;
 }
 [data-uikit-theme=light] .tui-conversation {
-  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-conversation {
-  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-conversation .tui-conversation-header {
   display: flex;
@@ -83,7 +84,7 @@
   position: absolute;
   z-index: 2;
   top: 100%;
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 5px;
   box-shadow: 0 11px 20px 0 rgb(0, 0, 0);
   display: flex;
@@ -116,10 +117,12 @@
   padding: 0 20px;
 }
 [data-uikit-theme=light] .conversation-preview-container {
-  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] .conversation-preview-container {
-  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;
 }
 .conversation-preview-container .content {
   flex: 1 1 auto;
@@ -137,10 +140,12 @@
   width: 100%;
 }
 [data-uikit-theme=light] .conversation-preview-container .content .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] .conversation-preview-container .content .title {
-  color: var(--chat-theme-dark-text-primary);
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-preview-container .content .message {
   overflow: hidden;
@@ -154,14 +159,16 @@
   padding: 1px 0;
 }
 [data-uikit-theme=light] .conversation-preview-container .content .message {
-  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] .conversation-preview-container .content .message {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-preview-container .external {
   text-align: right;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
 }
@@ -178,10 +185,12 @@
   padding: 1px 0;
 }
 [data-uikit-theme=light] .conversation-preview-container .external .time {
-  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] .conversation-preview-container .external .time {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-preview-container .external .more--hover {
   display: flex;
@@ -194,13 +203,22 @@
 .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;
 }
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box {
+  background-color: var(--uikit-theme-light-dropdown-color-default);
+  box-shadow: 0 0 10px var(--uikit-theme-light-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box {
+  background-color: var(--uikit-theme-dark-dropdown-color-default);
+  box-shadow: 0 0 10px var(--uikit-theme-dark-shadow-color);
+  transition: background-color 0.3s ease-in-out;
+}
 .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
   font-size: 16px;
   font-family: PingFangSC-Medium;
@@ -210,44 +228,53 @@
   font-weight: 500;
   box-sizing: border-box;
 }
+[data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
+  color: var(--uikit-theme-light-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
+[data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
+  color: var(--uikit-theme-dark-text-color-primary);
+  transition: background-color 0.3s ease-in-out;
+}
 [data-uikit-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-light-status-danger);
+  color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
-  color: var(--chat-theme-dark-status-danger);
+  color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 [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);
+  background-color: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 [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);
+  background-color: var(--uikit-theme-dark-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-light-bg-active);
+  background-color: var(--uikit-theme-light-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .conversation-preview-container:hover {
-  background-color: var(--chat-theme-dark-bg-active);
+  background-color: var(--uikit-theme-dark-list-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-light-bg-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
-  background-color: var(--chat-theme-dark-bg-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--active {
-  background-color: var(--chat-theme-light-bg-active);
+  background-color: var(--uikit-theme-light-list-color-active);
+  transition: background-color 0.3s ease-in-out;
 }
 [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);
+  background-color: var(--uikit-theme-dark-list-color-active);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-preview-container.conversation-preview-content--unread .unread {
-  width: 16px;
   height: 13px;
   border-radius: 16px;
   display: flex;
@@ -260,10 +287,12 @@
   color: #fff;
 }
 [data-uikit-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-light-status-danger);
+  background-color: var(--uikit-theme-light-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
-  background-color: var(--chat-theme-dark-status-danger);
+  background-color: var(--uikit-theme-dark-text-color-error);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-message-input {
   display: flex;
@@ -316,10 +345,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 +431,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 +459,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 +479,6 @@ ul li {
   flex-direction: column;
   font-weight: 500;
   font-size: 14px;
-  font-family: PingFangSC-Medium;
   line-height: 17px;
   color: #000;
 }
@@ -450,7 +500,6 @@ ul li {
 }
 
 .tui-forward {
-  background: #fff;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
@@ -458,18 +507,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 +540,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 +559,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 +566,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 +579,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 +594,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 +628,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 +645,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-operate);
+  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-operate);
+  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 +703,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 +726,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 +767,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 +786,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 +833,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 +849,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 +860,7 @@ ul li {
 }
 
 .message-image {
-  background: #FFFFFF;
+  background: transparent;
 }
 .message-image img {
   max-width: 300px;
@@ -784,10 +886,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 +920,7 @@ ul li {
   display: flex;
   align-items: center;
   padding: 12px;
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 4px;
 }
 .message-file-main .icon {
@@ -838,13 +940,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 +963,16 @@ ul li {
   padding: 8px 16px;
 }
 [data-uikit-theme=light] .meesage-bubble-reply {
-  background-color: var(--chat-theme-light-bg-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 [data-uikit-theme=dark] .meesage-bubble-reply {
-  background-color: var(--chat-theme-dark-bg-secondary);
+  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 +989,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 +1005,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 +1016,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 +1048,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 +1056,7 @@ ul li {
 .icon-fail::before {
   position: absolute;
   content: "!";
-  color: #FFFFFF;
+  color: #fff;
   font-size: 12px;
   font-family: PingFangSC-Medium;
 }
@@ -967,13 +1073,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 +1149,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;
+}
+[data-uikit-theme=light] .message-plugin-item:hover {
+  background: var(--uikit-theme-light-dropdown-color-hover);
+  transition: background-color 0.3s ease-in-out;
 }
-.message-plugin-item .del {
-  color: #FF584C;
+[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 +1196,7 @@ ul li {
 }
 
 .message-revoke {
-  color: #999999;
+  color: #999;
 }
 
 .message-audio {
@@ -1143,35 +1268,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 +1312,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 +1346,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);
-}
-[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);
+  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 {
-  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 +1366,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 +1381,28 @@ ul li {
   flex: 1;
   padding: 0 8px;
 }
+.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-right .header-handle-more {
   padding: 10px 3px;
 }
 .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 +1415,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 +1441,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;
@@ -1314,13 +1469,14 @@ ul li {
   line-height: 17px;
 }
 [data-uikit-theme=light] .message-list .no-more {
-  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-list .no-more {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .message-list-time {
-  font-family: PingFangSC-Medium;
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
@@ -1328,16 +1484,26 @@ ul li {
   text-align: center;
 }
 [data-uikit-theme=light] .message-list-time {
-  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-list-time {
-  color: var(--chat-theme-dark-text-secondary);
+  color: var(--uikit-theme-dark-text-color-secondary);
+  transition: background-color 0.3s ease-in-out;
 }
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+[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;
   width: 100%;
@@ -1368,7 +1534,6 @@ ul li {
 .tui-profile-nick {
   font-weight: 700;
   font-size: 24px;
-  font-family: PingFangSC-Medium;
   line-height: 29px;
   text-align: center;
 }
@@ -1376,15 +1541,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 +1570,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,11 +1602,13 @@ ul li {
   border: none !important;
 }
 
-.tui-profile {
-  background: #ffffff;
+[data-uikit-theme=light] .tui-profile {
+  background: var(--uikit-theme-light-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
-.tui-profile-header {
-  background: #f9fafb;
+[data-uikit-theme=dark] .tui-profile {
+  background: var(--uikit-theme-dark-bg-color-operate);
+  transition: background-color 0.3s ease-in-out;
 }
 .conversation-search-result.no-result {
   padding: 0 20px;
@@ -1463,20 +1635,40 @@ ul li {
   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;
+[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 {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #fff;
   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;
@@ -1490,22 +1682,47 @@ ul li {
   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 {
-  font-weight: 400;
-  color: rgba(67, 60, 63, 0.6);
   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;
+}
 .tui-manage {
   display: flex;
   flex-direction: column;
   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 +1736,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 +1750,27 @@ 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;
   margin-bottom: 30px;
   text-align: center;
 }
 .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 +1778,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 +1799,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 +1840,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 +1892,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 +1908,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 +1929,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;
@@ -1799,10 +2065,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 +2083,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 +2091,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 +2121,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 +2136,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 +2148,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 +2167,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 +2197,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 +2255,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 +2270,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 +2315,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 +2333,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 +2347,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 +2384,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%;