mirror of
https://github.com/ld3z/new-manga.git
synced 2026-11-09 19:23:49 -07:00
82 lines
No EOL
2.5 KiB
Text
82 lines
No EOL
2.5 KiB
Text
---
|
|
---
|
|
<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> |