Temas con CSS y compatibilidad con el modo oscuro
Aplique estilos coherentes a las páginas emergentes y de opciones, admita temas claros y oscuros y respete las preferencias de los usuarios.
Temas con CSS y compatibilidad con el modo oscuro es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Why Theming Matters
Your popup and options pages are small windows into your extension. Consistent, polished styling builds trust and makes the extension feel native to the browser.
Supporting dark mode respects users who set their system to a dark appearance.
Linking a Stylesheet
Keep styles in a separate CSS file and link it from your popup HTML for clean separation.
<head>
<link rel="stylesheet" href="popup.css">
</head>CSS Custom Properties
Define your color palette once with CSS variables. Then every component references the variable instead of a hard-coded color.
:root {
--bg: #ffffff;
--text: #1a1a1a;
--accent: #3367d6;
}Applying the Variables
Use the variables across your layout so a single change updates the whole theme.
body {
background: var(--bg);
color: var(--text);
}
button {
background: var(--accent);
}Detecting System Dark Mode
The prefers-color-scheme media query tells you the user's system theme. Override your variables inside it.
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
--text: #f5f5f5;
}
}Sizing the Popup
Popups size themselves to their content. Set an explicit width so the layout is predictable and not too cramped.
body {
width: 320px;
margin: 0;
font-family: system-ui, sans-serif;
}A Manual Theme Toggle
Let users override the system theme by adding a class to the root element from JavaScript.
document.documentElement.classList.toggle('dark', isDark)Styling the Manual Theme
Pair the toggle class with its own variable overrides, mirroring the media query.
.dark {
--bg: #1e1e1e;
--text: #f5f5f5;
}Persisting the Choice
Save the user's theme preference with the storage API so it survives popup reopens and browser restarts.
chrome.storage.sync.set({ theme: 'dark' })Reusing Styles Across Pages
Share one CSS file between your popup and options page to keep them visually consistent and avoid duplicating colors and spacing rules.
<link rel="stylesheet" href="../shared/theme.css">Accessibility Considerations
Ensure enough contrast between text and background in both themes, and never rely on color alone to convey meaning. Test with browser dev tools' contrast checker.
Quick Check
Check your theming knowledge.
Recap
You learned to theme extension UI:
- Centralize colors in CSS custom properties
- Detect dark mode with
prefers-color-scheme - Offer a manual toggle and persist it in storage
- Share styles across popup and options pages
- Keep contrast accessible
A polished, theme-aware UI makes your extension feel professional.
Preguntas frecuentes
¿La lección «Temas con CSS y compatibilidad con el modo oscuro» es gratis?
Sí — el texto completo de «Temas con CSS y compatibilidad con el modo oscuro» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
¿Qué aprenderé en «Temas con CSS y compatibilidad con el modo oscuro»?
Aplique estilos coherentes a las páginas emergentes y de opciones, admita temas claros y oscuros y respete las preferencias de los usuarios. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?
No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Temas con CSS y compatibilidad con el modo oscuro»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?
Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación de una UI emergente interactiva
- Creación de una página de opciones
- Comunicación entre componentes de la UI
- Temas con CSS y compatibilidad con el modo oscuro