第 N 次重构的 Sakura 主题

It's worth noting that VitePress leverages Vue's compiler to automatically detect and optimize the purely static parts of the Markdown content. Static contents are optimized into single placeholder nodes and eliminated from the page's JavaScript payload for initial visits. They are also skipped during client-side hydration. In short, you only pay for the dynamic parts on any given page.

light primary palette Ten-step color scale

1#ebf6fa

2#dfe9ed

3#d3dce0

4#b2c8d4

5#87b0c7

6#6096ba

7#467294

8#2e506e

9#1a3147

10#0c1621

light secondary palette Ten-step color scale

1#caccc0

2#bdbfb4

3#b0b3a8

4#a3a69c

5#969990

6#8b8c89

7#63665f

8#3d4038

9#181a15

10#000000

light tertiary palette Ten-step color scale

1#adb4b8

2#a1a7ab

3#80919e

4#5e7a91

5#416385

6#274c77

7#173052

8#0a172b

9#010205

10#000000

light quaternary palette Ten-step color scale

1#f0fcff

2#f0fbff

3#f0fbff

4#f0faff

5#edf7fc

6#e7ecef

7#b9c3c9

8#8e9aa3

9#66727d

10#464e57

light primary colors Semantic interaction colors

color#6096ba

colorBgTextHover#ebf6fa

colorBgTextActive#dfe9ed

controlItemText#6096ba

controlItemTextHover#467294

controlItemTextDisabledrgba(0, 0, 0, 0.45)

controlItemBgHoverrgba(0, 0, 0, 0.04)

controlItemBgActive#ebf6fa

controlItemBgActiveHover#87b0c7

controlItemBgActiveDisabledrgba(0, 0, 0, 0.15)

controlTmpOutlinergba(0, 0, 0, 0.02)

controlOutlinergba(5, 142, 192, 0.08)

light secondary colors Semantic interaction colors

color#8b8c89

colorBgTextHover#caccc0

colorBgTextActive#bdbfb4

controlItemText#8b8c89

controlItemTextHover#63665f

controlItemTextDisabledrgba(0, 0, 0, 0.45)

controlItemBgHoverrgba(0, 0, 0, 0.04)

controlItemBgActive#caccc0

controlItemBgActiveHover#969990

controlItemBgActiveDisabledrgba(0, 0, 0, 0.15)

controlTmpOutlinergba(0, 0, 0, 0.02)

controlOutlinergba(43, 51, 3, 0.25)

light tertiary colors Semantic interaction colors

color#274c77

colorBgTextHover#adb4b8

colorBgTextActive#a1a7ab

controlItemText#274c77

controlItemTextHover#173052

controlItemTextDisabledrgba(0, 0, 0, 0.45)

controlItemBgHoverrgba(0, 0, 0, 0.04)

controlItemBgActive#adb4b8

controlItemBgActiveHover#416385

controlItemBgActiveDisabledrgba(0, 0, 0, 0.15)

controlTmpOutlinergba(0, 0, 0, 0.02)

controlOutlinergba(7, 28, 40, 0.33)

light quaternary colors Semantic interaction colors

color#e7ecef

colorBgTextHover#f0fcff

colorBgTextActive#f0fbff

controlItemText#e7ecef

controlItemTextHover#b9c3c9

controlItemTextDisabledrgba(0, 0, 0, 0.45)

controlItemBgHoverrgba(0, 0, 0, 0.04)

controlItemBgActive#f0fcff

controlItemBgActiveHover#edf7fc

controlItemBgActiveDisabledrgba(0, 0, 0, 0.15)

controlTmpOutlinergba(0, 0, 0, 0.02)

controlOutlinergba(5, 205, 255, 0.06)

light success Functional color scale

1#f6ffed

2#d9f7be

3#b7eb8f

4#95de64

5#73d13d

6#52c41a

7#389e0d

8#73d13d

9#52c41a

10#389e0d

light info Functional color scale

1#e6f4ff

2#bae0ff

3#91caff

4#69b1ff

5#4096ff

6#1677ff

7#0958d9

8#4096ff

9#1677ff

10#0958d9

light warning Functional color scale

1#fffbe6

2#fff1b8

3#ffe58f

4#ffd666

5#ffc53d

6#faad14

7#d48806

8#ffc53d

9#faad14

10#d48806

light error Functional color scale

1#fff2f0

2#fff1f0

3#ffccc7

4#ffa39e

5#ff7875

6#ff4d4f

7#d9363e

8#ff7875

9#ff4d4f

10#d9363e

light success colors Functional semantic colors

colorBg#f6ffed

colorBgHover#d9f7be

colorBgFilledHover#d7f5be

colorBgActive#b7eb8f

colorBorder#b7eb8f

