@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

package/src/TUIRoom/components/Stream/common/StreamCover/index.vue

@@ -119,7 +119,7 @@ const isScreenStream = computed(
   pointer-events: none;
 
   &.border {
-    border: $border-width solid #37e858;
+    border: $border-width solid var(--uikit-color-green-5);
   }
 
   @keyframes loading-rotate {
@@ -156,9 +156,9 @@ const isScreenStream = computed(
     padding: 0 10px 0 0;
     overflow: hidden;
     font-size: 14px;
-    color: #fff;
-    background: var(--user-info-container-bg-color);
+    color: var(--uikit-color-white-1);
     border-radius: 16px;
+    background-color: var(--uikit-color-black-5);
 
     .user-name {
       margin-left: 8px;
@@ -185,12 +185,12 @@ const isScreenStream = computed(
       width: 32px;
       height: 32px;
       margin-left: 0;
-      background-color: var(--active-color-1);
       border-radius: 50%;
+      background-color: var(--button-color-primary-default);
     }
 
     .admin-icon {
-      background-color: var(--orange-color);
+      background-color: var(--text-color-warning);
     }
 
     .audio-icon {
@@ -215,7 +215,7 @@ const isScreenStream = computed(
     left: 0 - $border-width;
     width: calc(100% + $border-width * 2);
     height: calc(100% + $border-width * 2);
-    background-color: var(--background-color-1);
+    background-color: var(--bg-color-bubble-reciprocal);
 
     &::before {
       position: absolute;
@@ -224,7 +224,7 @@ const isScreenStream = computed(
       width: 100%;
       height: 100%;
       content: '';
-      background-color: var(--user-has-no-camera-bg-color);
+      background-color: var(--bg-color-bubble-reciprocal);
     }
 
     .avatar-region {
@@ -262,19 +262,10 @@ const isScreenStream = computed(
           text-overflow: ellipsis;
           white-space: nowrap;
           vertical-align: bottom;
+          color: var(--uikit-color-white-1);
         }
       }
     }
   }
 }
-
-.tui-theme-white .stream-cover-container {
-  --user-has-no-camera-bg-color: rgba(228, 232, 238, 0.4);
-  --user-info-container-bg-color: rgba(18, 23, 35, 0.8);
-}
-
-.tui-theme-black .stream-cover-container {
-  --user-has-no-camera-bg-color: rgba(34, 38, 46, 0.5);
-  --user-info-container-bg-color: rgba(34, 38, 46, 0.8);
-}
 </style>

package/src/TUIRoom/components/Stream/common/StreamRegion/index.vue

@@ -134,7 +134,7 @@ onBeforeUnmount(() => {
   .stream-region {
     position: relative;
     overflow: hidden;
-    background-color: #000;
+    background-color: var(--uikit-color-black-1);
     border-radius: 12px;
   }
 }

package/src/TUIRoom/components/common/ArrowStroke.vue

@@ -65,8 +65,8 @@ function handleClickArrow() {
         width: 20px;
         height: 100%;
         content: '';
-        background-color: rgba(15, 16, 20, 0.3);
-        border: 1px solid rgba(143, 154, 178, 0.1);
+        background-color: var(--uikit-color-black-6);
+        border: 1px solid var(--uikit-color-gray-5);
         border-top-left-radius: 10px;
         border-bottom-left-radius: 10px;
       }
@@ -80,12 +80,12 @@ function handleClickArrow() {
         width: 5px;
         height: 60px;
         cursor: pointer;
-        border-top: 1px solid var(--stroke-color);
-        border-bottom: 1px solid var(--stroke-color);
-        border-left: 1px solid var(--stroke-color);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
         transform: translateY(-50%);
+        border-top: 1px solid var(--stroke-color-primary);
+        border-bottom: 1px solid var(--stroke-color-primary);
+        border-left: 1px solid var(--stroke-color-primary);
 
         &::before {
           position: absolute;
@@ -106,9 +106,9 @@ function handleClickArrow() {
         width: 2px;
         height: calc((100% - 60px) / 2);
         content: '';
-        border-right: 1px solid var(--stroke-color);
-        border-bottom: 1px solid var(--stroke-color);
         border-bottom-right-radius: 4px;
+        border-bottom: 1px solid var(--stroke-color-primary);
+        border-right: 1px solid var(--stroke-color-primary);
       }
 
       &::after {
@@ -118,9 +118,9 @@ function handleClickArrow() {
         width: 2px;
         height: calc((100% - 60px) / 2);
         content: '';
-        border-top: 1px solid var(--stroke-color);
-        border-right: 1px solid var(--stroke-color);
         border-top-right-radius: 4px;
+        border-top: 1px solid var(--stroke-color-primary);
+        border-right: 1px solid var(--stroke-color-primary);
       }
     }
   }
@@ -129,7 +129,7 @@ function handleClickArrow() {
     position: absolute;
     top: 50%;
     left: 6px;
-    color: #d5e0f2;
+    color: var(--uikit-color-gray-4);
     cursor: pointer;
     transition: color 0s;
     transform: translateY(-50%);
@@ -167,8 +167,8 @@ function handleClickArrow() {
         width: 100%;
         height: 20px;
         content: '';
-        background-color: rgba(15, 16, 20, 0.3);
-        border: 1px solid rgba(143, 154, 178, 0.1);
+        background-color: var(--uikit-color-black-6);
+        border: 1px solid var(--uikit-color-gray-5);
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;
       }
@@ -182,15 +182,14 @@ function handleClickArrow() {
         width: 60px;
         height: 5px;
         cursor: pointer;
-        border-right: 1px solid var(--stroke-color);
-        border-bottom: 1px solid var(--stroke-color);
-        border-left: 1px solid var(--stroke-color);
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 4px;
         transform: translateX(-50%);
+        border-bottom: 1px solid var(--stroke-color-primary);
+        border-left: 1px solid var(--stroke-color-primary);
 
         .arrow {
-          color: #a4bbdb;
+          color: var(--uikit-color-gray-4);
         }
 
         &::before {
@@ -211,9 +210,9 @@ function handleClickArrow() {
         width: calc((100% - 60px) / 2);
         height: 2px;
         content: '';
-        border-top: 1px solid var(--stroke-color);
-        border-right: 1px solid var(--stroke-color);
         border-top-right-radius: 4px;
+        border-top: 1px solid var(--stroke-color-primary);
+        border-right: 1px solid var(--stroke-color-primary);
       }
 
       &::after {
@@ -223,9 +222,9 @@ function handleClickArrow() {
         width: calc((100% - 60px) / 2);
         height: 2px;
         content: '';
-        border-top: 1px solid var(--stroke-color);
-        border-left: 1px solid var(--stroke-color);
         border-top-left-radius: 4px;
+        border-top: 1px solid var(--stroke-color-primary);
+        border-left: 1px solid var(--stroke-color-primary);
       }
     }
   }
@@ -234,7 +233,7 @@ function handleClickArrow() {
     position: absolute;
     bottom: 4px;
     left: 50%;
-    color: #d5e0f2;
+    color: var(--uikit-color-gray-4);
     cursor: pointer;
     transition: color 0s;
     transform: translateX(-50%);

package/src/TUIRoom/components/common/AudioIcon.vue

@@ -73,7 +73,7 @@ const audioLevelStyle = computed(() => {
 
     .audio-level {
       width: 100%;
-      background-color: var(--green-color);
+      background-color: var(--text-color-success);
       transition: height 0.2s;
     }
   }

package/src/TUIRoom/components/common/AudioMediaControl.vue

@@ -28,7 +28,6 @@
       </icon-button>
       <audio-setting-tab
         v-show="showAudioSettingTab"
-        theme="white"
         class="audio-tab"
         :audio-volume="audioVolume"
       />
@@ -104,22 +103,22 @@ $audioTabWidth: 305px;
     left: -5px;
     width: $audioTabWidth;
     padding: 20px 20px 24px;
-    background: var(--background-color-1);
-    border-radius: 8px;
     box-shadow:
-      0 2px 4px -3px rgba(32, 77, 141, 0.03),
-      0 6px 10px 1px rgba(32, 77, 141, 0.06),
-      0 3px 14px 2px rgba(32, 77, 141, 0.05);
+      0 2px 4px -3px var(--uikit-color-black-8),
+      0 6px 10px 1px var(--uikit-color-black-8),
+      0 3px 14px 2px var(--uikit-color-black-8);
+    border-radius: 8px;
+    background-color: var(--bg-color-dialog);
 
     &::before {
       position: absolute;
       bottom: -10px;
       left: 28px;
       content: '';
-      border-top: 5px solid var(--background-color-1);
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
       border-left: 5px solid transparent;
+      border-top: 5px solid var(--bg-color-dialog);
     }
   }
 }

package/src/TUIRoom/components/common/AudioSettingTab.vue

@@ -6,7 +6,7 @@
   * Use <video-tab></video-tab> in the template
 -->
 <template>
-  <div :class="['audio-setting-tab', themeClass]">
+  <div class="audio-setting-tab">
     <div class="item-setting">
       <span class="title">{{ t('Mic') }}</span>
       <div class="flex">
@@ -83,11 +83,6 @@ const roomStore = useRoomStore();
 const { speakerList, userVolumeObj, currentSpeakerId } = storeToRefs(roomStore);
 const roomEngine = useGetRoomEngine();
 const trtcCloud = roomEngine.instance?.getTRTCCloud();
-
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 const volumeTotalNum = computed(() => (isDetailMode.value ? 36 : 28));
 
 const volumeNum = computed(() => {
@@ -190,7 +185,7 @@ onBeforeUnmount(() => {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: #4f586b;
+    color: var(--text-color-secondary);
   }
 
   .mic-bar-container {
@@ -200,10 +195,10 @@ onBeforeUnmount(() => {
     .mic-bar {
       width: 3px;
       height: 6px;
-      background-color: var(--background-color-4);
+      background-color: var(--text-color-secondary);
 
       &.active {
-        background-color: var(--green-color);
+        background-color: var(--text-color-link);
       }
     }
   }

package/src/TUIRoom/components/common/Logo.vue

@@ -2,16 +2,16 @@
 <template>
   <div class="logo-container">
     <!-- Logo under Chinese black theme on PC -->
-    <div v-if="!isMobile && isZH && isBlackTheme">
+    <div v-if="!isMobile && isZH && isDarkTheme">
       <svg-icon :icon="LogoOfPCInChineseBlackIcon" />
     </div>
     <!-- Logo under Chinese white theme on PC -->
-    <div v-if="!isMobile && isZH && isWhiteTheme">
+    <div v-if="!isMobile && isZH && isLightTheme">
       <svg-icon :icon="LogoOfPCInChineseWhiteIcon" />
     </div>
     <!-- Mobile Chinese black and white theme logo -->
     <div v-if="isMobile && isZH" class="mobile-zh-logo">
-      <span class="logo" :class="isWhiteTheme ? 'white' : 'black'">
+      <span class="logo" :class="isLightTheme ? 'light' : 'dark'">
         <svg-icon :icon="LogoOfMobileInChinese" />
       </span>
       <span class="title">
@@ -23,7 +23,7 @@
       <span class="logo">
         <svg-icon :icon="LogoInEnglish" />
       </span>
-      <span class="title" :class="isWhiteTheme ? 'white' : 'black'">
+      <span class="title" :class="isLightTheme ? 'light' : 'dark'">
         <svg-icon :icon="LogoTitleInEnglish" />
       </span>
     </div>
@@ -34,24 +34,29 @@
 import i18n from '../../locales/index';
 import { isMobile } from '../../utils/environment';
 import { computed } from 'vue';
+import SvgIcon from './base/SvgIcon.vue';
 import { useBasicStore } from '../../stores/basic';
 import { storeToRefs } from 'pinia';
-import SvgIcon from './base/SvgIcon.vue';
 import LogoOfPCInChineseBlackIcon from './icons/LogoOfPCInChineseBlackIcon.vue';
 import LogoOfPCInChineseWhiteIcon from './icons/LogoOfPCInChineseWhiteIcon.vue';
 import LogoOfMobileInChinese from './icons/LogoOfMobileInChinese.vue';
 import LogoTitleOfMobileInChinese from './icons/LogoTitleOfMobileInChinese.vue';
 import LogoInEnglish from './icons/LogoInEnglish.vue';
 import LogoTitleInEnglish from './icons/LogoTitleInEnglish.vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
+const { theme } = useUIKit();
 const basicStore = useBasicStore();
-
 const { defaultTheme } = storeToRefs(basicStore);
 
 const isEN = computed(() => i18n.global.locale.value === 'en-US');
 const isZH = computed(() => i18n.global.locale.value === 'zh-CN');
-const isBlackTheme = computed(() => defaultTheme.value === 'black');
-const isWhiteTheme = computed(() => defaultTheme.value === 'white');
+const isDarkTheme = computed(() =>
+  theme.value ? theme.value === 'dark' : defaultTheme.value === 'dark'
+);
+const isLightTheme = computed(() =>
+  theme.value ? theme.value === 'light' : defaultTheme.value === 'light'
+);
 </script>
 
 <style lang="scss" scoped>
@@ -65,11 +70,11 @@ const isWhiteTheme = computed(() => defaultTheme.value === 'white');
   }
 
   .white {
-    color: #202c40;
+    color: var(--uikit-color-black-2);
   }
 
   .black {
-    color: #d5e0f2;
+    color: var(--uikit-color-white-2);
   }
 
   &.mobile {
@@ -86,11 +91,11 @@ const isWhiteTheme = computed(() => defaultTheme.value === 'white');
   }
 
   .white {
-    color: #000;
+    color: var(--uikit-color-black-1);
   }
 
   .black {
-    color: #fff;
+    color: var(--uikit-color-white-1);
   }
 }
 </style>

package/src/TUIRoom/components/common/SwitchTheme.vue

@@ -5,25 +5,70 @@
   *
 -->
 <template>
-  <icon-button
-    v-if="visible && switchThemeConfig.visible"
-    :title="t('Switch Theme')"
-    :layout="IconButtonLayout.HORIZONTAL"
-    :icon="SwitchThemeIcon"
-    @click-icon="handleSwitchTheme"
-  />
+  <div class="theme-container" v-click-outside="handleClickOutSide">
+    <icon-button
+      v-if="visible && switchThemeConfig.visible"
+      :title="t('Switch Theme')"
+      :layout="IconButtonLayout.HORIZONTAL"
+      :icon="SwitchThemeIcon"
+      @click-icon="handleSwitchTheme"
+    />
+    <div
+      v-if="isShowThemeColorContainer && !isMobile"
+      class="switch-theme-container"
+    >
+      <div class="switch-theme-item">
+        <span>{{ t('Theme Colours') }}</span>
+        <div class="color-blocks two-blocks">
+          <div
+            class="color-block black"
+            @click="toggleCustomTheme('dark')"
+          ></div>
+          <div
+            class="color-block white"
+            @click="toggleCustomTheme('light')"
+          ></div>
+        </div>
+      </div>
+      <div class="switch-theme-item">
+        <span>{{ t('Custom Themes') }}</span>
+        <div class="color-blocks four-blocks">
+          <div
+            class="color-block theme"
+            @click="toggleCustomTheme('theme')"
+          ></div>
+          <div
+            class="color-block green"
+            @click="toggleCustomTheme('green')"
+          ></div>
+          <div class="color-block red" @click="toggleCustomTheme('red')"></div>
+          <div
+            class="color-block orange"
+            @click="toggleCustomTheme('orange')"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { withDefaults, defineProps } from 'vue';
+import { withDefaults, defineProps, ref } from 'vue';
 import IconButton from './base/IconButton.vue';
 import SwitchThemeIcon from './icons/SwitchThemeIcon.vue';
 import { IconButtonLayout } from '../../constants/room';
-import { useBasicStore } from '../../stores/basic';
 import { useI18n } from '../../locales';
 import { roomService } from '../../services';
-const basicStore = useBasicStore();
+import { useBasicStore } from '../../stores/basic';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { Theme } from '../../services/manager/configManager';
+import { isMobile } from '../../utils/environment';
+import vClickOutside from '../../directives/vClickOutside';
+
 const { t } = useI18n();
+const basicStore = useBasicStore();
+const { theme, setTheme } = useUIKit();
+const isShowThemeColorContainer = ref(false);
 const switchThemeConfig = roomService.getComponentConfig('SwitchTheme');
 
 interface Props {
@@ -35,8 +80,117 @@ withDefaults(defineProps<Props>(), {
 });
 
 function handleSwitchTheme() {
-  roomService.setTheme(basicStore.defaultTheme === 'white' ? 'black' : 'white');
+  if (!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.setTheme(newTheme);
+  }
+}
+
+function toggleCustomTheme(newTheme: string) {
+  if (!theme.value) {
+    roomService.setTheme(newTheme as Theme);
+    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;
+  }
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.theme-container {
+  position: relative;
+  .switch-theme-container {
+    position: absolute;
+    top: calc(100% + 15px);
+    left: 0px;
+    padding: 14px;
+    z-index: 9;
+    background: var(--bg-color-input);
+    filter: drop-shadow(0px 0px 4px var(--uikit-color-black-8))
+      drop-shadow(0px 4px 10px var(--uikit-color-black-8))
+      drop-shadow(0px 1px 14px var(--uikit-color-black-8));
+    border-radius: 8px;
+
+    .switch-theme-item {
+      font-size: 14px;
+      color: var(--text-color-secondary);
+      .color-blocks {
+        display: flex;
+        margin: 16px 0;
+        &.two-blocks {
+          .color-block {
+            width: 50px;
+            height: 50px;
+            margin-right: 8px;
+          }
+        }
+        &.four-blocks {
+          .color-block {
+            width: 50px;
+            height: 50px;
+            margin-right: 8px;
+          }
+        }
+      }
+      .color-block {
+        cursor: pointer;
+        border-radius: 6px;
+        &.black {
+          background-color: var(--uikit-color-black-1);
+        }
+        &.white {
+          background-color: var(--uikit-color-white-1);
+        }
+        &.red {
+          background-color: var(--uikit-color-red-6);
+        }
+        &.green {
+          background-color: var(--uikit-color-green-6);
+        }
+        &.orange {
+          background-color: var(--uikit-color-orange-6);
+        }
+        &.theme {
+          background-color: var(--uikit-color-theme-6);
+        }
+      }
+    }
+  }
+
+  .h5.switch-theme-container {
+    display: flex;
+    padding: 6px 4px;
+    .switch-theme-item {
+      margin: 0 12px;
+      .color-blocks {
+        .color-block {
+          width: 10px;
+          height: 10px;
+          margin-right: 8px;
+        }
+      }
+    }
+    span {
+      white-space: nowrap;
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/common/VideoMediaControl.vue

@@ -26,7 +26,6 @@
         v-show="showVideoSettingTab"
         class="video-tab"
         :with-mirror="true"
-        theme="white"
       />
     </div>
   </div>
@@ -104,22 +103,22 @@ $videoTabWidth: 305px;
     left: -5px;
     width: $videoTabWidth;
     padding: 20px 20px 24px;
-    background: var(--background-color-1);
-    border-radius: 8px;
     box-shadow:
-      0 2px 4px -3px rgba(32, 77, 141, 0.03),
-      0 6px 10px 1px rgba(32, 77, 141, 0.06),
-      0 3px 14px 2px rgba(32, 77, 141, 0.05);
+      0 2px 4px -3px var(--uikit-color-black-8),
+      0 6px 10px 1px var(--uikit-color-black-8),
+      0 3px 14px 2px var(--uikit-color-black-8);
+    border-radius: 8px;
+    background-color: var(--bg-color-dialog);
 
     &::before {
       position: absolute;
       bottom: -10px;
       left: 30px;
       content: '';
-      border-top: 5px solid var(--background-color-1);
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
       border-left: 5px solid transparent;
+      border-top: 5px solid var(--bg-color-dialog);
     }
   }
 }

package/src/TUIRoom/components/common/VideoSettingTab.vue

@@ -7,7 +7,7 @@
   *
 -->
 <template>
-  <div :class="['video-tab', themeClass]">
+  <div class="video-tab">
     <div class="item-setting">
       <span class="title">{{ t('Camera') }}</span>
       <device-select device-type="camera" />
@@ -56,17 +56,13 @@ interface Props {
   withPreview?: boolean;
   withMore?: boolean;
   withMirror?: boolean;
-  theme?: 'white' | 'black';
+  theme?: 'light' | 'dark';
 }
 const props = defineProps<Props>();
 
 const basicStore = useBasicStore();
 const { isLocalStreamMirror } = storeToRefs(basicStore);
 
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 watch(isLocalStreamMirror, async (val: boolean) => {
   const trtcCloud = roomEngine.instance?.getTRTCCloud();
   if (!isMobile) {
@@ -130,7 +126,7 @@ if (props.withPreview) {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: var(--font-color-4);
+    color: var(--text-color-secondary);
   }
 
   .video-preview-container {
@@ -139,7 +135,7 @@ if (props.withPreview) {
     height: 0;
     padding-top: calc(100% * 9 / 16);
     overflow: hidden;
-    background-color: #000;
+    background-color: var(--uikit-color-black-1);
     border-radius: 8px;
 
     .video-preview {
@@ -160,14 +156,14 @@ if (props.withPreview) {
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    color: var(--font-color-4);
+    color: var(--text-color-secondary);
   }
 
   .item {
     width: 100%;
     height: 20px;
-    color: var(--font-color-3);
     cursor: pointer;
+    color: var(--text-color-secondary);
   }
 }
 </style>