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 })" />
packages/client/src/components/layout/ThemeSwitch.vue
+31 -19
View File
@@ -1,28 +1,40 @@
<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'
const { isDark, toggleTheme } = useTheme()
const { isDark, isComic, toggleBrightness, toggleStyle } = useTheme()
</script>
<template>
<button class="theme-switch" :title="isDark ? 'Light mode' : 'Dark mode'" @click="toggleTheme">
<!-- 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 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">