useTheme

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

Notice

This function needs to use in Base, please use this website as a plugin in a Base to see the demo.

Demo

Source

Show demo code

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>

Usage

useTheme is a responsive Bitable theme, which listens to the theme changes of Bitable and updates in real time.

TIP

Since the API of Bitable does not support plugins to modify the theme, useTheme returns a read-only ref here, which is not modifiable.

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
})

Type Declarations

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>