useTheme

• Category: Composables
• Relate: onThemeChangegetTheme
• Dependencies: @lark-base-open/js-sdk
• Last Changed: yesterday

提示

该函数需要在一个多维表格中使用，请将本文档作为一个插件在多维表格上使用以查看演示。

演示

Source

显示演示代码

demo.vue

<script setup lang="ts">
import { useTheme } from "@qww0302/use-bitable"

const themeMode = useTheme({
  onChanged: (mode) => {
    // console.log("Theme changed to", mode)
    document.querySelector("html")?.setAttribute("class", mode.toLowerCase())
  }
})
</script>

<template>
  <div class="tip custom-block">
    <p class="custom-block-title">
      TIP
    </p>
    <p>Change the theme of <code>Bitable</code></p>
  </div>
  <p>Theme: {{ themeMode }}</p>
</template>

用法

useTheme 是响应式的 多维表格 主题，它监听 多维表格 的主题变化，实时更新。

TIP

由于官方的 API 中不支持插件修改 多维表格 主题，所以在这里 useTheme 返回的是一个只读 ref，不可修改。

WARNING

从多维表格官方 sdk 的 v0.4.0-beta.5 版本开始，支持了仪表盘主题，因此 useTheme 从 v1.0.0 版本开始支持传入 target 参数，用于指定主题的目标（bridge 或 dashboard，不传入时默认为 bridge）。

import { useTheme } from "@qww0302/use-bitable"
import { dashboard } from "@lark-base-open/js-sdk"

const theme = useTheme({
  onChanged: (mode) => {
    // Do something when theme mode changed
  },
  target: dashboard
})

类型声明

import type { ComputedRef } from "vue"
import { ThemeModeType } from "@lark-base-open/js-sdk"
import type {
  IBridge,
  IDashboard,
  IDashboardTheme,
} from "@lark-base-open/js-sdk"
export interface useThemeOptions<T extends IBridge | IDashboard> {
  onChanged?: (
    theme: T extends IBridge ? ThemeModeType : IDashboardTheme,
  ) => void
  /**
   * The target object(bridge or dashboard) to get the theme
   *
   * 获取主题的目标对象( bridge 或 dashboard )
   *
   * @since v1.0.0
   * @default bridge
   * @type {T}
   */
  target?: T
}
export declare function useTheme(
  options: useThemeOptions<IBridge>,
): ComputedRef<ThemeModeType>
export declare function useTheme(
  options: useThemeOptions<IDashboard>,
): ComputedRef<IDashboardTheme>