自定义样式

自动样式注入

注意

  • index.ts / index.scss / index.css 不应当同时存在,否则可能会导致重复引入。
  • 仅首次新建 styles/index.scss 文件时,需要重启开发服务器,以确保 scss 被加载。

新建 styles 文件夹,目录下的以下文件将会被自动引入:

  • index.ts
  • index.scss
  • index.css
  • css-vars.scss (推荐在 index.ts 中自己引入 xxx.scss,后续可能会被弃用)

我们推荐您:

  • 新建 index.ts 文件,并在其中自由引入其他样式文件 xxx.scss

Create styles folder, and the following files under the directory will be automatically imported:

  • index.ts
  • index.scss
  • index.css

We recommend you:

  • Create index.ts file, and import other style files xxx.scss freely.
  • index.ts / index.scss / index.css should not exist at the same time, otherwise it may cause duplicate imports.

自定义字体

譬如你可以在 styles/index.ts 中覆盖默认的字体。

  • serif: 衬线字体:字体 abcd 123
  • sans: 非衬线字体:字体 abcd 123
  • mono: 等宽字体:字体 abcd 123

For example, you can override the default font in 'styles/index.ts'.

  • serif: serif font: Font abcd 123
  • sans: sans-serif font: Font abcd 123
  • mono: monospaced font: Font abcd 123
styles/index.ts
ts[object Promise]
styles/vars.scss
scss[object Promise]

示例

自定义光标

替换鼠标光标样式。

例如使用 Material Design Cursors

  • default: 默认状态下图标。
  • pointer: 指针(即链接状态下)图标。
  • text: 文本选择图标。

新建 styles/index.ts 文件,引入 vars.scss

styles/index.ts
ts[object Promise]

新建 styles/vars.scss 文件:

styles/vars.scss
scss[object Promise]

覆盖暗色模式

需使用 html.dark 选择器包裹样式。

styles/index.ts
ts[object Promise]
styles/vars.scss
scss[object Promise]

To Be Continued.

贡献者