Lewati ke konten
Starlight

CSS dan Styling

Anda dapat menggunakan custom CSS atau menggunakan plugin Tailwind Starlight untuk styling website Starlight Anda.

Custom CSS styles

Sesuaikan style yang diterapkan pada website Starlight Anda dengan memberikan file CSS tambahan untuk memodifikasi atau menambahkan style ke style default dari Starlight.

  1. Tambakan file CSS ke direktori src/ Anda. Sebagai contoh, Anda dapat mengatur lebar kolom default yang lebih lebar dan ukuran teks yang lebih besar untuk judul halaman:

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

  2. Tambahkan path file CSS Anda ke dalam array customCss pada config Starlight di astro.config.mjs.

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

export default defineConfig({
	integrations: [
		starlight({
			title: 'Website Dokumentasi Dengan Custom CSS',
			customCss: [
				// Path relative ke custom CSS file Anda
				'./src/styles/custom.css',
			],
		}),
	],
});

Anda dapat melihat semua properti custom CSS yang dapat Anda atur yang digunakan oleh Starlight untuk menyesuaikan website dokumentasi Anda di dalam file props.css di GitHub.

Tailwind CSS

Dukungan Tailwind CSS dalam proyek-proyek Astro disediakan oleh integrasi Astro Tailwind. Starlight menyediakan plugin Tailwind tambahan untuk membantu mengonfigurasi Tailwind agar kompatibel dengan styles dari Starlight.

Plugin Tailwind Starlight menerapkan konfigurasi berikut:

  • Mengonfigurasi varian dark: Tailwind agar cocok dengan mode gelap Starlight.
  • Menggunakan tema warna dan font Tailwind pada UI dari Starlight.
  • Menonaktifkan reset Preflight Tailwind namun secara selektif mengembalikan bagian-bagian penting dari Preflight yang diperlukan untuk border utility classes Tailwind.

Membuat proyek baru dengan Tailwind

Mulai proyek Starlight baru dengan konfigurasi awal Tailwind CSS menggunakan create astro:

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

Menambahkan Tailwind ke dalam proyek yang sudah ada

Jika Anda sudah memiliki website Starlight dan ingin menambahkan Tailwind CSS, ikuti langkah-langkah berikut.

  1. Tambahkan Integrasi Tailwind Astro

    npx astro add tailwind

  2. Instal plugin Tailwind Starlight

    npm install @astrojs/starlight-tailwind

  3. Buat file CSS untuk base styles Tailwind, misalnya di src/tailwind.css:

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

  4. Perbarui file konfigurasi Astro Anda untuk menggunakan base styles Tailwind dan nonaktifkan base styles bawaan:

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

export default defineConfig({
	integrations: [
		starlight({
			title: 'Website Dokumentasi dengan Tailwind',
			customCss: [
				// Path ke Tailwind base styles Anda:
				'./src/tailwind.css',
			],
		}),
		tailwind({
			// Nonaktifkan base styles bawaan
			applyBaseStyles: false,
		}),
	],
});

  5. Tambahkan plugin Tailwind Starlight ke 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 Starlight dengan Tailwind

Starlight akan menggunakan nilai-nilai dari konfigurasi tema Tailwind Anda di dalam UI-nya.

Jika diatur, opsi berikut akan menggantikan style bawaan Starlight:

  • colors.accent — digunakan untuk tautan dan menandakan item yang sedang aktif
  • colors.gray — digunakan untuk warna latar belakang dan border
  • fontFamily.sans — digunakan untuk UI dan konten teks
  • fontFamily.mono — digunakan untuk contoh kode
// 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: {
				// Warna aksen pilihan Anda. Indigo paling mendekati bawaan Starlight.
				accent: colors.indigo,
				// Skala abu-abu pilihan Anda. Zinc paling mendekati bawaan Starlight.
				gray: colors.zinc,
			},
			fontFamily: {
				// Font teks pilihan Anda. Starlight menggunakan kumpulan font sistem secara default.
				sans: ['"Atkinson Hyperlegible"'],
				// Font kode pilihan Anda. Starlight menggunakan font monospace sistem secara default.
				mono: ['"IBM Plex Mono"'],
			},
		},
	},
	plugins: [starlightPlugin()],
};

Tema

Tema warna Starlight dapat dikontrol dengan mengganti custom properti bawaannya. Variabel-variabel ini digunakan di seluruh UI dengan berbagai nuansa abu-abu yang digunakan untuk warna teks dan latar belakang, dan satu warna aksen yang digunakan untuk tautan serta menyoroti item-item yand sedang aktif di bagian navigasi.

Editor Tema Warna

Gunakan slider di bawah ini untuk mengubah palet warna aksen dan abu-abu Starlight. Preview gelap dan terang akan menampilkan warna-warna hasilnya, dan seluruh halaman juga akan diperbarui untuk menyesuaikan dengan perubahan yang Anda lakukan.

Saat Anda puas dengan perubahan Anda, salin CSS atau kode Tailwind di bawah ini dan gunakan di proyek Anda.

Preset
Aksen
Abu-abu

Mode Gelap

Teks body ditampilkan dalam nuansa abu-abu yang berkontras tinggi dengan latar belakang. Tautan berwarna. Beberapa teks, seperti daftar isi, memiliki kontras yang lebih rendah. Kode inline memiliki latar belakang yang berbeda.

Mode terang

Teks body ditampilkan dalam nuansa abu-abu yang berkontras tinggi dengan latar belakang. Tautan berwarna. Beberapa teks, seperti daftar isi, memiliki kontras yang lebih rendah. Kode inline memiliki latar belakang yang berbeda.

Tambahkan CSS berikut ke proyek Anda dalam file CSS custom untuk menerapkan tema ini ke website Anda.