CSS y Estilos
Puedes darle estilo a tu sitio de Starlight con archivos CSS personalizados o usar el plugin Starlight Tailwind.
Estilos CSS personalizados
Personaliza los estilos aplicados a tu sitio Starlight proporcionando archivos CSS adicionales para modificar o extender los estilos predeterminados de Starlight.
-
Agrega un archivo CSS a tu directorio
src/
. Por ejemplo, podrías establecer un ancho de columna predeterminado más ancho y un tamaño de texto más grande para los títulos de las páginas: -
Agrega la ruta de tu archivo CSS al array
customCss
de Starlight enastro.config.mjs
:
Puedes ver todas las propiedades CSS personalizadas utilizadas por Starlight que puedes establecer para personalizar tu sitio en el archivo props.css
en GitHub.
Tailwind CSS
El soporte de CSS de Tailwind en proyectos de Astro es proporcionado por la integración Astro Tailwind. Starlight proporciona un plugin de Tailwind para ayudar a configurar Tailwind para que sea compatible con los estilos de Starlight.
El plugin Starlight Tailwind aplica la siguiente configuración:
- Configura las variantes de Tailwind
dark:
para que funcionen con el modo oscuro de Starlight. - Usa los colores y fuentes del tema de Tailwind en la UI de Starlight.
- Desactiva la comprobación preliminar “Preflight” de Tailwind mientras restauras selectivamente las partes esenciales de la comprobación preliminar requeridas para las clases de utilidad de borde de Tailwind.
Crea un nuevo proyecto con Tailwind
Empieza un nuevo proyecto en Starlight con Tailwind CSS preconfigurado usando create astro
:
Agrega Tailwind a un proyecto existente
Si ya tienes un sitio en Starlight y quieres agregar Tailwind CSS, sigue estos pasos.
-
Agrega la integración de Tailwind de Astro:
-
Instala el plugin Starlight Tailwind:
-
Crea un archivo CSS para los estilos base de Tailwind, por ejemplo en
src/tailwind.css
: -
Actualiza tu archivo de configuración de Astro para usar tus estilos base de Tailwind y desactivar los estilos base predeterminados:
-
Agrega el plugin Starlight Tailwind a
tailwind.config.mjs
:
Estilando Starlight con Tailwind
Starlight utilizará los valores de la configuración de tema Tailwind en su UI.
Si se establece, las siguientes opciones anularán los estilos predeterminados de Starlight:
colors.accent
- usada para enlaces y resaltado de elementos actualescolors.gray
- usada para colores de fondo y bordesfontFamily.sans
- usada para el texto de la UI y el contenidofontFamily.mono
- usada para ejemplos de código
Temas
El tema de color de Starlight se puede controlar anulando sus propiedades personalizadas predeterminadas. Estas variables son utilizadas en toda la UI con una gama de tonos grises utilizados para los colores de texto y fondo y un color de acento utilizado para los enlaces y para resaltar los elementos actuales en la navegación.
Editor de temas de color
Usa los controles deslizantes a continuación para modificar las paletas de colores de acento y gris de Starlight. Las áreas de vista previa oscura y clara mostrarán los colores resultantes, y toda la página también se actualizará para obtener una vista previa de tus cambios.
Cuando estés satisfecho con tus cambios, copia el código CSS o Tailwind a continuación y úsalo en tu proyecto.
Modo oscuro
El texto del cuerpo se muestra en un tono gris con un alto contraste con el fondo. Los enlaces están coloreados. Algunos textos, como la tabla de contenidos, tienen un contraste más bajo. El código en línea tiene un fondo distinto.
Modo claro
El texto del cuerpo se muestra en un tono gris con un alto contraste con el fondo. Los enlaces están coloreados. Algunos textos, como la tabla de contenidos, tienen un contraste más bajo. El código en línea tiene un fondo distinto.
Agrega el siguiente CSS a tu proyecto en un archivo CSS personalizado para aplicar este tema a tu sitio.
El ejemplo de archivo de configuración de
Tailwind a continuación incluye paletas
de colores accent
y gray
generadas para usar en el objeto de
configuración theme.extend.colors
.