CSS & стилизация
Вы можете стилизовать ваш сайт Starlight с помощью CSS-файлов или использовать плагин Starlight Tailwind.
Ваши CSS стили
Настройте стили, для вашего сайта Starlight, указав дополнительные CSS-файлы для изменения или расширения стандартных стилей Starlight.
-
Добавьте CSS-файл в ваш каталог
src/
. Например, вы можете установить большую ширину колонки по умолчанию и бóльший размер текста для заголовков страниц: -
Добавьте путь к вашему CSS-файлу в массив
customCss
Starlight вastro.config.mjs
:
Вы можете увидеть все кастомные свойства CSS, используемые Starlight, которые вы можете установить для настройки вашего сайта,
в файле props.css
на GitHub.
Tailwind CSS
Поддержка Tailwind CSS в проектах Astro предоставляется интеграцией Astro Tailwind. Starlight предоставляет дополнительный плагин Tailwind для совместимости со стилями Starlight.
Плагин Tailwind для Starlight применяет следующую конфигурацию:
- Настраивает
dark:
варианты Tailwind для работы с темным режимом Starlight. - Использует цвета и шрифты темы Tailwind в пользовательском интерфейсе Starlight.
- Отключает стили сброса Preflight Tailwind, восстанавливая выборочно существенные части Preflight, необходимых для утилитных border классов Tailwind.
Создание нового проекта с Tailwind
Создайте новый проект Starlight с предварительно настроенным Tailwind CSS, используя create astro
:
Добавление Tailwind в существующий проект
Если у вас уже есть сайт на Starlight и вы хотите добавить Tailwind CSS, следуйте этим шагам.
-
Добавьте интеграцию Tailwind от Astro:
-
Установите плагин Tailwind для Starlight:
-
Создайте CSS-файл для базовых стилей Tailwind, например, в
src/tailwind.css
: -
Обновите ваш конфигурационный файл Astro, чтобы использовать ваши базовые стили Tailwind и отключить базовые стили по умолчанию:
-
Добавьте плагин Starlight Tailwind в
tailwind.config.cjs
:
Стилизация 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 включает
сгенерированные палитры цветов accent
и gray
для использования в объекте
конфигурации 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()],
};