Salta ai contenuti
Starlight

CSS e stile

Puoi modellare il tuo sito Starlight con file CSS personalizzati o utilizzare il plug-in Starlight Tailwind.

Stili CSS personalizzati

Personalizza gli stili applicati al tuo sito Starlight fornendo file CSS aggiuntivi per modificare o estendere gli stili predefiniti di Starlight.

  1. Aggiungi un file CSS alla tua directory src/. Ad esempio, potresti impostare una larghezza predefinita della colonna più ampia e una dimensione del testo più grande per i titoli delle pagine:

    /* src/styles/custom.css */
:root {
	--sl-content-width: 50rem;
	--sl-text-5xl: 3.5rem;
}

  2. Aggiungi il percorso del tuo file CSS all’array customCss di Starlight in astro.config.mjs:

    // astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
	integrations: [
		starlight({
			title: 'Docs With Custom CSS',
			customCss: [
				// Percorso relativo al tuo file CSS personalizzato
				'./src/styles/custom.css',
			],
		}),
	],
});

Puoi vedere tutte le proprietà personalizzate CSS utilizzate da Starlight che puoi impostare per personalizzare il tuo sito nel file props.css su GitHub.

CSS Tailwind

Il supporto CSS Tailwind nei progetti Astro è fornito dall’integrazione Astro Tailwind. Starlight fornisce un plug-in Tailwind complementare per aiutare a configurare Tailwind per la compatibilità con gli stili di Starlight.

Il plugin Starlight Tailwind applica la seguente configurazione:

  • Configura le varianti dark: di Tailwind per funzionare con la modalità dark di Starlight.
  • Utilizza Tailwind colori e caratteri del tema nell’interfaccia utente di Starlight.
  • Disabilita gli stili di ripristino Preflight di Tailwind ripristinando selettivamente le parti essenziali di Preflight richieste per le classi di utilità sui bordi di Tailwind.

Crea un nuovo progetto con Tailwind

Avvia un nuovo progetto Starlight con Tailwind CSS preconfigurato utilizzando create astro:

npm create astro@latest -- --template starlight/tailwind

Aggiungi Tailwind a un progetto esistente

Se hai già un sito Starlight e desideri aggiungere Tailwind CSS, segui questi passaggi.

  1. Aggiungi l’integrazione Tailwind di Astro:

    npx astro add tailwind

  2. Installa il plugin Starlight Tailwind:

    npm install @astrojs/starlight-tailwind

  3. Crea un file CSS per gli stili di base di Tailwind, ad esempio in src/tailwind.css:

    /* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

  4. Aggiorna il file di configurazione Astro per utilizzare gli stili di base Tailwind e disabilitare gli stili di base predefiniti:

    // astro.config.mjs
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
	integrations: [
		starlight({
			title: 'Docs with Tailwind',
			customCss: [
				// Percorso per gli stili di base di Tailwind
				'./src/tailwind.css',
			],
		}),
		tailwind({
			// Disattiva gli stili di base predefiniti
			applyBaseStyles: false,
		}),
	],
});

  5. Aggiungi il plugin Starlight Tailwind a tailwind.config.cjs:

    // tailwind.config.cjs
const starlightPlugin = require('@astrojs/starlight-tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	plugins: [starlightPlugin()],
};

Styling di Starlight con Tailwind

Starlight utilizzerà i valori della configurazione del tema Tailwind nella sua interfaccia utente.

Se impostate, le seguenti opzioni sovrascriveranno gli stili predefiniti di Starlight:

  • colors.accent — utilizzato per i collegamenti e per l’evidenziazione dell’elemento corrente
  • colors.gray: utilizzato per i colori e i bordi dello sfondo
  • fontFamily.sans: utilizzato per l’interfaccia utente e il testo del contenuto
  • fontFamily.mono — utilizzato per esempi di codice
// tailwind.config.cjs
const starlightPlugin = require('@astrojs/starlight-tailwind');
const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {
			colors: {
				// Il tuo colore preferito. Indigo è il più vicino alle impostazioni predefinite di Starlight.
				accent: colors.indigo,
				// La tua scala di grigi preferita. Lo zinco è il più vicino ai valori predefiniti di Starlight.
				gray: colors.zinc,
			},
			fontFamily: {
				sans: ['"Atkinson Hyperlegible"'],
				// Il tuo carattere di testo preferito. Starlight utilizza uno stack di caratteri di sistema per impostazione predefinita.
				sans: ['"Atkinson Hyperlegible"'],
				// Il tuo carattere di codice preferito. Starlight utilizza i caratteri di sistema a spaziatura fissa per impostazione predefinita.
				mono: ['"IBM Plex Mono"'],
			},
		},
	},
	plugins: [starlightPlugin()],
};

Temi

Il tema colore di Starlight può essere controllato sovrascrivendo le sue proprietà personalizzate predefinite. Queste variabili vengono utilizzate in tutta l’interfaccia utente con una gamma di sfumature di grigio utilizzate per i colori del testo e dello sfondo e un colore in risalto utilizzato per i collegamenti e per evidenziare gli elementi correnti nella navigazione.

Editor di temi colore

Utilizza i dispositivi di scorrimento qui sotto per modificare l’accento di Starlight e le tavolozze dei colori grigi. Le aree di anteprima scure e chiare mostreranno i colori risultanti e anche l’intera pagina verrà aggiornata per visualizzare in anteprima le modifiche.

Quando sei soddisfatto delle modifiche, copia il codice CSS o Tailwind di seguito e utilizzalo nel tuo progetto.

Preimpostazioni
Accento
Grigio

Modalità scura

Il corpo del testo viene visualizzato in tonalità grigia con un contrasto elevato con lo sfondo. I collegamenti sono colorati. Alcuni testi, come il sommario, hanno un contrasto inferiore. Il codice in linea ha uno sfondo distinto.

Modalità chiara

Il corpo del testo viene visualizzato in tonalità grigia con un contrasto elevato con lo sfondo. I collegamenti sono colorati. Alcuni testi, come il sommario, hanno un contrasto inferiore. Il codice in linea ha uno sfondo distinto.

Aggiungi il seguente CSS al tuo progetto in un file custom CSS per applicare questo tema al tuo sito.