@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

package/lib/utils/aegis/config.d.ts

@@ -9,4 +9,4 @@ declare const isUploadLoaded: boolean;
 declare const isUploadDetailEvent: boolean;
 declare const aegisId = "iHWefAYqooXkVQhcyK";
 declare const projectName = "TUIRoomKit-Electron";
-export { isUploadLoaded, isUploadDetailEvent, aegisId, projectName, };
+export { isUploadLoaded, isUploadDetailEvent, aegisId, projectName };

package/lib/utils/common.d.ts

@@ -1,3 +1,4 @@
+type ThemeOption = 'LIGHT' | 'DARK';
 /**
  * Get Language
  * @returns language
@@ -8,3 +9,5 @@ export declare function getLanguage(): string;
  * @returns boolean
  */
 export declare function checkNumber(roomId: string): boolean;
+export declare function toTargetTheme(themeOption: ThemeOption): string;
+export {};

package/lib/utils/common.js

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("./utils.js");
+const THEME = {
+  LIGHT: "white",
+  DARK: "black"
+};
 function getLanguage() {
-  let language = utils.getUrlParam("lang") || localStorage.getItem("tuiRoom-language") || navigator.language || "zh";
+  const isWxMiniProgram = typeof wx !== "undefined" && wx.getSystemInfoSync;
+  let language = utils.getUrlParam("lang") || localStorage.getItem("tuiRoom-language") || navigator.language || (isWxMiniProgram ? "zh-CN" : "en-US");
   language = language.replace(/_/, "-").toLowerCase();
-  if (language === "zh-cn" || language === "zh") {
-    language = "zh-CN";
-  } else if (language === "en" || language === "en-us" || language === "en-GB") {
-    language = "en-US";
-  }
+  const isZh = language.startsWith("zh");
+  language = isZh ? "zh-CN" : "en-US";
   return language;
 }
+function toTargetTheme(themeOption) {
+  const theme = themeOption === "DARK" ? THEME.DARK : THEME.LIGHT;
+  return theme;
+}
 exports.getLanguage = getLanguage;
+exports.toTargetTheme = toTargetTheme;

package/lib/utils/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const isVue27: boolean;
 export declare const isVue3: boolean;
-export declare const isInnerScene: boolean;
+export declare const isInnerScene: any;

package/lib/utils/constants.js

@@ -19,10 +19,10 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const Vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(Vue);
-var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: false, PROD: true, SSR: false };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
 const isVue27 = /^2\.7\.*/.test(Vue__namespace.version);
 const isVue3 = /^3\.*/.test(Vue__namespace.version);
-const isInnerScene = { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.src || new URL("utils/constants.js", document.baseURI).href } && define_import_meta_env_default && define_import_meta_env_default.VITE_RUNTIME_SCENE === "inner";
+const isInnerScene = { url: typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.src || new URL("utils/constants.js", document.baseURI).href } && __vite_import_meta_env__ && false;
 exports.isInnerScene = isInnerScene;
 exports.isVue27 = isVue27;
 exports.isVue3 = isVue3;

