Vitepress默认主题拓展设置#
https://vitepress.dev/guide/extending-default-theme
1/**
2 * Colors: Solid
3 * -------------------------------------------------------------------------- */
4
5:root {
6 --vp-c-white: #ffffff;
7 --vp-c-black: #000000;
8
9 --vp-c-neutral: var(--vp-c-black);
10 --vp-c-neutral-inverse: var(--vp-c-white);
11}
12
13.dark {
14 --vp-c-neutral: var(--vp-c-white);
15 --vp-c-neutral-inverse: var(--vp-c-black);
16}
17
18/**
19 * Colors: Palette
20 *
21 * The primitive colors used for accent colors. These colors are referenced
22 * by functional colors such as "Text", "Background", or "Brand".
23 *
24 * Each colors have exact same color scale system with 3 levels of solid
25 * colors with different brightness, and 1 soft color.
26 *
27 * - `XXX-1`: The most solid color used mainly for colored text. It must
28 * satisfy the contrast ratio against when used on top of `XXX-soft`.
29 *
30 * - `XXX-2`: The color used mainly for hover state of the button.
31 *
32 * - `XXX-3`: The color for solid background, such as bg color of the button.
33 * It must satisfy the contrast ratio with pure white (#ffffff) text on
34 * top of it.
35 *
36 * - `XXX-soft`: The color used for subtle background such as custom container
37 * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
38 * on top of it.
39 *
40 * The soft color must be semi transparent alpha channel. This is crucial
41 * because it allows adding multiple "soft" colors on top of each other
42 * to create a accent, such as when having inline code block inside
43 * custom containers.
44 * -------------------------------------------------------------------------- */
45
46:root {
47 --vp-c-gray-1: #dddde3;
48 --vp-c-gray-2: #e4e4e9;
49 --vp-c-gray-3: #ebebef;
50 --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
51
52 --vp-c-indigo-1: #3451b2;
53 --vp-c-indigo-2: #3a5ccc;
54 --vp-c-indigo-3: #5672cd;
55 --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
56
57 --vp-c-green-1: #18794e;
58 --vp-c-green-2: #299764;
59 --vp-c-green-3: #30a46c;
60 --vp-c-green-soft: rgba(16, 185, 129, 0.14);
61
62 --vp-c-yellow-1: #915930;
63 --vp-c-yellow-2: #946300;
64 --vp-c-yellow-3: #9f6a00;
65 --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
66
67 --vp-c-red-1: #b8272c;
68 --vp-c-red-2: #d5393e;
69 --vp-c-red-3: #e0575b;
70 --vp-c-red-soft: rgba(244, 63, 94, 0.14);
71
72 --vp-c-sponsor: #db2777;
73}
74
75.dark {
76 --vp-c-gray-1: #515c67;
77 --vp-c-gray-2: #414853;
78 --vp-c-gray-3: #32363f;
79 --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
80
81 --vp-c-indigo-1: #a8b1ff;
82 --vp-c-indigo-2: #5c73e7;
83 --vp-c-indigo-3: #3e63dd;
84 --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
85
86 --vp-c-green-1: #3dd68c;
87 --vp-c-green-2: #30a46c;
88 --vp-c-green-3: #298459;
89 --vp-c-green-soft: rgba(16, 185, 129, 0.16);
90
91 --vp-c-yellow-1: #f9b44e;
92 --vp-c-yellow-2: #da8b17;
93 --vp-c-yellow-3: #a46a0a;
94 --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
95
96 --vp-c-red-1: #f66f81;
97 --vp-c-red-2: #f14158;
98 --vp-c-red-3: #b62a3c;
99 --vp-c-red-soft: rgba(244, 63, 94, 0.16);
100}
101
102/**
103 * Colors: Background
104 *
105 * - `bg`: The bg color used for main screen.
106 *
107 * - `bg-alt`: The alternative bg color used in places such as "sidebar",
108 * or "code block".
109 *
110 * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
111 * such as "dialog".
112 *
113 * - `bg-soft`: The bg color to slightly ditinguish some components from
114 * the page. Used for things like "carbon ads" or "table".
115 * -------------------------------------------------------------------------- */
116
117:root {
118 --vp-c-bg: #ffffff;
119 --vp-c-bg-alt: #f6f6f7;
120 --vp-c-bg-elv: #ffffff;
121 --vp-c-bg-soft: #f6f6f7;
122}
123
124.dark {
125 --vp-c-bg: #1b1b1f;
126 --vp-c-bg-alt: #161618;
127 --vp-c-bg-elv: #202127;
128 --vp-c-bg-soft: #202127;
129}
130
131/**
132 * Colors: Borders
133 *
134 * - `divider`: This is used for separators. This is used to divide sections
135 * within the same components, such as having separator on "h2" heading.
136 *
137 * - `border`: This is designed for borders on interactive components.
138 * For example this should be used for a button outline.
139 *
140 * - `gutter`: This is used to divide components in the page. For example
141 * the header and the lest of the page.
142 * -------------------------------------------------------------------------- */
143
144:root {
145 --vp-c-border: #c2c2c4;
146 --vp-c-divider: #e2e2e3;
147 --vp-c-gutter: #e2e2e3;
148}
149
150.dark {
151 --vp-c-border: #3c3f44;
152 --vp-c-divider: #2e2e32;
153 --vp-c-gutter: #000000;
154}
155
156/**
157 * Colors: Text
158 *
159 * - `text-1`: Used for primary text.
160 *
161 * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
162 *
163 * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
164 * -------------------------------------------------------------------------- */
165
166:root {
167 --vp-c-text-1: rgba(60, 60, 67);
168 --vp-c-text-2: rgba(60, 60, 67, 0.78);
169 --vp-c-text-3: rgba(60, 60, 67, 0.56);
170}
171
172.dark {
173 --vp-c-text-1: rgba(255, 255, 245, 0.86);
174 --vp-c-text-2: rgba(235, 235, 245, 0.6);
175 --vp-c-text-3: rgba(235, 235, 245, 0.38);
176}
177
178/**
179 * Colors: Function
180 *
181 * - `default`: The color used purely for subtle indication without any
182 * special meanings attched to it such as bg color for menu hover state.
183 *
184 * - `brand`: Used for primary brand colors, such as link text, button with
185 * brand theme, etc.
186 *
187 * - `tip`: Used to indicate useful information. The default theme uses the
188 * brand color for this by default.
189 *
190 * - `warning`: Used to indicate warning to the users. Used in custom
191 * container, badges, etc.
192 *
193 * - `danger`: Used to show error, or dangerous message to the users. Used
194 * in custom container, badges, etc.
195 *
196 * To understand the scaling system, refer to "Colors: Palette" section.
197 * -------------------------------------------------------------------------- */
198
199:root {
200 --vp-c-default-1: var(--vp-c-gray-1);
201 --vp-c-default-2: var(--vp-c-gray-2);
202 --vp-c-default-3: var(--vp-c-gray-3);
203 --vp-c-default-soft: var(--vp-c-gray-soft);
204
205 --vp-c-brand-1: var(--vp-c-indigo-1);
206 --vp-c-brand-2: var(--vp-c-indigo-2);
207 --vp-c-brand-3: var(--vp-c-indigo-3);
208 --vp-c-brand-soft: var(--vp-c-indigo-soft);
209
210 /* DEPRECATED: Use `--vp-c-brand-1` instead. */
211 --vp-c-brand: var(--vp-c-brand-1);
212
213 --vp-c-tip-1: var(--vp-c-brand-1);
214 --vp-c-tip-2: var(--vp-c-brand-2);
215 --vp-c-tip-3: var(--vp-c-brand-3);
216 --vp-c-tip-soft: var(--vp-c-brand-soft);
217
218 --vp-c-warning-1: var(--vp-c-yellow-1);
219 --vp-c-warning-2: var(--vp-c-yellow-2);
220 --vp-c-warning-3: var(--vp-c-yellow-3);
221 --vp-c-warning-soft: var(--vp-c-yellow-soft);
222
223 --vp-c-danger-1: var(--vp-c-red-1);
224 --vp-c-danger-2: var(--vp-c-red-2);
225 --vp-c-danger-3: var(--vp-c-red-3);
226 --vp-c-danger-soft: var(--vp-c-red-soft);
227}
228
229/**
230 * Typography
231 * -------------------------------------------------------------------------- */
232
233:root {
234 --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
235 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
236 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
237 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
238 --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
239 Consolas, 'Liberation Mono', 'Courier New', monospace;
240}
241
242/**
243 * Shadows
244 * -------------------------------------------------------------------------- */
245
246:root {
247 --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
248 --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
249 --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
250 --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
251 --vp-shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
252}
253
254/**
255 * Z-indexes
256 * -------------------------------------------------------------------------- */
257
258:root {
259 --vp-z-index-local-nav: 10;
260 --vp-z-index-nav: 20;
261 --vp-z-index-layout-top: 30;
262 --vp-z-index-backdrop: 40;
263 --vp-z-index-sidebar: 50;
264 --vp-z-index-footer: 60;
265}
266
267/**
268 * Icons
269 * -------------------------------------------------------------------------- */
270
271:root {
272 --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
273 --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
274}
275
276/**
277 * Layouts
278 * -------------------------------------------------------------------------- */
279
280:root {
281 --vp-layout-max-width: 1440px;
282}
283
284/**
285 * Component: Header Anchor
286 * -------------------------------------------------------------------------- */
287
288:root {
289 --vp-header-anchor-symbol: '#';
290}
291
292/**
293 * Component: Code
294 * -------------------------------------------------------------------------- */
295
296:root {
297 --vp-code-line-height: 1.7;
298 --vp-code-font-size: 0.875em;
299 --vp-code-color: var(--vp-c-brand-1);
300 --vp-code-link-color: var(--vp-c-brand-1);
301 --vp-code-link-hover-color: var(--vp-c-brand-2);
302 --vp-code-bg: var(--vp-c-default-soft);
303
304 --vp-code-block-color: var(--vp-c-text-2);
305 --vp-code-block-bg: var(--vp-c-bg-alt);
306 --vp-code-block-divider-color: var(--vp-c-gutter);
307
308 --vp-code-lang-color: var(--vp-c-text-3);
309
310 --vp-code-line-highlight-color: var(--vp-c-default-soft);
311 --vp-code-line-number-color: var(--vp-c-text-3);
312
313 --vp-code-line-diff-add-color: var(--vp-c-green-soft);
314 --vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
315
316 --vp-code-line-diff-remove-color: var(--vp-c-red-soft);
317 --vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
318
319 --vp-code-line-warning-color: var(--vp-c-yellow-soft);
320 --vp-code-line-error-color: var(--vp-c-red-soft);
321
322 --vp-code-copy-code-border-color: var(--vp-c-divider);
323 --vp-code-copy-code-bg: var(--vp-c-bg-soft);
324 --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
325 --vp-code-copy-code-hover-bg: var(--vp-c-bg);
326 --vp-code-copy-code-active-text: var(--vp-c-text-2);
327 --vp-code-copy-copied-text-content: 'Copied';
328
329 --vp-code-tab-divider: var(--vp-code-block-divider-color);
330 --vp-code-tab-text-color: var(--vp-c-text-2);
331 --vp-code-tab-bg: var(--vp-code-block-bg);
332 --vp-code-tab-hover-text-color: var(--vp-c-text-1);
333 --vp-code-tab-active-text-color: var(--vp-c-text-1);
334 --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
335}
336
337/**
338 * Component: Button
339 * -------------------------------------------------------------------------- */
340
341:root {
342 --vp-button-brand-border: transparent;
343 --vp-button-brand-text: var(--vp-c-white);
344 --vp-button-brand-bg: var(--vp-c-brand-3);
345 --vp-button-brand-hover-border: transparent;
346 --vp-button-brand-hover-text: var(--vp-c-white);
347 --vp-button-brand-hover-bg: var(--vp-c-brand-2);
348 --vp-button-brand-active-border: transparent;
349 --vp-button-brand-active-text: var(--vp-c-white);
350 --vp-button-brand-active-bg: var(--vp-c-brand-1);
351
352 --vp-button-alt-border: transparent;
353 --vp-button-alt-text: var(--vp-c-text-1);
354 --vp-button-alt-bg: var(--vp-c-default-3);
355 --vp-button-alt-hover-border: transparent;
356 --vp-button-alt-hover-text: var(--vp-c-text-1);
357 --vp-button-alt-hover-bg: var(--vp-c-default-2);
358 --vp-button-alt-active-border: transparent;
359 --vp-button-alt-active-text: var(--vp-c-text-1);
360 --vp-button-alt-active-bg: var(--vp-c-default-1);
361
362 --vp-button-sponsor-border: var(--vp-c-text-2);
363 --vp-button-sponsor-text: var(--vp-c-text-2);
364 --vp-button-sponsor-bg: transparent;
365 --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
366 --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
367 --vp-button-sponsor-hover-bg: transparent;
368 --vp-button-sponsor-active-border: var(--vp-c-sponsor);
369 --vp-button-sponsor-active-text: var(--vp-c-sponsor);
370 --vp-button-sponsor-active-bg: transparent;
371}
372
373/**
374 * Component: Custom Block
375 * -------------------------------------------------------------------------- */
376
377:root {
378 --vp-custom-block-font-size: 14px;
379 --vp-custom-block-code-font-size: 13px;
380
381 --vp-custom-block-info-border: transparent;
382 --vp-custom-block-info-text: var(--vp-c-text-1);
383 --vp-custom-block-info-bg: var(--vp-c-default-soft);
384 --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
385
386 --vp-custom-block-tip-border: transparent;
387 --vp-custom-block-tip-text: var(--vp-c-text-1);
388 --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
389 --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
390
391 --vp-custom-block-warning-border: transparent;
392 --vp-custom-block-warning-text: var(--vp-c-text-1);
393 --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
394 --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
395
396 --vp-custom-block-danger-border: transparent;
397 --vp-custom-block-danger-text: var(--vp-c-text-1);
398 --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
399 --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
400
401 --vp-custom-block-details-border: var(--vp-custom-block-info-border);
402 --vp-custom-block-details-text: var(--vp-custom-block-info-text);
403 --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
404 --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
405}
406
407/**
408 * Component: Input
409 * -------------------------------------------------------------------------- */
410
411:root {
412 --vp-input-border-color: var(--vp-c-border);
413 --vp-input-bg-color: var(--vp-c-bg-alt);
414
415 --vp-input-switch-bg-color: var(--vp-c-gray-soft);
416}
417
418/**
419 * Component: Nav
420 * -------------------------------------------------------------------------- */
421
422:root {
423 --vp-nav-height: 64px;
424 --vp-nav-bg-color: var(--vp-c-bg);
425 --vp-nav-screen-bg-color: var(--vp-c-bg);
426 --vp-nav-logo-height: 24px;
427}
428
429/**
430 * Component: Local Nav
431 * -------------------------------------------------------------------------- */
432
433:root {
434 --vp-local-nav-bg-color: var(--vp-c-bg);
435}
436
437/**
438 * Component: Sidebar
439 * -------------------------------------------------------------------------- */
440
441:root {
442 --vp-sidebar-width: 272px;
443 --vp-sidebar-bg-color: var(--vp-c-bg-alt);
444}
445
446/**
447 * Colors Backdrop
448 * -------------------------------------------------------------------------- */
449
450:root {
451 --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
452}
453
454/**
455 * Component: Home
456 * -------------------------------------------------------------------------- */
457
458:root {
459 --vp-home-hero-name-color: var(--vp-c-brand-1);
460 --vp-home-hero-name-background: transparent;
461
462 --vp-home-hero-image-background-image: none;
463 --vp-home-hero-image-filter: none;
464}
465
466/**
467 * Component: Badge
468 * -------------------------------------------------------------------------- */
469
470:root {
471 --vp-badge-info-border: transparent;
472 --vp-badge-info-text: var(--vp-c-text-2);
473 --vp-badge-info-bg: var(--vp-c-default-soft);
474
475 --vp-badge-tip-border: transparent;
476 --vp-badge-tip-text: var(--vp-c-brand-1);
477 --vp-badge-tip-bg: var(--vp-c-brand-soft);
478
479 --vp-badge-warning-border: transparent;
480 --vp-badge-warning-text: var(--vp-c-warning-1);
481 --vp-badge-warning-bg: var(--vp-c-warning-soft);
482
483 --vp-badge-danger-border: transparent;
484 --vp-badge-danger-text: var(--vp-c-danger-1);
485 --vp-badge-danger-bg: var(--vp-c-danger-soft);
486}
487
488/**
489 * Component: Carbon Ads
490 * -------------------------------------------------------------------------- */
491
492:root {
493 --vp-carbon-ads-text-color: var(--vp-c-text-1);
494 --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
495 --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
496 --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
497 --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
498}
499
500/**
501 * Component: Local Search
502 * -------------------------------------------------------------------------- */
503
504:root {
505 --vp-local-search-bg: var(--vp-c-bg);
506 --vp-local-search-result-bg: var(--vp-c-bg);
507 --vp-local-search-result-border: var(--vp-c-divider);
508 --vp-local-search-result-selected-bg: var(--vp-c-bg);
509 --vp-local-search-result-selected-border: var(--vp-c-brand-1);
510 --vp-local-search-highlight-bg: var(--vp-c-green-1);
511 --vp-local-search-highlight-text: var(--vp-c-black);
512}