97 lines
2.2 KiB
Markdown
97 lines
2.2 KiB
Markdown
---
|
|
title: Custom Styles
|
|
icon: icon-park-outline:theme
|
|
createTime: 2025/10/08 20:18:52
|
|
permalink: /en/guide/custom-style/
|
|
---
|
|
|
|
## Theme Customization
|
|
|
|
Custom styles are supported.
|
|
|
|
Although the theme uses [SASS](https://sass-lang.com/) as the CSS preprocessor,
|
|
all colors are defined using `CSS Variables`. Therefore, you can create a CSS file or SCSS file to override them.
|
|
|
|
First, create a `styles/index.css` file in the `.vuepress` directory. Then, import this file in the [client configuration file](https://v2.vuepress.vuejs.org/guide/configuration.html#client-config-file).
|
|
|
|
:::code-tabs
|
|
|
|
@tab .vuepress/client.ts
|
|
|
|
```ts
|
|
import { defineClientConfig } from 'vuepress/client'
|
|
|
|
import './styles/index.css' // [!code ++]
|
|
|
|
export default defineClientConfig({
|
|
// ...
|
|
})
|
|
```
|
|
|
|
@tab .vuepress/styles/index.css
|
|
|
|
```css
|
|
:root {
|
|
--vp-c-brand-1: #5086a1;
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
## Style File
|
|
|
|
Create a file such as `custom.css` in the `.vuepress` directory.
|
|
|
|
Add additional styles or override default styles here:
|
|
|
|
```scss
|
|
:root {
|
|
scroll-behavior: smooth;
|
|
}
|
|
```
|
|
|
|
You can also use it to override the predefined CSS variables of the default theme.
|
|
|
|
Below are some predefined variables. For the complete list, please refer to [vars.css](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/theme/src/client/styles/vars.css).
|
|
|
|
```scss
|
|
:root {
|
|
/** Theme Colors */
|
|
--vp-c-brand-1: #5086a1;
|
|
--vp-c-brand-2: #6aa1b7;
|
|
--vp-c-brand-3: #8cccd5;
|
|
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
|
|
|
|
/** Background Colors */
|
|
--vp-c-bg: #ffffff;
|
|
--vp-c-bg-alt: #f6f6f7;
|
|
--vp-c-bg-elv: #ffffff;
|
|
--vp-c-bg-soft: #f6f6f7;
|
|
|
|
/** Text Colors */
|
|
--vp-c-text-1: rgba(60, 60, 67);
|
|
--vp-c-text-2: rgba(60, 60, 67, 0.78);
|
|
--vp-c-text-3: rgba(60, 60, 67, 0.56);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--vp-c-brand-1: #8cccd5;
|
|
--vp-c-brand-2: #6aa1b7;
|
|
--vp-c-brand-3: #5086a1;
|
|
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
|
|
|
|
--vp-c-bg: #1b1b1f;
|
|
--vp-c-bg-alt: #161618;
|
|
--vp-c-bg-elv: #202127;
|
|
--vp-c-bg-soft: #202127;
|
|
|
|
--vp-c-text-1: rgba(255, 255, 245, 0.86);
|
|
--vp-c-text-2: rgba(235, 235, 245, 0.6);
|
|
--vp-c-text-3: rgba(235, 235, 245, 0.38);
|
|
}
|
|
```
|
|
|
|
::: tip
|
|
The theme provides a [Theme Color Tool](../../../tools/custom-theme.md) that you can use to create custom colors.
|
|
:::
|