Barras de desplazamiento personalizadas y modos de alto contraste con CSS
Los toques finales de un tema personalizado son las partes que la gente olvida: la barra de desplazamiento, el contraste, la opción de drenar el color por completo. Esta guía reúne las reglas CSS de JustZix que pulen un sitio hasta convertirlo en algo que realmente disfrutes usar.
Da estilo a la barra de desplazamiento
Una barra de desplazamiento por defecto puede chocar con un tema oscuro cuidadosamente ajustado. Los navegadores modernos te dan dos maneras de reestilizarla. Usa ambas para una cobertura completa.
html {
scrollbar-width: thin;
scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #1f232a;
}
::-webkit-scrollbar-thumb {
background: #4b5263;
border-radius: 8px;
border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
background: #5c6370;
}Las propiedades scrollbar-width y scrollbar-color cubren Firefox; los pseudoelementos ::-webkit-scrollbar cubren Chrome, Edge y Opera. Incluir ambas significa que tu regla se ve bien en todos los navegadores compatibles con JustZix.
Un verdadero modo de alto contraste
Para usuarios con baja visión, o simplemente para leer en una sala luminosa, el contraste puro ayuda. Esta receta fuerza fondos casi negros, texto casi blanco y un acento marcado.
html, body {
background: #000 !important;
color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
color: #fff !important;
}
a, a:visited {
color: #ffe066 !important;
text-decoration: underline !important;
}
button, .btn {
background: #ffe066 !important;
color: #000 !important;
border: 2px solid #fff !important;
}El amarillo sobre negro es una de las combinaciones de mayor contraste disponibles y es un estándar de accesibilidad de larga data. Subrayar los enlaces garantiza que sean distinguibles sin depender del color.
Aumenta el contraste sin recolorear
Si te gusta la paleta del sitio pero se siente deslavada, sube el contraste con un filtro en lugar de repintar todo.
html {
filter: contrast(1.15) brightness(0.97);
}Esto es una sola línea y es reversible — desactiva la regla de JustZix y la página vuelve a la normalidad. Mantén los valores suaves; cualquier cosa por encima de 1,3 empieza a aplastar el detalle.
Modos de escala de grises y color reducido
El color puede distraer. Una regla de escala de grises lo elimina por completo, lo que es estupendo para concentrarse o para revisar la maquetación sin sesgo de color.
html {
filter: grayscale(1);
}¿Prefieres mantener las imágenes en color pero atenuar la interfaz? Aplica escala de grises a todo y luego restaura los medios.
html {
filter: grayscale(0.85);
}
img, video, picture, canvas {
filter: grayscale(0);
}Respeta las preferencias de movimiento
Un tema de accesibilidad completo también calma la animación. Esta regla elimina el movimiento que distrae para cualquiera que haya pedido a su sistema reducirlo.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}Juntándolo todo
- Empareja siempre las propiedades de barra de desplazamiento de Webkit y Firefox para que la regla sea multinavegador.
- El contraste y la escala de grises basados en filtros son de una sola línea y totalmente reversibles — ideales para alternar rápido.
- Para una accesibilidad seria, repinta con colores reales en lugar de filtros; subraya los enlaces.
- Guarda cada modo como su propia regla de JustZix y activa la que encaje en cada momento.
Esto se empareja de forma natural con un modo oscuro universal y ajustes de lectura cómoda. Encuentra más recetas listas para usar en nuestros ejemplos listos para usar, o descarga JustZix y empieza a tematizar la web a tu manera.
Valora este artículo
Sin valoraciones — sé el primero.