会改哪些设置
| 主题 | default |
|---|---|
| 圆角 | 0px |
| 表单位置 | 居中 |
| 表单CSS | 是 |
| 表单CSS（移动端） | 是 |
这些都在 Casdoor 应用的 界面定制 标签页里，套用主题之后还可以继续调整。
套用到应用
- 在下面填好应用，调整主题的设置，然后复制 JSON。
- 在 Casdoor 控制台打开 应用，编辑这个应用，点击顶部的 导入JSON，粘贴 JSON 后点 确定。
- 点击 保存。下次打开登录页时就会用上这个主题。
{
"name": "<应用名称>",
"organization": "<组织>",
"themeData": {
"themeType": "default",
"colorPrimary": "#1d70b8",
"borderRadius": 0,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n.login-background {\n color-scheme: light;\n --background: 0 0% 100%;\n --foreground: 200 7% 5%;\n --card: 0 0% 100%;\n --card-foreground: 200 7% 5%;\n --popover: 0 0% 100%;\n --popover-foreground: 200 7% 5%;\n --muted: 30 5% 95%;\n --muted-foreground: 200 5% 30%;\n --accent: 30 5% 95%;\n --accent-foreground: 200 7% 5%;\n --border: 200 3% 70%;\n --input: 200 7% 5%;\n --ring: 51 100% 50%;\n font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-content {\n padding-top: 48px;\n}\n.login-content > div {\n max-width: 480px;\n}\n.login-background > div:first-of-type {\n min-height: 56px;\n border-bottom: 10px solid #1d70b8;\n background: #0b0c0c;\n}\n.login-background > div:first-of-type button {\n color: #ffffff;\n}\n.login-panel {\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n}\n.login-logo-box {\n justify-content: flex-start;\n margin-bottom: 30px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n border-bottom: 1px solid #b1b4b6;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n justify-content: flex-start;\n gap: 4px;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n margin-bottom: -1px;\n padding: 8px 14px;\n border: 1px solid transparent;\n border-radius: 0;\n background: #f3f2f1 !important;\n color: #1d70b8;\n font-size: 15px;\n font-weight: 400;\n text-decoration: underline;\n text-underline-offset: 3px;\n box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-color: #b1b4b6 #b1b4b6 #ffffff;\n background: #ffffff !important;\n color: #0b0c0c;\n text-decoration: none;\n}\n.login-form label {\n color: #0b0c0c;\n font-size: 19px;\n font-weight: 700;\n}\n.login-forget-password label {\n font-size: 16px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 2px solid #0b0c0c;\n border-radius: 0;\n background: #ffffff;\n color: #0b0c0c;\n font-size: 19px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: 3px solid #ffdd00;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px #0b0c0c;\n}\n.login-form [role='checkbox'] {\n width: 28px;\n height: 28px;\n border: 2px solid #0b0c0c;\n border-radius: 0;\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-form a {\n color: #1d70b8;\n font-size: 16px;\n font-weight: 400;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n.login-form a:focus {\n outline: none;\n background: #ffdd00;\n color: #0b0c0c;\n box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;\n text-decoration: none;\n}\n.login-form .login-button-box {\n display: flex;\n justify-content: flex-start;\n}\n.login-form .login-button {\n width: auto;\n height: auto;\n padding: 10px 18px 8px;\n border-radius: 0;\n background: #00703c;\n color: #ffffff;\n font-size: 19px;\n font-weight: 400;\n box-shadow: 0 2px 0 color-mix(in srgb, #00703c 40%, #000000);\n}\n.login-form .login-button:hover {\n background: color-mix(in srgb, #00703c 80%, #000000);\n}\n.login-form .login-button:focus {\n outline: 3px solid transparent;\n background: #ffdd00;\n color: #0b0c0c;\n box-shadow: 0 2px 0 #0b0c0c;\n}\n.login-form .login-signup-link {\n justify-content: flex-start;\n color: #0b0c0c;\n font-size: 16px;\n}\n#footer {\n padding: 24px 30px;\n border-top: 1px solid #b1b4b6;\n background: #f3f2f1;\n color: #505a5f;\n font-size: 14px;\n text-align: left;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n.login-background {\n color-scheme: light;\n --background: 0 0% 100%;\n --foreground: 200 7% 5%;\n --card: 0 0% 100%;\n --card-foreground: 200 7% 5%;\n --popover: 0 0% 100%;\n --popover-foreground: 200 7% 5%;\n --muted: 30 5% 95%;\n --muted-foreground: 200 5% 30%;\n --accent: 30 5% 95%;\n --accent-foreground: 200 7% 5%;\n --border: 200 3% 70%;\n --input: 200 7% 5%;\n --ring: 51 100% 50%;\n font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-content {\n padding-top: 20px;\n}\n.login-background > div:first-of-type {\n min-height: 56px;\n border-bottom: 10px solid #1d70b8;\n background: #0b0c0c;\n}\n.login-background > div:first-of-type button {\n color: #ffffff;\n}\n.login-panel {\n border: none;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n}\n.login-logo-box {\n justify-content: flex-start;\n margin-bottom: 30px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n border-bottom: 1px solid #b1b4b6;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n justify-content: flex-start;\n gap: 4px;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n margin-bottom: -1px;\n padding: 8px 14px;\n border: 1px solid transparent;\n border-radius: 0;\n background: #f3f2f1 !important;\n color: #1d70b8;\n font-size: 15px;\n font-weight: 400;\n text-decoration: underline;\n text-underline-offset: 3px;\n box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-color: #b1b4b6 #b1b4b6 #ffffff;\n background: #ffffff !important;\n color: #0b0c0c;\n text-decoration: none;\n}\n.login-form label {\n color: #0b0c0c;\n font-size: 19px;\n font-weight: 700;\n}\n.login-forget-password label {\n font-size: 16px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 2px solid #0b0c0c;\n border-radius: 0;\n background: #ffffff;\n color: #0b0c0c;\n font-size: 19px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: 3px solid #ffdd00;\n outline-offset: 0;\n box-shadow: inset 0 0 0 2px #0b0c0c;\n}\n.login-form [role='checkbox'] {\n width: 28px;\n height: 28px;\n border: 2px solid #0b0c0c;\n border-radius: 0;\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #0b0c0c;\n}\n.login-form a {\n color: #1d70b8;\n font-size: 16px;\n font-weight: 400;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n.login-form a:focus {\n outline: none;\n background: #ffdd00;\n color: #0b0c0c;\n box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;\n text-decoration: none;\n}\n.login-form .login-button-box {\n display: flex;\n justify-content: flex-start;\n}\n.login-form .login-button {\n width: auto;\n height: auto;\n padding: 10px 18px 8px;\n border-radius: 0;\n background: #00703c;\n color: #ffffff;\n font-size: 19px;\n font-weight: 400;\n box-shadow: 0 2px 0 color-mix(in srgb, #00703c 40%, #000000);\n}\n.login-form .login-button:hover {\n background: color-mix(in srgb, #00703c 80%, #000000);\n}\n.login-form .login-button:focus {\n outline: 3px solid transparent;\n background: #ffdd00;\n color: #0b0c0c;\n box-shadow: 0 2px 0 #0b0c0c;\n}\n.login-form .login-signup-link {\n justify-content: flex-start;\n color: #0b0c0c;\n font-size: 16px;\n}\n#footer {\n padding: 24px 30px;\n border-top: 1px solid #b1b4b6;\n background: #f3f2f1;\n color: #505a5f;\n font-size: 14px;\n text-align: left;\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.
浅色极简无卡片