mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 12:36:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhance(frontend): テーマでページヘッダーの色を変更できるように

Browse source
This commit is contained in:
syuilo 2025-04-16 10:59:05 +09:00
parent 29f475b17a
commit 17e7340933
4 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend-shared/themes/_dark.json5
View file

@ -33,6 +33,8 @@
navFg: '@fg', navFg: '@fg',
navActive: '@accent', navActive: '@accent',
navIndicator: '@indicator', navIndicator: '@indicator',
pageHeaderBg: '@bg',
pageHeaderFg: '@fg',
link: '#44a4c1', link: '#44a4c1',
hashtag: '#ff9156', hashtag: '#ff9156',
mention: '@accent', mention: '@accent',

2
packages/frontend-shared/themes/_light.json5
View file

@ -33,6 +33,8 @@
navFg: '@fg', navFg: '@fg',
navActive: '@accent', navActive: '@accent',
navIndicator: '@indicator', navIndicator: '@indicator',
pageHeaderBg: '@bg',
pageHeaderFg: '@fg',
link: '#44a4c1', link: '#44a4c1',
hashtag: '#ff9156', hashtag: '#ff9156',
mention: '@accent', mention: '@accent',

5
packages/frontend/src/components/MkThemePreview.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<g fill-rule="evenodd"> <g fill-rule="evenodd">
<rect width="200" height="150" :fill="themeVariables.bg"/> <rect width="200" height="150" :fill="themeVariables.bg"/>
<rect width="64" height="150" :fill="themeVariables.navBg"/> <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"/> <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> </g>
<circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/> <circle cx="32" cy="83" r="21" :fill="themeVariables.accentedBg"/>
@ -62,6 +62,7 @@ const themeVariables = ref<{
accent: string; accent: string;
accentedBg: string; accentedBg: string;
navBg: string; navBg: string;
pageHeaderBg: string;
success: string; success: string;
warn: string; warn: string;
error: string; error: string;
@ -76,6 +77,7 @@ const themeVariables = ref<{
accent: 'var(--MI_THEME-accent)', accent: 'var(--MI_THEME-accent)',
accentedBg: 'var(--MI_THEME-accentedBg)', accentedBg: 'var(--MI_THEME-accentedBg)',
navBg: 'var(--MI_THEME-navBg)', navBg: 'var(--MI_THEME-navBg)',
pageHeaderBg: 'var(--MI_THEME-pageHeaderBg)',
success: 'var(--MI_THEME-success)', success: 'var(--MI_THEME-success)',
warn: 'var(--MI_THEME-warn)', warn: 'var(--MI_THEME-warn)',
error: 'var(--MI_THEME-error)', error: 'var(--MI_THEME-error)',
@ -104,6 +106,7 @@ watch(() => props.theme, (theme) => {
accent: compiled.accent ?? 'var(--MI_THEME-accent)', accent: compiled.accent ?? 'var(--MI_THEME-accent)',
accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)', accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)', navBg: compiled.navBg ?? 'var(--MI_THEME-navBg)',
pageHeaderBg: compiled.pageHeaderBg ?? 'var(--MI_THEME-pageHeaderBg)',
success: compiled.success ?? 'var(--MI_THEME-success)', success: compiled.success ?? 'var(--MI_THEME-success)',
warn: compiled.warn ?? 'var(--MI_THEME-warn)', warn: compiled.warn ?? 'var(--MI_THEME-warn)',
error: compiled.error ?? 'var(--MI_THEME-error)', error: compiled.error ?? 'var(--MI_THEME-error)',

11
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -124,11 +124,18 @@ onUnmounted(() => {
<style lang="scss" module> <style lang="scss" module>
.root { .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)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
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%; 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, .upper,