CSS variables

🚧 Still under development

Brand colors

/* 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);
}

Codeblock - shiki theme

/* 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;
}

Codeblock - outer title and container

/* 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');

Codeblock - shiki theme

/* 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;
}

Codeblock - outer title and container

/* 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 variables

#Brand colors

#Codeblock - shiki theme

#Codeblock - outer title and container

#CSS variables

#Brand colors

#Codeblock - shiki theme

#Codeblock - outer title and container

CSS variables

Brand colors

Codeblock - shiki theme

Codeblock - outer title and container

CSS variables

Brand colors

Codeblock - shiki theme

Codeblock - outer title and container