Пропустить до содержимого
Starlight

CSS & стилизация

Вы можете стилизовать ваш сайт Starlight с помощью CSS-файлов или использовать плагин Starlight Tailwind.

Ваши CSS стили

Настройте стили, для вашего сайта Starlight, указав дополнительные CSS-файлы для изменения или расширения стандартных стилей Starlight.

  1. Добавьте CSS-файл в ваш каталог src/. Например, вы можете установить большую ширину колонки по умолчанию и бóльший размер текста для заголовков страниц:

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

  2. Добавьте путь к вашему CSS-файлу в массив customCss Starlight в astro.config.mjs:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Docs With Custom CSS',
          customCss: [
            // Относительный путь к вашему CSS файлу
            './src/styles/custom.css',
          ],
        }),
      ],
    });

Вы можете увидеть все кастомные свойства 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:

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

Добавление Tailwind в существующий проект

Если у вас уже есть сайт на Starlight и вы хотите добавить Tailwind CSS, следуйте этим шагам.

  1. Добавьте интеграцию Tailwind от Astro:

    Terminal window
    npx astro add tailwind

  2. Установите плагин Tailwind для Starlight:

    Terminal window
    npm install @astrojs/starlight-tailwind

  3. Создайте CSS-файл для базовых стилей Tailwind, например, в src/tailwind.css:

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

  4. Обновите ваш конфигурационный файл Astro, чтобы использовать ваши базовые стили Tailwind и отключить базовые стили по умолчанию:

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

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Docs with Tailwind',
          customCss: [
            // Путь к базовым стилям Tailwind:
            './src/tailwind.css',
          ],
        }),
        tailwind({
          // Отключите базовые стили:
          applyBaseStyles: false,
        }),
      ],
    });

  5. Добавьте плагин Starlight Tailwind в 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()],
    };

Стилизация Starlight с использованием Tailwind

Starlight будет использовать значения из вашей конфигурации темы Tailwind в его UI.

Если установлены, следующие параметры переопределят стили Starlight по умолчанию:

  • colors.accent — используется для ссылок и выделения текущего элемента;
  • colors.gray — используется для цветов фона и границ;
  • fontFamily.sans — используется для текста UI и контента;
  • fontFamily.mono — используется для примеров кода.
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: {
        // Ваш предпочтительный акцентный цвет. Индиго наиболее близок к стандартным настройкам Starlight.
        accent: colors.indigo,
        // Ваш предпочтительный оттенок серого. Цинк наиболее близок к стандартным настройкам Starlight.
        gray: colors.zinc,
      },
      fontFamily: {
        // Ваш предпочтительный шрифт для текста. По умолчанию Starlight использует системные шрифты.
        sans: ['"Atkinson Hyperlegible"'],
        // Ваш предпочтительный шрифт для кода. По умолчанию Starlight использует системные моноширинные шрифты.
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

Темизация

Цветовая тема 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;
}