strip theme transition on load to use early script
This commit is contained in:
@@ -15,45 +15,3 @@ export interface Props {
|
||||
<Layout title={global.title} description={global.title}>
|
||||
<slot />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', () => {
|
||||
document.documentElement.classList.add('theme-switching');
|
||||
|
||||
const rippleElements = document.querySelectorAll('.theme-ripple');
|
||||
rippleElements.forEach((el) => {
|
||||
el.classList.add('ripple-active');
|
||||
setTimeout(() => {
|
||||
el.classList.remove('ripple-active');
|
||||
}, 600);
|
||||
});
|
||||
|
||||
const event = new CustomEvent('themeChange', {
|
||||
detail: {
|
||||
theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
|
||||
},
|
||||
});
|
||||
document.dispatchEvent(event);
|
||||
|
||||
setTimeout(() => {
|
||||
document.documentElement.classList.remove('theme-switching');
|
||||
}, 600);
|
||||
});
|
||||
}
|
||||
|
||||
const socialLinks = document.querySelectorAll('.social-link');
|
||||
socialLinks.forEach((link) => {
|
||||
link.addEventListener('mouseenter', () => {
|
||||
link.classList.add('hover-active');
|
||||
});
|
||||
|
||||
link.addEventListener('mouseleave', () => {
|
||||
link.classList.remove('hover-active');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user