feat: añade Modo Oscuro completo con persistencia en localStorage#43
Open
Moha0x1 wants to merge 2 commits into
Open
feat: añade Modo Oscuro completo con persistencia en localStorage#43Moha0x1 wants to merge 2 commits into
Moha0x1 wants to merge 2 commits into
Conversation
Owner
|
@copilot resolve the merge conflicts in this pull request |
Contributor
There was a problem hiding this comment.
Pull request overview
Este PR introduce un modo oscuro basado en tokens CSS y añade persistencia del tema mediante localStorage, aplicando el tema temprano en el <head> para evitar parpadeos y habilitando un toggle en la home.
Changes:
- Añade tokens RGB y overrides para
:root.dark, y migra múltiples colores “hardcodeados” a variables. - Incorpora un botón de cambio de tema en la cabecera de
index.astroy guarda la preferencia enlocalStorage. - Inicializa el tema en
Layout.astroen función delocalStorageoprefers-color-scheme.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| web/src/styles/global.css | Define tokens para light/dark y adapta estilos a variables para soportar modo oscuro. |
| web/src/pages/index.astro | Añade UI de toggle de tema y lógica de persistencia al click. |
| web/src/layouts/Layout.astro | Aplica el tema inicial en el <head> según preferencia guardada o media query. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+78
to
+91
| <script is:inline> | ||
| const theme = (() => { | ||
| if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { | ||
| return localStorage.getItem('theme'); | ||
| } | ||
| if (window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| return 'dark'; | ||
| } | ||
| return 'light'; | ||
| })(); | ||
| if (theme === 'dark') { | ||
| document.documentElement.classList.add('dark'); | ||
| } | ||
| </script> |
| </svg> | ||
| <span>GitHub</span> | ||
| </a> | ||
| <button id="theme-toggle" class="theme-toggle" aria-label="Cambiar tema"> |
Comment on lines
+414
to
+420
| const themeToggle = document.getElementById('theme-toggle'); | ||
| themeToggle?.addEventListener('click', () => { | ||
| const element = document.documentElement; | ||
| element.classList.toggle('dark'); | ||
| const isDark = element.classList.contains('dark'); | ||
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | ||
| }); |
Comment on lines
+33
to
+39
| --glass-bg: 30, 30, 28; | ||
| --shadow-rgb: 0, 0, 0; | ||
| --text-rgb: 230, 225, 218; | ||
| --border-rgb: 44, 44, 40; | ||
| --accent-rgb: 224, 122, 95; | ||
| --black-rgb: 255, 255, 255; | ||
| --bg-rgb: 17, 17, 16; |
Comment on lines
+48
to
58
| .theme-toggle { | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| margin: 0 0.75rem; | ||
| display: flex; | ||
| align-items: center; | ||
| color: var(--ui-icon-color); | ||
| cursor: pointer; | ||
| transition: color 150ms ease; | ||
| } |
Comment on lines
443
to
+448
| .search-control:focus-within { | ||
| border-color: rgba(197, 90, 61, 0.42); | ||
| border-color: rgba(var(--accent-rgb), 0.42); | ||
| background: white; | ||
| box-shadow: | ||
| 0 14px 36px rgba(41, 31, 23, 0.07), | ||
| 0 0 0 4px rgba(197, 90, 61, 0.09); | ||
| 0 14px 36px rgba(var(--shadow-rgb), 0.07), | ||
| 0 0 0 4px rgba(var(--accent-rgb), 0.09); |
Comment on lines
782
to
787
| .book:hover, | ||
| .book:focus-within { | ||
| background: white; | ||
| border-color: var(--border); | ||
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); | ||
| box-shadow: 0 4px 20px rgba(var(--black-rgb), 0.06); | ||
| transform: translateY(-2px); |
Comment on lines
1751
to
1755
| background: | ||
| linear-gradient(90deg, rgba(26, 26, 26, 0.035) 1px, transparent 1px), | ||
| linear-gradient(180deg, rgba(26, 26, 26, 0.035) 1px, transparent 1px), | ||
| linear-gradient(90deg, rgba(var(--text-rgb), 0.035) 1px, transparent 1px), | ||
| linear-gradient(180deg, rgba(var(--text-rgb), 0.035) 1px, transparent 1px), | ||
| #f3eee6; | ||
| background-size: 22px 22px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.