adopt CYBER neon-dark theme tokens
Replace the Pure Ink light/dark/comic theme system with the CYBER single-theme dark palette from the reviewed prototype: OKLCH surfaces, one neon-cyan accent, and monospace-first typography. Arco components were reading colors from arco.css because no ConfigProvider was mounted, so the theme values in arco-theme.ts never took effect. Bridge CYBER into Arco through its --color-* variables in global.scss instead, and align arco-theme.ts to match. Brightness and style switches are gone: useTheme now pins dark, the comic font faces and locale keys are removed, and ThemeSwitch.vue is deleted along with its sidebar slot and display setting.
This commit is contained in:
@@ -3,7 +3,6 @@ import { computed } from 'vue'
|
||||
import { useMessage } from '@/composables/useMessage'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useSettingsStore } from '@/stores/hermes/settings'
|
||||
import { useTheme, type BrightnessMode } from '@/composables/useTheme'
|
||||
import { requestCompletionNotificationPermission, showCompletionNotification, type CompletionNotificationPermissionResult } from '@/utils/completion-notification'
|
||||
import { clampChatInputHeight, MAX_CHAT_INPUT_HEIGHT, MIN_CHAT_INPUT_HEIGHT } from '@/utils/chat-input-height'
|
||||
import SettingRow from './SettingRow.vue'
|
||||
@@ -11,13 +10,7 @@ import SettingRow from './SettingRow.vue'
|
||||
const settingsStore = useSettingsStore()
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
const { brightness, setBrightness } = useTheme()
|
||||
|
||||
const themeOptions = [
|
||||
{ label: t('settings.display.themeLight'), value: 'light' },
|
||||
{ label: t('settings.display.themeDark'), value: 'dark' },
|
||||
{ label: t('settings.display.themeSystem'), value: 'system' },
|
||||
]
|
||||
const chatInputHeight = computed(() => clampChatInputHeight(settingsStore.display.chat_input_height))
|
||||
|
||||
async function save(values: Record<string, any>) {
|
||||
@@ -29,12 +22,6 @@ async function save(values: Record<string, any>) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleThemeChange(val: string) {
|
||||
const m = val as BrightnessMode
|
||||
setBrightness(m)
|
||||
save({ skin: m })
|
||||
}
|
||||
|
||||
function handleChatInputHeightChange(value: number | null) {
|
||||
return save({ chat_input_height: clampChatInputHeight(value) })
|
||||
}
|
||||
@@ -90,9 +77,6 @@ async function testCompletionNotification() {
|
||||
|
||||
<template>
|
||||
<section class="settings-section">
|
||||
<SettingRow :label="t('settings.display.theme')" :hint="t('settings.display.themeHint')">
|
||||
<a-select :model-value="brightness" :options="themeOptions" size="small" class="input-sm" @update:model-value="v => handleThemeChange(String(v))" />
|
||||
</SettingRow>
|
||||
<SettingRow :label="t('settings.display.streaming')" :hint="t('settings.display.streamingHint')">
|
||||
<a-switch :model-value="settingsStore.display.streaming" @update:model-value="v => save({ streaming: v })" />
|
||||
</SettingRow>
|
||||
|
||||
@@ -9,7 +9,6 @@ import RouteLinkItem from '@/components/common/RouteLinkItem.vue'
|
||||
import ModelSelector from "@/components/layout/ModelSelector.vue";
|
||||
import ProfileSelector from "@/components/layout/ProfileSelector.vue";
|
||||
import LanguageSwitch from "@/components/layout/LanguageSwitch.vue";
|
||||
import ThemeSwitch from "@/components/layout/ThemeSwitch.vue";
|
||||
import { changelog } from "@/data/changelog";
|
||||
import { getStoredUsername, isStoredSuperAdmin } from "@/api/client";
|
||||
|
||||
@@ -350,7 +349,6 @@ function handleUpdateClick() {
|
||||
>
|
||||
Studio v{{ appStore.serverVersion || "0.1.0" }}
|
||||
</span>
|
||||
<ThemeSwitch />
|
||||
</div>
|
||||
<a-button v-if="appStore.clientOutdated" type="primary" status="warning" size="mini" long class="update-btn" @click="handleReloadClient">
|
||||
{{ t('sidebar.reloadClientVersion', { version: appStore.serverVersion }) }}
|
||||
@@ -662,10 +660,6 @@ function handleUpdateClick() {
|
||||
}
|
||||
}
|
||||
|
||||
.version-info :deep(.theme-switch-container) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
margin: 4px 0 0;
|
||||
border-radius: $radius-sm;
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
|
||||
const { isDark, isComic, toggleBrightness, toggleStyle } = useTheme()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="theme-switch-container" style="display: flex; gap: 4px; align-items: center;">
|
||||
<button class="theme-switch" :title="isComic ? 'Ink style' : 'Comic style'" @click="toggleStyle">
|
||||
<!-- Palette icon for comic toggle -->
|
||||
<svg v-if="isComic" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
|
||||
</svg>
|
||||
<!-- Sparkle icon for ink mode -->
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5L12 3z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="theme-switch" :title="isDark ? 'Light mode' : 'Dark mode'" @click="toggleBrightness">
|
||||
<!-- Sun icon (shown in dark mode) -->
|
||||
<svg v-if="isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5" />
|
||||
<line x1="12" y1="1" x2="12" y2="3" />
|
||||
<line x1="12" y1="21" x2="12" y2="23" />
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
||||
<line x1="1" y1="12" x2="3" y2="12" />
|
||||
<line x1="21" y1="12" x2="23" y2="12" />
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
<!-- Moon icon (shown in light mode) -->
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.theme-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-primary);
|
||||
background: rgba(var(--accent-primary-rgb), 0.06);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user