Nord · Sign-in theme

Nord

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

The Nord palette: arctic slate greys with a frost-blue accent and a cool aurora glow, calm and low in contrast. 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

The button, links and focused fields. Nord's frost colors are #8fbcbb, #88c0d0, #81a1c1 and #5e81ac.

{
  "name": "<application name>",
  "organization": "<organization>",
  "themeData": {
    "themeType": "dark",
    "colorPrimary": "#88c0d0",
    "borderRadius": 8,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 2,
  "formCss": "<style>\n.login-background {\n  color-scheme: dark;\n  --background: 220 16% 22%;\n  --foreground: 218 27% 94%;\n  --card: 222 16% 28%;\n  --card-foreground: 218 27% 94%;\n  --popover: 222 16% 28%;\n  --popover-foreground: 218 27% 94%;\n  --muted: 220 16% 32%;\n  --muted-foreground: 219 28% 70%;\n  --accent: 220 16% 32%;\n  --accent-foreground: 218 27% 94%;\n  --border: 220 17% 36%;\n  --input: 220 17% 36%;\n  --ring: 218 27% 94%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n  background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(143, 188, 187, 0.16) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(180, 142, 173, 0.14) 0%, transparent 70%), #2e3440;\n}\n\n\n.login-content > div {\n  max-width: 420px;\n}\n.login-panel {\n  border: 1px solid #4c566a;\n  border-radius: 14px;\n  background: #3b4252;\n  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);\n}\n.login-background > div:first-of-type button {\n  color: #a3adbf;\n}\n.signin-methods > div {\n  border: 1px solid #4c566a;\n  background: #2e3440;\n}\n.signin-methods [role='tab'] {\n  color: #a3adbf;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  background: #434c5e !important;\n  color: #88c0d0;\n  box-shadow: none !important;\n}\n.login-form label {\n  color: #d8dee9;\n  font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 44px;\n  border: 1px solid #4c566a;\n  border-radius: 8px;\n  background: #2e3440;\n  color: #eceff4;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n  color: #a3adbf;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #88c0d0;\n  box-shadow: 0 0 0 3px color-mix(in srgb, #88c0d0 25%, transparent);\n}\n.login-password button {\n  color: #a3adbf;\n}\n.login-form [role='checkbox'] {\n  border-color: #a3adbf;\n  border-radius: 4px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #88c0d0;\n  border-color: #88c0d0;\n  color: #2e3440;\n}\n.login-form a {\n  color: #88c0d0;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 44px;\n  border-radius: 8px;\n  background: #88c0d0;\n  color: #2e3440;\n  font-weight: 600;\n  box-shadow: none;\n}\n.login-form .login-button:hover {\n  background: #88c0d0;\n  filter: brightness(1.08);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n  color: #d8dee9;\n}\n#footer {\n  color: #a3adbf;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>",
  "formCssMobile": "<style>\n.login-background {\n  color-scheme: dark;\n  --background: 220 16% 22%;\n  --foreground: 218 27% 94%;\n  --card: 222 16% 28%;\n  --card-foreground: 218 27% 94%;\n  --popover: 222 16% 28%;\n  --popover-foreground: 218 27% 94%;\n  --muted: 220 16% 32%;\n  --muted-foreground: 219 28% 70%;\n  --accent: 220 16% 32%;\n  --accent-foreground: 218 27% 94%;\n  --border: 220 17% 36%;\n  --input: 220 17% 36%;\n  --ring: 218 27% 94%;\n  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;\n  background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(143, 188, 187, 0.16) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(180, 142, 173, 0.14) 0%, transparent 70%), #2e3440;\n}\n.login-background > div:first-of-type button {\n  color: #a3adbf;\n}\n.signin-methods > div {\n  border: 1px solid #4c566a;\n  background: #2e3440;\n}\n.signin-methods [role='tab'] {\n  color: #a3adbf;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  background: #434c5e !important;\n  color: #88c0d0;\n  box-shadow: none !important;\n}\n.login-form label {\n  color: #d8dee9;\n  font-weight: 500;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 44px;\n  border: 1px solid #4c566a;\n  border-radius: 8px;\n  background: #2e3440;\n  color: #eceff4;\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n  color: #a3adbf;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-color: #88c0d0;\n  box-shadow: 0 0 0 3px color-mix(in srgb, #88c0d0 25%, transparent);\n}\n.login-password button {\n  color: #a3adbf;\n}\n.login-form [role='checkbox'] {\n  border-color: #a3adbf;\n  border-radius: 4px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #88c0d0;\n  border-color: #88c0d0;\n  color: #2e3440;\n}\n.login-form a {\n  color: #88c0d0;\n  font-weight: 500;\n}\n.login-form .login-button {\n  height: 44px;\n  border-radius: 8px;\n  background: #88c0d0;\n  color: #2e3440;\n  font-weight: 600;\n  box-shadow: none;\n}\n.login-form .login-button:hover {\n  background: #88c0d0;\n  filter: brightness(1.08);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n  color: #d8dee9;\n}\n#footer {\n  color: #a3adbf;\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