@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.1

package/lib/components/Whiteboard/index.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/ArrowStroke.vue.d.ts

@@ -3,9 +3,9 @@ interface Props {
     arrowDirection: string;
     hasStroke: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click-arrow": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
     "onClick-arrow"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;

package/lib/components/common/ArrowStroke.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const ArrowStroke_vue_vue_type_script_setup_true_lang = require("./ArrowStroke.vue2.js");
 ;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const ArrowStroke = /* @__PURE__ */ _pluginVue_exportHelper.default(ArrowStroke_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-e586d337"]]);
+const ArrowStroke = /* @__PURE__ */ _pluginVue_exportHelper.default(ArrowStroke_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-5eb1e891"]]);
 exports.default = ArrowStroke;

package/lib/components/common/AudioIcon.vue.d.ts

@@ -5,7 +5,7 @@ interface Props {
     size?: string;
     isDisabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/AudioIcon.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const AudioIcon_vue_vue_type_script_setup_true_lang = require("./AudioIcon.vue2.js");
 ;/* empty css                */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-6e9fcb9f"]]);
+const AudioIcon = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioIcon_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-32a636d4"]]);
 exports.default = AudioIcon;

package/lib/components/common/AudioMediaControl.vue.d.ts

@@ -4,13 +4,13 @@ interface Props {
     isDisabled?: boolean;
     audioVolume: number;
 }
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     hasMore: boolean;
     isDisabled: boolean;
     audioVolume: number;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     hasMore: boolean;
     isDisabled: boolean;
     audioVolume: number;

package/lib/components/common/AudioMediaControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const AudioMediaControl_vue_vue_type_script_setup_true_lang = require("./AudioMediaControl.vue2.js");
 ;/* empty css                        */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-b2cd3aa5"]]);
+const AudioMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-8722f2f1"]]);
 exports.default = AudioMediaControl;

package/lib/components/common/AudioMediaControl.vue2.js

@@ -64,7 +64,6 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             _: 1
           }, 8, ["title", "has-more", "disabled", "is-not-support"]),
           Vue.withDirectives(Vue.createVNode(AudioSettingTab.default, {
-            theme: "white",
             class: "audio-tab",
             "audio-volume": _ctx.audioVolume
           }, null, 8, ["audio-volume"]), [

package/lib/components/common/AudioSettingTab.vue.d.ts

@@ -1,11 +1,10 @@
 import { SettingMode } from '../../constants/render';
-
 interface Props {
     mode?: SettingMode;
     audioVolume?: number;
     theme?: string;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/AudioSettingTab.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const AudioSettingTab_vue_vue_type_script_setup_true_lang = require("./AudioSettingTab.vue2.js");
 ;/* empty css                      */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const AudioSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-4e811209"]]);
+const AudioSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(AudioSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-0d686836"]]);
 exports.default = AudioSettingTab;

package/lib/components/common/AudioSettingTab.vue2.js

@@ -10,18 +10,19 @@ const basic = require("../../stores/basic.js");
 const environment = require("../../utils/environment.js");
 const useRoomEngine = require("../../hooks/useRoomEngine.js");
 const Button = require("./base/Button.vue.js");
-const _hoisted_1 = { class: "item-setting" };
-const _hoisted_2 = { class: "title" };
-const _hoisted_3 = { class: "flex" };
-const _hoisted_4 = { class: "item-setting" };
-const _hoisted_5 = { class: "title" };
-const _hoisted_6 = { class: "mic-bar-container" };
-const _hoisted_7 = {
+const _hoisted_1 = { class: "audio-setting-tab" };
+const _hoisted_2 = { class: "item-setting" };
+const _hoisted_3 = { class: "title" };
+const _hoisted_4 = { class: "flex" };
+const _hoisted_5 = { class: "item-setting" };
+const _hoisted_6 = { class: "title" };
+const _hoisted_7 = { class: "mic-bar-container" };
+const _hoisted_8 = {
   key: 0,
   class: "item-setting"
 };
-const _hoisted_8 = { class: "title" };
-const _hoisted_9 = { class: "flex" };
+const _hoisted_9 = { class: "title" };
+const _hoisted_10 = { class: "flex" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "AudioSettingTab",
   props: {
@@ -41,9 +42,6 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     const { speakerList, userVolumeObj, currentSpeakerId } = pinia.storeToRefs(roomStore);
     const roomEngine = useRoomEngine.default();
     const trtcCloud = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud();
-    const themeClass = Vue.computed(
-      () => props.theme ? `tui-theme-${props.theme}` : ""
-    );
     const volumeTotalNum = Vue.computed(() => isDetailMode.value ? 36 : 28);
     const volumeNum = Vue.computed(() => {
       const volume = props.audioVolume || userVolumeObj.value[userId.value] || 0;
@@ -94,12 +92,10 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       audioPlayer && audioPlayer.pause();
     });
     return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", {
-        class: Vue.normalizeClass(["audio-setting-tab", themeClass.value])
-      }, [
-        Vue.createElementVNode("div", _hoisted_1, [
-          Vue.createElementVNode("span", _hoisted_2, Vue.toDisplayString(Vue.unref(t)("Mic")), 1),
-          Vue.createElementVNode("div", _hoisted_3, [
+      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        Vue.createElementVNode("div", _hoisted_2, [
+          Vue.createElementVNode("span", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Mic")), 1),
+          Vue.createElementVNode("div", _hoisted_4, [
             Vue.createVNode(DeviceSelect.default, {
               class: "select",
               "device-type": "microphone"
@@ -117,9 +113,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             })) : Vue.createCommentVNode("", true)
           ])
         ]),
-        Vue.createElementVNode("div", _hoisted_4, [
-          Vue.createElementVNode("span", _hoisted_5, Vue.toDisplayString(Vue.unref(t)("Output")), 1),
-          Vue.createElementVNode("div", _hoisted_6, [
+        Vue.createElementVNode("div", _hoisted_5, [
+          Vue.createElementVNode("span", _hoisted_6, Vue.toDisplayString(Vue.unref(t)("Output")), 1),
+          Vue.createElementVNode("div", _hoisted_7, [
             (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(new Array(volumeTotalNum.value).fill(""), (item, index2) => {
               return Vue.openBlock(), Vue.createElementBlock("div", {
                 key: index2,
@@ -131,9 +127,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             }), 128))
           ])
         ]),
-        Vue.unref(speakerList).length > 0 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_7, [
-          Vue.createElementVNode("span", _hoisted_8, Vue.toDisplayString(Vue.unref(t)("Speaker")), 1),
-          Vue.createElementVNode("div", _hoisted_9, [
+        Vue.unref(speakerList).length > 0 ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_8, [
+          Vue.createElementVNode("span", _hoisted_9, Vue.toDisplayString(Vue.unref(t)("Speaker")), 1),
+          Vue.createElementVNode("div", _hoisted_10, [
             Vue.createVNode(DeviceSelect.default, {
               class: "select",
               "device-type": "speaker",
@@ -152,7 +148,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             })) : Vue.createCommentVNode("", true)
           ])
         ])) : Vue.createCommentVNode("", true)
-      ], 2);
+      ]);
     };
   }
 });

package/lib/components/common/Avatar.vue.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     imgSrc?: string | undefined;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/Avatar.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Avatar_vue_vue_type_script_setup_true_lang = require("./Avatar.vue2.js");
 ;/* empty css             */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const Avatar = /* @__PURE__ */ _pluginVue_exportHelper.default(Avatar_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-460d4fdf"]]);
-exports.default = Avatar;
+const TuiAvatar = /* @__PURE__ */ _pluginVue_exportHelper.default(Avatar_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-460d4fdf"]]);
+exports.default = TuiAvatar;

package/lib/components/common/DeviceSelect.vue.d.ts

@@ -3,7 +3,7 @@ interface Props {
     onChange?: (id: string) => void;
     disabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/Language.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/Logo.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/Logo.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Logo_vue_vue_type_script_setup_true_lang = require("./Logo.vue2.js");
 ;/* empty css           */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const Logo = /* @__PURE__ */ _pluginVue_exportHelper.default(Logo_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-7e1c76c2"]]);
+const Logo = /* @__PURE__ */ _pluginVue_exportHelper.default(Logo_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-975052b2"]]);
 exports.default = Logo;

package/lib/components/common/Logo.vue2.js

@@ -3,15 +3,16 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Vue = require("vue");
 const index = require("../../locales/index.js");
 const environment = require("../../utils/environment.js");
+const SvgIcon = require("./base/SvgIcon.vue.js");
 const basic = require("../../stores/basic.js");
 const pinia = require("pinia");
-const SvgIcon = require("./base/SvgIcon.vue.js");
 const LogoOfPCInChineseBlackIcon = require("./icons/LogoOfPCInChineseBlackIcon.vue.js");
 const LogoOfPCInChineseWhiteIcon = require("./icons/LogoOfPCInChineseWhiteIcon.vue.js");
 const LogoOfMobileInChinese = require("./icons/LogoOfMobileInChinese.vue.js");
 const LogoTitleOfMobileInChinese = require("./icons/LogoTitleOfMobileInChinese.vue.js");
 const LogoInEnglish = require("./icons/LogoInEnglish.vue.js");
 const LogoTitleInEnglish = require("./icons/LogoTitleInEnglish.vue.js");
+const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
 const _hoisted_1 = { class: "logo-container" };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };
@@ -24,23 +25,28 @@ const _hoisted_6 = { class: "logo" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "Logo",
   setup(__props) {
+    const { theme } = uikitBaseComponentVue3.useUIKit();
     const basicStore = basic.useBasicStore();
     const { defaultTheme } = pinia.storeToRefs(basicStore);
     const isEN = Vue.computed(() => index.default.global.locale.value === "en-US");
     const isZH = Vue.computed(() => index.default.global.locale.value === "zh-CN");
-    const isBlackTheme = Vue.computed(() => defaultTheme.value === "black");
-    const isWhiteTheme = Vue.computed(() => defaultTheme.value === "white");
+    const isDarkTheme = Vue.computed(
+      () => theme.value ? theme.value === "dark" : defaultTheme.value === "dark"
+    );
+    const isLightTheme = Vue.computed(
+      () => theme.value ? theme.value === "light" : defaultTheme.value === "light"
+    );
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        !Vue.unref(environment.isMobile) && isZH.value && isBlackTheme.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+        !Vue.unref(environment.isMobile) && isZH.value && isDarkTheme.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
           Vue.createVNode(SvgIcon.default, { icon: LogoOfPCInChineseBlackIcon.default })
         ])) : Vue.createCommentVNode("", true),
-        !Vue.unref(environment.isMobile) && isZH.value && isWhiteTheme.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
+        !Vue.unref(environment.isMobile) && isZH.value && isLightTheme.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_3, [
           Vue.createVNode(SvgIcon.default, { icon: LogoOfPCInChineseWhiteIcon.default })
         ])) : Vue.createCommentVNode("", true),
         Vue.unref(environment.isMobile) && isZH.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
           Vue.createElementVNode("span", {
-            class: Vue.normalizeClass(["logo", isWhiteTheme.value ? "white" : "black"])
+            class: Vue.normalizeClass(["logo", isLightTheme.value ? "light" : "dark"])
           }, [
             Vue.createVNode(SvgIcon.default, { icon: LogoOfMobileInChinese.default })
           ], 2),
@@ -56,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             Vue.createVNode(SvgIcon.default, { icon: LogoInEnglish.default })
           ]),
           Vue.createElementVNode("span", {
-            class: Vue.normalizeClass(["title", isWhiteTheme.value ? "white" : "black"])
+            class: Vue.normalizeClass(["title", isLightTheme.value ? "light" : "dark"])
           }, [
             Vue.createVNode(SvgIcon.default, { icon: LogoTitleInEnglish.default })
           ], 2)

package/lib/components/common/RoomTime.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/SwitchTheme.vue.d.ts

@@ -1,9 +1,9 @@
 interface Props {
     visible?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     visible: boolean;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     visible: boolean;
 }>>>, {
     visible: boolean;

package/lib/components/common/SwitchTheme.vue.js

@@ -1,39 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const IconButton = require("./base/IconButton.vue.js");
-const SwitchThemeIcon = require("./icons/SwitchThemeIcon.vue.js");
-const room = require("../../constants/room.js");
-const basic = require("../../stores/basic.js");
-const index = require("../../locales/index.js");
-require("../../services/main.js");
-const roomService = require("../../services/roomService.js");
-require("@tencentcloud/tuiroom-engine-electron");
-require("../../utils/environment.js");
-require("mitt");
-require("../../services/manager/roomActionManager.js");
-require("@tencentcloud/tui-core");
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "SwitchTheme",
-  props: {
-    visible: { type: Boolean, default: true }
-  },
-  setup(__props) {
-    const basicStore = basic.useBasicStore();
-    const { t } = index.useI18n();
-    const switchThemeConfig = roomService.roomService.getComponentConfig("SwitchTheme");
-    function handleSwitchTheme() {
-      roomService.roomService.setTheme(basicStore.defaultTheme === "white" ? "black" : "white");
-    }
-    return (_ctx, _cache) => {
-      return _ctx.visible && Vue.unref(switchThemeConfig).visible ? (Vue.openBlock(), Vue.createBlock(IconButton.default, {
-        key: 0,
-        title: Vue.unref(t)("Switch Theme"),
-        layout: Vue.unref(room.IconButtonLayout).HORIZONTAL,
-        icon: SwitchThemeIcon.default,
-        onClickIcon: handleSwitchTheme
-      }, null, 8, ["title", "layout"])) : Vue.createCommentVNode("", true);
-    };
-  }
-});
-exports.default = _sfc_main;
+const SwitchTheme_vue_vue_type_script_setup_true_lang = require("./SwitchTheme.vue2.js");
+;/* empty css                  */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
+const SwitchTheme = /* @__PURE__ */ _pluginVue_exportHelper.default(SwitchTheme_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-c70c38ee"]]);
+exports.default = SwitchTheme;

package/lib/components/common/SwitchTheme.vue2.js

@@ -1,4 +1,116 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const SwitchTheme_vue_vue_type_script_setup_true_lang = require("./SwitchTheme.vue.js");
-exports.default = SwitchTheme_vue_vue_type_script_setup_true_lang.default;
+const Vue = require("vue");
+const IconButton = require("./base/IconButton.vue.js");
+const SwitchThemeIcon = require("./icons/SwitchThemeIcon.vue.js");
+const room = require("../../constants/room.js");
+const index = require("../../locales/index.js");
+require("../../services/main.js");
+const roomService = require("../../services/roomService.js");
+require("@tencentcloud/tuiroom-engine-electron");
+const environment = require("../../utils/environment.js");
+require("mitt");
+require("../../services/manager/roomActionManager.js");
+require("@tencentcloud/tui-core");
+const basic = require("../../stores/basic.js");
+const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
+const vClickOutside = require("../../directives/vClickOutside.js");
+const _hoisted_1 = { class: "theme-container" };
+const _hoisted_2 = {
+  key: 1,
+  class: "switch-theme-container"
+};
+const _hoisted_3 = { class: "switch-theme-item" };
+const _hoisted_4 = { class: "color-blocks two-blocks" };
+const _hoisted_5 = { class: "switch-theme-item" };
+const _hoisted_6 = { class: "color-blocks four-blocks" };
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
+  __name: "SwitchTheme",
+  props: {
+    visible: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const { t } = index.useI18n();
+    const basicStore = basic.useBasicStore();
+    const { theme, setTheme } = uikitBaseComponentVue3.useUIKit();
+    const isShowThemeColorContainer = Vue.ref(false);
+    const switchThemeConfig = roomService.roomService.getComponentConfig("SwitchTheme");
+    function handleSwitchTheme() {
+      if (!environment.isMobile) {
+        isShowThemeColorContainer.value = !isShowThemeColorContainer.value;
+        return;
+      }
+      const currentTheme = theme.value || basicStore.defaultTheme;
+      const newTheme = currentTheme === "light" ? "dark" : "light";
+      if (theme.value) {
+        setTheme(newTheme);
+      } else {
+        roomService.roomService.setTheme(newTheme);
+      }
+    }
+    function toggleCustomTheme(newTheme) {
+      if (!theme.value) {
+        roomService.roomService.setTheme(newTheme);
+        return;
+      }
+      const isBaseTheme = newTheme === "light" || newTheme === "dark";
+      const themeConfig = isBaseTheme ? newTheme : { themeStyle: theme.value, primaryColor: newTheme };
+      setTheme(themeConfig);
+    }
+    function handleClickOutSide() {
+      if (isShowThemeColorContainer.value) {
+        isShowThemeColorContainer.value = false;
+      }
+    }
+    return (_ctx, _cache) => {
+      return Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
+        _ctx.visible && Vue.unref(switchThemeConfig).visible ? (Vue.openBlock(), Vue.createBlock(IconButton.default, {
+          key: 0,
+          title: Vue.unref(t)("Switch Theme"),
+          layout: Vue.unref(room.IconButtonLayout).HORIZONTAL,
+          icon: SwitchThemeIcon.default,
+          onClickIcon: handleSwitchTheme
+        }, null, 8, ["title", "layout"])) : Vue.createCommentVNode("", true),
+        isShowThemeColorContainer.value && !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+          Vue.createElementVNode("div", _hoisted_3, [
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Theme Colours")), 1),
+            Vue.createElementVNode("div", _hoisted_4, [
+              Vue.createElementVNode("div", {
+                class: "color-block black",
+                onClick: _cache[0] || (_cache[0] = ($event) => toggleCustomTheme("dark"))
+              }),
+              Vue.createElementVNode("div", {
+                class: "color-block white",
+                onClick: _cache[1] || (_cache[1] = ($event) => toggleCustomTheme("light"))
+              })
+            ])
+          ]),
+          Vue.createElementVNode("div", _hoisted_5, [
+            Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Custom Themes")), 1),
+            Vue.createElementVNode("div", _hoisted_6, [
+              Vue.createElementVNode("div", {
+                class: "color-block theme",
+                onClick: _cache[2] || (_cache[2] = ($event) => toggleCustomTheme("theme"))
+              }),
+              Vue.createElementVNode("div", {
+                class: "color-block green",
+                onClick: _cache[3] || (_cache[3] = ($event) => toggleCustomTheme("green"))
+              }),
+              Vue.createElementVNode("div", {
+                class: "color-block red",
+                onClick: _cache[4] || (_cache[4] = ($event) => toggleCustomTheme("red"))
+              }),
+              Vue.createElementVNode("div", {
+                class: "color-block orange",
+                onClick: _cache[5] || (_cache[5] = ($event) => toggleCustomTheme("orange"))
+              })
+            ])
+          ])
+        ])) : Vue.createCommentVNode("", true)
+      ])), [
+        [Vue.unref(vClickOutside.default), handleClickOutSide]
+      ]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/common/VideoMediaControl.vue.d.ts

@@ -3,13 +3,13 @@ interface Props {
     isMuted: boolean;
     isDisabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     hasMore: boolean;
     isMuted: undefined;
     isDisabled: boolean;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     hasMore: boolean;
     isMuted: undefined;
     isDisabled: boolean;

package/lib/components/common/VideoMediaControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const VideoMediaControl_vue_vue_type_script_setup_true_lang = require("./VideoMediaControl.vue2.js");
 ;/* empty css                        */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const VideoMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-27e20bc4"]]);
+const VideoMediaControl = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoMediaControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-40c6a6cc"]]);
 exports.default = VideoMediaControl;

package/lib/components/common/VideoMediaControl.vue2.js

@@ -64,8 +64,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           }, 8, ["title", "has-more", "disabled", "is-not-support"]),
           Vue.withDirectives(Vue.createVNode(VideoSettingTab.default, {
             class: "video-tab",
-            "with-mirror": true,
-            theme: "white"
+            "with-mirror": true
           }, null, 512), [
             [Vue.vShow, showVideoSettingTab.value]
           ])

package/lib/components/common/VideoProfile.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/components/common/VideoSettingTab.vue.d.ts

@@ -2,9 +2,9 @@ interface Props {
     withPreview?: boolean;
     withMore?: boolean;
     withMirror?: boolean;
-    theme?: 'white' | 'black';
+    theme?: 'light' | 'dark';
 }
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/components/common/VideoSettingTab.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const VideoSettingTab_vue_vue_type_script_setup_true_lang = require("./VideoSettingTab.vue2.js");
 ;/* empty css                      */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const VideoSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-5fa040b6"]]);
+const VideoSettingTab = /* @__PURE__ */ _pluginVue_exportHelper.default(VideoSettingTab_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-58833df9"]]);
 exports.default = VideoSettingTab;