admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add comic/doodle theme style (#603)

Browse Source 
* feat: add comic/doodle theme style with local font

Add a new "comic" theme style that applies hand-drawn aesthetics (Comic Neue
font, bold borders, heavy font weight) while keeping the original light/dark
background colors. Font files are bundled locally to avoid Google Fonts CDN
dependency.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix: update DisplaySettings to use renamed theme API and update brand assets

Rename mode/setMode/ThemeMode to brightness/setBrightness/BrightnessMode
to match the refactored useTheme composable. Update favicon and logo.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
ekko
2026-05-10 14:01:29 +08:00
committed by GitHub
parent 739c65a4df
commit 5c3e9edd19
14 changed files with 173 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/components/hermes/files/FileToolbar.vue
-1
View File
@@ -46,7 +46,6 @@ async function handleRefresh() {
.file-toolbar {
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
@media (max-width: $breakpoint-mobile) {
padding: 8px 4px;
packages/client/src/components/hermes/settings/DisplaySettings.vue
+5 -5
View File
@@ -2,13 +2,13 @@
import { NSwitch, NSelect, useMessage } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useSettingsStore } from '@/stores/hermes/settings'
import { useTheme, type ThemeMode } from '@/composables/useTheme'
import { useTheme, type BrightnessMode } from '@/composables/useTheme'
import SettingRow from './SettingRow.vue'
const settingsStore = useSettingsStore()
const message = useMessage()
const { t } = useI18n()
const { mode, setMode } = useTheme()
const { brightness, setBrightness } = useTheme()
const themeOptions = [
{ label: t('settings.display.themeLight'), value: 'light' },
@@ -26,8 +26,8 @@ async function save(values: Record<string, any>) {
}
function handleThemeChange(val: string) {
const m = val as ThemeMode
setMode(m)
const m = val as BrightnessMode
setBrightness(m)
save({ skin: m })
}
</script>
@@ -35,7 +35,7 @@ function handleThemeChange(val: string) {
<template>
<section class="settings-section">
<SettingRow :label="t('settings.display.theme')" :hint="t('settings.display.themeHint')">
<NSelect :value="mode" :options="themeOptions" size="small" :consistent-menu-width="false" class="input-sm" @update:value="handleThemeChange" />
<NSelect :value="brightness" :options="themeOptions" size="small" :consistent-menu-width="false" class="input-sm" @update:value="handleThemeChange" />
</SettingRow>
<SettingRow :label="t('settings.display.streaming')" :hint="t('settings.display.streamingHint')">
<NSwitch :value="settingsStore.display.streaming" @update:value="v => save({ streaming: v })" />