@tencentcloud/roomkit-electron-vue3 2.8.1 → 2.9.0

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>

package/src/TUIRoom/components/common/base/ActionSheep.vue

@@ -68,7 +68,7 @@ const toggleShow = () => {
   z-index: 1000;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--uikit-color-black-3);
 }
 
 .container {
@@ -79,8 +79,8 @@ const toggleShow = () => {
   width: 100%;
   min-height: 120px;
   padding: 20px 12px 36px;
-  background-color: #fff;
   border-radius: 18px 18px 0 0;
+  background-color: var(--bg-color-operate);
 
   .container-close {
     display: flex;
@@ -93,7 +93,7 @@ const toggleShow = () => {
     margin-bottom: 12px;
     font-size: 18px;
     font-weight: 500;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 }
 </style>

package/src/TUIRoom/components/common/base/Badge.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, withDefaults, defineProps } from 'vue';
 
 interface Props {
   type?: 'primary' | 'danger';
@@ -53,21 +53,21 @@ const badgeClass = computed(() => [
     padding: 1px 6px;
     font-size: 12px;
     font-weight: bold;
-    color: var(--white-color);
     border-radius: 10px;
     transform: translateY(-50%) translateX(100%);
+    color: var(--uikit-color-white-1);
   }
 }
 
 .tui-badge-primary {
   .tui-badge-count {
-    background-color: var(--active-color-1);
+    background-color: var(--text-color-link);
   }
 }
 
 .tui-badge-danger {
   .tui-badge-count {
-    background-color: var(--red-color-2);
+    background-color: var(--text-color-error);
   }
 }
 

package/src/TUIRoom/components/common/base/Button.vue

@@ -56,83 +56,75 @@ const buttonClassList = computed(() => [
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .button-primary {
-  --shadow-color: rgba(213, 224, 242, 0.6);
-}
-
-.tui-theme-black .button-primary {
-  --shadow-color: rgba(28, 102, 229, 0.2);
-}
-
 .tui-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
   line-height: 22px;
-  color: var(--font-color-7);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--active-color-1);
-  border: 1px solid var(--active-color-1);
+  background-color: var(--button-color-primary-default);
+  border: 1px solid var(--button-color-primary-default);
+  color: var(--text-color-button);
   outline: none;
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background: #144fb6;
-    border: 1px solid #144fb6;
+    border-color: var(--text-color-link);
+    border: 1px solid var(--text-color-link);
     outline: none;
   }
 }
 
 .tui-button-plain.tui-button-primary {
-  color: #0961f7;
-  background: #ecf5ff;
-  border-color: #b3d8ff;
+  background: var(--uikit-color-white-2);
+  border-color: var(--text-color-link);
+  color: var(--text-color-link);
 }
 
 .tui-button-plain.tui-button-primary:hover {
-  color: #fff;
-  background: #409eff;
-  border-color: #409eff;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-theme-5);
+  border-color: var(--uikit-color-theme-5);
 }
 
 .tui-button-plain.tui-button-info {
-  color: #909399;
-  background: #f4f4f5;
-  border-color: #d3d4d6;
+  color: var(--uikit-color-gray-7);
+  background: var(--uikit-color-white-1);
+  border-color: var(--uikit-color-white-2);
 }
 
 .tui-button-plain.tui-button-info:hover {
-  color: #fff;
-  background: #909399;
-  border-color: #909399;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-gray-7);
+  border-color: var(--uikit-color-gray-7);
 }
 
 .tui-button-plain.tui-button-danger {
   font-weight: 500;
-  color: #f56c6c;
-  background: #fef0f0;
-  border-color: #fbc4c4;
+  color: var(--uikit-color-red-6);
+  background: var(--uikit-color-white-1);
+  border-color: var(--uikit-color-red-6);
 }
 
 .tui-button-plain.tui-button-danger:hover {
-  color: #fff;
-  background: #f56c6c;
-  border-color: #f56c6c;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-red-6);
+  border-color: var(--uikit-color-red-6);
 }
 
 .tui-button-primary {
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
-  color: var(--active-color-2);
   background-color: transparent;
-  border: 1px solid var(--active-color-2);
+  border: 1px solid var(--text-color-link);
+  color: var(--text-color-link);
 
   &:hover {
-    background-color: var(--shadow-color);
+    background-color: var(--uikit-color-black-8);
   }
 }
 
@@ -160,20 +152,4 @@ const buttonClassList = computed(() => [
   display: flex;
   margin-right: 5px;
 }
-
-.tui-button-text {
-  color: var(--font-color-4);
-  background-color: transparent;
-  border: 0 solid transparent;
-
-  &:hover {
-    color: var(--font-color-4);
-    background-color: transparent;
-    border: 0 solid transparent;
-  }
-
-  &::after {
-    border: none;
-  }
-}
 </style>

package/src/TUIRoom/components/common/base/Checkbox/index.vue

@@ -60,19 +60,19 @@ function handleValueChange(event: any) {
 }
 
 input {
-  color: var(--title-color);
   cursor: pointer;
-  border: 1px solid var(--stroke-color);
   border-radius: 4px;
+  color: var(--bg-color-secondary);
+  border: 1px solid var(--stroke-color-module);
 }
 
 input:focus {
-  border-color: var(--active-color-1);
   outline: 0;
+  border-color: var(--text-color-link);
 }
 
 input:disabled {
   cursor: not-allowed;
-  background-color: var(--background-color-9);
+  background-color: var(--bg-color-function);
 }
 </style>

package/src/TUIRoom/components/common/base/Datepicker/index.vue

@@ -229,10 +229,10 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   min-width: 222px;
   padding: 5px;
   font-size: 12px;
-  color: #000;
-  background-color: #fff;
-  border: 1px solid var(--stroke-color);
   border-radius: 4px;
+  background-color: var(--bg-color-dialog);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
 }
 
 .picker-header {
@@ -246,7 +246,7 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   .current-time {
     width: 80%;
     font-weight: bold;
-    color: black;
+    color: var(--text-color-primary);
   }
 }
 
@@ -256,10 +256,11 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   cursor: pointer;
   background-color: transparent;
   border: none;
+  color: var(--text-color-primary);
 }
 
 .arrow:hover {
-  color: #409eff;
+  color: var(--text-color-link);
 }
 
 .picker-weekdays {
@@ -271,7 +272,6 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   padding: 5px;
   line-height: initial;
   text-align: center;
-  background-color: #fff;
 }
 
 .picker-body {
@@ -285,16 +285,15 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   line-height: initial;
   text-align: center;
   cursor: pointer;
-  background-color: #fff;
 }
 
 .day:hover {
-  background-color: #ecf5ff;
+  background-color: var(--uikit-color-white-2);
 }
 
 .day.selected {
-  color: white;
-  background-color: #409eff;
+  color: var(--uikit-color-white-1);
+  background-color: var(--text-color-link);
 }
 
 .day.today .today-dot {
@@ -304,13 +303,13 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   display: inline-block;
   width: 5px;
   height: 5px;
-  background-color: #409eff;
   border-radius: 50%;
   transform: translateX(-50%);
+  background-color: var(--text-color-link);
 }
 
 .day.past {
-  color: #ccc;
+  color: var(--uikit-color-gray-7);
   pointer-events: none;
 }
 </style>

package/src/TUIRoom/components/common/base/Dialog/index.vue

@@ -170,7 +170,7 @@ function handleOverlayClick(event: any) {
   left: 0;
 
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.6);
+    background-color: var(--uikit-color-black-3);
   }
 }
 
