
这个主题设置了自定义 HTML。Casdoor 4.20.0 及以后,组织管理员就能套用;更早的版本只有全局管理员(built-in 组织的管理员)才能保存,其他人保存时 Casdoor 会保留应用原来的 HTML。
会改哪些设置
| 主题 | default |
|---|---|
| 圆角 | 10px |
| 表单位置 | 居中,带侧面板 |
| 表单CSS | 否 |
| 表单CSS(移动端) | 否 |
| 侧面板HTML | 是 |
这些都在 Casdoor 应用的 界面定制 标签页里,套用主题之后还可以继续调整。
套用到应用
- 在下面填好应用,调整主题的设置,然后复制 JSON。
- 在 Casdoor 控制台打开 应用,编辑这个应用,点击顶部的 导入JSON,粘贴 JSON 后点 确定。
- 点击 保存。下次打开登录页时就会用上这个主题。
{
"name": "<应用名称>",
"organization": "<组织>",
"themeData": {
"themeType": "default",
"colorPrimary": "#2563eb",
"borderRadius": 10,
"isCompact": false,
"isEnabled": true
},
"formOffset": 4,
"formSideHtml": "<div style=\"box-sizing: border-box; height: 100%; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: #ffffff; background: linear-gradient(160deg, #2563eb 0%, #0f172a 100%);\"><p style=\"margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600;\">Welcome back</p><p style=\"margin: 12px 0 0; font-size: 15px; line-height: 1.5; opacity: 0.8;\">Sign in to continue to Acme.</p></div>"
}更多登录主题
查看全部
Aurora
登录主题A pastel mesh of color tinted by your accent behind a frosted glass card, with soft rounded fields and a gradient button. CSS only, so organization admins can install it.
浅色毛玻璃渐变

Backdrop
登录主题Your own picture behind the whole page, dimmed a little, with a frosted glass card on top. It comes with a dusk mountain scene; give it any image address to use yours. Organization admins can install it.
深色背景图毛玻璃

Bare
登录主题Nothing but the form: no card, no background, a small left-aligned logo, quiet text tabs, hairline fields and a round button, with plenty of white space. CSS only, so organization admins can install it.
浅色极简无卡片
