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.
-
Tambakan sebuah 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: -
Tambahkan path file CSS Anda ke dalam array
customCss
pada config Starlight diastro.config.mjs
.
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
:
Menambahkan Tailwind ke dalam proyek yang sudah ada
Jika Anda sudah memiliki website Starlight dan ingin menambahkan Tailwind CSS, ikuti langkah-langkah berikut.
-
Tambahkan Integrasi Tailwind Astro
-
Instal plugin Tailwind Starlight
-
Buat file CSS untuk base styles Tailwind, misalnya di
src/tailwind.css
: -
Perbarui file konfigurasi Astro Anda untuk menggunakan base styles Tailwind dan nonaktifkan base styles bawaan:
-
Tambahkan plugin Tailwind Starlight ke
tailwind.config.mjs
:
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 aktifcolors.gray
— digunakan untuk warna latar belakang dan borderfontFamily.sans
— digunakan untuk UI dan konten teksfontFamily.mono
— digunakan untuk contoh kode
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.
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.
/* 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;
}
Contoh file konfigurasi Tailwind di
bawah ini menyertakan palet warna accent
dan gray
yang dihasilkan untuk
digunakan di objek konfigurasi theme.extend.colors
.
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()],
};