colorBorderHover#95de64

colorHover#95de64

color#52c41a

colorActive#389e0d

colorTextHover#73d13d

colorText#52c41a

colorTextActive#389e0d

light info colors Functional semantic colors

colorBg#e6f4ff

colorBgHover#bae0ff

colorBgFilledHover#bcdfff

colorBgActive#91caff

colorBorder#91caff

colorBorderHover#69b1ff

colorHover#69b1ff

color#1677ff

colorActive#0958d9

colorTextHover#4096ff

colorText#1677ff

colorTextActive#0958d9

light warning colors Functional semantic colors

colorBg#fffbe6

colorBgHover#fff1b8

colorBgFilledHover#fff0bb

colorBgActive#ffe58f

colorBorder#ffe58f

colorBorderHover#ffd666

colorHover#ffd666

color#faad14

colorActive#d48806

colorTextHover#ffc53d

colorText#faad14

colorTextActive#d48806

light error colors Functional semantic colors

colorBg#fff2f0

colorBgHover#fff1f0

colorBgFilledHover#ffdfdc

colorBgActive#ffccc7

colorBorder#ffccc7

colorBorderHover#ffa39e

colorHover#ffa39e

color#ff4d4f

colorActive#d9363e

colorTextHover#ff7875

colorText#ff4d4f

colorTextActive#d9363e

light neutral Neutral semantic colors

colorBgBase#fff

colorTextBase#000

colorShadow#000

colorTextrgba(0, 0, 0, 0.88)

colorTextSecondaryrgba(0, 0, 0, 0.65)

colorTextTertiaryrgba(0, 0, 0, 0.45)

colorTextQuaternaryrgba(0, 0, 0, 0.25)

colorTextLightSolid#fff

colorFillrgba(0, 0, 0, 0.15)

colorFillSecondaryrgba(0, 0, 0, 0.06)

colorFillTertiaryrgba(0, 0, 0, 0.04)

colorFillQuaternaryrgba(0, 0, 0, 0.02)

colorBgSolidrgba(0, 0, 0, 1)

colorBgSolidHoverrgba(0, 0, 0, 0.75)

colorBgSolidActivergba(0, 0, 0, 0.95)

colorBgLayout#f5f5f5

colorBgContainer#ffffff

colorBgElevated#ffffff

colorBgSpotlightrgba(0, 0, 0, 0.85)

colorBgBlurtransparent

colorBorder#d9d9d9

colorBorderDisabled#d9d9d9

colorBorderSecondary#f0f0f0

dark primary palette Ten-step color scale

1#181d22

2#212c34

3#2b3b46

4#364f5f

5#456980

6#5583a1

7#7ca0b5

8#aabfca

9#cdd6da

10#dbe5e9

dark secondary palette Ten-step color scale

1#1a1b19

2#282927

3#383837

4#4a4a49

5#616260

6#797a77

7#898c84

8#9c9f95

9#abaea4

10#babcb1

dark tertiary palette Ten-step color scale

1#131417

2#151b24

3#1a2532

4#1d2d41

5#203854

6#244468

7#3d5b7a

8#5a758b

9#7d8d9a

10#9ea4a8

dark quaternary palette Ten-step color scale

1#262829

2#3d4041

3#535556

4#737577

5#9da0a2

6#c7ccce

7#d7e0e5

8#e5eff3

9#e9f4f8

10#ecf6fa

dark primary colors Semantic interaction colors

color#5583a1

colorBgTextHover#181d22

colorBgTextActive#212c34

controlItemText#5583a1

controlItemTextHover#456980

controlItemTextDisabledrgba(255, 255, 255, 0.45)

controlItemBgHoverrgba(255, 255, 255, 0.08)

controlItemBgActive#181d22

controlItemBgActiveHover#7ca0b5

controlItemBgActiveDisabledrgba(255, 255, 255, 0.18)

controlTmpOutlinergba(255, 255, 255, 0.04)

controlOutlinergba(87, 170, 253, 0.06)

dark secondary colors Semantic interaction colors

color#797a77

colorBgTextHover#1a1b19

colorBgTextActive#282927

controlItemText#797a77

controlItemTextHover#616260

controlItemTextDisabledrgba(255, 255, 255, 0.45)

controlItemBgHoverrgba(255, 255, 255, 0.08)

controlItemBgActive#1a1b19

controlItemBgActiveHover#898c84

controlItemBgActiveDisabledrgba(255, 255, 255, 0.18)

controlTmpOutlinergba(255, 255, 255, 0.04)

controlOutlinergba(220, 253, 187, 0.03)

dark tertiary colors Semantic interaction colors

color#244468

colorBgTextHover#131417

colorBgTextActive#151b24

controlItemText#244468

controlItemTextHover#203854

