Appliquer le thème Crépuscule par défaut et supprimer le sélecteur de thème
This commit is contained in:
parent
31648292c1
commit
f351d3f654
3 changed files with 7 additions and 266 deletions
|
|
@ -1,198 +0,0 @@
|
|||
---
|
||||
// Composant temporaire pour prévisualiser les palettes de couleurs.
|
||||
// À supprimer une fois le thème choisi.
|
||||
---
|
||||
|
||||
<div id="theme-switcher">
|
||||
<button id="theme-toggle" aria-label="Changer de thème">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="theme-panel" class="hidden">
|
||||
<span class="panel-title">Palette</span>
|
||||
|
||||
<button data-set-theme="" class="theme-btn active" title="Rêverie (actuel)">
|
||||
<span class="swatch" style="background: linear-gradient(135deg, #E0C3FC, #FF9F89)"></span>
|
||||
<span class="label">Rêverie</span>
|
||||
<span class="desc">Pastels actuels</span>
|
||||
</button>
|
||||
|
||||
<button data-set-theme="crepuscule" class="theme-btn" title="Crépuscule & Cuivre">
|
||||
<span class="swatch" style="background: linear-gradient(135deg, #1A1A2E, #C9956B)"></span>
|
||||
<span class="label">Crépuscule</span>
|
||||
<span class="desc">Cuivre & nuit</span>
|
||||
</button>
|
||||
|
||||
<button data-set-theme="foret" class="theme-btn" title="Forêt enchantée">
|
||||
<span class="swatch" style="background: linear-gradient(135deg, #3D5A47, #D4A843)"></span>
|
||||
<span class="label">Forêt</span>
|
||||
<span class="desc">Mousse & terre</span>
|
||||
</button>
|
||||
|
||||
<button data-set-theme="nuit" class="theme-btn" title="Nuit étoilée">
|
||||
<span class="swatch" style="background: linear-gradient(135deg, #1E1E3F, #C8A961)"></span>
|
||||
<span class="label">Nuit</span>
|
||||
<span class="desc">Sombre & or</span>
|
||||
</button>
|
||||
|
||||
<button data-set-theme="aube" class="theme-btn" title="Aube rosée">
|
||||
<span class="swatch" style="background: linear-gradient(135deg, #6B3A5A, #C0785A)"></span>
|
||||
<span class="label">Aube</span>
|
||||
<span class="desc">Prune & terracotta</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#theme-switcher {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 9999;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#theme-panel {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.75rem);
|
||||
right: 0;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
min-width: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
display: grid;
|
||||
grid-template-columns: 1.75rem 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 0.625rem;
|
||||
row-gap: 0;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.625rem;
|
||||
border: 2px solid transparent;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.theme-btn.active {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.swatch {
|
||||
grid-row: 1 / 3;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementById('theme-toggle')!;
|
||||
const panel = document.getElementById('theme-panel')!;
|
||||
const buttons = panel.querySelectorAll<HTMLButtonElement>('[data-set-theme]');
|
||||
|
||||
// Appliquer le thème sauvegardé
|
||||
const saved = localStorage.getItem('aspireves-theme');
|
||||
if (saved) {
|
||||
document.documentElement.setAttribute('data-theme', saved);
|
||||
}
|
||||
|
||||
function updateActive() {
|
||||
const current = document.documentElement.getAttribute('data-theme') || '';
|
||||
buttons.forEach((btn) => {
|
||||
btn.classList.toggle('active', btn.dataset.setTheme === current);
|
||||
});
|
||||
}
|
||||
updateActive();
|
||||
|
||||
// Toggle du panel
|
||||
toggle.addEventListener('click', () => {
|
||||
panel.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Fermer si clic en dehors
|
||||
document.addEventListener('click', (e) => {
|
||||
const switcher = document.getElementById('theme-switcher')!;
|
||||
if (!switcher.contains(e.target as Node)) {
|
||||
panel.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Changement de thème
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const theme = btn.dataset.setTheme!;
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('aspireves-theme', theme);
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
localStorage.removeItem('aspireves-theme');
|
||||
}
|
||||
updateActive();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import ThemeSwitcher from '../components/ThemeSwitcher.astro';
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -24,7 +23,5 @@ const { title = 'Compagnie AspiRêves' } = Astro.props;
|
|||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
<ThemeSwitcher />
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
|
||||
--font-display: "Fredoka", sans-serif;
|
||||
|
||||
--color-cloud: #F8F7FF;
|
||||
--color-night: #2D2D3A;
|
||||
--color-star: #FFD700;
|
||||
--color-dream-pink: #FFD6E0;
|
||||
--color-dream-blue: #C1D3FE;
|
||||
--color-dream-purple: #E0C3FC;
|
||||
--color-dream-coral: #FF9F89;
|
||||
--color-cloud: #F5EFE6;
|
||||
--color-night: #1A1A2E;
|
||||
--color-star: #C9956B;
|
||||
--color-dream-pink: #E8D5B7;
|
||||
--color-dream-blue: #3A506B;
|
||||
--color-dream-purple: #C9956B;
|
||||
--color-dream-coral: #D4443B;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -114,64 +114,6 @@ body {
|
|||
animation: slideDown 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
THÈMES - Sélecteur temporaire de palette
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
/* Crépuscule & Cuivre — Théâtre classique, velours, projecteurs */
|
||||
[data-theme="crepuscule"] {
|
||||
--color-cloud: #F5EFE6;
|
||||
--color-night: #1A1A2E;
|
||||
--color-star: #C9956B;
|
||||
--color-dream-pink: #E8D5B7;
|
||||
--color-dream-blue: #3A506B;
|
||||
--color-dream-purple: #C9956B;
|
||||
--color-dream-coral: #D4443B;
|
||||
}
|
||||
|
||||
/* Forêt enchantée — Conte, nature mystérieuse, rêve enraciné */
|
||||
[data-theme="foret"] {
|
||||
--color-cloud: #F2EDE4;
|
||||
--color-night: #1B2D2A;
|
||||
--color-star: #D4A843;
|
||||
--color-dream-pink: #D4A843;
|
||||
--color-dream-blue: #3D5A47;
|
||||
--color-dream-purple: #7A9E6B;
|
||||
--color-dream-coral: #C17F3E;
|
||||
}
|
||||
|
||||
/* Nuit étoilée — Scène dans le noir, dramatique, onirique */
|
||||
[data-theme="nuit"] {
|
||||
--color-cloud: #0D0D1A;
|
||||
--color-night: #F0ECE2;
|
||||
--color-star: #C8A961;
|
||||
--color-dream-pink: #C8A961;
|
||||
--color-dream-blue: #6B5FB5;
|
||||
--color-dream-purple: #4A3F8A;
|
||||
--color-dream-coral: #C8A961;
|
||||
}
|
||||
|
||||
/* Nuit étoilée — Overrides pour les bg-white hardcodés */
|
||||
[data-theme="nuit"] nav.bg-white\/80,
|
||||
[data-theme="nuit"] nav[class*="bg-white"] {
|
||||
background-color: rgba(13, 13, 26, 0.85) !important;
|
||||
}
|
||||
|
||||
[data-theme="nuit"] #mobile-menu {
|
||||
background-color: rgba(13, 13, 26, 0.95) !important;
|
||||
}
|
||||
|
||||
/* Aube rosée — Chaleur, poésie, douceur mature */
|
||||
[data-theme="aube"] {
|
||||
--color-cloud: #FAF4F0;
|
||||
--color-night: #2C1A2E;
|
||||
--color-star: #C0785A;
|
||||
--color-dream-pink: #D4A88C;
|
||||
--color-dream-blue: #7A4A6A;
|
||||
--color-dream-purple: #6B3A5A;
|
||||
--color-dream-coral: #C0785A;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue