@modern-js/doc-tools-doc/docs/zh/guide/basic/global-styles.mdx

Website for @modern-js/doc-tools

# 自定义全局样式

某些场景下，你可能需要在主题 UI 的基础上添加一些全局样式，框架提供了一个配置项 `globalStyles` 来实现这个功能。

## 使用方法

在 `modern.config.ts` 中添加以下配置：

```ts title="modern.config.ts"
import { docTools, defineConfig } from '@modern-js/doc-tools';
import path from 'path';

export default defineConfig({
  doc: {
    globalStyles: path.join(__dirname, 'styles/index.css'),
  },
  plugins: [docTools()],
});
```

然后可以添加以下代码：

```css
/* styles/index.css */
:root {
  --modern-c-brand: #f00;
}
```

这样框架会自动搜集所有的全局样式并合并到最终的样式文件中。

下面列举一些常用的全局样式：

```css
/* styles/index.css */

:root {
  /* 修改主题色 */
  --modern-c-brand: #f00;
  --modern-c-brand-dark: #ffa500;
  --modern-c-brand-darker: #c26c1d;
  --modern-c-brand-light: #f2a65a;
  --modern-c-brand-lighter: #f2a65a;
  /* 修改左侧侧边栏宽度 */
  --modern-sidebar-width: 280px;
  /* 修改右侧大纲栏宽度 */
  --modern-aside-width: 256px;
  /* 修改代码块标题背景 */
  --modern-code-title-bg: rgba(250, 192, 61, 0.15);
  /* 修改代码块内容背景 */
  --modern-code-block-bg: rgba(214, 188, 70, 0.05);
}
```

> 如果想了解更多内部的全局样式，可以查看[vars.css](https://github.com/web-infra-dev/modern.js/blob/main/packages/cli/doc-core/src/theme-default/styles/vars.css)。