CSS 变量

🚧 仍在开发中。

品牌色

/* Default Rspress brand colors */
:root {
  --rp-c-brand: #0095ff;
  --rp-c-brand-light: #33adff;
  --rp-c-brand-lighter: #c6e0fd;
  --rp-c-brand-dark: #0077ff;
  --rp-c-brand-darker: #005fcc;
  --rp-c-brand-tint: rgba(127, 163, 255, 0.16);
}

代码块 - Shiki 主题

/* Light Mode */
:where(html:not(.rp-dark)) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --shiki-token-constant: #1976d2;
  --shiki-token-string: #31a94d;
  --shiki-token-comment: rgb(182, 180, 180);
  --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;

  /* diff language */
  --shiki-token-deleted: #d32828;
  --shiki-token-inserted: #22863a;
}

/* Dark Mode */
:where(html.rp-dark) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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: #bbbbbb;
  --shiki-token-link: #f9a76d;

  /* diff language */
  --shiki-token-deleted: #ee6d7a;
  --shiki-token-inserted: #36c47f;
}

代码块 - 外层标题和容器

/* Light Mode */
html:not(.rp-dark) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #f8f8f9;

  --rp-code-block-color: rgb(46, 52, 64);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid #e5e6eb;
}

/* Dark Mode */
html.rp-dark {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #191919;

  --rp-code-block-color: rgb(229, 231, 235);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid #242424;
}

foo.ts

console.log('This is a code block');

代码块 - Shiki 主题

/* Light Mode */
:where(html:not(.rp-dark)) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --shiki-token-constant: #1976d2;
  --shiki-token-string: #31a94d;
  --shiki-token-comment: rgb(182, 180, 180);
  --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;

  /* diff language */
  --shiki-token-deleted: #d32828;
  --shiki-token-inserted: #22863a;
}

/* Dark Mode */
:where(html.rp-dark) {
  --shiki-foreground: inherit; /* Priority higher than var(--rp-code-block-color); */
  --shiki-background: transparent; /* Priority higher than var(--rp-code-block-bg); */

  --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: #bbbbbb;
  --shiki-token-link: #f9a76d;

  /* diff language */
  --shiki-token-deleted: #ee6d7a;
  --shiki-token-inserted: #36c47f;
}

代码块 - 外层标题和容器

/* Light Mode */
html:not(.rp-dark) {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #f8f8f9;

  --rp-code-block-color: rgb(46, 52, 64);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid #e5e6eb;
}

/* Dark Mode */
html.rp-dark {
  --rp-code-font-size: 0.875rem;
  --rp-code-title-bg: #191919;

  --rp-code-block-color: rgb(229, 231, 235);
  --rp-code-block-bg: var(--rp-c-bg);

  --rp-code-block-border: 1px solid #242424;
}

foo.ts

console.log('This is a code block');

#CSS 变量

#品牌色

#代码块 - Shiki 主题

#代码块 - 外层标题和容器

#CSS 变量

#品牌色

#代码块 - Shiki 主题

#代码块 - 外层标题和容器

CSS 变量

品牌色

代码块 - Shiki 主题

代码块 - 外层标题和容器

CSS 变量

品牌色

代码块 - Shiki 主题

代码块 - 外层标题和容器