controlItemTextDisabledrgba(255, 255, 255, 0.45)

controlItemBgHoverrgba(255, 255, 255, 0.08)

controlItemBgActive#131417

controlItemBgActiveHover#3d5b7a

controlItemBgActiveDisabledrgba(255, 255, 255, 0.18)

controlTmpOutlinergba(255, 255, 255, 0.04)

controlOutlinergba(0, 20, 80, 0.05)

dark quaternary colors Semantic interaction colors

color#c7ccce

colorBgTextHover#262829

colorBgTextActive#3d4041

controlItemText#c7ccce

controlItemTextHover#9da0a2

controlItemTextDisabledrgba(255, 255, 255, 0.45)

controlItemBgHoverrgba(255, 255, 255, 0.08)

controlItemBgActive#262829

controlItemBgActiveHover#d7e0e5

controlItemBgActiveDisabledrgba(255, 255, 255, 0.18)

controlTmpOutlinergba(255, 255, 255, 0.04)

controlOutlinergba(220, 242, 253, 0.09)

dark success Functional color scale

1#162312

2#1d3712

3#274916

4#306317

5#6abe39

6#49aa19

7#3c8618

8#6abe39

9#49aa19

10#3c8618

dark info Functional color scale

1#111a2c

2#112545

3#15325b

4#15417e

5#3c89e8

6#1668dc

7#1554ad

8#3c89e8

9#1668dc

10#1554ad

dark warning Functional color scale

1#2b2111

2#443111

3#594214

4#7c5914

5#e8b339

6#d89614

7#aa7714

8#e8b339

9#d89614

10#aa7714

dark error Functional color scale

1#2c1618

2#451d1f

3#5b2526

4#7e2e2f

5#e86e6b

6#dc4446

7#ad393a

8#e86e6b

9#dc4446

10#ad393a

dark success colors Functional semantic colors

colorBg#162312

colorBgHover#1d3712

colorBgFilledHover#1f3614

colorBgActive#274916

colorBorder#274916

colorBorderHover#306317

colorHover#306317

color#49aa19

colorActive#3c8618

colorTextHover#6abe39

colorText#49aa19

colorTextActive#3c8618

dark info colors Functional semantic colors

colorBg#111a2c

colorBgHover#112545

colorBgFilledHover#132644

colorBgActive#15325b

colorBorder#15325b

colorBorderHover#15417e

colorHover#15417e

color#1668dc

colorActive#1554ad

colorTextHover#3c89e8

colorText#1668dc

colorTextActive#1554ad

dark warning colors Functional semantic colors

colorBg#2b2111

colorBgHover#443111

colorBgFilledHover#423213

colorBgActive#594214

colorBorder#594214

colorBorderHover#7c5914

colorHover#7c5914

color#d89614

colorActive#aa7714

colorTextHover#e8b339

colorText#d89614

colorTextActive#aa7714

dark error colors Functional semantic colors

colorBg#2c1618

colorBgHover#451d1f

colorBgFilledHover#441e1f

colorBgActive#5b2526

colorBorder#5b2526

colorBorderHover#7e2e2f

colorHover#7e2e2f

color#dc4446

colorActive#ad393a

colorTextHover#e86e6b

colorText#dc4446

colorTextActive#ad393a

dark neutral Neutral semantic colors

colorBgBase#000

colorTextBase#fff

colorShadowrgba(255, 255, 255, 0.2)

colorTextrgba(255, 255, 255, 0.85)

colorTextSecondaryrgba(255, 255, 255, 0.65)

colorTextTertiaryrgba(255, 255, 255, 0.45)

colorTextQuaternaryrgba(255, 255, 255, 0.25)

colorTextLightSolid#fff

colorFillrgba(255, 255, 255, 0.18)

colorFillSecondaryrgba(255, 255, 255, 0.12)

colorFillTertiaryrgba(255, 255, 255, 0.08)

colorFillQuaternaryrgba(255, 255, 255, 0.04)

colorBgSolidrgba(255, 255, 255, 0.95)

colorBgSolidHoverrgba(255, 255, 255, 1)

colorBgSolidActivergba(255, 255, 255, 0.9)

colorBgLayout#000000

colorBgContainer#141414

colorBgElevated#1f1f1f

colorBgSpotlight#424242

colorBgBlurrgba(255, 255, 255, 0.04)

colorBorder#424242

colorBorderDisabled#424242

colorBorderSecondary#303030

h2

It's worth noting that VitePress leverages Vue's compiler to automatically detect and optimize the purely static parts of the Markdown content. Static contents are optimized into single placeholder nodes and eliminated from the page's JavaScript payload for initial visits. They are also skipped during client-side hydration. In short, you only pay for the dynamic parts on any given page.