close

    CSS-переменные

    Rspress предоставляет часто используемые CSS-переменные. Переопределение переменных проще и удобнее в поддержке, чем замена встроенных React-компонентов. См. раздел CSS-переменные, чтобы узнать, как переопределять эти стили.

    Совет

    Вы можете использовать функцию «Copy Markdown» на этой странице, чтобы ваш AI-агент помог вам изменить CSS-переменные.

    Ниже перечислены некоторые CSS-переменные, предоставляемые Rspress, и их значения по умолчанию:

    Основные брендовые цвета

    :where(:root) {
  --rp-c-brand: #0095ff;
  --rp-c-brand-light: #33adff;
  --rp-c-brand-lighter: #c6e0fd;
  --rp-c-brand-dark: #07f;
  --rp-c-brand-darker: #005fcc;
  --rp-c-brand-tint: #7fa3ff29;
}

    Блок кода - тема Shiki

    :where(html:not(.rp-dark)) {
  --shiki-foreground: inherit;
  --shiki-background: transparent;
  --shiki-token-constant: #1976d2;
  --shiki-token-string: #31a94d;
  --shiki-token-comment: #b6b4b4;
  --shiki-token-keyword: #cf2727;
  --shiki-token-parameter: #f59403;
  --shiki-token-function: #7041c8;
  --shiki-token-string-expression: #218438;
  --shiki-token-punctuation: #242323;
  --shiki-token-link: #22863a;
  --shiki-token-deleted: #d32828;
  --shiki-token-inserted: #22863a;
}

:where(html.rp-dark) {
  --shiki-foreground: inherit;
  --shiki-background: transparent;
  --shiki-token-constant: #6fb0fa;
  --shiki-token-string: #f9a86e;
  --shiki-token-comment: #6a727b;
  --shiki-token-keyword: #f47481;
  --shiki-token-parameter: #ff9800;
  --shiki-token-function: #ae8eeb;
  --shiki-token-string-expression: #4fb74d;
  --shiki-token-punctuation: #bbb;
  --shiki-token-link: #f9a76d;
  --shiki-token-deleted: #ee6d7a;
  --shiki-token-inserted: #36c47f;
}

    Блок кода - внешний заголовок и контейнер

    :where(html:not(.rp-dark)) {
  --rp-code-font-size: .875rem;
  --rp-code-title-bg: #f8f8f9;
  --rp-code-block-color: #2e3440;
  --rp-code-block-bg: var(--rp-c-bg);
  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}

:where(html.rp-dark) {
  --rp-code-font-size: .875rem;
  --rp-code-title-bg: #191919;
  --rp-code-block-color: #e5e7eb;
  --rp-code-block-bg: var(--rp-c-bg);
  --rp-code-block-border: 1px solid var(--rp-c-divider-light);
  --rp-code-block-shadow: none;
}
    foo.ts
    console.log('Это блок кода');

    Домашняя страница по умолчанию

    :where(html:not(.rp-dark)) {
  --rp-home-hero-secondary-color: #a673ff;
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(90deg, var(--rp-c-brand-dark) 0%, var(--rp-c-brand-dark) 30%, var(--rp-home-hero-secondary-color) 100%);
  --rp-home-background-bg: radial-gradient(42.12% 56.13% at 100% 0%, #537dff1a 0%, #fff0 100%), radial-gradient(42.01% 79.63% at 52.86% 0%, #537dff33 0%, #fff0 100%), radial-gradient(79.67% 58.09% at 0% 0%, #7e69ff33 0%, #fff0 100%), #fff;
  --rp-home-feature-bg: linear-gradient(135deg, #fff, #f9f9f980);
}

:where(html.rp-dark) {
  --rp-home-hero-secondary-color: #a673ff;
  --rp-home-hero-title-color: transparent;
  --rp-home-hero-title-bg: linear-gradient(90deg, var(--rp-c-brand-dark) 0%, var(--rp-c-brand-dark) 30%, var(--rp-home-hero-secondary-color) 100%);
  --rp-home-background-bg: radial-gradient(42.12% 56.13% at 100% 0%, #0c1d48 0%, #12121200 100%), radial-gradient(55.81% 87.78% at 48.37% 0%, #000 0%, #12121200 89.55%), radial-gradient(122.65% 88.24% at 0% 0%, #34268a 0%, #12121200 100%), #121212;
  --rp-home-feature-bg: linear-gradient(135deg, #fff0, #ffffff08);
}

    Базовые переменные

    :where(html:not(.rp-dark)) {
  --rp-c-bg: #fff;
  --rp-c-bg-soft: #f8f8f9;
  --rp-c-bg-mute: #f1f1f1;
  --rp-c-bg-alt: #fff;
  --rp-c-divider: #00000040;
  --rp-c-divider-light: #0000001f;
  --rp-c-text-0: #000;
  --rp-c-text-1: #242424;
  --rp-c-text-2: #000000b3;
  --rp-c-text-3: #3c3c3c54;
  --rp-c-text-4: #3c3c3c2e;
  --rp-c-text-code: #476582;
  --rp-c-text-code-bg: #99a1b314;
  --rp-c-text-code-border: #0000000d;
  --rp-c-link: var(--rp-c-brand-dark);
}

:where(html.rp-dark) {
  --rp-c-bg: #121212;
  --rp-c-bg-soft: #292e37;
  --rp-c-bg-mute: #343a46;
  --rp-c-bg-alt: #000;
  --rp-c-divider: #545454a6;
  --rp-c-divider-light: #5454547a;
  --rp-c-text-0: #fff;
  --rp-c-text-1: #fffff5ed;
  --rp-c-text-2: #fffff5a6;
  --rp-c-text-3: #ebebeb61;
  --rp-c-text-4: #ebebeb2e;
  --rp-c-text-code: #c9def1;
  --rp-c-text-code-bg: #ffffff14;
  --rp-c-text-code-border: #ffffff0d;
  --rp-c-link: var(--rp-c-brand-light);
}

:where(:root) {
  --rp-c-gray: #8e8e8e;
  --rp-c-gray-light-1: #aeaeae;
  --rp-c-gray-light-2: #c7c7c7;
  --rp-c-gray-light-3: #d1d1d1;
  --rp-c-gray-light-4: #e5e5e5;
  --rp-c-gray-light-5: #f2f2f2;
  --rp-shadow-1: 0 1px 2px #00000005, 0 1px 0 #0000000f;
  --rp-shadow-2: 0 3px 12px #0000000f, 0 1px 4px #00000012;
  --rp-shadow-3: 0 12px 32px #0000001a, 0 2px 6px #00000014;
  --rp-shadow-4: 0 14px 44px #0000001f, 0 3px 9px #0000001f;
  --rp-shadow-5: 0 18px 56px #00000029, 0 4px 12px #00000029;
  --rp-radius: 1rem;
  --rp-radius-small: .5rem;
  --rp-radius-large: 1.5rem;
}