İçeriğe geç
Starlight

CSS ve Stillendirme

Starlight sitenizi özel CSS dosyaları ya da Starlight Tailwind eklentisi kullanarak stillendirebilirsiniz.

Özel CSS Stilleri

Starlight’ın varsayılan stillerini düzenlemek ya da genişletmek için ek CSS dosyaları sağlayarak özelleştirilmiş stiller uygulanır.

  1. src/ dizininize bir CSS dosyası ekleyin. Örneğin, daha geniş varsayılan sütun genişliği ve sayfa başlıkları için daha büyük yazı boyutu ayarlayabilirsiniz.

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

  2. astro.config.mjs içerisinde Starlight’ın customCss dizisine CSS dosyanızın yolunu ekleyin:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Özel CSS ile Dokümantasyon',
          customCss: [
            // özel CSS dosyanıza ait dosya yolu
            './src/styles/custom.css',
          ],
        }),
      ],
    });

Github’daki props.css dosyası üzerinde özelleştirebileceğiniz, Starlight’ın kullandığı isteğe uyarlanmış tüm CSS özelliklerini görebilirsiniz.

Tailwind CSS

Astro projelerinde Tailwind CSS desteği Astro Tailwind entegrasyonu ile sağlanır. Starlight, Starlight’ın stilleri ile uyumlu olması için Tailwind yapılandırmasına yardımcı olacak bir tamamlayıcı Tailwind eklentisi temin eder.

Starlight Tailwind eklentisi aşağıdaki yapılandırmaları uygular:

  • Tailwind’in dark:varyantını Starlight’ın koyu modu ile çalışabilmesini yapılandırır.
  • Tailwind’in tema renkler ve yazı karakterlerini Starlight’ın kullanıcı arayüzünde kullanır.
  • Tailwind’in Preflight sıfırlama stillerini Tailwind’in kenarlık yardımcı sınıfları için Prefilght’ın zorunlu istediği önemli kısımları titizlikle geri yüklerken etkisizleştirir.

Tailwind ile proje oluştur

create astro kullanarak Tailwind CSS ön-ayarlı yeni bir Starlight projesi oluştur:

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

Var olan projeye Tailwind Ekle

Halihazırda bir Starlight siteniz varsa ve Tailwind CSS eklemek istiyorsanız, aşağıdaki adımları takip edin.

  1. Astro’nun Tailwind entegrasyonunu ekleyin:

    Terminal window
    npx astro add tailwind

  2. Starlight Tailwind eklentisini yükleyin:

    Terminal window
    npm install @astrojs/starlight-tailwind

  3. Tailwind’in baz stilleri için CSS dosya oluşturun, örneğin src/tailwind.css:

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

  4. Tailwind’inizin baz stillerini kullanmak ve varsayılan baz stilleri etkisizleştirmek için Astro yapılandırma dosyasını güncelleyin:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Tailwind ile Dokümantasyon',
          customCss: [
            //Tailwind baz stilleriniz için dosya yolu:
            './src/tailwind.css',
          ],
        }),
        tailwind({
          //Varsayılan baz stilleri etkisizleştir:
          applyBaseStyles: false,
        }),
      ],
    });

  5. Starlight Tailwind eklentisini tailwind.config.mjs dosyasına ekleyin:

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

Tailwind ile Starlight’ı Stillendirme

Starlight kendi kullanıcı arayüzünde Tailwind tema yapılandırmanızdaki değerleri kullanacaktır.

Ayarlanmışsa, aşağıdaki seçenekler Starlight’ın varsayılan stillerini ezecektir:

  • colors.accent — Mevcut nesne vurgulama ve bağlantılar için kullanılır
  • colors.gray — Arkaplan rengi ve kenarlıklar için kullanılır
  • fontFamily.sans — Kullanıcı arayüzü ve içerik metni için kullanılır
  • fontFamily.mono — Kod örnekleri için kullanılır
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: {
        // Tercih ettiğiniz vurgu rengi. Indigo, Starlight'ın varsayılana en yakın olanıdır.
        accent: colors.indigo,
        // Tercig ettiğiniz gri skalası. Zinc, Starlight'ın varsayılana en yakın olanıdır.
        gray: colors.zinc,
      },
      fontFamily: {
        //Tercih ettiğiniz yazı karakteri. Starlight, sistem yazı karakterlerini varsayılan olarak kullanır.
        sans: ['"Atkinson Hyperlegible"'],
        // Tercih ettiğiniz kod yazı karakteri. Starlight sistem tek araklıklı yazı karakterlerini varsayılan olarak kullanır.
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

Temalandırma

Starlight’ın renk teması, Starlight’ın varsayılan isteğe uyarlı özelliklerinin üzerine yazılmasıyla kontrol edilebilir. Bu değişkenler, metin ve arkaplan renkleri için gri gölgeler ve bağlantılar ve gezinti sırasındaki mevcut nesneler vurgulamak için vurgu rengi kullanıcı arayüzünce kullanılır.

Renk teması editörü

Starlight’ın vurgu ve gri renk paletlerini değiştirmek için aşağıdaki kaydırıcıları kullanın. Koyu ve açık önizleme alanları renkleri gösterecek ve ayrıca tüm sayfa değişiklerinizi önizlemek için güncellenecektir.

Değişikliklerinizden memnun olduğunuzda, aşağıdaki CSS ya da Tailwind kodu kopyalayın ve projenizde kullanın.

Ön Ayarlar
WCAG Contrast Level
Vurgu
Gri

Koyu mod

Sayfa metni arkaplanla yüksek kontrastlı gri tonda görünür. Bağlantılar renklendirilmiştir. İçindekiler metni gibi bazı metinler daha düşük kontrasta sahiptir. Satır için kod belirgin arkaplana sahiptir.

Açık Mod

Sayfa metni arkaplanla yüksek kontrastlı gri tonda görünür. Bağlantılar renklendirilmiştir. İçindekiler metni gibi bazı metinler daha düşük kontrasta sahiptir. Satır için kod belirgin arkaplana sahiptir.

Bu temayı sitenize uygulamak için, isteğe uyarlanmış CSS dosyası içine aşağıdaki CSS’i dahil edin ve projenize ekleyin.