初始化项目

docs/.vitepress/theme/index.ts

@@ -0,0 +1,9 @@
+import BlogTheme from '@sugarat/theme'
+
+// 自定义样式重载
+// import './style.scss'
+
+// 自定义主题色
+// import './user-theme.css'
+
+export default BlogTheme

docs/.vitepress/theme/style.scss

@@ -0,0 +1,13 @@
+.VPHome {
+  // 定义遮罩样式
+  background: radial-gradient(ellipse,
+      rgba(var(--bg-gradient-home), 1) 0%,
+      rgba(var(--bg-gradient-home), 0) 150%);
+
+  // 自定义首页背景图
+  &::before {
+    // 图片来源：https://zhuanlan.zhihu.com/p/54060187
+    background-image: url(./assets/bg.webp);
+    background-size: cover;
+  }
+}

docs/.vitepress/theme/user-theme.css

@@ -0,0 +1,26 @@
+/* 所有变量：https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* 自定义主题色示例，如下 */
+
+/* 浅色模式使用的变量 */
+html[theme] {
+  --vp-c-user-1:red;
+  --vp-c-user-2:blue;
+  --vp-c-user-3:green;
+  --vp-c-user-soft:rgba(255,0,0,.5);
+}
+
+/* 深色模式使用的变量 */
+html[theme].dark {
+  --vp-c-user-1:yellow;
+  --vp-c-user-2:purple;
+  --vp-c-user-3:orange;
+  --vp-c-user-soft:rgba(255,255,0,.5);
+}
+
+/* 覆盖默认变量 */
+html[theme],html[theme].dark {
+  --vp-c-brand-1: var(--vp-c-user-1);
+  --vp-c-brand-2: var(--vp-c-user-2);
+  --vp-c-brand-3: var(--vp-c-user-3);
+  --vp-c-brand-soft: var(--vp-c-user-soft);
+}