@@ -183,10 +183,9 @@ function handleOverlayClick(event: any) {
   display: flex;
   flex-direction: column;
   width: var(--tui-dialog-width, 50%);
-  background-color: #fff;
   border-radius: 20px;
-  box-shadow: 0 3px 1px #e9f0fb;
   transform: translate(-50%, -50%);
+  background-color: var(--bg-color-dialog);
 
   .tui-dialog-header {
     position: relative;
@@ -194,7 +193,7 @@ function handleOverlayClick(event: any) {
     align-items: center;
     height: 64px;
     padding: 0 24px;
-    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+    border-bottom: 1px solid var(--stroke-color-primary);
 
     .tui-dialog-header-title {
       display: flex;
@@ -205,7 +204,7 @@ function handleOverlayClick(event: any) {
         font-style: normal;
         font-weight: 600;
         line-height: 24px;
-        color: #0f1014;
+        color: var(--text-color-primary);
       }
     }
 
@@ -218,9 +217,9 @@ function handleOverlayClick(event: any) {
       justify-content: center;
       width: 32px;
       height: 32px;
-      color: #4f586b;
       cursor: pointer;
       transform: translateY(-50%);
+      color: var(--text-color-primary);
     }
   }
 
@@ -231,7 +230,7 @@ function handleOverlayClick(event: any) {
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 
   .tui-dialog-footer {