Zum Inhalt springen
Starlight

CSS & Styling

Du kannst deine Starlight-Website mit benutzerdefinierten CSS-Dateien gestalten oder das Starlight Tailwind-Plugin verwenden.

Benutzerdefinierte CSS-Styles (Stile)

Passe die Styles deiner Starlight-Seite an, indem du zusätzliche CSS-Dateien bereitstellst, um die Standard-Styles von Starlight zu verändern oder zu erweitern.

  1. Füge eine CSS-Datei zu deinem src/-Verzeichnis hinzu. Du kannst zum Beispiel eine größere Standard-Spaltenbreite und eine größere Textgröße für den Seitentitel festlegen:

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

  2. Füge den Pfad zu deiner CSS-Datei in Starlights customCss- Array in astro.config.mjs ein:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Dokumentation mit benutzerdefiniertem CSS',
          customCss: [
            // Relativer Pfad zu deiner benutzerdefinierten CSS-Datei
            './src/styles/custom.css',
          ],
        }),
      ],
    });

Du kannst dir alle CSS-Eigenschaften, die von Starlight verwendet werden und die du einstellen kannst, um deine Seite anzupassen, in der Datei props.css auf GitHub ansehen.

Tailwind CSS

Tailwind CSS-Unterstützung in Astro-Projekten wird durch die Astro Tailwind-Integration bereitgestellt. Starlight bietet ein komplementäres Tailwind-Plugin, um Tailwind für die Kompatibilität mit den Styles von Starlight zu konfigurieren.

Das Starlight Tailwind-Plugin wendet die folgende Konfiguration an:

  • Konfiguriert Tailwinds dark:-Varianten so, dass sie mit Starlights Dark Mode funktionieren.
  • Verwendet Tailwind Themenfarben und Schriftarten in Starlights UI.
  • Deaktiviert Tailwinds Preflight Zurücksetzungs-Style, während selektiv wesentliche Teile von Preflight wiederhergestellt werden, die für die border-Klassen von Tailwind benötigt werden.

Erstelle ein neues Projekt mit Tailwind

Starte ein neues Starlight-Projekt mit Tailwind CSS vorkonfiguriert, indem du create astro verwendest:

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

Tailwind zu einem bestehenden Projekt hinzufügen

Wenn du bereits eine Starlight-Website hast und Tailwind CSS hinzufügen möchtest, folge dieser Anleitung.

  1. Füge die Tailwind-Integration von Astro hinzu:

    Terminal-Fenster
    npx astro add tailwind

  2. Installiere das Starlight Tailwind-Plugin:

    Terminal-Fenster
    npm install @astrojs/starlight-tailwind

  3. Erstelle eine CSS-Datei für die grundlegenden Styles von Tailwind, zum Beispiel unter src/tailwind.css:

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

  4. Aktualisiere deine Astro-Konfigurationsdatei, um deine Tailwind-Styles zu verwenden und deaktiviere die Standard-Styles:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Dokumentation mit Tailwind',
          customCss: [
            // Pfad zu deinen grundlegenden Tailwind-Styles
            './src/tailwind.css',
          ],
        }),
        tailwind({
          // Deaktiviere die grundlegenden Styles
          applyBaseStyles: false,
        }),
      ],
    });

  5. Füge das Starlight Tailwind-Plugin zu tailwind.config.mjs hinzu:

    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()],
    };

Starlight mit Tailwind designen

Starlight verwendet Werte aus deiner Tailwind-Theme-Konfiguration in der Benutzeroberfläche.

Falls gesetzt, überschreiben die folgenden Optionen die Standard-Styles von Starlight:

  • colors.accent - wird für Links und die Hervorhebung des aktuellen Elements verwendet
  • colors.gray - wird für Hintergrundfarben und Rahmen verwendet
  • fontFamily.sans - wird für UI und Inhaltstext verwendet
  • fontFamily.mono - wird für Code-Beispiele verwendet
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: {
        // Deine bevorzugte Akzentfarbe. Indigo entspricht am ehesten den Standardeinstellungen von Starlight.
        accent: colors.indigo,
        // Deine bevorzugte Grauskala. Zink kommt den Standardeinstellungen von Starlight am nächsten.
        grau: colors.zinc,
      },
      fontFamily: {
        // Deine bevorzugte Schriftart. Starlight verwendet standardmäßig eine Systemschriftart.
        sans: ['"Atkinson Hyperlegible"'],
        // Deine bevorzugte Code-Schriftart. Starlight verwendet standardmäßig die Systemschriftart Monospace.
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

Themes

Das Farbtheme von Starlight kann gesteuert werden, indem die Standardeinstellungen überschrieben werden. Diese Variablen werden in der gesamten Benutzeroberfläche verwendet, wobei eine Reihe von Grautönen für Text- und Hintergrundfarben sowie eine Akzentfarbe für Links und zur Hervorhebung aktueller Elemente in der Navigation verwendet werden.

Farbdesign-Editor

Verwende die Schieberegler unten, um die Akzent- und Graufarbpalette von Starlight zu ändern. Die dunklen und hellen Vorschaubereiche zeigen die resultierenden Farben, und die gesamte Seite wird ebenfalls aktualisiert, um deine Änderungen anzuzeigen.

Verwende die Option Kontraststufe, um festzulegen, welche der Richtlinie für die Zugänglichkeit von Webinhalten Farbkontraststandards erfüllt werden soll.

Wenn du mit deinen Änderungen zufrieden bist, kopiere den CSS- oder Tailwind-Code unten und verwende ihn in deinem Projekt.

Voreinstellungen
Kontraststufe
Akzent
Grau

Dark mode

Der Fließtext wird in einem Grauton mit hohem Kontrast zum Hintergrund dargestellt. Links sind farbig. Einige Texte, wie z. B. das Inhaltsverzeichnis, haben einen geringeren Kontrast. Inline-Code hat einen eindeutigen Hintergrund.

Light mode

Der Fließtext wird in einem Grauton mit hohem Kontrast zum Hintergrund dargestellt. Links sind farbig. Einige Texte, wie z. B. das Inhaltsverzeichnis, haben einen geringeren Kontrast. Inline-Code hat einen eindeutigen Hintergrund.

Füge das folgende CSS in deinem Projekt in eine benutzerdefinierte CSS-Datei ein, um dieses Theme auf deiner Website anzuwenden.