Custom Styles

自动样式注入 ​

Automatic Style Injection ​

WARNING

  • 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.

自定义字体 ​

Custom Font ​

譬如你可以在 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
import './vars.scss'
styles/vars.scss
scss
:root {
  --va-font-serif: 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto,  serif;
  --va-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --va-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
}

示例 ​

自定义光标 ​

Custom Cursor ​

替换鼠标光标样式。

例如使用 Material Design Cursors。

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

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

styles/index.ts
ts
import './vars.scss'

新建 styles/vars.scss 文件：

styles/vars.scss
scss
:root {
  --cursor-default: url('https://cdn.yunyoujun.cn/css/md-cursors/pointer.cur');
  --cursor-pointer: url('https://cdn.yunyoujun.cn/css/md-cursors/link.cur');
  --cursor-text: url('https://cdn.yunyoujun.cn/css/md-cursors/text.cur');
}

body {
  cursor: var(--cursor-default), auto;
}

a {
  cursor: var(--cursor-pointer), auto;

  &:hover {
    cursor: var(--cursor-pointer), auto;
  }
}

button {
  cursor: var(--cursor-pointer), pointer;
}

input {
  cursor: var(--cursor-text), text;
}

覆盖暗色模式 ​

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

styles/index.ts
ts
import './vars.scss'
styles/vars.scss
scss
// 亮色
.yun-page-header-gradient {
  background: linear-gradient(to right, blue 0, rgba(0, 0, 0, 0.2) 100%);
}

// 覆盖 Dark Mode
html.dark{
  --va-c-bg-light:rgba(5, 16, 29, 0.8);

  .yun-page-header-gradient {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 100%);
  }

  .yun-footer-gradient {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 100%);
  }
}

Contributors

To Be Continued.
Edit this page on GitHub

Last updated: