# Style Customization

`showtime-components/style.css` 包含一组 `--showtime-*` CSS 变量。它们提供跨组件的基础颜色、圆角、阴影和动效值；可在应用根节点覆盖，也可以只在某个容器内覆盖。

```ts
import 'showtime-components/style.css'
```

## 全局覆盖

```css
:root {
  --showtime-color-surface: #fffdf8;
  --showtime-color-text: #263238;
  --showtime-color-text-muted: #728078;
  --showtime-color-border: #dde5df;
  --showtime-color-skeleton: #edf0f2;
  --showtime-color-skeleton-highlight: #f7f8fa;
  --showtime-radius-md: 8px;
  --showtime-radius-lg: 24px;
  --showtime-shadow-sheet: 0 -12px 36px rgba(23, 42, 34, 0.16);
}
```

## 局部覆盖

将变量放在包裹组件的容器上，只会影响该容器内的 Showtime 组件：

```vue
<template>
  <section class="article-theme">
    <ShowtimeWaterfall />
  </section>
</template>

<style>
.article-theme {
  --showtime-color-surface: #10221d;
  --showtime-color-text: #eff9f3;
  --showtime-color-border: #2d4c40;
  --showtime-color-skeleton: #244238;
}
</style>
```

## Token Reference

| Token | Default | Used for |
| --- | --- | --- |
| `--showtime-color-surface` | `#ffffff` | Card and generic surface background |
| `--showtime-color-text` | `#27313d` | General foreground text |
| `--showtime-color-text-muted` | `#7b8790` | Secondary text |
| `--showtime-color-border` | `#eef1f3` | Subtle borders and sheet handle |
| `--showtime-color-skeleton` | `#edf0f2` | Skeleton base color |
| `--showtime-color-skeleton-highlight` | `#f7f8fa` | Skeleton shimmer highlight |
| `--showtime-color-danger` | `#ff5260` | Action Bar active accent |
| `--showtime-radius-sm/md/lg/pill` | `4px / 6px / 34px / 999px` | Shared corner shapes |
| `--showtime-shadow-sheet/floating/brand` | Built-in shadows | Sheet, cards, and Action Bar |
| `--showtime-duration-fast/normal` | `220ms / 320ms` | Shared transitions |
| `--showtime-ease-standard/emphasized` | Built-in easing | Shared transitions |

Props such as `panelBackground` and `panelRadius` continue to take precedence because they intentionally control a single component instance. Maintenance Page keeps its `--maintenance-*` theme variables for its light and dark themes.

`ShowtimeSkeleton` 还可以通过 `baseColor`、`highlightColor`、`animationDuration`、`animationAngle`、`animationDirection` 和 `borderRadius` 只覆盖当前实例；其中 `animationAngle` 控制单束高亮扫光的倾斜角度，`animationDirection` 支持水平和垂直四向移动。提高 `highlightColor` 与 `baseColor` 的对比度可让扫光更醒目；颜色和圆角会作为 CSS 变量传递给 `skeleton` 插槽内的 `ShowtimeSkeletonLine` 与 `ShowtimeSkeletonShape`。如果系统开启 `prefers-reduced-motion: reduce`，骨架扫光会自动停用。