mirror of
https://github.com/langgenius/dify.git
synced 2025-10-31 02:42:59 +00:00
74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { createContext, useContext } from 'use-context-selector'
|
|
import { hexToRGBA } from './utils'
|
|
|
|
export class Theme {
|
|
public chatColorTheme: string | null
|
|
public chatColorThemeInverted: boolean
|
|
|
|
public primaryColor = '#1C64F2'
|
|
public backgroundHeaderColorStyle = 'backgroundImage: linear-gradient(to right, #2563eb, #0ea5e9)'
|
|
public headerBorderBottomStyle = ''
|
|
public colorFontOnHeaderStyle = 'color: white'
|
|
public colorPathOnHeader = 'text-text-primary-on-surface'
|
|
public backgroundButtonDefaultColorStyle = 'backgroundColor: #1C64F2'
|
|
public roundedBackgroundColorStyle = 'backgroundColor: rgb(245 248 255)'
|
|
public chatBubbleColorStyle = ''
|
|
|
|
constructor(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
|
|
this.chatColorTheme = chatColorTheme
|
|
this.chatColorThemeInverted = chatColorThemeInverted
|
|
this.configCustomColor()
|
|
this.configInvertedColor()
|
|
}
|
|
|
|
private configCustomColor() {
|
|
if (this.chatColorTheme !== null && this.chatColorTheme !== '') {
|
|
this.primaryColor = this.chatColorTheme ?? '#1C64F2'
|
|
this.backgroundHeaderColorStyle = `backgroundColor: ${this.primaryColor}`
|
|
this.backgroundButtonDefaultColorStyle = `backgroundColor: ${this.primaryColor}; color: ${this.colorFontOnHeaderStyle};`
|
|
this.roundedBackgroundColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.05)}`
|
|
this.chatBubbleColorStyle = `backgroundColor: ${hexToRGBA(this.primaryColor, 0.15)}`
|
|
}
|
|
}
|
|
|
|
private configInvertedColor() {
|
|
if (this.chatColorThemeInverted) {
|
|
this.backgroundHeaderColorStyle = 'backgroundColor: #ffffff'
|
|
this.colorFontOnHeaderStyle = `color: ${this.primaryColor}`
|
|
this.headerBorderBottomStyle = 'borderBottom: 1px solid #ccc'
|
|
this.colorPathOnHeader = this.primaryColor
|
|
}
|
|
}
|
|
}
|
|
|
|
export class ThemeBuilder {
|
|
private _theme?: Theme
|
|
private buildChecker = false
|
|
|
|
public get theme() {
|
|
if (this._theme === undefined) {
|
|
this._theme = new Theme()
|
|
return this._theme
|
|
}
|
|
else {
|
|
return this._theme
|
|
}
|
|
}
|
|
|
|
public buildTheme(chatColorTheme: string | null = null, chatColorThemeInverted = false) {
|
|
if (!this.buildChecker) {
|
|
this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
|
|
this.buildChecker = true
|
|
}
|
|
else {
|
|
if (this.theme?.chatColorTheme !== chatColorTheme || this.theme?.chatColorThemeInverted !== chatColorThemeInverted) {
|
|
this._theme = new Theme(chatColorTheme, chatColorThemeInverted)
|
|
this.buildChecker = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeBuilder>(new ThemeBuilder())
|
|
export const useThemeContext = () => useContext(ThemeContext)
|