Objective:
# 概念阐释
修改前端样式和布局。Docusaurus中的样式和布局属性都可以在这里查到并引用。
## 全局样式
### 使用infima
infima是为open source meta做的一种前端样式框架。
## CSS modules
## CSS-in-JS
## Sass/SCSS
# 实例
修改网站主题颜色,[[CSS自定义属性变量]]：
1. 文件路径：`src/css/custom.css`
2. 选择颜色：#21A5FF
3. 将颜色的hex数据复制到Doc文件中，自动生成网站颜色，夜间模式一样
```
:root {
--ifm-color-primary: #21a5ff;
--ifm-color-primary-dark: #0499ff;
--ifm-color-primary-darker: #0092f5;
--ifm-color-primary-darkest: #0078ca;
--ifm-color-primary-light: #3eb1ff;
--ifm-color-primary-lighter: #4cb7ff;
--ifm-color-primary-lightest: #77c8ff;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
```
- 修改夜间模式，HTML的属性为`data-theme='dark'`
```css
[data-theme='dark'] {
--ifm-color-primary: #21a5ff;
--ifm-color-primary-dark: #0499ff;
--ifm-color-primary-darker: #0092f5;
--ifm-color-primary-darkest: #0078ca;
--ifm-color-primary-light: #3eb1ff;
--ifm-color-primary-lighter: #4cb7ff;
--ifm-color-primary-lightest: #77c8ff;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
```
- 如果修改一个具体的颜色
```css
[data-theme='dark'] .purple-text {
color: plum;
}
```
`.pruple-text` 需要在HTML页面中加入这个属性
# 相关内容
# 参考资料
https://docusaurus.io/docs/styling-layout
[infima](https://infima.dev/)
[color-hex](https://www.color-hex.com/color/21a5ff)