Sketch · Sign-in theme
Sketch
Drawn by hand on ruled notebook paper: wobbly ink outlines, a handwritten typeface, wavy underlines and a marker-colored button, all slightly tilted. It loads the Patrick Hand font from Google Fonts. Organization admins can install it.
Verified by CasdoorLightHand-drawnPlayfulWeb font
What it sets
| Theme | default |
|---|---|
| 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.
{
"name": "<application name>",
"organization": "<organization>",
"themeData": {
"themeType": "default",
"colorPrimary": "#2b2b2b",
"borderRadius": 8,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');\n.login-background {\n color-scheme: light;\n --background: 48 60% 97%;\n --foreground: 0 0% 15%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 15%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 15%;\n --muted: 48 40% 93%;\n --muted-foreground: 0 0% 30%;\n --accent: 48 40% 93%;\n --accent-foreground: 0 0% 15%;\n --border: 0 0% 17%;\n --input: 0 0% 17%;\n --ring: 0 0% 17%;\n font-family: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive;\n font-size: 18px;\n background-color: #fdfbf3;\n background-image: linear-gradient(90deg, transparent 79px, #f3b6b6 79px, #f3b6b6 81px, transparent 81px), linear-gradient(#d9e6f2 1.5px, transparent 1.5px);\n background-size: 100% 100%, 100% 32px;\n}\n.login-content > div {\n max-width: 440px;\n}\n\n.login-panel {\n border: 2.5px solid #2b2b2b;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: #ffffff;\n box-shadow: 6px 8px 0 rgba(43, 43, 43, 0.12);\n transform: rotate(-0.6deg);\n}\n.login-topbar button {\n color: #2b2b2b;\n}\n.login-form {\n font-size: 18px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n gap: 10px;\n overflow: visible;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n padding: 2px 12px;\n border: 2px solid transparent;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: transparent !important;\n color: #555555;\n font-family: inherit;\n font-size: 17px;\n box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-color: #2b2b2b;\n background: #ffe066 !important;\n color: #2b2b2b;\n}\n.login-form label {\n color: #2b2b2b;\n font-size: 18px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 46px;\n border: 2px solid #2b2b2b;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: #ffffff;\n color: #2b2b2b;\n font-family: inherit;\n font-size: 18px;\n box-shadow: 2px 3px 0 rgba(43, 43, 43, 0.15);\n}\n.login-form .login-password input:not([type='checkbox']):not([type='radio']) {\n border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n box-shadow: 3px 4px 0 #ffe066;\n}\n.login-form [role='checkbox'] {\n width: 20px;\n height: 20px;\n border: 2px solid #2b2b2b;\n border-radius: 6px 3px 7px 3px / 3px 7px 3px 6px;\n background: #ffffff;\n color: #2b2b2b;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffe066;\n color: #2b2b2b;\n}\n.login-form a {\n color: #2b2b2b;\n font-size: 18px;\n font-weight: 400;\n text-decoration: underline;\n text-decoration-style: wavy;\n text-decoration-color: #e8590c;\n text-underline-offset: 4px;\n}\n.login-form .login-button {\n height: 50px;\n border: 2.5px solid #2b2b2b;\n border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;\n background: #ffe066;\n color: #2b2b2b;\n font-family: inherit;\n font-size: 21px;\n font-weight: 400;\n box-shadow: 3px 4px 0 #2b2b2b;\n transition: transform 0.1s, box-shadow 0.1s;\n}\n.login-form .login-button:hover {\n background: #ffe066;\n box-shadow: 1px 2px 0 #2b2b2b;\n transform: translate(2px, 2px) rotate(-0.4deg);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: #2b2b2b;\n font-size: 18px;\n}\n#footer {\n color: #555555;\n font-size: 15px;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');\n.login-background {\n color-scheme: light;\n --background: 48 60% 97%;\n --foreground: 0 0% 15%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 15%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 15%;\n --muted: 48 40% 93%;\n --muted-foreground: 0 0% 30%;\n --accent: 48 40% 93%;\n --accent-foreground: 0 0% 15%;\n --border: 0 0% 17%;\n --input: 0 0% 17%;\n --ring: 0 0% 17%;\n font-family: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive;\n font-size: 18px;\n background-color: #fdfbf3;\n background-image: linear-gradient(90deg, transparent 27px, #f3b6b6 27px, #f3b6b6 29px, transparent 29px), linear-gradient(#d9e6f2 1.5px, transparent 1.5px);\n background-size: 100% 100%, 100% 32px;\n}\n.login-content {\n padding-left: 14px;\n padding-right: 18px;\n}\n.login-background .login-content .login-panel.login-panel-bleed,\n.login-panel {\n border: 2.5px solid #2b2b2b;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: #ffffff;\n box-shadow: 6px 8px 0 rgba(43, 43, 43, 0.12);\n transform: rotate(-0.6deg);\n}\n\n.login-background .login-content .login-panel.login-panel-bleed {\n padding-top: 24px;\n padding-bottom: 6px;\n}\n.login-topbar button {\n color: #2b2b2b;\n}\n.login-form {\n font-size: 18px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n gap: 10px;\n overflow: visible;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n padding: 2px 12px;\n border: 2px solid transparent;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: transparent !important;\n color: #555555;\n font-family: inherit;\n font-size: 17px;\n box-shadow: none !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-color: #2b2b2b;\n background: #ffe066 !important;\n color: #2b2b2b;\n}\n.login-form label {\n color: #2b2b2b;\n font-size: 18px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 46px;\n border: 2px solid #2b2b2b;\n border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;\n background: #ffffff;\n color: #2b2b2b;\n font-family: inherit;\n font-size: 18px;\n box-shadow: 2px 3px 0 rgba(43, 43, 43, 0.15);\n}\n.login-form .login-password input:not([type='checkbox']):not([type='radio']) {\n border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n box-shadow: 3px 4px 0 #ffe066;\n}\n.login-form [role='checkbox'] {\n width: 20px;\n height: 20px;\n border: 2px solid #2b2b2b;\n border-radius: 6px 3px 7px 3px / 3px 7px 3px 6px;\n background: #ffffff;\n color: #2b2b2b;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffe066;\n color: #2b2b2b;\n}\n.login-form a {\n color: #2b2b2b;\n font-size: 18px;\n font-weight: 400;\n text-decoration: underline;\n text-decoration-style: wavy;\n text-decoration-color: #e8590c;\n text-underline-offset: 4px;\n}\n.login-form .login-button {\n height: 50px;\n border: 2.5px solid #2b2b2b;\n border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;\n background: #ffe066;\n color: #2b2b2b;\n font-family: inherit;\n font-size: 21px;\n font-weight: 400;\n box-shadow: 3px 4px 0 #2b2b2b;\n transition: transform 0.1s, box-shadow 0.1s;\n}\n.login-form .login-button:hover {\n background: #ffe066;\n box-shadow: 1px 2px 0 #2b2b2b;\n transform: translate(2px, 2px) rotate(-0.4deg);\n}\n.login-form .login-signup-link,\n.login-form .login-forget-password label {\n color: #2b2b2b;\n font-size: 18px;\n}\n#footer {\n color: #555555;\n font-size: 15px;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>"
}More sign-in themes
View all
Aurora
Sign-in themeA 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 themeYour 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 themeNothing 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