package/lib/utils/domOperation.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const environment = require("./environment.js");
-const instanceMapping = /* @__PURE__ */ new Map();
 function getScrollInfo(selector, instanceName) {
-  if (!selector)
-    return Promise.reject(new Error(`getScrollInfo() get error selector ${typeof selector}.`));
   if (!environment.isWeChat && window) {
-    const dom = typeof selector === "object" ? selector : document.querySelector(selector);
+    const dom = document.querySelector(selector);
     if (!dom)
-      return Promise.reject(new Error(`getScrollInfo() can't find ${selector} dom.`));
+      return Promise.reject(
+        new Error(`getScrollInfo() can't find ${selector} dom.`)
+      );
     return Promise.resolve({
       id: dom.id,
       scrollTop: dom.scrollTop,
@@ -18,19 +17,10 @@ function getScrollInfo(selector, instanceName) {
     });
   }
   if (environment.isWeChat) {
-    if (!instanceName)
-      return Promise.reject(new Error("uni.getScrollInfo() need instanceName in params."));
-    const _query = uni.createSelectorQuery().in(instanceMapping.get(instanceName));
-    return new Promise((resolve, reject) => {
-      _query.select(selector).scrollOffset((data) => {
-        if (data) {
-          resolve(data);
-        }
-      }).exec();
-      setTimeout(() => reject(new Error(`uni.getScrollInfo(${selector}) timeout.`)), 500);
-    });
+    return Promise.reject(
+      new Error("uni.getScrollInfo() need instanceName in params.")
+    );
   }
   return Promise.reject(new Error("getScrollInfo() occur error"));
 }
 exports.getScrollInfo = getScrollInfo;
-exports.instanceMapping = instanceMapping;

package/lib/utils/environment.js

@@ -2,7 +2,7 @@
 var _a, _b;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const universalApi = require("@tencentcloud/universal-api");
-universalApi.getPlatform() === "pc";
+const isPC = universalApi.getPlatform() === "pc";
 const isH5 = universalApi.getPlatform() === "h5";
 const isWeChat = universalApi.getPlatform() === "wechat";
 const isApp = universalApi.getPlatform() === "app";
@@ -13,4 +13,5 @@ exports.isApp = isApp;
 exports.isElectron = isElectron;
 exports.isH5 = isH5;
 exports.isMobile = isMobile;
+exports.isPC = isPC;
 exports.isWeChat = isWeChat;

package/lib/utils/utils.d.ts

@@ -45,12 +45,24 @@ export declare function getUrlParam(key: string): string | null;
  */
 export declare function deepClone(data: any): any;
 export { clipBoard } from './adapter';
-export declare const isUndefined: (value: any) => boolean;
-export declare const isString: (value: any) => boolean;
-export declare const isNumber: (value: any) => boolean;
+export declare const isUndefined: (value: any) => value is undefined;
+export declare const isString: (value: any) => value is string;
+export declare const isNumber: (value: any) => value is number;
 export declare const isStringNumber: (value: any) => boolean;
 export declare const isFunction: (value: any) => boolean;
-export declare function addSuffix(value: string | number, suffix?: string): string | number;
+export declare function addSuffix(value: string | number, suffix?: string): string;
 export declare function getUrlWithRoomId(roomId: string): string;
 export declare function calculateByteLength(str: string): number;
 export declare function objectMerge(...args: any[]): any;
+export declare function convertSecondsToHMS(seconds: number): {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+/**
+ * Determine if the input string contains only numbers
+ * @param str data of any string
+ * @returns It returns true if it contains only numbers, otherwise it returns false.
+ */
+export declare function isDigitsOnly(str: string): boolean;
+export declare function getNanoId(size?: number): string;

package/lib/utils/utils.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./environment.js");
+const environment = require("./environment.js");
 function debounce(fn, delay) {
   let timer;
   return function(...args) {
     if (timer > 0) {
       clearTimeout(timer);
     }
-    timer = window == null ? void 0 : window.setTimeout(() => {
+    timer = setTimeout(() => {
       fn.apply(this, args);
       timer = -1;
     }, delay);
@@ -89,6 +89,7 @@ function addSuffix(value, suffix = "px") {
   return value;
 }
 function getUrlWithRoomId(roomId) {
+  if (environment.isWeChat) return "";
   const currentUrl = window.location.href;
   const urlObj = new URL(currentUrl);
   const params = new URLSearchParams(urlObj.search);
@@ -96,7 +97,7 @@ function getUrlWithRoomId(roomId) {
     params.delete("roomId");
   }
   params.append("roomId", roomId);
-  return `${urlObj.origin + urlObj.pathname + "#/home?" + params.toString()}`;
+  return `${`${urlObj.origin + urlObj.pathname}#/home?${params.toString()}`}`;
 }
 function calculateByteLength(str) {
   let byteLength = 0;
@@ -126,13 +127,40 @@ function objectMerge(...args) {
     return acc;
   }, {});
 }
+function convertSecondsToHMS(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = seconds % 60;
+  return {
+    hours,
+    minutes,
+    seconds: remainingSeconds
+  };
+}
+function isDigitsOnly(str) {
+  const regex = /^\d+$/;
+  return regex.test(str);
+}
+function getNanoId(size = 21) {
+  const urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+  let id = "";
+  let i = size;
+  while (i) {
+    id += urlAlphabet[Math.random() * 64 | 0];
+    i = i - 1;
+  }
+  return id;
+}
 exports.addSuffix = addSuffix;
 exports.calculateByteLength = calculateByteLength;
+exports.convertSecondsToHMS = convertSecondsToHMS;
 exports.debounce = debounce;
 exports.deepClone = deepClone;
 exports.exitFullScreen = exitFullScreen;
+exports.getNanoId = getNanoId;
 exports.getUrlParam = getUrlParam;
 exports.getUrlWithRoomId = getUrlWithRoomId;
+exports.isDigitsOnly = isDigitsOnly;
 exports.isFunction = isFunction;
 exports.isNumber = isNumber;
 exports.isStringNumber = isStringNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/roomkit-electron-vue3",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",
@@ -20,14 +20,17 @@
   "dependencies": {
     "@tencentcloud/chat": "latest",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-electron": "^2.5.0",
+    "@tencentcloud/tuiroom-engine-electron": "^2.6.0",
     "@tencentcloud/universal-api": "^2.0.9",
     "interactjs": "^1.10.26",
-    "mitt": "^3.0.0"
+    "mitt": "^3.0.0",
+    "fabric": "^5.3.0",
+    "hotkeys-js": "^3.10.1"
   },
   "peerDependencies": {
     "pinia": "^2.1.7",
-    "vue": "~3.3.13"
+    "vue": "~3.3.13",
+    "electron": ">=4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/scripts/eject.js

@@ -13,18 +13,23 @@ const readline = require('readline').createInterface({
 
 const defaultTargetDir = './src/components/TUIRoom';
 
-readline.question(`This script copies the TUIRoomKit source code to the ${defaultTargetDir} path, do you want to change the copy path? (y|n)`, (answer) => {
-  if (answer.toLocaleLowerCase() === 'y' || answer.toLocaleLowerCase() === 'yes') {
-    readline.question('Please enter your copy path: ', (targetDir) => {
-      copyTUIRoomKit(targetDir);
+readline.question(
+  `This script copies the TUIRoomKit source code to the ${defaultTargetDir} path, do you want to change the copy path? (y|n)`,
+  answer => {
+    if (
+      answer.toLocaleLowerCase() === 'y' ||
+      answer.toLocaleLowerCase() === 'yes'
+    ) {
+      readline.question('Please enter your copy path: ', targetDir => {
+        copyTUIRoomKit(targetDir);
+        readline.close();
+      });
+    } else {
+      copyTUIRoomKit();
       readline.close();
-    });
-  } else {
-    copyTUIRoomKit();
-    readline.close();
+    }
   }
-});
-
+);
 
 function copyTUIRoomKit(targetDir) {
   if (!targetDir) {
@@ -35,18 +40,22 @@ function copyTUIRoomKit(targetDir) {
 
   try {
     fs.accessSync(targetPath);
-    errorLog(`${targetDir} path already exists, if you want to copy it, please delete the target path first or re-specify it!`);
+    errorLog(
+      `${targetDir} path already exists, if you want to copy it, please delete the target path first or re-specify it!`
+    );
     return;
   } catch (error) {
     fs.mkdirSync(targetPath, { recursive: true });
   }
   copyExitsFolder(sourcePath, targetPath);
-  successLog(`The TUIRoomKit source code has been successfully copied to the ${targetDir} path!`);
+  successLog(
+    `The TUIRoomKit source code has been successfully copied to the ${targetDir} path!`
+  );
 }
 
 function copyExitsFolder(src, dest) {
   const files = fs.readdirSync(src);
-  files.forEach((file) => {
+  files.forEach(file => {
     const srcPath = path.join(src, file);
     const destPath = path.join(dest, file);
     if (fs.statSync(srcPath).isDirectory()) {

package/src/TUIRoom/assets/style/black-theme.scss

@@ -18,11 +18,11 @@
   --font-color-4: #4F586B;
   --font-color-5: #7C85A6;
   --font-color-6: #CFD5E6;
-  --font-color-7: #FFFFFF;
+  --font-color-7: #FFF;
   --font-color-8: #8F9AB2;
   --font-color-9: #969EB4;
   --font-color-10: #FF643D;
-  --title-color: #000000;
+  --title-color: #000;
   --stroke-color: rgba(79, 88, 107, 0.30);
   --stroke-color-2: #434956;
   --border-color: #2E323D;
@@ -31,12 +31,11 @@
   --active-color-2: #4791FF;
   --green-color: #27C39F;
   --orange-color: #F06C4B;
-  --white-color: #FFFFFF;
-  --black-color: #000000;
+  --white-color: #FFF;
+  --black-color: #000;
   --red-color: #ED414D;
   --red-color-2: #F23C5B;
   --red-color-3: #E5395C;
-
   --color-font: #D5E0F2;
   --control-content: rgba(27, 30, 38, 0.9);
   --background-image-color: rgba(61,119,255,0.53);
@@ -66,7 +65,7 @@
   --el-drawer-header-color: #CFD4E6;
   --user-extra-info-bg-color: #4D70FF;
   --user-extra-info-color: #2E323D;
-  --check-select-color: #FFFFFF;
+  --check-select-color: #FFF;
   --member-item-container-hover-bg-color: rgba(46,50,61,0.70);
   --el-bg-color-select: #1D2029;
   --el-bg-color-overlay-select: #1D2029;
@@ -88,17 +87,17 @@
   --apply-list-container-color: #CFD4E6;
   --room-sidebar-bg-color: #1D2029;
   --create-room-option: rgba(50,59,84,0.60);
-  --create-room-option-color: #EEEEEE;
+  --create-room-option-color: #EEE;
   --create-room-option-tab: #006EFF;
-  --create-room-option-icon: #EEEEEE;
-  --create-room-option-icon-color:#EEEEEE;
+  --create-room-option-icon: #EEE;
+  --create-room-option-icon-color:#EEE;
   --control-region-bg-color: rgba(13,16,21,0.60);
   --dialog-tabs-bg-color: rgba(0,0,0,0.20);
   --divide-line-color: #2E323D;
   --divice-line: #CFD4E6;
   --el-drawer-divide: #0D0F15;
   --send-btn: #CFD4E6;
-  --invite-region: #FFFFFF;
+  --invite-region: #FFF;
   --layout-list: #1D2029;
   --layout-item: #2E323D;
   --stream-list-container: #1D2029;
@@ -114,7 +113,7 @@
   --mic-bar-color: #2E323D;
   --more-notice-color: #7C85A6;
   --setting-dialog: none;
-  --caret-color: #ffffff;
+  --caret-color: #fff;
   --apply-container-primary: #CFD4E6;
   --apply-container-outline: #CFD4E6;
   --el-drawer-body: #1D2029;
@@ -127,6 +126,7 @@
   --el-message-box-title: #CFD4E6;
   --el-button-text-color: #7C85A6;
   --selected-screen-share-dialog: #006EFF;
+
   /* H5 New Content */
   --log-out-mobile: rgba(0, 0, 0, 0.7);
   --log-out: #2C2C2E;
@@ -139,24 +139,24 @@
   --chat-editor-input-color-h5:#292D38;
   --chat-editor-bg-color-h5: #0D1015;
   --message-list-color-h5: #1B1E26;
-  --popup-mute-background-color-h5: #FFFFFF;
+  --popup-mute-background-color-h5: #FFF;
   --mute-button-color-h5: #CFD5E6;
   --member-control-background-color-h5: #1B1E26;
   --member-border-color-h5:rgba(207, 212, 230, 0.1);
   --member-title-content-h5: #CFD5E6;
   --end-control-text-h5: #292D38;
   --end-control-title-h5: #CACACB;
-  --end-control-cancel-h5: #FFFFFF;
+  --end-control-cancel-h5: #FFF;
   --transfer-input-color-h5: #292D38;
   --popup-background-color-h5: #1B1E26;
   --popup-title-color-h5: #CFD4E6;
   --popup-content-color-h5: #7C85A6;
   --close-cancel-h5: #5a5a5e;
-  --dialog-title-h5: #FFFFFF;
+  --dialog-title-h5: #FFF;
   --manage-member-button-h5:#292D38;
   --message-body-h5: #292D38;
   --user-extra-info-bg-color-h5: #0565FA;
-  --user-extra-info-color-h5: #FFFFFF;
+  --user-extra-info-color-h5: #FFF;
   --apply-container-background-outline-h5: #292D38;
   --apply-container-outline-h5: #CFD5E6;
 }

package/src/TUIRoom/assets/style/global.scss

@@ -1,17 +1,18 @@
 body, html {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
+
 #roomContainer {
   width: 100%;
   height: 100%;
-  margin: 0;
   padding: 0;
-  user-select: none;
+  margin: 0;
   overflow: hidden;
   touch-action: manipulation;
+  user-select: none;
 }
 
 #roomContainer *, ::before, ::after{

package/src/TUIRoom/assets/style/white-theme.scss

@@ -1,24 +1,24 @@
 .tui-theme-white {
-  --background-color-1: #FFFFFF;
+  --background-color-1: #FFF;
   --background-color-2: #FBFCFE;
   --background-color-3: #F0F3FA;
   --background-color-4: #D5E0F2;
   --background-color-5: transparent;
   --background-color-6: #BDBDBD;
   --background-color-7: #F9FAFC;
-  --background-color-8: #FFFFFF;
+  --background-color-8: #FFF;
   --background-color-9: #F7F9FC;
   --background-color-10: #E7EAF7;
   --background-color-11: #F0F3FA;
-  --background-color-12: #FFFFFF;
+  --background-color-12: #FFF;
   --hover-background-color-1: rgba(213, 224, 242, 0.5);
   --font-color-1: #4F586B;
   --font-color-2: #B2BBD1;
-  --font-color-3: #000000;
+  --font-color-3: #000;
   --font-color-4: #4F586B;
   --font-color-5: #4F586B;
   --font-color-6: #0F1014;
-  --font-color-7: #FFFFFF;
+  --font-color-7: #FFF;
   --font-color-8: #4F586B;
   --font-color-9: #969EB4;
   --font-color-10: #FF643D;
@@ -31,104 +31,104 @@
   --active-color-2: #1C66E5;
   --green-color: #27C39F;
   --orange-color: #F06C4B;
-  --white-color: #FFFFFF;
-  --black-color: #000000;
+  --white-color: #FFF;
+  --black-color: #000;
   --red-color: #ED414D;
   --red-color-2: #F23C5B;
   --red-color-3: #E5395C;
-
-  --control-content: #FFFFFF;
+  --control-content: #FFF;
   --background-image-color: transparent;
-  --input-color: #FFFFFF;
-  --create-room-mode-color-bg: #FFFFFF;
+  --input-color: #FFF;
+  --create-room-mode-color-bg: #FFF;
   --user-control-container-color-bg: #E8E8E8;
   --user-control-container-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px;
   --stream-container-flatten-bg-color: rgba(242,242,242,1);
-  --room-header-bg-color: #FFFFFF;
-  --room-footer-bg-color: #FFFFFF;
-  --room-network-bg-color: #FFFFFF;
-  --room-audiotab-bg-color: #FFFFFF;
-  --room-videotab-bg-color: #FFFFFF;
-  --stop-share-region-bg-color: #FFFFFF;
-  --setting-dialog-bg-color: #FFFFFF;
+  --room-header-bg-color: #FFF;
+  --room-footer-bg-color: #FFF;
+  --room-network-bg-color: #FFF;
+  --room-audiotab-bg-color: #FFF;
+  --room-videotab-bg-color: #FFF;
+  --stop-share-region-bg-color: #FFF;
+  --setting-dialog-bg-color: #FFF;
   --icon-arrow-hover: rgba(232, 232, 232, 0.7);
-  --el-dialog-bg-color: #FFFFFF;
-  --tabs-title-font-color: #000000;
+  --el-dialog-bg-color: #FFF;
+  --tabs-title-font-color: #000;
   --center-user-info-container-bg-color: #F2F2F2;
-  --stream-info-bg-color: #FFFFFF;
-  --title-color-bg: #666666;
-  --title-color-font: #000000;
-  --el-dialog-bg-color-select: #FFFFFF;
-  --el-text-color-primary-select: #000000;
+  --stream-info-bg-color: #FFF;
+  --title-color-bg: #666;
+  --title-color-font: #000;
+  --el-dialog-bg-color-select: #FFF;
+  --el-text-color-primary-select: #000;
   --el-text-color-regular-select: #596174;
-  --el-fill-color-blank-select: #FFFFFF;
+  --el-fill-color-blank-select: #FFF;
   --el-border-color-select: #C8CACC;
-  --setting-name-color: #000000;
-  --el-drawer-header-color: #000000;
+  --setting-name-color: #000;
+  --el-drawer-header-color: #000;
   --user-extra-info-bg-color: #006EFF;
-  --user-extra-info-color: #FFFFFF;
+  --user-extra-info-color: #FFF;
   --member-item-container-hover-bg-color: #F3F3F3;
-  --el-bg-color-select: #FFFFFF;
+  --el-bg-color-select: #FFF;
   --el-bg-color-overlay-select: #F2F2F2;
   --el-border-color-light-select: #F2F2F2;
   --el-fill-color-light-select: rgba(222, 222, 215, 0.7);
   --input-bg-color: #F2F2F2;
-  --input-font-color: #000000;
+  --input-font-color: #000;
   --input-border-color: #F2F2F2;
   --invite-title-color: #7C85A6;
-  --chat-editor-bg-color: #FFFFFF;
+  --chat-editor-bg-color: #FFF;
   --message-list-color: #F6F6F6;
-  --textarea-color: #000000;
+  --textarea-color: #000;
   --send-btn-color: #006EFF;
   --message-color: #006EFF;
-  --stream-container-border: #ffffff;
+  --stream-container-border: #fff;
   --apply-list-container-bg-color: #F2F2F2;
-  --apply-list-container-color: #000000;
+  --apply-list-container-color: #000;
   --room-sidebar-bg-color: #F2F2F2;
-  --create-room-option: #eeeeee;
+  --create-room-option: #eee;
   --create-room-option-tab: #006EFF;
   --create-room-option-color: #006EFF;
-  --create-room-option-icon: #000000;
+  --create-room-option-icon: #000;
   --create-room-option-icon-color:#006EFF;
-  --control-region-bg-color: #EEEEEE;
+  --control-region-bg-color: #EEE;
   --dialog-tabs-bg-color: #F0F3FA;
   --divide-line-color: transparent;
   --divice-line: #dcdcdc;
   --el-drawer-divide: transparent;
-  --send-btn: #FFFFFF;
-  --invite-region: #000000;
-  --layout-list: #EEEEEE;
-  --layout-item: #FFFFFF;
-  --stream-list-container: #EEEEEE;
+  --send-btn: #FFF;
+  --invite-region: #000;
+  --layout-list: #EEE;
+  --layout-item: #FFF;
+  --stream-list-container: #EEE;
   --more-btn-background: #006EFF;
-  --user-operate-list: #EEEEEE;
+  --user-operate-list: #EEE;
   --user-operate-item: #1D1029;
   --active-blur-background-color: transparent;
   --divide-line-color-setting: #dcdcdc;
   --el-disabled-border: #b6b6b6;
   --el-disabled-background: #dcdcdc;
   --el-border-lighter: #dcdcdc;
-  --title-active: #666666;
+  --title-active: #666;
   --mic-bar-color: #babbbe;
-  --more-notice-color: #000000;
+  --more-notice-color: #000;
   --setting-dialog: 8px;
-  --caret-color: #000000;
-  --apply-container-primary: #FFFFFF;
-  --apply-container-outline: #000000;
-  --el-drawer-body: #FFFFFF;
-  --input-color-setting: #FFFFFF;
+  --caret-color: #000;
+  --apply-container-primary: #FFF;
+  --apply-container-outline: #000;
+  --el-drawer-body: #FFF;
+  --input-color-setting: #FFF;
   --input-color-setting-hover: #f5f7fa;
   --switch-core-bg: #dcdfe6;
   --input-color-font: #646366;
   --input-color-setting-border: #babebe;
-  --el-message-box: #FFFFFF;
-  --el-message-box-title: #000000;
+  --el-message-box: #FFF;
+  --el-message-box-title: #000;
   --el-button-text-color: #646366;
   --selected-screen-share-dialog: #006EFF;
+
   /* H5 New Content */
   --log-out-mobile: rgba(0, 0, 0, 0.7);
   --log-out: #F9F9F9C7;
-  --log-out-cancel: #FFFFFF;
+  --log-out-cancel: #FFF;
   --room-detail: #F5F5F5;
   --room-detail-background: white;
   --room-detail-title: black;
@@ -138,9 +138,9 @@
   --chat-editor-bg-color-h5: #f1f1f1;
   --message-list-color-h5: #d4d4d4;
   --popup-mute-background-color-h5: #ececed;
-  --mute-button-color-h5: #FFFFFF;
+  --mute-button-color-h5: #FFF;
   --member-control-background-color-h5: #F2F2F2;
-  --member-border-color-h5: #FFFFFF;
+  --member-border-color-h5: #FFF;
   --member-title-content-h5: #5f5c5c;
   --end-control-text-h5: #CFD4E6;
   --end-control-title-h5: rgba(37, 37, 37, 0.78);
@@ -154,7 +154,7 @@
   --manage-member-button-h5:#006EFF;
   --message-body-h5: #817e7e;
   --user-extra-info-bg-color-h5: #006EFF;
-  --user-extra-info-color-h5: #FFFFFF;
+  --user-extra-info-color-h5: #FFF;
   --apply-container-background-outline-h5: #006EFF;
-  --apply-container-outline-h5: #FFFFFF;
+  --apply-container-outline-h5: #FFF;
 }