diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-04-16 10:59:05 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-04-16 10:59:05 +0900 |
| commit | 17e7340933887fb4044bdee4798ed87c873f1dad (patch) | |
| tree | 983c5f2bfb63506bc103fdee4ec4b4a8ab95baea /packages/frontend/src | |
| parent | 🎨 (diff) | |
| download | sharkey-17e7340933887fb4044bdee4798ed87c873f1dad.tar.gz sharkey-17e7340933887fb4044bdee4798ed87c873f1dad.tar.bz2 sharkey-17e7340933887fb4044bdee4798ed87c873f1dad.zip | |
enhance(frontend): テーマでページヘッダーの色を変更できるように
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkThemePreview.vue | 5 | ||||
| -rw-r--r-- | packages/frontend/src/components/global/MkPageHeader.vue | 11 |
2 files changed, 13 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkThemePreview.vue b/packages/frontend/src/components/MkThemePreview.vue index 013ab9d6a4..cc4254a2f6 100644 --- a/packages/frontend/src/components/MkThemePreview.vue +++ b/packages/frontend/src/components/MkThemePreview.vue @@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only <g fill-rule="evenodd"> <rect width="200" height="150" :fill="themeVariables.bg"/> <rect width="64" height="150" :fill="themeVariables.navBg"/> - <rect x="64" width="136" height="41" :fill="themeVariables.bg"/> + <rect x="64" width="136" height="41" :fill="themeVariables.pageHeaderBg"/> <path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel"/> </g> <circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/> @@ -62,6 +62,7 @@ const themeVariables = ref<{ accent: string; accentedBg: string; navBg: string; + pageHeaderBg: string; success: string; warn: string; error: string; @@ -76,6 +77,7 @@ const themeVariables = ref<{ accent: 'var(--MI_THEME-accent)', accentedBg: 'var(--MI_THEME-accentedBg)', navBg: 'var(--MI_THEME-navBg)', + pageHeaderBg: 'var(--MI_THEME-pageHeaderBg)', success: 'var(--MI_THEME-success)', warn: 'var(--MI_THEME-warn)', error: 'var(--MI_THEME-error)', @@ -104,6 +106,7 @@ watch(() => props.theme, (theme) => { accent: compiled.accent ?? 'var(--MI_THEME-accent)', accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)', navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)', + pageHeaderBg: compiled.pageHeaderBg ?? 'var(--MI_THEME-pageHeaderBg)', success: compiled.success ?? 'var(--MI_THEME-success)', warn: compiled.warn ?? 'var(--MI_THEME-warn)', error: compiled.error ?? 'var(--MI_THEME-error)', diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index 93f46a866a..dc0b52b141 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -124,11 +124,18 @@ onUnmounted(() => { <style lang="scss" module> .root { - background: color(from var(--MI_THEME-bg) srgb r g b / 0.75); + background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75); -webkit-backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px)); - border-bottom: solid 0.5px var(--MI_THEME-divider); + border-bottom: solid 0.5px transparent; width: 100%; + color: var(--MI_THEME-pageHeaderFg); +} + +@container style(--MI_THEME-pageHeaderBg: var(--MI_THEME-bg)) { + .root { + border-bottom: solid 0.5px var(--MI_THEME-divider); + } } .upper, |