CSSとスタイリング
カスタムCSSファイルやStarlightのTailwindプラグインを使用して、Starlightサイトをスタイリングできます。
カスタムCSSスタイル
Starlightサイトに適用されるスタイルをカスタマイズするには、追加のCSSファイルを作成し、Starlightのデフォルトスタイルを変更または拡張します。
-
src/
ディレクトリにCSSファイルを追加します。たとえば、以下ではデフォルトのカラム幅を広げ、ページタイトルのテキストサイズを大きくしています。 -
astro.config.mjs
で、StarlightのcustomCss
配列にCSSファイルへのパスを追加します。
GitHub上のprops.css
ファイルで、サイトをカスタマイズするために設定可能な、Starlightが使用しているすべてのカスタムCSSプロパティを確認できます。
Tailwind CSS
AstroプロジェクトでのTailwind CSSのサポートは、AstroのTailwindインテグレーションによって提供されています。また、Starlightは、Starlightのスタイルとの互換性を保ちつつTailwindを設定するのに役立つ、補完的なTailwindプラグインを提供しています。
StarlightのTailwindプラグインは、以下の設定を適用します。
- Tailwindの
dark:
バリアントをStarlightのダークモードと連携するように設定します。 - UStarlightのUIでTailwindのテーマカラーとフォントを使用します。
- TailwindのPreflightリセットスタイルを無効化した上で、Tailwindのボーダーユーティリティクラスに必要なPreflightの必須部分のみ有効化します。
Tailwindを使用して新しいプロジェクトを作成する
create astro
を使用して、Tailwind CSSが組み込まれた新しいStarlightプロジェクトを開始します。
Tailwindを既存のプロジェクトに追加する
既存のStarlightサイトにTailwind CSSを追加する場合は、以下の手順に従ってください。
-
AstroのTailwindインテグレーションを追加します。
-
StarlightのTailwindプラグインをインストールします。
-
Tailwindのベーススタイル用のCSSファイルを、
src/tailwind.css
などの場所に作成します。 -
上で作成したTailwindのベーススタイルを使用し、またデフォルトのベーススタイルを無効とするように、Astroの設定ファイルを更新します。
-
StarlightのTailwindプラグインを
tailwind.config.mjs
に追加します。
StarlightをTailwindでスタイリングする
Starlightは、Tailwindのテーマの設定値をUIで使用します。
以下のオプションが設定されている場合、Starlightのデフォルトスタイルが上書きされます。
colors.accent
— リンクと現在のアイテムのハイライトに使用されますcolors.gray
— バックグラウンドカラーとボーダーに使用されますfontFamily.sans
— UIとコンテンツのテキストに使用されますfontFamily.mono
— コード例に使用されます
テーマの設定
Starlightのカラーテーマは、デフォルトのカスタムプロパティを上書きしてコントロールできます。これらの変数はUI全体で使用されます。テキストと背景色にはグレーシェードが使用され、リンクとナビゲーションの現在のアイテムをハイライトするためにはアクセントカラーが使用されます。
テーマカラーエディタ
以下のスライダーを使用して、Starlightのアクセントカラーとグレーカラーのパレットを変更してみましょう。ダークとライトのプレビューエリアには、結果となる色の組み合わせが表示されます。また、このページ自体も合わせて更新されるため、変更内容をプレビューできます。
変更内容に満足できたら、以下のCSSまたはTailwindコードをコピーしてプロジェクトで使用します。
ダークモード
本文は背景とのコントラストが高いグレーシェードで表示されます。 リンクは色付けされます。 目次などの一部のテキストは、コントラストが低くなります。 インラインコードは独自の背景色をもちます。
ライトモード
本文は背景とのコントラストが高いグレーシェードで表示されます。 リンクは色付けされます。 目次などの一部のテキストは、コントラストが低くなります。 インラインコードは独自の背景色をもちます。
以下のCSSをカスタムCSSファイルに追加して、このテーマをサイトに適用します。
/* Dark mode colors. */
:root {
--sl-color-accent-low: #131e4f;
--sl-color-accent: #3447ff;
--sl-color-accent-high: #b3c7ff;
--sl-color-white: #ffffff;
--sl-color-gray-1: #eceef2;
--sl-color-gray-2: #c0c2c7;
--sl-color-gray-3: #888b96;
--sl-color-gray-4: #545861;
--sl-color-gray-5: #353841;
--sl-color-gray-6: #24272f;
--sl-color-black: #17181c;
}
/* Light mode colors. */
:root[data-theme='light'] {
--sl-color-accent-low: #c7d6ff;
--sl-color-accent: #364bff;
--sl-color-accent-high: #182775;
--sl-color-white: #17181c;
--sl-color-gray-1: #24272f;
--sl-color-gray-2: #353841;
--sl-color-gray-3: #545861;
--sl-color-gray-4: #888b96;
--sl-color-gray-5: #c0c2c7;
--sl-color-gray-6: #eceef2;
--sl-color-gray-7: #f5f6f8;
--sl-color-black: #ffffff;
}
以下のTailwindの設定ファイルの例には、theme.extend.colors
の設定で使用するために生成されたaccent
とgray
のカラーパレットが含まれています。
import starlightPlugin from '@astrojs/starlight-tailwind';
// Generated color palettes
const accent = { 200: '#b3c7ff', 600: '#364bff', 900: '#182775', 950: '#131e4f' };
const gray = { 100: '#f5f6f8', 200: '#eceef2', 300: '#c0c2c7', 400: '#888b96', 500: '#545861', 700: '#353841', 800: '#24272f', 900: '#17181c' };
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: { accent, gray },
},
},
plugins: [starlightPlugin()],
};