Skip to content

Commit

Permalink
Merge pull request BewlyBewly#145 from starknt/feat/theme-switch
Browse files Browse the repository at this point in the history 
perf: improve theme switch performance
  • Loading branch information
@hakadao
hakadao authored Jan 8, 2024
2 parents 518549c + df527ae commit 35fee4e
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 107 deletions.
110 changes: 55 additions & 55 deletions src/components/Dock/Dock.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,62 +84,62 @@ onMounted(() => {
}
})
// eslint-disable-next-line unused-imports/no-unused-vars
function toggleDark(e: MouseEvent) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
// const isAppearanceTransition = typeof document !== 'undefined'
// // @ts-expect-error: Transition API
// && document.startViewTransition
// && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
// if (!isAppearanceTransition) {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// }
// else {
// const x = e.clientX
// const y = e.clientY
// const endRadius = Math.hypot(
// Math.max(x, innerWidth - x),
// Math.max(y, innerHeight - y),
// )
// const isDark = currentAppColorScheme.value === 'dark'
// // @ts-expect-error: Transition API
// const transition = document.startViewTransition(async () => {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// await nextTick()
// })
// transition.ready.then(() => {
// const clipPath = [
// `circle(0px at ${x}px ${y}px)`,
// `circle(${endRadius}px at ${x}px ${y}px)`,
// ]
// document.documentElement.animate(
// {
// clipPath: isDark
// ? [...clipPath].reverse()
// : clipPath,
// },
// {
// duration: 400,
// easing: 'ease-in',
// pseudoElement: isDark
// ? '::view-transition-old(root)'
// : '::view-transition-new(root)',
// },
// )
// })
// }
const isAppearanceTransition = typeof document !== 'undefined'
// @ts-expect-error: Transition API
&& document.startViewTransition
&& !window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (!isAppearanceTransition) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
}
else {
const x = e.clientX
const y = e.clientY
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)
// https://github.com/vueuse/vueuse/pull/3129
const style = window!.document.createElement('style')
const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
style.appendChild(document.createTextNode(styleString))
window!.document.head.appendChild(style)
// @ts-expect-error: Transition API
const transition = document.startViewTransition(async () => {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
await nextTick()
})
transition.ready.then(() => {
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
]
const animation = document.documentElement.animate(
{
clipPath: currentAppColorScheme.value === 'dark'
? [...clipPath].reverse()
: clipPath,
},
{
duration: 300,
easing: 'ease-in',
pseudoElement: currentAppColorScheme.value === 'dark'
? '::view-transition-old(root)'
: '::view-transition-new(root)',
},
)
animation.addEventListener('finish', () => {
document.head.removeChild(style!)
}, { once: true })
})
}
}
function toggleDockHide(hide: boolean) {
Expand Down
106 changes: 54 additions & 52 deletions src/components/RightSideButtons/RightSideButtons.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,60 +16,62 @@ const currentAppColorScheme = computed((): 'dark' | 'light' => {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
})
// eslint-disable-next-line unused-imports/no-unused-vars
function toggleDark(e: MouseEvent) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
// const isAppearanceTransition = typeof document !== 'undefined'
// // @ts-expect-error: Transition API
// && document.startViewTransition
// && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
// if (!isAppearanceTransition) {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// }
// else {
// const x = e.clientX
// const y = e.clientY
// const endRadius = Math.hypot(
// Math.max(x, innerWidth - x),
// Math.max(y, innerHeight - y),
// )
// const isDark = currentAppColorScheme.value === 'dark'
// // @ts-expect-error: Transition API
// const transition = document.startViewTransition(async () => {
// if (currentAppColorScheme.value === 'light')
// settings.value.theme = 'dark'
// else
// settings.value.theme = 'light'
// await nextTick()
// })
const isAppearanceTransition = typeof document !== 'undefined'
// @ts-expect-error: Transition API
&& document.startViewTransition
&& !window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (!isAppearanceTransition) {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
}
else {
const x = e.clientX
const y = e.clientY
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
)
// https://github.com/vueuse/vueuse/pull/3129
const style = window!.document.createElement('style')
const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
style.appendChild(document.createTextNode(styleString))
window!.document.head.appendChild(style)
// @ts-expect-error: Transition API
const transition = document.startViewTransition(async () => {
if (currentAppColorScheme.value === 'light')
settings.value.theme = 'dark'
else
settings.value.theme = 'light'
await nextTick()
})
// transition.ready.then(() => {
// const clipPath = [
// `circle(0px at ${x}px ${y}px)`,
// `circle(${endRadius}px at ${x}px ${y}px)`,
// ]
// document.documentElement.animate(
// {
// clipPath: isDark
// ? [...clipPath].reverse()
// : clipPath,
// },
// {
// duration: 400,
// easing: 'ease-in',
// pseudoElement: isDark
// ? '::view-transition-old(root)'
// : '::view-transition-new(root)',
// },
// )
// })
// }
transition.ready.then(() => {
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
]
const animation = document.documentElement.animate(
{
clipPath: currentAppColorScheme.value === 'dark'
? [...clipPath].reverse()
: clipPath,
},
{
duration: 300,
easing: 'ease-in',
pseudoElement: currentAppColorScheme.value === 'dark'
? '::view-transition-old(root)'
: '::view-transition-new(root)',
},
)
animation.addEventListener('finish', () => {
document.head.removeChild(style!)
}, { once: true })
})
}
}
</script>

Expand Down

0 comments on commit 35fee4e

Please sign in to comment.