@tencentcloud/chat-uikit-react 2.2.4 → 2.2.5

package/dist/esm/index.d.css

@@ -1,89 +1,16 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-a, a:link, a:visited, a:hover, a:active {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: "";
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-html, body {
-  height: 100%;
-  width: 100%;
-  margin: 0;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-* {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 .tui-kit {
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
-  background-color: #FFFFFF;
   text-align: initial;
 }
+[data-chat-theme=light] .tui-kit {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .tui-kit {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 
 .sample-chat {
   position: relative;
@@ -99,12 +26,15 @@ html, body {
   position: absolute;
   top: 0;
   z-index: 1;
+  width: 100%;
+  height: 100%;
 }
 .sample-chat-left-container {
   max-width: 360px;
   min-width: 360px;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 .sample-chat-tab {
   display: flex;
@@ -125,7 +55,7 @@ html, body {
   text-align: center;
 }
 .sample-chat-tab-active {
-  color: #147AFF;
+  color: #147aff;
 }
 
 .tuikit-container {
@@ -223,16 +153,399 @@ body #webpack-dev-server-client-overlay {
 .sample-chat-h5 .tui-message-input .tui-kit-input-box--focus {
   outline: none;
 }
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  /* stylelint-disable-next-line font-family-no-duplicate-names */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@font-face {
+  font-family: iconfont;
+  src: url("./assets/fonts/iconfont.woff2?t=1722856322648") format("woff2"), url("./assets/fonts/iconfont.woff?t=1722856322648") format("woff"), url("./assets/fonts/iconfont.ttf?t=1722856322648") format("truetype");
+}
+.iconfont {
+  font-family: iconfont, Arial, sans-serif !important;
+  font-size: 20px;
+  font-style: normal;
+  line-height: 1;
+  vertical-align: bottom;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  --chat-theme-light-bg-5: #999;
+  --chat-theme-light-bg-4: #b3b3b3;
+  --chat-theme-light-bg-3: #e5e7eb;
+  --chat-theme-light-bg-2: #f0f0f0;
+  --chat-theme-light-bg-1: #fff;
+  --chat-theme-light-bg-primary: #fff;
+  --chat-theme-light-bg-secondary: #f0f0f0;
+  --chat-theme-light-bg-active: #e6f1ff;
+  --chat-theme-light-text-5: #000;
+  --chat-theme-light-text-4: #666;
+  --chat-theme-light-text-3: #7a7a7a;
+  --chat-theme-light-text-2: #7a7a7a;
+  --chat-theme-light-text-1: #7a7a7a;
+  --chat-theme-light-text-primary: #000;
+  --chat-theme-light-text-secondary: #7a7a7a;
+  --chat-theme-light-status-info: #147aff;
+  --chat-theme-light-status-success: #34c759;
+  --chat-theme-light-status-danger: #ff3742;
+  --chat-theme-light-border-5: #e0e0e0;
+  --chat-theme-light-box-shadow-1: rgba(0, 0, 0, 0.24) 0 3px 8px;
+  color-scheme: light dark;
+}
+
+:root {
+  --chat-theme-dark-bg-5: #76777e;
+  --chat-theme-dark-bg-4: #5d5e67;
+  --chat-theme-dark-bg-3: #454650;
+  --chat-theme-dark-bg-2: #2e303a;
+  --chat-theme-dark-bg-1: #191b26;
+  --chat-theme-dark-bg-primary: #191b26;
+  --chat-theme-dark-bg-secondary: #2e303a;
+  --chat-theme-dark-bg-active: #4e4e4e;
+  --chat-theme-dark-text-5: #000;
+  --chat-theme-dark-text-4: #666;
+  --chat-theme-dark-text-3: #7a7a7a;
+  --chat-theme-dark-text-2: #7a7a7a;
+  --chat-theme-dark-text-1: #7a7a7a;
+  --chat-theme-dark-text-primary: #fff;
+  --chat-theme-dark-text-secondary: #8b8b8b;
+  --chat-theme-dark-status-info: #147aff;
+  --chat-theme-dark-status-success: #34c759;
+  --chat-theme-dark-status-danger: #ff3742;
+  --chat-theme-dark-border-5: #4e4e4e;
+  --chat-theme-dark-box-shadow-1: rgba(203, 203, 203, 0.755) 0 3px 8px;
+  color-scheme: light dark;
+}
 .tui-conversation {
   flex: 1;
-  min-width: 360px;
-  max-width: 400px;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
 }
+[data-chat-theme=light] .tui-conversation {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .tui-conversation {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .tui-conversation .tui-conversation-header {
   display: flex;
   padding: 10px 20px;
@@ -253,17 +566,18 @@ body #webpack-dev-server-client-overlay {
   margin: 100px auto 50px;
 }
 .tui-conversation .no-result-message {
-  color: #999999;
+  color: #999;
   font-weight: 400;
   font-size: 16px;
   font-family: PingFangSC-Medium;
   line-height: 22px;
 }
 
-.tui-conversation-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
+.tui-conversation-h5 .tui-conversation-header {
+  padding: 10px;
+}
+.tui-conversation-h5 .conversation-list-container .conversation-preview-container {
+  padding: 0 10px;
 }
 .message-default {
   width: 100%;
@@ -294,6 +608,12 @@ body #webpack-dev-server-client-overlay {
   padding-bottom: 3px;
   max-width: 60%;
 }
+[data-chat-theme=light] .message-default .content .name {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .message-default .content .name {
+  color: var(--chat-theme-dark-text-primary);
+}
 
 .in {
   flex: 1;
@@ -350,7 +670,12 @@ body #webpack-dev-server-client-overlay {
   font-family: PingFangSC-Medium;
   line-height: 14px;
   text-align: right;
-  color: #7A7A7A;
+}
+[data-chat-theme=light] .message-status .time {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-theme=dark] .message-status .time {
+  color: var(--chat-theme-dark-text-secondary);
 }
 
 .message-image, .message-video {
@@ -361,8 +686,11 @@ body #webpack-dev-server-client-overlay {
   bottom: 10px;
   right: 10px;
 }
-.message-image .message-status .time, .message-video .message-status .time {
-  color: #FFFFFF;
+[data-chat-theme=light] .message-image .message-status .time, [data-chat-theme=light] .message-video .message-status .time {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .message-image .message-status .time, [data-chat-theme=dark] .message-video .message-status .time {
+  color: var(--chat-theme-dark-text-primary);
 }
 
 .message-text {
@@ -382,6 +710,12 @@ body #webpack-dev-server-client-overlay {
   display: inline;
   vertical-align: middle;
 }
+[data-chat-theme=light] .message-text-content-p {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .message-text-content-p {
+  color: var(--chat-theme-dark-text-primary);
+}
 .message-text-content .message-status {
   display: inline-flex;
   float: right;
@@ -504,9 +838,14 @@ body #webpack-dev-server-client-overlay {
 }
 
 .meesage-bubble-reply {
-  background: #ECEBEB;
   padding: 8px 16px;
 }
+[data-chat-theme=light] .meesage-bubble-reply {
+  background-color: var(--chat-theme-light-bg-secondary);
+}
+[data-chat-theme=dark] .meesage-bubble-reply {
+  background-color: var(--chat-theme-dark-bg-secondary);
+}
 .meesage-bubble-reply-in {
   border-radius: 16px 16px 16px 0;
 }
@@ -514,8 +853,7 @@ body #webpack-dev-server-client-overlay {
   border-radius: 16px 16px 0px 16px;
 }
 .meesage-bubble-reply .message-text {
-  border-radius: none;
-  border: none;
+  border: none !important;
 }
 .meesage-bubble-reply .bubble {
   padding: 0;
@@ -527,25 +865,38 @@ body #webpack-dev-server-client-overlay {
   position: relative;
   padding: 10px 14px;
   margin-bottom: 10px;
-  background: #FFFFFF;
+}
+[data-chat-theme=light] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .meesage-bubble-reply-main {
+  background-color: var(--chat-theme-dark-bg-primary);
 }
 .meesage-bubble-reply-main::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
-  background: #D9D9D9;
   top: 0;
   left: 0;
 }
+[data-chat-theme=light] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-light-bg-5);
+}
+[data-chat-theme=dark] .meesage-bubble-reply-main::before {
+  background-color: var(--chat-theme-dark-bg-5);
+}
 .meesage-bubble-reply-main .title {
-  font-family: PingFangSC-Medium;
-  font-style: normal;
   font-weight: 500;
   font-size: 14px;
-  line-height: 17px;
   padding-bottom: 10px;
 }
+[data-chat-theme=light] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .meesage-bubble-reply-main .title {
+  color: var(--chat-theme-dark-text-primary);
+}
 .meesage-bubble-reply-main .message-context {
   opacity: 0.6;
 }
@@ -779,24 +1130,39 @@ body #webpack-dev-server-client-overlay {
   color: #147aff !important;
 }
 
-.message-text, .message-custom {
-  border: 1px solid #DDDDDD;
+[data-chat-theme=light] .message-text,
+[data-chat-theme=light] .message-custom {
+  border: 1px solid var(--chat-theme-light-border-5);
 }
-
-.bubble-out {
-  background: #F2F7FF;
-  border: 1px solid #F2F7FF;
+[data-chat-theme=dark] .message-text,
+[data-chat-theme=dark] .message-custom {
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
 
-.meesage-bubble-reply-out {
-  background: #F2F7FF;
+[data-chat-theme=light] .bubble {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .bubble {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
+[data-chat-theme=light] .bubble-out {
+  border: none;
+  background-color: var(--chat-theme-light-bg-secondary);
+}
+[data-chat-theme=dark] .bubble-out {
+  border: none;
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
+
 .meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
   background: none;
 }
 
-.message-tip {
-  color: #999999;
+[data-chat-theme=light] .message-tip {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-theme=dark] .message-tip {
+  color: var(--chat-theme-dark-text-secondary);
 }
 
 .tip .bubble .edit {
@@ -824,10 +1190,22 @@ body #webpack-dev-server-client-overlay {
 }
 
 .plugin-popup-box {
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
 }
+[data-chat-theme=light] .plugin-popup-box {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .plugin-popup-box {
+  color: var(--chat-theme-dark-text-primary);
+}
+[data-chat-theme=light] .plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
+}
+[data-chat-theme=dark] .plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
+}
 .tui-message-input {
   display: flex;
   flex-direction: column;
@@ -842,7 +1220,6 @@ body #webpack-dev-server-client-overlay {
 .tui-message-input-main .input-box {
   flex: 1;
   display: flex;
-  padding: 0 8px;
   position: relative;
   min-height: 20px;
   max-height: 200px;
@@ -851,6 +1228,7 @@ body #webpack-dev-server-client-overlay {
   padding: 10px;
 }
 .tui-message-input-main .input-box .input-visibility-content {
+  min-height: 20px;
   word-break: break-all;
   visibility: hidden;
   max-width: -webkit-fill-available;
@@ -878,6 +1256,12 @@ body #webpack-dev-server-client-overlay {
   border: none;
   background: none;
 }
+[data-chat-theme=light] .tui-message-input-main .input-box textarea {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .tui-message-input-main .input-box textarea {
+  color: var(--chat-theme-dark-text-primary);
+}
 .tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
   border: none;
   outline: none;
@@ -927,6 +1311,7 @@ ul li {
 .emoji-picker .face-list-item {
   padding: 5px;
   cursor: pointer;
+  user-select: none;
 }
 .emoji-picker .face-list-item img {
   width: 20px;
@@ -971,13 +1356,13 @@ ul li {
 
 .input-quote {
   padding: 7px 16px;
-  background: #F9F9F9;
+  background: #f9f9f9;
   display: flex;
   align-items: center;
 }
 .input-quote-content {
   flex: 1;
-  background: #FFFFFF;
+  background: #fff;
   padding: 2px 14px;
   position: relative;
   display: flex;
@@ -986,14 +1371,14 @@ ul li {
   font-size: 14px;
   font-family: PingFangSC-Medium;
   line-height: 17px;
-  color: #000000;
+  color: #000;
 }
 .input-quote-content::before {
   content: "";
   position: absolute;
   width: 6px;
   height: 100%;
-  background: #999999;
+  background: #999;
   top: 0;
   left: 0;
 }
@@ -1006,7 +1391,7 @@ ul li {
 }
 
 .tui-forward {
-  background: #FFFFFF;
+  background: #fff;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
@@ -1039,7 +1424,7 @@ ul li {
   line-height: 20px;
   padding: 10px;
   text-align: center;
-  color: #999999;
+  color: #999;
 }
 .tui-forward-search {
   padding: 10px 15px;
@@ -1095,7 +1480,7 @@ ul li {
 }
 .tui-forward-footer .button {
   cursor: pointer;
-  background: #0365F9;
+  background: #0365f9;
   border-radius: 31px;
   padding: 10px 21px;
   font-family: PingFangSC-Medium;
@@ -1103,7 +1488,7 @@ ul li {
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
-  color: #FFFFFF;
+  color: #fff;
   border: none;
 }
 .tui-forward-footer-name {
@@ -1123,19 +1508,38 @@ ul li {
   transform: rotate(90deg);
 }
 
-.tui-message-input .tui-kit-input-box--focus {
-  outline: 1px solid #147AFF;
+[data-chat-theme=light] .tui-message-input {
+  background-color: var(--chat-theme-light-bg-primary);
 }
-.tui-message-input .input-box {
-  border: 1px solid #D3DAF3;
-  background: #FFFFFF;
+[data-chat-theme=dark] .tui-message-input {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
+[data-chat-theme=light] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-light-status-info);
+}
+[data-chat-theme=dark] .tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid var(--chat-theme-dark-status-info);
+}
+[data-chat-theme=light] .tui-message-input .input-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  border: 1px solid var(--chat-theme-light-border-5);
+}
+[data-chat-theme=dark] .tui-message-input .input-box {
+  background-color: var(--chat-theme-dark-bg-primary);
+  border: 1px solid var(--chat-theme-dark-border-5);
 }
 
 .input-plugin-popup-box {
-  background: #FFFFFF;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   border-radius: 16px;
 }
+[data-chat-theme=light] .input-plugin-popup-box {
+  background-color: var(--chat-theme-light-bg-primary);
+  box-shadow: var(--chat-theme-light-box-shadow-1);
+}
+[data-chat-theme=dark] .input-plugin-popup-box {
+  background-color: var(--chat-theme-dark-bg-3);
+  box-shadow: var(--chat-theme-dark-box-shadow-1);
+}
 .tui-kit-avatar {
   display: flex;
   align-items: center;
@@ -1197,7 +1601,6 @@ ul li {
 .conversation-preview-container {
   display: flex;
   align-items: center;
-  background-color: #FFFFFF;
   border: none;
   width: 100%;
   height: 64px;
@@ -1205,6 +1608,12 @@ ul li {
   line-height: 17px;
   padding: 0 20px;
 }
+[data-chat-theme=light] .conversation-preview-container {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .conversation-preview-container {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .conversation-preview-container .content {
   flex: 1 1 auto;
   text-align: left;
@@ -1219,13 +1628,17 @@ ul li {
   font-family: PingFangSC-Medium;
   padding: 1px 0;
   width: 100%;
-  color: #000;
+}
+[data-chat-theme=light] .conversation-preview-container .content .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-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;
-  color: #7A7A7A;
   font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 400;
@@ -1233,6 +1646,12 @@ ul li {
   line-height: 14px;
   padding: 1px 0;
 }
+[data-chat-theme=light] .conversation-preview-container .content .message {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-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;
@@ -1244,7 +1663,6 @@ ul li {
   padding: 1px 0;
 }
 .conversation-preview-container .external .time {
-  color: #7A7A7A;
   font-family: PingFangSC-Medium;
   font-style: normal;
   font-weight: 400;
@@ -1252,6 +1670,12 @@ ul li {
   line-height: 14px;
   padding: 1px 0;
 }
+[data-chat-theme=light] .conversation-preview-container .external .time {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-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;
@@ -1279,36 +1703,60 @@ ul li {
   font-weight: 500;
   box-sizing: border-box;
 }
-.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
-  background: #147AFF;
-  opacity: 0.6;
-  color: #FFFFFF !important;
+[data-chat-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-light-status-danger);
+}
+[data-chat-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item.delete {
+  color: var(--chat-theme-dark-status-danger);
+}
+[data-chat-theme=light] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-light-bg-active);
+}
+[data-chat-theme=dark] .conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background-color: var(--chat-theme-dark-bg-active);
+}
+[data-chat-theme=light] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-light-bg-active);
+}
+[data-chat-theme=dark] .conversation-preview-container:hover {
+  background-color: var(--chat-theme-dark-bg-active);
+}
+[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-light-bg-secondary);
 }
-.conversation-preview-container:hover {
-  background-color: rgba(0, 110, 255, 0.1);
+[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--pin {
+  background-color: var(--chat-theme-dark-bg-secondary);
 }
-.conversation-preview-container.conversation-preview-content--pin {
-  background-color: rgba(242, 242, 242, 0.831372549);
+[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-light-bg-active);
 }
-.conversation-preview-container.conversation-preview-content--active {
-  background-color: rgba(0, 110, 255, 0.1);
+[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--active {
+  background-color: var(--chat-theme-dark-bg-active);
 }
-.conversation-preview-container.conversation-preview-content--active .title {
-  color: rgb(20, 122, 255);
+[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--active .title {
+  color: var(--chat-theme-light-status-info);
+}
+[data-chat-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;
-  background: #FF3742;
   border-radius: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px 5px 1px;
-  color: #FFFFFF;
   font-size: 11px;
   font-weight: 700;
   margin: 2px 0 2px auto;
+  color: #fff;
+}
+[data-chat-theme=light] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-light-status-danger);
+}
+[data-chat-theme=dark] .conversation-preview-container.conversation-preview-content--unread .unread {
+  background-color: var(--chat-theme-dark-status-danger);
 }
 .tui-chat-header {
   padding: 16px 20px;
@@ -1317,6 +1765,12 @@ ul li {
   justify-content: space-between;
   align-items: center;
 }
+[data-chat-theme=light] .tui-chat-header {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .tui-chat-header {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .tui-chat-header-left {
   display: flex;
   align-items: center;
@@ -1333,7 +1787,12 @@ ul li {
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
-  line-height: 17px;
+}
+[data-chat-theme=light] .tui-chat-header .title {
+  color: var(--chat-theme-light-text-primary);
+}
+[data-chat-theme=dark] .tui-chat-header .title {
+  color: var(--chat-theme-dark-text-primary);
 }
 .tui-chat-header .system {
   height: 32px;
@@ -1365,6 +1824,12 @@ ul li {
   position: relative;
   padding: 0 20px;
 }
+[data-chat-theme=light] .message-list {
+  background-color: var(--chat-theme-light-bg-primary);
+}
+[data-chat-theme=dark] .message-list {
+  background-color: var(--chat-theme-dark-bg-primary);
+}
 .message-list.hide {
   opacity: 0;
 }
@@ -1379,10 +1844,14 @@ ul li {
   font-style: normal;
   font-weight: 500;
   line-height: 17px;
-  color: #999999;
+}
+[data-chat-theme=light] .message-list .no-more {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-theme=dark] .message-list .no-more {
+  color: var(--chat-theme-dark-text-secondary);
 }
 .message-list-time {
-  color: #7a7a7a;
   font-family: PingFangSC-Medium;
   font-size: 12px;
   font-weight: 400;
@@ -1390,31 +1859,33 @@ ul li {
   padding: 10px;
   text-align: center;
 }
+[data-chat-theme=light] .message-list-time {
+  color: var(--chat-theme-light-text-secondary);
+}
+[data-chat-theme=dark] .message-list-time {
+  color: var(--chat-theme-dark-text-secondary);
+}
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 30%;
-  max-width: 360px;
-  min-width: 360px;
-  height: 100%;
 }
 .tui-profile-header {
   box-sizing: border-box;
   width: 100%;
-  padding: 16px 20px;
+  padding: 15px;
   display: flex;
   align-items: center;
-  line-height: 32px;
 }
 .tui-profile-header h1 {
+  font-size: 16px;
   font-weight: 600;
   padding: 0 11px;
 }
 .tui-profile-main {
   max-width: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 10px 10px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1438,24 +1909,28 @@ ul li {
 }
 .tui-profile-ID {
   padding: 6px 0;
+  margin: 0;
   display: flex;
   align-items: center;
   font-weight: 400;
   font-size: 12px;
   font-family: PingFangSC-Medium;
   line-height: 14px;
-  color: #666666;
+  color: #666;
+}
+.tui-profile-ID h5 {
+  margin: 0;
 }
 .tui-profile-list {
   box-sizing: border-box;
   width: 100%;
-  padding: 0 20px;
+  padding: 0 15px;
   display: flex;
   flex-direction: column;
   user-select: none;
 }
 .tui-profile-list-item {
-  padding: 20px 0 0;
+  padding: 0;
   cursor: pointer;
 }
 .tui-profile-list-item h4 {
@@ -1464,11 +1939,12 @@ ul li {
   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 #EEEEEE;
+  border-bottom: 1px solid #eee;
 }
 .tui-profile-edit {
   border-bottom: none !important;
@@ -1482,7 +1958,7 @@ ul li {
 }
 .tui-profile-birthday .react-date-picker__calendar .react-calendar__navigation {
   height: 20px !important;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 .tui-profile-birthday-calendar {
   border: none !important;
@@ -1525,7 +2001,7 @@ ul li {
   box-sizing: border-box;
 }
 .tui-kit-input-box.tui-kit-input-box--focus {
-  outline: 1px solid #147AFF;
+  outline: 1px solid #147aff;
 }
 .tui-kit-input-box.tui-kit-input-border--bottom {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1544,6 +2020,7 @@ ul li {
   border-radius: 10px;
   border: none;
   box-sizing: border-box;
+  font-size: 14px;
 }
 .tui-kit-input-box .tui-kit-input:focus {
   border: none;
@@ -1563,12 +2040,12 @@ ul li {
   border-left: 1px solid #f9fafb;
 }
 .tui-manage .red {
-  color: #FF584C !important;
+  color: #ff584c !important;
 }
 .tui-manage .tui-manage-title {
   display: flex;
   align-items: center;
-  padding: 24px 20px;
+  padding: 24px 10px;
 }
 .tui-manage .tui-manage-title span {
   margin-right: 10px;
@@ -1599,7 +2076,7 @@ ul li {
   font-size: 12px;
   font-family: PingFangSC-Medium;
   line-height: 14px;
-  color: #666666;
+  color: #666;
   margin-bottom: 30px;
   text-align: center;
 }
@@ -1623,7 +2100,7 @@ ul li {
 }
 
 .tui-manage.tui-h5-manage {
-  border-left: 1px solid #f9fafb;
+  border-left: none;
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -1776,7 +2253,7 @@ ul li {
 .model {
   background: rgba(0, 0, 0, 0.5);
   position: fixed;
-  z-index: 2;
+  z-index: 5;
   width: 100vw;
   top: 0;
   left: 0;