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 con CSS personalizzato',
          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.

Tailwind CSS

Il supporto Tailwind CSS 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:

Terminal window
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:

    Terminal window
    npx astro add tailwind

  2. Installa il plugin Starlight Tailwind:

    Terminal window
    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 con 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.mjs
    import starlightPlugin from '@astrojs/starlight-tailwind';
    

    /** @type {import('tailwindcss').Config} */
    export default {
      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.mjs
import starlightPlugin from '@astrojs/starlight-tailwind';
import colors from 'tailwindcss/colors';


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        // Il tuo colore accent preferito. Indigo è il più vicino ai valori predefiniti di Starlight.
        accent: colors.indigo,
        // La tua scala di grigi preferita. Zinc è la più vicina ai valori predefiniti di Starlight.
        gray: colors.zinc,
      },
      fontFamily: {
        // Il tuo font di testo preferito. Starlight utilizza di default una pila di font di sistema.
        sans: ['"Atkinson Hyperlegible"'],
        // Il tuo font di codice preferito. Starlight utilizza di default font monospace di sistema.
        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
WCAG Contrast Level
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.