Bare | 登录主题

Bare

Name: Casdoor Bare 登录主题
Author: casdoor

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.

Casdoor 官方核验浅色极简无卡片纯 CSS

套用这个主题查看源码

会改哪些设置

主题	default
圆角	8px
表单位置	居中
表单CSS	是
表单CSS（移动端）	是

这些都在 Casdoor 应用的 界面定制 标签页里，套用主题之后还可以继续调整。

套用到应用

在下面填好应用，调整主题的设置，然后复制 JSON。
在 Casdoor 控制台打开应用，编辑这个应用，点击顶部的 导入JSON，粘贴 JSON 后点确定。
点击保存。下次打开登录页时就会用上这个主题。

组织应用名称Accent color

The button, checkboxes and the line under a focused field.

{
  "name": "<应用名称>",
  "organization": "<组织>",
  "themeData": {
    "themeType": "default",
    "colorPrimary": "#111111",
    "borderRadius": 8,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 2,
  "formCss": "<style>\n.login-background {\n  color-scheme: light;\n  --background: 0 0% 100%;\n  --foreground: 0 0% 7%;\n  --card: 0 0% 100%;\n  --card-foreground: 0 0% 7%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 0 0% 7%;\n  --muted: 0 0% 97%;\n  --muted-foreground: 0 0% 45%;\n  --accent: 0 0% 96%;\n  --accent-foreground: 0 0% 7%;\n  --border: 0 0% 90%;\n  --input: 0 0% 88%;\n  --ring: 0 0% 7%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n  background: #ffffff;\n}\n.login-content > div {\n  max-width: 380px;\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: 40px;\n}\n.login-logo-box img {\n  max-height: 28px;\n}\n.signin-methods > div {\n  height: auto;\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n.signin-methods [role='tablist'] {\n  justify-content: flex-start;\n  gap: 20px;\n}\n.signin-methods [role='tab'] {\n  flex: none !important;\n  padding: 0 0 6px;\n  border-radius: 0;\n  background: transparent !important;\n  color: #a3a3a3;\n  font-size: 14px;\n  font-weight: 500;\n  box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  color: #111111;\n  box-shadow: inset 0 -1.5px 0 #111111 !important;\n}\n.login-form label {\n  color: #737373;\n  font-size: 13px;\n  font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 44px;\n  padding: 0;\n  border: none;\n  border-bottom: 1px solid #e5e5e5;\n  border-radius: 0;\n  background: transparent;\n  color: #111111;\n  font-size: 16px;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-bottom-color: #111111;\n  box-shadow: 0 1px 0 #111111;\n}\n.login-form [role='checkbox'] {\n  border-color: #d4d4d4;\n  border-radius: 3px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #111111;\n  border-color: #111111;\n  color: #ffffff;\n}\n.login-form a {\n  color: #111111;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 48px;\n  margin-top: 8px;\n  border-radius: 999px;\n  background: #111111;\n  color: #ffffff;\n  font-size: 15px;\n  font-weight: 500;\n  box-shadow: none;\n}\n.login-form .login-button:hover {\n  background: #111111;\n  opacity: 0.85;\n}\n.login-form .login-signup-link {\n  justify-content: flex-start;\n}\n#footer {\n  color: #a3a3a3;\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: 0 0% 7%;\n  --card: 0 0% 100%;\n  --card-foreground: 0 0% 7%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 0 0% 7%;\n  --muted: 0 0% 97%;\n  --muted-foreground: 0 0% 45%;\n  --accent: 0 0% 96%;\n  --accent-foreground: 0 0% 7%;\n  --border: 0 0% 90%;\n  --input: 0 0% 88%;\n  --ring: 0 0% 7%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n  background: #ffffff;\n}\n.login-content {\n  padding-top: 12px;\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: 40px;\n}\n.login-logo-box img {\n  max-height: 28px;\n}\n.signin-methods > div {\n  height: auto;\n  padding: 0;\n  border: none;\n  background: transparent;\n}\n.signin-methods [role='tablist'] {\n  justify-content: flex-start;\n  gap: 20px;\n}\n.signin-methods [role='tab'] {\n  flex: none !important;\n  padding: 0 0 6px;\n  border-radius: 0;\n  background: transparent !important;\n  color: #a3a3a3;\n  font-size: 14px;\n  font-weight: 500;\n  box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  color: #111111;\n  box-shadow: inset 0 -1.5px 0 #111111 !important;\n}\n.login-form label {\n  color: #737373;\n  font-size: 13px;\n  font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 44px;\n  padding: 0;\n  border: none;\n  border-bottom: 1px solid #e5e5e5;\n  border-radius: 0;\n  background: transparent;\n  color: #111111;\n  font-size: 16px;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-bottom-color: #111111;\n  box-shadow: 0 1px 0 #111111;\n}\n.login-form [role='checkbox'] {\n  border-color: #d4d4d4;\n  border-radius: 3px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #111111;\n  border-color: #111111;\n  color: #ffffff;\n}\n.login-form a {\n  color: #111111;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 48px;\n  margin-top: 8px;\n  border-radius: 999px;\n  background: #111111;\n  color: #ffffff;\n  font-size: 15px;\n  font-weight: 500;\n  box-shadow: none;\n}\n.login-form .login-button:hover {\n  background: #111111;\n  opacity: 0.85;\n}\n.login-form .login-signup-link {\n  justify-content: flex-start;\n}\n#footer {\n  color: #a3a3a3;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>"
}

Bare

会改哪些设置

套用到应用

更多登录主题

Aurora

Backdrop

Blueprint