1
import shoelaceDarkCss from '@shoelace-style/shoelace/dist/themes/dark.css?inline'
2
import shoelaceLightCss from '@shoelace-style/shoelace/dist/themes/light.css?inline'
3

4
/** shoelace 组件库的主题属性 */
5
export enum HyosanChatShoelaceTheme {
6
  shoelaceLight = 'sl-theme-light',
7
  shoelaceDark = 'sl-theme-dark',
8
}
9

10
/** shoelace 组件库的主题 css 内容 */
11
export const HyosanChatShoelaceThemes = {
12
  /** light theme */
13
  [HyosanChatShoelaceTheme.shoelaceLight]: shoelaceLightCss,
14
  /** dark theme */
15
  [HyosanChatShoelaceTheme.shoelaceDark]: shoelaceDarkCss,
16
}
17

18
/**
19
 * 设置 hyosan-chat 主题
20
 * @description 用于切换底层组件库 `shoelace` 的主题, `<hyosan-chat>` 组件会根据 `shoelaceTheme` 的值自动切换主题
21
 */
22
export class HyosanChatTheme {
23
  static TAG_ATTRIBUTE = 'data-hyosan-chat-theme'
24
  static getStyleElement() {
25
    return document.querySelector(`style[${HyosanChatTheme.TAG_ATTRIBUTE}]`)
26
  }
27
  static setStyleElement(theme: HyosanChatShoelaceTheme) {
28
    const styleElement = HyosanChatTheme.getStyleElement()
29
    const cssText = HyosanChatShoelaceThemes[theme]
30
    const cssNode = document.createTextNode(cssText)
31
    if (styleElement) {
32
      styleElement.innerHTML = ''
33
      styleElement.appendChild(cssNode)
34
    } else {
35
      const style = document.createElement('style')
36
      style.setAttribute(HyosanChatTheme.TAG_ATTRIBUTE, theme)
37
      style.setAttribute('type', 'text/css')
38
      style.appendChild(cssNode)
39
      document.head.appendChild(style) // 将包含 shoelace 主题样式的标签插入到 head 中
40
    }
41
    HyosanChatTheme._updateThemeClass(theme)
42
  }
43
  /** 在根元素上切换 shoelace 主题类 */
44
  private static _updateThemeClass(theme: HyosanChatShoelaceTheme) {
45
    document.documentElement.classList.add(theme)
46
    Object.values(HyosanChatShoelaceTheme).forEach((c) => {
47
      console.log(c)
48
      if (c !== theme) {
49
        document.documentElement.classList.remove(c)
50
      }
51
    })
52
  }
53
}

1
import {
2
  HyosanChatShoelaceTheme,
3
  HyosanChatTheme,
4
} from '@/utils/HyosanChatTheme'
5

6
@customElement('hyosan-chat')
7
export class HyosanChat extends ShoelaceElement {
8
  // ...
9
  /** shoelace 主题, 可用于切换夜间模式 */
10
  @property({ reflect: true })
11
  shoelaceTheme: HyosanChatShoelaceTheme = HyosanChatShoelaceTheme.shoelaceLight
12
}

1
{
2
  "scripts": {
3
    "npm:login": "pnpm login --registry=https://registry.npmjs.org",
4
    "npm:publish": "pnpm run build:lib && pnpm publish --registry=https://registry.npmjs.org",
5
  }
6
}