主题

@whouu/geist-design 也支持 暗黑模式。你可以在任何时间使用非常简单的 API 完成切换，不需要任何第三方样式或库。

切换主题

你可以在任意处使用此 API，所有的组件都会自动更新以适应主题。

import GeistDesign from '@whouu/geist-design'

GeistDesign.theme.enableLight()
GeistDesign.theme.enableDark()

import GeistDesign from '@whouu/geist-design'

GeistDesign.theme.enableLight()
GeistDesign.theme.enableDark()

你也可以在自己的项目中覆盖这些主题变量。

在这里阅读所有的 CSS 变量

设置全局 CSS 变量覆盖默认值：

css

html {
  --accents-1: #fff;
}

html {
  --accents-1: #fff;
}

Vue 原生支持在组件上添加 css class, 你不需要任何 hack 就可以轻易的修改组件样式：

vue

<template>
  <g-card class="mycard"> Gesit Design. </g-card>
</template>

<style lang="css" scoped>
  .mycard {
    font-size: 20px;
  }
</style>

<template>
  <g-card class="mycard"> Gesit Design. </g-card>
</template>

<style lang="css" scoped>
  .mycard {
    font-size: 20px;
  }
</style>