Dracula · Sign-in theme

Dracula

Name: Dracula Sign-in theme for Casdoor
Author: casdoor

The Dracula palette: a deep purple-grey night with pink and purple highlights, a gradient button and a cyan link color. CSS only, so organization admins can install it.

Verified by CasdoorDarkColor schemeCSS only

Apply this theme View source

What it sets

Theme	dark
Border radius	8px
Form position	Center
Custom CSS	Yes
Custom CSS Mobile	Yes

Everything is on the application's UI Customization tab in Casdoor, so you can keep adjusting it after applying the theme.

Apply it to an application

Enter the application below, adjust the theme's settings, and copy the JSON.
In the Casdoor console, open Applications, edit that application, click Import JSON at the top, paste the JSON and click OK.
Click Save. The sign-in page uses the theme from the next visit.

OrganizationApplication nameAccent color

Focused fields, the selected tab and the start of the button gradient, which ends in Dracula pink.

{
  "name": "<application name>",
  "organization": "<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>"
}

More sign-in themes

View all

Aurora

Sign-in theme

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.

LightGlassGradient

Backdrop

Sign-in theme

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.

DarkBackground imageGlass

Bare

Sign-in theme

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.

LightMinimalNo card