这是 Odyssey 主题的核心功能之一，我们让您只需通过几个顶层的 CSS 自定义属性，就能轻松地让网站的整体外观和感觉变成您自己的风格。这些自定义属性和演示主题可以在 src/styles/ 目录下的 theme.css 文件中找到。

首先，如果您不打算使用演示首页上的主题切换器，我们建议您到 src/config/ 目录下的 settings.js 文件，将 enableThemeSwitcher 设置为 false。这将从您的网站中移除主题切换器组件和相关的 JavaScript。

它应该看起来像这样：

export default {
  title: `Odyssey Astro 主题 | 面向初创公司和企业的营销网站主题`,
  description: `一个简单、干净、现代的初创公司或企业营销网站主题。`,
  ...
  enableThemeSwitcher: false,
};

:root {
	/* 主题色彩 */
	--theme-primary: hsl(0, 0%, 0%);
	--theme-primary-hover: hsl(0, 0%, 20%);
	--theme-on-primary: #fff;

	--theme-bg: #fff;
	--theme-on-bg: #000;

	--theme-surface-1: #f2f2f2;
	--theme-on-surface-1: #000;

	--theme-surface-2: #cce6d0;
	--theme-on-surface-2: #000;

	/* 主题形状 */
	/* 如果您希望所有圆角卡片、图片等都有直边，请将此值设置为 0 */
	--theme-shape-radius: clamp(1rem, 2rem, 3rem);
	--theme-button-border-radius: 3rem;

	/* 主题过渡效果 */
	--theme-transition: 0.2s ease-in-out;

	/* 主题布局 */
	--section-margin: 3rem;
	--theme-grid-gap: 1rem;
	--container-max-width: 1440px;
	--container-max-width-narrow: 960px;
	--container-padding: 0 1rem;

	--theme-blog-post-header-width: 1200px;

	/* 主题字体 */
	--theme-font-family-serif: 'Roboto Serif', Georgia, Cambria, 'Times New Roman',
		Times, serif;
	--theme-font-family-sans: 'Lato', -apple-system, BlinkMacSystemFont,
		sans-serif;
}

色彩

以下是颜色属性的简要说明：

- `--theme-primary` - 主题的主色调。这将是按钮背景使用的颜色。
- `--theme-primary-hover` - 当鼠标悬停时，您希望主色调变成的颜色。
- `--theme-on-primary` - 叠加在主色调之上的文本颜色。
- `--theme-bg` - 网站的背景颜色
- `--theme-on-bg` - 默认的正文文本颜色
- `--theme-surface-1` - 用于在背景之上叠加卡片的颜色。可以将其视为全局强调色或次要背景色。
- `--theme-on-surface-1` - 在 surface-1 颜色之上使用的文本颜色
- `--theme-surface-2` - 类似于 surface-1 颜色，但使用频率较低。可以更富创意地使用这个表面色，使其在页面上脱颖而出。
- `--theme-on-surface-2` - 在 surface-2 颜色之上使用的文本颜色

形状

您会注意到 Odyssey 主题有很多圆角，但仔细观察，当启用”深色”主题时，所有边角都是直边。这是因为全局的 --theme-shape-radius 属性。它将决定卡片和图片等元素的形状。

过渡效果

有时您希望动画效果保持一致，尤其是在悬停效果上。这时您可以使用 --theme-transition 属性。

布局

- `--section-margin` - 区块之间的默认上下边距
- `--theme-grid-gap` - 卡片、图片等网格布局中项目之间的默认间距
- `--container-max-width` - 内容的默认容器最大宽度
- `--container-max-width-narrow` - 内容的窄版容器最大宽度
- `--container-padding` - 容器的默认内边距（间距）

自定义字体

  1. 将您自己的字体添加到 /public/assets/fonts 目录

  2. 更新 src/styles/typography.css 文件中的 @font-face 规则

  3. 使用 --theme-font-family-serif 和 --theme-font-family-sans 自定义属性更新您的字体栈。