主题

色彩配置

sun-parakeet 使用一些全局 CSS 变量定义主题色彩。您只要覆盖下面的 CSS 变量，即可完成主题的自定义。

:root:root {
  /* 功能色 */
  --sunp-color-primary: #3b82f6;
  --sunp-color-success: #22c55e;
  --sunp-color-warning: #f97316;
  --sunp-color-danger: #ef4444;

  /* 灰阶 */
  --sunp-color-black: #111827;
  --sunp-color-white: #ffffff;
  --sunp-color-text: #4b5563;
  --sunp-color-text-secondary: #6b7280;
  --sunp-color-weak: #9ca3af;
  --sunp-color-light: #d1d5db;
  --sunp-color-border: #e5e7eb;
  --sunp-color-box: #f3f4f6;
  --sunp-color-box-light: #f9fafb;
  --sunp-color-background: #ffffff;
}

注：为什么要写两个重复的 :root？

由于 sunp-parakeet 默认的主题变量也是在 :root 下声明的。通过 :root:root 可以确保主题变量的覆盖。

局部色彩配置

您也可以对局部的主题进行调整。

<div class="purple-theme">
  <Button color="primary">紫色</Button>
</div>

<style>
  .purple-theme {
    --sunp-color-primary: #a052d4;
  }
</style>

可以得到这样的一个按钮：

您也可以使用 Svelte 支持的 CSS 属性调整局部的主题。

<Button color="primary" --sunp-color-primary="#a052d4">Purple</Button>

按钮样式

自定义

您可以通过定义如 .sunp-button-[color] 格式的 CSS 类定义自己的按钮色彩。比如：

<Button color="purple">紫色</Button>

<style>
  .sunp-button-purple {
    background-color: #a855f7;
    color: white;

    &:active {
      background-color: #9333ea;
    }
  }
</style>

覆盖默认样式

组件库提供了以下常用的按钮样式。您可以通过 CSS 类覆盖部分样式，以改变按钮的风格：

color	对应 CSS Class
normal	sunp-button-normal
primary	sunp-button-primary
primary-plain	sunp-button-primary-plain
success	sunp-button-success
success-plain	sunp-button-success-plain
warning	sunp-button-warning
warning-plain	sunp-button-warning-plain
danger	sunp-button-danger
danger-plain	sunp-button-danger-plain
cancel	sunp-button-cancel
cancel-plain	sunp-button-cancel-plain
text	sunp-button-text

比如，您希望 primary 按钮被点击后，底色变淡，您可以这样做：

.sunp-button-primary {
  &:active {
    &::before {
      background-color: var(--sunp-color-white);
    }
  }
}