会改哪些设置
| 主题 | dark |
|---|---|
| 圆角 | 8px |
| 表单位置 | 居中 |
| 表单CSS | 是 |
| 表单CSS（移动端） | 是 |
这些都在 Casdoor 应用的 界面定制 标签页里，套用主题之后还可以继续调整。
套用到应用
- 在下面填好应用，调整主题的设置，然后复制 JSON。
- 在 Casdoor 控制台打开 应用，编辑这个应用，点击顶部的 导入JSON，粘贴 JSON 后点 确定。
- 点击 保存。下次打开登录页时就会用上这个主题。
{
"name": "<应用名称>",
"organization": "<组织>",
"themeData": {
"themeType": "dark",
"colorPrimary": "#bd93f9",
"borderRadius": 8,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n.login-background {\n color-scheme: dark;\n --background: 231 15% 18%;\n --foreground: 60 30% 96%;\n --card: 232 14% 24%;\n --card-foreground: 60 30% 96%;\n --popover: 232 14% 24%;\n --popover-foreground: 60 30% 96%;\n --muted: 232 14% 31%;\n --muted-foreground: 225 27% 70%;\n --accent: 232 14% 31%;\n --accent-foreground: 60 30% 96%;\n --border: 232 14% 34%;\n --input: 232 14% 34%;\n --ring: 60 30% 96%;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n background: radial-gradient(ellipse 55% 45% at 85% 10%, rgba(255, 121, 198, 0.16) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 10% 95%, rgba(189, 147, 249, 0.16) 0%, transparent 70%), #282a36;\n}\n\n\n.login-content > div {\n max-width: 420px;\n}\n.login-panel {\n border: 1px solid #44475a;\n border-radius: 14px;\n background: #21222c;\n box-shadow: 0 0 0 1px rgba(189, 147, 249, 0.12), 0 30px 70px -20px rgba(0, 0, 0, 0.7);\n}\n.login-background > div:first-of-type button {\n color: #9aa5ce;\n}\n.signin-methods > div {\n border: 1px solid #44475a;\n background: #282a36;\n}\n.signin-methods [role='tab'] {\n color: #9aa5ce;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #44475a !important;\n color: #bd93f9;\n box-shadow: none !important;\n}\n.login-form label {\n color: #f8f8f2;\n font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 1px solid #44475a;\n border-radius: 8px;\n background: #282a36;\n color: #f8f8f2;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: #9aa5ce;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #bd93f9;\n box-shadow: 0 0 0 3px color-mix(in srgb, #bd93f9 25%, transparent);\n}\n.login-password button {\n color: #9aa5ce;\n}\n.login-form [role='checkbox'] {\n border-color: #9aa5ce;\n border-radius: 4px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #bd93f9;\n border-color: #bd93f9;\n color: #282a36;\n}\n.login-form a {\n color: #8be9fd;\n font-weight: 500;\n}\n.login-form .login-button {\n height: 44px;\n border-radius: 8px;\n background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);\n color: #282a36;\n font-weight: 600;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);\n filter: brightness(1.08);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: #f8f8f2;\n}\n#footer {\n color: #9aa5ce;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n.login-background {\n color-scheme: dark;\n --background: 231 15% 18%;\n --foreground: 60 30% 96%;\n --card: 232 14% 24%;\n --card-foreground: 60 30% 96%;\n --popover: 232 14% 24%;\n --popover-foreground: 60 30% 96%;\n --muted: 232 14% 31%;\n --muted-foreground: 225 27% 70%;\n --accent: 232 14% 31%;\n --accent-foreground: 60 30% 96%;\n --border: 232 14% 34%;\n --input: 232 14% 34%;\n --ring: 60 30% 96%;\n font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n background: radial-gradient(ellipse 55% 45% at 85% 10%, rgba(255, 121, 198, 0.16) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 10% 95%, rgba(189, 147, 249, 0.16) 0%, transparent 70%), #282a36;\n}\n.login-background > div:first-of-type button {\n color: #9aa5ce;\n}\n.signin-methods > div {\n border: 1px solid #44475a;\n background: #282a36;\n}\n.signin-methods [role='tab'] {\n color: #9aa5ce;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #44475a !important;\n color: #bd93f9;\n box-shadow: none !important;\n}\n.login-form label {\n color: #f8f8f2;\n font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 1px solid #44475a;\n border-radius: 8px;\n background: #282a36;\n color: #f8f8f2;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: #9aa5ce;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #bd93f9;\n box-shadow: 0 0 0 3px color-mix(in srgb, #bd93f9 25%, transparent);\n}\n.login-password button {\n color: #9aa5ce;\n}\n.login-form [role='checkbox'] {\n border-color: #9aa5ce;\n border-radius: 4px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #bd93f9;\n border-color: #bd93f9;\n color: #282a36;\n}\n.login-form a {\n color: #8be9fd;\n font-weight: 500;\n}\n.login-form .login-button {\n height: 44px;\n border-radius: 8px;\n background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);\n color: #282a36;\n font-weight: 600;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);\n filter: brightness(1.08);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: #f8f8f2;\n}\n#footer {\n color: #9aa5ce;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>"
}更多登录主题
查看全部
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.
浅色极简无卡片