useTheme

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

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"

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

Type Declarations

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>