# @activeadmin-plugins/active\_admin\_theme 中文文档

规范地址：https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/

版本：3\.3\.0
npm 元数据更新时间：2026-11-05T14:49:31.262Z
中文译文更新时间：2026-11-05T20:56:14.752Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40activeadmin-plugins/active_admin_theme
原文对照：https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/?lang=original
项目主页：https://github.com/activeadmin-plugins/active_admin_theme#readme
源码仓库：https://github.com/activeadmin-plugins/active_admin_theme

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：144 kB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2022-02-21T11:06:20.924Z
- 最新版本发布：2026-11-05T14:49:31.034Z
- 近 30 天下载量：24189（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 7 个）

## 中文简介

ActiveAdmin 的平面设计

## 安装

```sh
npm install @activeadmin-plugins/active_admin_theme
```

也可以使用：`pnpm add @activeadmin-plugins/active_admin_theme`、`yarn add @activeadmin-plugins/active_admin_theme`、`bun add @activeadmin-plugins/active_admin_theme`

## README

# 活动标题

自定义活动admin模板

## 安装

作为活动 skin 是 cs 的主题 [活动admin](https://github.com/activeadmin/activeadmin) 行政框架 - 您必须先安装 .

#### 作为宝石

在您应用程序的 Gemfile 中添加以下一行:

```ruby
gem 'active_admin_theme'
```

然后执行:

```
$ bundle
```

或者自己装作:

```
$ gem install active_admin_theme
```

#### 作为国家预防机制模块(Yarn软件包)

执行 :

```
$ npm i @activeadmin-plugins/active_admin_theme
```

或者说

```
$ yarn add @activeadmin-plugins/active_admin_theme
```

或者手动添加到 `package.json`数字 :

```
"dependencies": {
  "@activeadmin-plugins/active_admin_theme": "^3.1.1"
}
```

并执行 :

```
$ yarn
```

## 使用量

在基本样式表条目点 `active_admin.scss` (例如)增加一行:

#### 作为宝石通过喷出

```css
@import 'wigu/active_admin_theme';
```

#### 作为国家预防机制模块(Yarn软件包),通过Webpacker或任何其他资产捆绑器

```css
@import '@activeadmin-plugins/active_admin_theme';
```

## 自定义

设置以下任何变量 _上文_ 导入行 :

```scss
$skinMainFirstColor: #A5A7AA;
$skinMainSecondColor: #0066CC;
$skinBorderWindowColor: #B8BABE;

@import 'wigu/active_admin_theme';
```

变量被键入。 一种错误的价值—— `none` 颜色是 或没有单位的长度 命名变量,而不是默默地释放 CSS 浏览器丢弃.

### 黑暗模式

主题遵循操作系统通过 `prefers-color-scheme`,并且能够 每页被锁定 `data-theme="light"` 或者说 `data-theme="dark"` 打开 `<html>`。 。 。 . 下方的每个颜色都有 `…Dark` 双胞胎是暗模式使用的; 每个双胞胎 除非注意, 否则默认为光对应, 因此一个只设定 光值在两种模式中都保持一个一致的颜色.

### 实例

默认是此主题运行于 [雪地网络](https://github.com/yeti-switch/yeti-web)回到蓝色 标出之前运出的主题 :

```scss
$skinMenuPillColor:          $skinMainSecondColor;
$skinMenuPanelColor:         $skinMainSecondColor;
$skinMenuTextColor:          #ffffff;
$skinMenuItemHoverColor:     transparent;
$skinMenuItemHoverTextColor: #ffffff;
$skinMenuFontSize:           1em;
$skinHeaderPaddingY:         7px;       // one value top and bottom
$skinTitleBarColor:          lighten($skinMainFirstColor, 8%);
$skinTitleBarBorderWidth:    3px;
$skinPanelHeaderColor:       $skinMainSecondColor;
$skinPanelHeaderTextColor:   #ffffff;
$skinTabInactiveColor:       $skinMainSecondColor;
$skinInactiveTabTextColor:   #ffffff;
$skinLinkColor:              $skinMainSecondColor;

@import 'wigu/active_admin_theme';
```

说明 `var(--aa-page-bg)` 工作为可变值:以下为自定义属性 模式本身,所以一行覆盖两个主题.

### 切换主题

样式表遵循操作系统本身和荣誉 `data-theme="light"` 或者说 `data-theme="dark"` 打开 `<html>`开关是可选的 和有宝石的船只:

```scss
// app/assets/javascripts/active_admin.js
//= require wigu/theme_toggle
```

```js
// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/theme_toggle";
```

宝石无法添加菜单项: ActiveAdmin 构建工具导航 主机应用程序的初始化器, 样式表或资产中的任何内容 运行在那个时候。 所以,没有别的事做, 脚本注入自己的 `li#theme_toggle` 输入 `#utility_nav` 装入量。 这有效,但项目是 插入到服务器上, 而您不能订购或隐藏 .

自己宣布要花四行钱 怎么样 [雪地网络](https://github.com/yeti-switch/yeti-web) 是否为:

```ruby
# config/initializers/active_admin.rb
config.namespace :admin do |admin|
  admin.build_menu :utility_navigation do |menu|
    # A real url, not "#": ActiveAdmin drops a blank utility item.
    menu.add id: "theme_toggle", label: "", url: "#theme",
             priority: 9_999_998, html_options: { role: "button" }
  end
end
```

脚本找到 `#theme_toggle` 或任何携带 `.dark-mode-toggle`, (中文(简体) ), 受代表团的约束——因此控制得以维持下去——并且写不出任何东西 转到页面,但 `data-mode`。可见的一切来自样式表.

[![Theme switch](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/switch.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/switch.png)

两页下方:休养地的三个州——半圆为: **自动**太阳 页:1 **光线**月亮为 **阴暗** - 然后最后两个徘徊。 点击移动到 ,所以控制要花费一个图标的宽度 通常已经满了。 标题上写着点击方向,因为有一个图标 无法显示两者.

`auto` 删除属性, 因此媒体查询决定, 页面随行 操作系统存在;另外两个将选择插入 `localStorage` 下级 `aa-theme`。第三个状态存在,以便遵循系统 可达:在第一次点击时使用双状态切换写出首选项,但没有 距离手动清理存储器还差得远.

格子是内置的 SVG 用作 CSS `mask`因此,宝石仍然船 没有图像 文件, 主机应用程序的 CSP 不允许, 图标 带 `currentColor` —— 说 `$skinMenuTextColor` 像其他酒吧,还有 徘徊着颜色 要使用自己的图标字体, 请覆盖 `$theme-icon-auto` 编号 : `$theme-icon-light` 编号 : `$theme-icon-dark`,或重新样式 `#theme_toggle > a:before` 绝对的.

控制器是连接 没有目的地,所以 标签 到达它 输入 财务报告和审定财务报表 空间 操作它。 在一个标签中更改主题 应用到其他的.

### 禁用暗模式

仅以轻取为主的船舶,两只手动步骤(没有建造旗):

-   别包括 `wigu/theme_toggle` 在你的JS名单。 那会切掉开关 自动 `data-theme` 转换它驱动器.
-   将文档绑入光线:添加 `data-theme="light"` 页:1 `<html>` 元素 (例如通过凌驾于ActiveAdmin布局),所以 `@media (prefers-color-scheme: dark)` 样式从不适用.

### 服务器时钟

这个 `#utility_nav` 现在带一个打勾的服务器时钟——两行,时间+区域 主题 `server_clock.js` 注射数 以 Ruby 后端命名空间( N)`ActiveAdminTheme.install!`),登录 按钮旁边.

后端只注入标记; 加载脚本的方式与 主题切换,或者导航显示一个静态的一行标签,并永不勾选 :

```js
// app/assets/javascripts/active_admin.js
//= require wigu/server_clock

// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/server_clock";
```

[![Two-line server clock in the utility nav](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/clock.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/clock.png)

主题还保留了导航中的登录项目. 如果您的应用程序没有登录路径 (custom auth) 或者您故意运行一个无登录导航,使用 ActiveAdmin 自己的 每个名称空间开关——主题向它致敬:

```ruby
# config/initializers/active_admin.rb
config.logout_link_path = nil
```

恢复的当前用户项有一个主题开关( ActiveAdmin 提供无 未设置 `current_user_method`,中断授权时:

```ruby
ActiveAdminTheme.add_current_user = false
```

### 交叉表突出显示

单击索引表格中的单元格会突出显示其整行和列—— 单元格获得分类 `selected`,主题绘制为 `--aa-selected`,所以请 单击值位于十字架的中心,单元格上带有重音大纲 自己来 用于在宽的表格中追踪其行和列的值的手性.

这个 `selected` 填充总是在主题中(它也覆盖 ActiveAdmin 自己) 批量动作行选择); 点击行为是选入的 — 加载脚本到 让它保持平稳

```js
// app/assets/javascripts/active_admin.js
//= require wigu/table_crisscross

// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/table_crisscross";
```

它使用 jQuery , 它已经加载了 ActiveAdmin .

[![Crisscross cell highlighting](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/crisscross-light.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/crisscross-light.png)

### 被绑起的条和粘贴的桌子头

在比取景口宽的表格上,整个页面会滚动侧道; 主题指针 `#header`, (中文(简体) ), `#title_bar` (标题和动作按钮)和闪光 栏到可见的取景口,所以他们留在原地。 栏杆大小 `100vw`, (中文(简体) ), 它包括垂直滚动条沟道——装入已运出 `scrollbar_width.js` 以去除,或者条子坐到 ~15px 上方可见 极右滚动位置的视图端口 :

```js
// app/assets/javascripts/active_admin.js
//= require wigu/scrollbar_width

// or, as an npm module
import "@activeadmin-plugins/active_admin_theme/src/scrollbar_width";
```

没有脚本,CSS会回到原地 `100vw` -没事的,你 保持极右转.

索引表列标题也粘贴在视图口上方,而长长的列表 垂直滚动 。 ActiveAdmin 索引表格默认此选项 。 AA 3.x 电源 硬代码索引表的类( )`index class:` 因此选择退出 应用宽度, 样式表内有一行 :

```scss
.paginated_collection table.index_table thead tr th { position: static; }
```

对于那些你使自己变得适合的桌子, `skip-sticky-headers` 一个 `index_table` 选择退出,和 `with-sticky-headers` 在 (单行台词:只收首行针.

`//= require wigu/all` 一次拉出全部四个运出脚本;每个都留下 个人应酬.

### Trix / ActionText 编辑器

Trix 有 ActionText (铁路内置) 的飞船, 因此任何 ActiveAdmin app都可以有一个 富文场. 主题样式为编辑器铬-工具栏,编辑器表面, 链接对话框,内容 `pre`编号 :`blockquote` ——两相光下的主题变量 和黑暗,倒置 Trix的黑色工具栏图标 在黑暗模式下,所以他们留下 看得出来 无法选择: 您的应用程序仍然导入 Trix 自己的 CSS 基础 (单位:千美元)`trix/dist/trix`),主题只重塑了它,规则在没有时是惰性的 编辑器在页面上.

[![Trix editor, light](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/trix-light.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/trix-light.png) [![Trix editor, dark](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/trix-dark.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/trix-dark.png)

### 升级

#### 3.2.0 (中文(简体) )

可变合同只会增加—— `$skinTitleBarHeight` 加入它却一无所有 但现在看来 不同,其中两个从主机应用中取消了布局:

-   `#header`, (中文(简体) ), `#title_bar` 闪光条被固定在可见的视门上, 因此,他们在一个比窗口更宽的表格滚动页面时停留 侧道. 贴有自己样式表的条子应该放下 这些规则:主题设置了标题栏,并带有弹性框和重排 `#titlebar_right` 改为 `position: static`,还有剩下的 `position: absolute/sticky` 对抗它。 装入 `wigu/scrollbar_width` 删除 卷杆沟-见 _被绑起的条和粘贴的桌子头_。 。 。 .
-   索引表列标题粘贴每个活动admin上的取景口 索引表。 您样式表中的一行选择退出全应用程序 : `.paginated_collection table.index_table thead tr th { position: static; }`。 。 。 .
-   标题栏拥有自己的衡量标准: 记录标题为16px,在一行 带有椭圆形,而不是 ActiveAdmin 的大包头; 动作 项为空; 带为 `$skinTitleBarHeight` (37px) 高,与 `$skinTitleBarButtonPaddingY` 编号 : `$skinTitleBarButtonPaddingX` 在按钮上. 标题栏在自己的按钮下右向下放下面板 .
-   通用导航带有服务器时钟、主题开关和已绘制的日志 以示弃绝的格言 _注销_。 。 。 . `ActiveAdminTheme .add_current_user = false` 放弃添加的当前用户项,并 ActiveAdmin 属于自己 `config.logout_link_path = nil` 丢弃日志 .

新建和选入, 升级时没有任何变化: Trix / ActionText 编辑器是 以两种模式为主, crisscross 单元格突出显示(`wigu/table_crisscross`, (中文(简体) ), `--aa-datetimepicker-*` 用于相伴日期选择器的桥变量, 暗色 用于选择 2 和 tom 选择的样式,以及 `//= require wigu/all` 以拉动 立即运出脚本 .

#### 3.1.0 (中文(简体) )

-   状态标记填充更暗,因此标签可以是白色并仍然清晰的 4.5: 1 - 之前是黑色的 中间的填充。 每个填充物现在都是变量 (单位:千美元)`$skinStatusTagOkColor` 和它的四周 `$skinStatusTagTextColor: #000000;` 以填充符恢复旧标签 你选择.
-   索引表格栏标题 `$skinTextColor` 而不是哑巴的灰色, 所以一个标题读得和下面的一栏一样强烈.

#### 3.0.0 (单位:千美元)

三件事改变了形状,值得知道,如果你已经设置了变量:

-   下放面板——标题栏菜单、批量动作菜单和 表格工具菜单——现在遵循表面调色板(`$skinSurfaceColor` 财务报告和审定财务报表 而不是朋友们) `$skinMainFirstColor` 编号 : `$skinMainSecondColor`这是 让他们在两种模式下工作。 如果你把那些面板打上烙印 两个主要颜色, 点 `$skinSurfaceColor` 财务报告和审定财务报表 `$skinSurfaceHoverColor` 时间 同样的价值.
-   主按钮填充更暗 (`darken($skinMainSecondColor, 20%)` 相当 而不是口音本身). 口音为2.74:1,在4.5:1下为小 文本需要, 而暗模式已经使用此音调—— 按钮现在是 两种模式中的颜色。 设定 `$skinButtonColor: $skinMainSecondColor;` 联 合 国 老样子.
-   默认内容链接颜色更暗( E)`#1f5f8d` 而不是口音. 口音为填充颜色并失败了WCAG AA作为正文. 设定 `$skinLinkColor` 返回到 `$skinMainSecondColor` 如果你喜欢老样子.

### 变量

#### 核心

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinMainFirstColor` | ![#23282f](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/23282f.svg) `#23282f` |  |
| `$skinMainSecondColor` | ![#5ea3d3](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/5ea3d3.svg) `#5ea3d3` |  |
| `$skinBorderRadius` | `4px` |  |
| `$skinBorderWindowColor` | ![#e6e9ee](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/e6e9ee.svg) `#e6e9ee` |  |
| `$skinTablePadding` | `10px` |  |

#### 表面、文字和边框

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinPageBgColor` 编号 : `$skinPageBgColorDark` | ![#f7f9fb](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f7f9fb.svg) `#f7f9fb` 编号 : ![#161a1e](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/161a1e.svg) `#161a1e` | 页面背景 |
| `$skinSurfaceColor` 编号 : `$skinSurfaceColorDark` | ![#ffffff](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/ffffff.svg) `#ffffff` 编号 : ![#25292f](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/25292f.svg) `#25292f` | 面板/卡片/内容 |
| `$skinSurface2Color` 编号 : `$skinSurface2ColorDark` | ![#f0f2f5](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f0f2f5.svg) `#f0f2f5` 编号 : ![#2c3137](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/2c3137.svg) `#2c3137` | 表格标题/条纹/微妙填充 |
| `$skinSurfaceHoverColor` 编号 : `$skinSurfaceHoverColorDark` | ![#f5f7fa](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f5f7fa.svg) `#f5f7fa` 编号 : ![#3f454d](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/3f454d.svg) `#3f454d` | 行/ 项徘徊 |
| `$skinSelectedRowColor` 编号 : `$skinSelectedRowColorDark` | ![#d9e4ec](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/d9e4ec.svg) `#d9e4ec` 编号 : ![#304457](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/304457.svg) `#304457` | 选中的表格行 |
| `$skinElevatedColor` 编号 : `$skinElevatedColorDark` | `$skinSurfaceColor` 编号 : ![#363c43](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/363c43.svg) `#363c43` | 工具按钮和浮动在页面上方的下拉面板 |
| `$skinTextColor` 编号 : `$skinTextColorDark` | ![#323537](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/323537.svg) `#323537` 编号 : ![#dde2e8](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/dde2e8.svg) `#dde2e8` | 正文文本 |
| `$skinTextMutedColor` 编号 : `$skinTextMutedColorDark` | ![#6b7177](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/6b7177.svg) `#6b7177` 编号 : ![#b0b8c2](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/b0b8c2.svg) `#b0b8c2` | 次要文本/轴标签 |
| `$skinBorderColor` 编号 : `$skinBorderColorDark` | ![#e0e4e9](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/e0e4e9.svg) `#e0e4e9` 编号 : ![#404750](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/404750.svg) `#404750` | 边框/网格线 |
| `$skinInputBgColor` 编号 : `$skinInputBgColorDark` | ![#ffffff](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/ffffff.svg) `#ffffff` 编号 : ![#1e2227](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/1e2227.svg) `#1e2227` | 窗体控制背景 |
| `$skinInputBorderColor` 编号 : `$skinInputBorderColorDark` | ![#c9ced4](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/c9ced4.svg) `#c9ced4` 编号 : ![#4d555f](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/4d555f.svg) `#4d555f` | 窗体控制边框 |
| `$skinErrorTextColor` 编号 : `$skinErrorTextColorDark` | ![#932419](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/932419.svg) `#932419` 编号 : ![#f49b9b](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f49b9b.svg) `#f49b9b` | 验证信件 |
| `$skinErrorBgColor` 编号 : `$skinErrorBgColorDark` | ![#fae6e4](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/fae6e4.svg) `#fae6e4` 编号 : ![#3a2224](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/3a2224.svg) `#3a2224` | 窗体上方的错误摘要 |

#### 页眉菜单

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinMenuPillColor` | ![#2e3236](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/2e3236.svg) `#2e3236` | 顶级流药/悬浮药 |
| `$skinMenuPillTextColor` | ![#6cb0de](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/6cb0de.svg) `#6cb0de` | 在药丸上的文本; 跟着倒下文本这样 |
| `$skinMenuPanelColor` | ![#2e3236](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/2e3236.svg) `#2e3236` | 下拉面板 bg + 悬浮"桥"边框 |
| `$skinMenuTextColor` | ![#dfe2e6](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/dfe2e6.svg) `#dfe2e6` | 下放项目文本( 已继承 #fff) |
| `$skinMenuItemHoverColor` | ![#3f454c](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/3f454c.svg) `#3f454c` | 悬浮/当前 bg( 是: 无) |
| `$skinMenuItemHoverTextColor` | ![#6cb0de](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/6cb0de.svg) `#6cb0de` | 徘徊/当前下放项目文字, 相同原因 |
| `$skinMenuFontSize` | `13px` | 页眉菜单文本大小 |
| `$skinMenuItemPaddingY` | `5px` | 下拉项上/下贴( 是 6px/4px + a 7px 边框) |
| `$skinMenuItemLineHeight` | `1.35` | 降下的项目行高 |
| `$skinMenuPanelMaxWidth` | `260px` | 下拉面板天花板; 更长的标签包装而不是离开取景口 |
| `$skinHeaderPaddingY` | `null` | 将两半同时设定 |
| `$skinHeaderPaddingTop` | `4.5px` | 头顶上加( 基值, 保留所以头不移) |
| `$skinHeaderPaddingBottom` | `4.5px` | 页眉下贴 |
| `$skinHeaderLogoMaxHeight` | `none` | 封顶站点 标题标志图像高度 |

#### 标题栏

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinTitleBarColor` | ![#343c46](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/343c46.svg) `#343c46` |  |
| `$skinTitleBarBorderColor` | `$skinMainSecondColor` |  |
| `$skinTitleBarBorderWidth` | `0` |  |
| `$skinTitleBarButtonPaddingY` | `6px` | 动作按钮垂直绑定 |
| `$skinTitleBarButtonPaddingX` | `10px` | 动作按钮水平编码 |
| `$skinTitleBarHeight` | `37px` | 最小栏高; 为适应内容而生长 |

#### 面板、标签和标签

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinPanelHeaderColor` 编号 : `$skinPanelHeaderColorDark` | `var(--aa-page-bg)` 编号 : `var(--aa-page-bg)` |  |
| `$skinPanelHeaderTextColor` 编号 : `$skinPanelHeaderTextColorDark` | `var(--aa-inactive-tab-text)` 编号 : `var(--aa-inactive-tab-text)` |  |
| `$skinPanelHeaderPaddingY` | `5px` | 面板+侧边栏头高 |
| `$skinLabelColor` 编号 : `$skinLabelColorDark` | ![#8494a8](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/8494a8.svg) `#8494a8` 编号 : `$skinTextColorDark` |  |
| `$skinTabInactiveColor` 编号 : `$skinTabInactiveColorDark` | ![#f7f9fb](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f7f9fb.svg) `#f7f9fb` 编号 : ![#161a1e](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/161a1e.svg) `#161a1e` | 不活动标签填充 |
| `$skinActiveTabTextColor` 编号 : `$skinActiveTabTextColorDark` | `$skinMainSecondColor` 编号 : ![#7cc0ec](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/7cc0ec.svg) `#7cc0ec` | 选中标签 |
| `$skinInactiveTabTextColor` 编号 : `$skinInactiveTabTextColorDark` | ![#5e6469](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/5e6469.svg) `#5e6469` 编号 : ![#b0b8c2](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/b0b8c2.svg) `#b0b8c2` | 不活动标签标签 |
| `$skinTableHeaderTextColor` 编号 : `$skinTableHeaderTextColorDark` | `$skinTextColor` 编号 : `$skinTextColorDark` | 索引表列标题; 正文文字颜色, 所以标题读取强烈如行 |
| `$skinStatusTagTextColor` | ![#ffffff](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/ffffff.svg) `#ffffff` | 在已填充状态标签内设置标签; `empty` 编号 : `unknown` 编号 : `none` 没有填充和保存 `$skinTextMutedColor` |
| `$skinStatusTagNeutralColor` | ![#707681](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/707681.svg) `#707681` | 未分类标签 : `No`,协议标记 |
| `$skinStatusTagOkColor` | ![#5e7e63](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/5e7e63.svg) `#5e7e63` | `ok` `published` `complete` `completed` `green` `yes` |
| `$skinStatusTagNoticeColor` | ![#3874d2](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/3874d2.svg) `#3874d2` | `notice` `blue` |
| `$skinStatusTagWarnColor` | ![#9e6c15](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/9e6c15.svg) `#9e6c15` | `warn` `warning` `orange` |
| `$skinStatusTagErrorColor` | ![#ce483b](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/ce483b.svg) `#ce483b` | `error` `errored` `red` |
| `$skinTabPaddingY` | `8px` | 选项卡高度 |
| `$skinTabPaddingX` | `15px` | 选项卡标签水平编码(文本 ~ 边框) |

#### 按钮和表格工具

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinButtonColor` 编号 : `$skinButtonColorDark` | `darken($skinMainSecondColor, 20%)` 编号 : `$skinButtonColor` | 两种模式中一个音调; 白色为 5. 35:1 |
| `$skinButtonTextColor` 编号 : `$skinButtonTextColorDark` | ![#ffffff](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/ffffff.svg) `#ffffff` 编号 : `$skinButtonTextColor` | 这些按钮上的标签 |
| `$skinTableToolsHeight` | `30px` |  |
| `$skinTableToolsPaddingX` | `$skinTableToolsHeight * 0.4` | 12px 时为 30px |

#### 链接

| 变量 | 默认( 浅/ 暗) |  |
| --- | --- | --- |
| `$skinAccentColor` 编号 : `$skinAccentColorDark` | `$skinMainSecondColor` 编号 : `$skinAccentColor` | 焦点环/口音大纲 |
| `$skinLinkColor` 编号 : `$skinLinkColorDark` | ![#38678b](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/38678b.svg) `#38678b` 编号 : ![#7cc0ec](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/7cc0ec.svg) `#7cc0ec` |  |
| `$skinDeleteLinkColor` 编号 : `$skinDeleteLinkColorDark` | `$skinLinkColor` 编号 : ![#f49b9b](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/docs/swatches/f49b9b.svg) `#f49b9b` |  |

## 屏幕

带有过滤器、 显示页面、 嵌入式索引 `has_many` 窗体,打开批次动作 菜单和取日期器——两种模式中相同的管理员。 主题如下: 操作系统,每页可粘贴 `data-theme`。 。 。 .

#### 光线

[![Light](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/light.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/light.png)

#### 阴暗

[![Dark](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/dark.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/dark.png)

#### 窗体和过滤器控制

以全尺寸显示,因为两发子弹比控制器大 说明它们是什么颜色。 输入、选择和 文本区域 `$skinInputBgColor` 编号 : `$skinInputBorderColor` - 白开 `#c9ced4` 灯光模式下,休庭 `#1e2227` 不错 `#4d555f` 在黑暗中——和 重点领域`Name`, (中文(简体) ), `Title`载体 `$skinMainSecondColor`。 。 。 .

[![Form and filter inputs](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/inputs.png)](https://npmcn.com/package/%40activeadmin-plugins/active_admin_theme/img/inputs.png)

## 捐款

1.  叉开它 [https://github.com/活性admin-plugins/活性 admin 主题/fork](https://github.com/activeadmin-plugins/active_admin_theme/fork) (中文(简体) )
2.  创建您的特性分支( E)`git checkout -b my-new-feature`(中文(简体) )
3.  提交更改( E)`git commit -am 'Add some feature'`(中文(简体) )
4.  推向分行(`git push origin my-new-feature`(中文(简体) )
5.  创建新拉请求

## 常见问题

### @activeadmin-plugins/active\_admin\_theme 是什么？

ActiveAdmin 的平面设计

### 如何安装 @activeadmin-plugins/active\_admin\_theme？

在项目目录运行 npm install @activeadmin-plugins/active\_admin\_theme，或使用 pnpm add / yarn add / bun add。

### @activeadmin-plugins/active\_admin\_theme 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/activeadmin-plugins\_\_active\_admin\_theme 是否存在。

### @activeadmin-plugins/active\_admin\_theme 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @activeadmin-plugins/active\_admin\_theme 可以商用吗？

@activeadmin-plugins/active\_admin\_theme 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @activeadmin-plugins/active\_admin\_theme 的下载量有多少？

根据 npm 官方下载统计，@activeadmin-plugins/active\_admin\_theme 在 2026/10/05 – 2026/11/03 这 30 天内被下载 24,189 次，日均约 806 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @activeadmin-plugins/active\_admin\_theme 还在维护吗？

最新版本 3\.3\.0 发布于 2026/11/05（今天）；至今共发布 8 个版本，其中过去 12 个月发布了 7 个；首次发布于 2022/02/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。