+
{{ t('settings.pages.models.title') }}
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts
index f5b9fe9d7..69e69dbb8 100644
--- a/packages/stage-ui/src/stores/settings.ts
+++ b/packages/stage-ui/src/stores/settings.ts
@@ -1,9 +1,13 @@
import { useDevicesList, useLocalStorage } from '@vueuse/core'
+import { converter } from 'culori'
import { defineStore } from 'pinia'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
export const DEFAULT_THEME_COLORS_HUE = 178.17
+const convert = converter('oklch')
+const getHueFrom = (color?: string) => color ? convert(color)?.h : DEFAULT_THEME_COLORS_HUE
+
export const useSettings = defineStore('settings', () => {
const selectedAudioDevice = ref
()
@@ -29,6 +33,35 @@ export const useSettings = defineStore('settings', () => {
const themeColorsHue = useLocalStorage('settings/theme/colors/hue', DEFAULT_THEME_COLORS_HUE)
const themeColorsHueDynamic = useLocalStorage('settings/theme/colors/hue-dynamic', false)
+ function setThemeColorsHue(hue = DEFAULT_THEME_COLORS_HUE) {
+ themeColorsHue.value = hue
+ themeColorsHueDynamic.value = false
+ }
+
+ function applyPrimaryColorFrom(color?: string) {
+ setThemeColorsHue(getHueFrom(color))
+ }
+
+ /**
+ * Check if a color is currently selected based on its hue value
+ * @param hexColor Hex color code to check
+ * @returns True if the color's hue matches the current theme hue
+ */
+ function isColorSelectedForPrimary(hexColor?: string) {
+ // If dynamic coloring is enabled, no preset color is manually selected
+ if (themeColorsHueDynamic.value)
+ return false
+
+ // Convert hex color to OKLCH
+ const h = getHueFrom(hexColor)
+ if (!h)
+ return false
+
+ // Compare hue values with a small tolerance for floating point comparison
+ const hueDifference = Math.abs(h - themeColorsHue.value)
+ return hueDifference < 0.01 || hueDifference > 359.99
+ }
+
watch(isAudioInputOn, (value) => {
if (value === 'false') {
selectedAudioDevice.value = undefined
@@ -38,17 +71,11 @@ export const useSettings = defineStore('settings', () => {
}
})
- onMounted(() => {
- if (isAudioInputOn.value === 'true' && !selectedAudioDevice.value) {
- selectedAudioDevice.value = audioInputs.value[0]
- }
- })
-
watch(audioInputs, () => {
if (isAudioInputOn.value === 'true' && !selectedAudioDevice.value) {
selectedAudioDevice.value = audioInputs.value[0]
}
- })
+ }, { immediate: true })
return {
live2dModelFile,
@@ -67,5 +94,9 @@ export const useSettings = defineStore('settings', () => {
isAudioInputOn,
selectedAudioDevice,
selectedAudioDeviceId,
+
+ setThemeColorsHue,
+ applyPrimaryColorFrom,
+ isColorSelectedForPrimary,
}
})