@tencentcloud/roomkit-electron-vue3 2.8.1 → 2.9.0

package/src/TUIRoom/components/ScheduleConference/ScheduleRoomList.vue

@@ -310,9 +310,11 @@ onUnmounted(() => {
   padding: 20px 0;
   margin-left: 20px;
   user-select: none;
-  background-color: var(--white-color);
   border-radius: 24px;
-  box-shadow: rgba(197, 210, 229, 0.3);
+  box-shadow:
+    0 2px 6px var(--uikit-color-black-8),
+    0 8px 18px var(--uikit-color-black-8);
+  background-color: var(--bg-color-operate);
 }
 
 .schedule-room {
@@ -326,7 +328,6 @@ onUnmounted(() => {
     display: flex;
     font-size: 14px;
     font-weight: 500;
-    color: var(--active-color-1);
     cursor: pointer;
 
     .arrow {
@@ -342,7 +343,7 @@ onUnmounted(() => {
     height: 100%;
     font-size: 14px;
     font-weight: 400;
-    color: #8f9ab2;
+    color: var(--text-color-secondary);
 
     .loading {
       margin-bottom: 10px;
@@ -361,7 +362,7 @@ onUnmounted(() => {
       padding: 10px;
       font-size: 14px;
       font-weight: 400;
-      color: var(--font-color-9);
+      color: var(--text-color-secondary);
 
       .date {
         margin-right: 2px;
@@ -381,7 +382,7 @@ onUnmounted(() => {
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
-      color: #8f9ab2;
+      color: var(--text-color-secondary);
     }
   }
 
@@ -392,10 +393,9 @@ onUnmounted(() => {
   ::-webkit-scrollbar {
     width: 6px;
   }
-
   ::-webkit-scrollbar-thumb {
-    background-color: #e0e2e9;
     border-radius: 10px;
+    background-color: var(--stroke-color-secondary);
   }
 }
 

package/src/TUIRoom/components/ScheduleConference/ShareLink.vue

@@ -142,7 +142,7 @@ watch(
   user-select: none;
 
   .invite-member-title {
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 
   .invite-member-item {
@@ -150,10 +150,10 @@ watch(
     justify-content: space-between;
     padding: 10px 16px;
     margin-top: 8px;
-    color: #0f1014;
-    background: #f9fafc;
-    border: 1px solid #e4e8ee;
     border-radius: 8px;
+    background-color: var(--bg-color-input);
+    color: var(--text-color-primary);
+    border: 1px solid var(--stroke-color-module);
 
     .invite-member-content {
       max-width: 400px;
@@ -166,6 +166,7 @@ watch(
       width: 20px;
       height: 20px;
       cursor: pointer;
+      color: var(--text-color-link);
     }
   }
 }

package/src/TUIRoom/components/ScheduleConference/TimezonePicker.vue

@@ -2,7 +2,6 @@
   <div class="container">
     <TuiSelect
       v-model="selectedTime"
-      theme="white"
       :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
       :value="selectedTime"
@@ -11,7 +10,6 @@
       <TuiOption
         v-for="time in timeOptions"
         :key="time.value"
-        theme="white"
         :value="time.value"
         :label="time.label"
         :custom-option-content-style="{ 'font-weight': 400 }"

package/src/TUIRoom/components/Stream/MultiStreamView/index.vue

@@ -121,14 +121,13 @@ function handleTurnPageRight() {
     justify-content: center;
     width: 32px;
     height: 60px;
-    color: var(--turn-page-arrow-color);
+    color: var(--uikit-color-white-1);
     cursor: pointer;
-    background: var(--turn-page-background-color);
-    backdrop-filter: blur(2.25px);
     border-radius: 32px;
+    background-color: var(--bg-color-tag-mask);
 
     &:hover {
-      background: var(--turn-page-hover-background-color);
+      background-color: var(--button-color-secondary-hover);
     }
   }
 
@@ -146,16 +145,4 @@ function handleTurnPageRight() {
     transform: rotateY(180deg);
   }
 }
-
-.tui-theme-black .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: #d5e0f2;
-}
-
-.tui-theme-white .turn-page-container {
-  --turn-page-background-color: rgba(114, 122, 138, 0.4);
-  --turn-page-hover-background-color: rgba(114, 122, 138, 0.7);
-  --turn-page-arrow-color: white;
-}
 </style>

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

@@ -89,13 +89,13 @@ onBeforeUnmount(() => {
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: var(--background-color-1);
+  background-color: var(--bg-color-bubble-reciprocal);
 
   &::before {
     width: 100%;
     height: 100%;
     content: '';
-    background-color: var(--local-screen-stream-bg-color);
+    background-color: var(--bg-color-bubble-reciprocal);
   }
 
   .local-screen-control-container {
@@ -105,8 +105,8 @@ onBeforeUnmount(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: var(--screen-font-color);
     transform: translate(-50%, -50%);
+    color: var(--text-color-tertiary);
 
     &.mini {
       transform: translate(-50%, -50%) scale(0.7);
@@ -128,22 +128,12 @@ onBeforeUnmount(() => {
 
     .stop-button {
       margin-top: 30px;
-      background-color: var(--red-color-3);
-      border: 1.5px solid var(--red-color-3);
+      background-color: var(--text-color-error);
+      border: 1.5px solid var(--text-color-error);
     }
   }
 }
 
-.tui-theme-white .local-screen-container {
-  --local-screen-stream-bg-color: rgba(228, 232, 238, 0.4);
-  --screen-font-color: #8f9ab2;
-}
-
-.tui-theme-black .local-screen-container {
-  --screen-font-color: #b2bbd1;
-  --local-screen-stream-bg-color: rgba(34, 38, 46, 0.5);
-}
-
 .dialog-button {
   margin-right: 12px;
 }

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>