ldez/new-manga
1
0
Fork 0
mirror of https://github.com/ld3z/new-manga.git synced 2026-11-09 20:13:44 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added flashbang mode

Browse source
This commit is contained in:
ld3zian 2025-01-14 16:57:30 -07:00
parent 1995bb679d
commit 687fff643d
7 changed files with 227 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/ThemeToggle.astro Normal file
View file

@ -0,0 +1,82 @@
---
---
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<script>
const setTheme = (theme: 'light' | 'dark') => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
};
// Initialize theme
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
setTheme(initialTheme);
// Handle toggle click
document.getElementById('theme-toggle')?.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
});
</script>
<style>
.theme-toggle {
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: var(--text-color);
position: fixed;
top: 1rem;
right: 1rem;
z-index: 100;
background: var(--bg-secondary);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.theme-toggle:hover {
background: var(--bg-hover);
}
.sun-icon,
.moon-icon {
width: 20px;
height: 20px;
position: absolute;
transition: transform 0.5s ease, opacity 0.5s ease;
}
:global([data-theme="dark"]) .sun-icon {
transform: translateY(100%);
opacity: 0;
}
:global([data-theme="light"]) .moon-icon {
transform: translateY(100%);
opacity: 0;
}
</style>