Skip to content

Commit 2ef35dd

Browse files
jmacotclaude
jmacot
and
claude
committed
docs: update CLAUDE.md — sky toggle, dot grid, accessibility rules
- Replace all btn-theme/theme-toggle references with sky-check/sky-toggle - Update Template A and B HTML to use sky toggle + dot grid - Update dark mode JS to use checkbox change event - Update responsive rules (hero-glow hide, sky-toggle resize) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e013d6b commit 2ef35dd

1 file changed

Lines changed: 63 additions & 36 deletions

File tree

‎CLAUDE.md‎

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -245,8 +245,12 @@
245245
</head>
246246
<body>
247247
<header>
248+
<!-- Sky toggle (ver seccion 8 para CSS completo) -->
249+
<label class="sky-toggle" title="Cambiar tema" aria-label="Cambiar modo claro/oscuro">
250+
<input type="checkbox" id="sky-check" />
251+
<div class="sky-toggle__container"><!-- ... --></div>
252+
</label>
248253
<a class="back-home" href="https://jmacot.github.io/" title="Volver al inicio">← Inicio</a>
249-
<button class="theme-toggle" id="btn-theme" aria-label="Cambiar a modo oscuro" title="Cambiar tema"></button>
250254
<div class="header-label">{SECCION}</div>
251255
<h1>{TITULO}<br><em>{SUBTITULO}</em></h1>
252256
<p>{DESCRIPCION}</p>
@@ -258,12 +262,23 @@
258262
<a href="https://github.com/jmacot" target="_blank">github.com/jmacot</a> · {ETIQUETA}
259263
</footer>
260264
<script>
261-
// JavaScript
262-
// — Theme toggle (Sistema A: #0f172a light, #152238 dark) —
263-
// applyTheme() debe incluir:
264-
// var metaTheme = document.getElementById('meta-theme');
265-
// btnTheme.setAttribute('aria-label', dark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro');
266-
// if (metaTheme) metaTheme.setAttribute('content', dark ? '#152238' : '#0f172a');
265+
// ─────────────────────────────────────────────
266+
// THEME
267+
// ─────────────────────────────────────────────
268+
const skyCheck = document.getElementById('sky-check');
269+
function applyTheme(dark) {
270+
var metaTheme = document.getElementById('meta-theme');
271+
if (dark) {
272+
document.documentElement.setAttribute('data-theme', 'dark');
273+
skyCheck.checked = true;
274+
if (metaTheme) metaTheme.setAttribute('content', '#152238');
275+
} else {
276+
document.documentElement.removeAttribute('data-theme');
277+
skyCheck.checked = false;
278+
if (metaTheme) metaTheme.setAttribute('content', '#0f172a');
279+
}
280+
}
281+
// ... initTheme(), getAutoTheme(), event listeners (same pattern as Sistema B)
267282
</script>
268283
</body>
269284
</html>
@@ -372,7 +387,13 @@
372387
<div class="app-container">
373388
<a class="back-home" href="https://jmacot.github.io/" title="Volver al inicio">← Inicio</a>
374389
<div class="app-header">
375-
<button class="theme-toggle" id="btn-theme" aria-label="Cambiar a modo oscuro" title="Cambiar tema"></button>
390+
<div class="hero-dot-grid"></div>
391+
<div class="hero-glow hero-glow-1"></div>
392+
<div class="hero-glow hero-glow-2"></div>
393+
<label class="sky-toggle" title="Cambiar tema" aria-label="Cambiar modo claro/oscuro">
394+
<input type="checkbox" id="sky-check" />
395+
<div class="sky-toggle__container"><!-- ... --></div>
396+
</label>
376397
<h1>{TITULO}</h1>
377398
<p>{DESCRIPCION}</p>
378399
</div>
@@ -836,8 +857,8 @@ const fmt = n => n.toLocaleString('es-ES', {
836857

837858
/* B Premium: header y pills */
838859
.app-header { padding: 32px 20px 24px; border-radius: var(--radius); }
839-
.app-header::before, .app-header::after { display: none; } /* ocultar glows */
840-
.theme-toggle { width: 36px; height: 36px; font-size: 1.1rem; }
860+
.hero-glow { display: none; }
861+
.sky-toggle { --toggle-size: 16px; top: 8px; right: 8px; }
841862
.cat-pills { gap: 6px; } /* scroll horizontal natural */
842863
}
843864
```
@@ -877,42 +898,48 @@ font-size: clamp(1.3rem, 3vw, 1.7rem); /* Sistema B h1 */
877898
}
878899
```
879900

880-
### HTML — boton toggle
901+
### HTML — Sky Toggle (reemplaza el antiguo boton emoji)
902+
903+
> **Regla:** Todos los repos usan el sky toggle CSS puro desde abril 2026. NO usar el antiguo `<button class="theme-toggle" id="btn-theme">` con emojis.
881904
882905
```html
883-
<button class="theme-toggle" id="btn-theme" aria-label="Cambiar a modo oscuro" title="Cambiar tema"></button>
906+
<label class="sky-toggle" title="Cambiar tema" aria-label="Cambiar modo claro/oscuro">
907+
<input type="checkbox" id="sky-check" />
908+
<div class="sky-toggle__container">
909+
<div class="sky-toggle__clouds"></div>
910+
<div class="sky-toggle__stars"><!-- SVG estrellas --></div>
911+
<div class="sky-toggle__circle">
912+
<div class="sky-toggle__sun-moon">
913+
<div class="sky-toggle__moon">
914+
<div class="sky-toggle__spot"></div>
915+
<div class="sky-toggle__spot"></div>
916+
<div class="sky-toggle__spot"></div>
917+
</div>
918+
</div>
919+
</div>
920+
</div>
921+
</label>
884922
```
885923

886-
```css
887-
.theme-toggle {
888-
position: absolute; top: 0.3rem; right: 0.3rem;
889-
background: var(--surface2); border: 1.5px solid var(--border);
890-
border-radius: 50%; width: 42px; height: 42px; font-size: 1.3rem;
891-
cursor: pointer; display: flex; align-items: center; justify-content: center;
892-
box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s;
893-
}
894-
.theme-toggle:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
895-
```
924+
- **Posicion:** `position: absolute; top: 12px; right: 12px;` (Sistema B) o `top: 16px; right: 16px;` (Sistema A)
925+
- **Tamano:** `--toggle-size: 20px` (desktop), `16px` (movil)
926+
- **Checked = dark mode** — el checkbox controla `[data-theme="dark"]`
896927

897-
### JS — auto-deteccion + toggle manual
928+
### JS — auto-deteccion + sky toggle
898929

899930
```javascript
900-
const btnTheme = document.getElementById('btn-theme');
931+
const skyCheck = document.getElementById('sky-check');
901932

902933
function applyTheme(dark) {
903934
var metaTheme = document.getElementById('meta-theme');
904935
if (dark) {
905936
document.documentElement.setAttribute('data-theme', 'dark');
906-
btnTheme.textContent = '☀️';
907-
btnTheme.setAttribute('aria-label', 'Cambiar a modo claro');
908-
// Sistema B: '#0a1628' | Sistema A: '#152238'
909-
if (metaTheme) metaTheme.setAttribute('content', '#0a1628');
937+
skyCheck.checked = true;
938+
if (metaTheme) metaTheme.setAttribute('content', '#152238');
910939
} else {
911940
document.documentElement.removeAttribute('data-theme');
912-
btnTheme.textContent = '🌙';
913-
btnTheme.setAttribute('aria-label', 'Cambiar a modo oscuro');
914-
// Sistema B: '#1a3a5c' | Sistema A: '#0f172a'
915-
if (metaTheme) metaTheme.setAttribute('content', '#1a3a5c');
941+
skyCheck.checked = false;
942+
if (metaTheme) metaTheme.setAttribute('content', '#1a3a5c'); // Sistema B; Sistema A: '#0f172a'
916943
}
917944
}
918945

@@ -935,10 +962,10 @@ function initTheme() {
935962
}
936963
}
937964

938-
btnTheme.addEventListener('click', () => {
939-
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
940-
applyTheme(!isDark);
941-
localStorage.setItem('theme', isDark ? 'light' : 'dark');
965+
skyCheck.addEventListener('change', function() {
966+
var isDark = skyCheck.checked;
967+
applyTheme(isDark);
968+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
942969
localStorage.setItem('theme-date', new Date().toDateString());
943970
});
944971

0 commit comments

Comments
 (0)