useTheme

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

提示

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

演示

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，不可修改。

import { useTheme } from "@qww0302/use-bitable"

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

类型声明

import { ThemeModeType } from "@lark-base-open/js-sdk"
export interface useThemeOptions {
  onChanged?: (theme: ThemeModeType) => void
}
/**
 * Reactive bitable theme mode
 *
 * 响应式的bitable主题模式
 *
 * @param options
 * @returns
 */
export declare function useTheme(
  options?: useThemeOptions,
): import("vue").ComputedRef<ThemeModeType>