Skip to main content

Custom CSS

If our fine-tuning UI doesn’t fully align with your brand, use Custom CSS to tailor your sign-in experience. Simply add your CSS code to our editor and instantly see the changes.

Custom CSS in Logto Console​

  1. Go to Console > Sign-in experience > Branding > Custom CSS.
  2. Editing CSS code in the left editor, it will render lively in the right preview modal immediately. Note: the code editor only supports the CSS code so far. Not HTML or Javascript.
  3. Saving changes.
  4. Don’t forget to click the “Live Preview” button to check the changes on all pages.

To view the componentized interface design for Logto, you can either navigate to Logto/packages/experience/src on GitHub or open the browser’s "Inspect Elements" tool on the Logto Live preview page.

Examples​

For instance, if you want to give your sign-in page a feel of the Night City for web view, try this CSS:

@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2')
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Share Tech';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2')
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#app * {
  font-family: 'Share Tech';
  letter-spacing: 0.5px;
  --color-type-primary: #ffffff;
  --color-type-secondary: #c9c5d0;
}

#app > div[class$='viewBox'] {
  background-image: url('https://silverhand.io/assets/v-in-nc.jpg');
  background-size: cover;
}

#app main[class*='main'] {
  background-image: url('https://logtoeu.blob.core.windows.net/public-blobs/g3cp4y/m-g3cp4y/2024/01/02/w9j0x57g/gentle-universe.png');
  background-size: cover;
  opacity: 97%;
  min-height: initial;
  padding: 24px;
  padding-bottom: 72px;
  border-radius: 12px;
}

#app main[class*='main'] img[class*='logo'] {
  content: url('https://silverhand.io/assets/cyberpunk-2077.png');
  margin: -20px 0 -12px;
  height: 160px;
}

#app form div[class*='inputField'] > div {
  outline: none;
  border: none;
  border-radius: 4px;
}

#app form div[class*='inputField'] input,
#app form div[class*='inputField'] div[class$='countryCodeSelector'] {
  background: initial;
  background-color: #564f7c;
  font-family: 'Share Tech';
  letter-spacing: 0.5px;
  font-size: 16px;
  font-weight: 600;
}

#app form div[class*='inputField'] > div > input::placeholder,
#app main[class*='main'] > div[class*='wrapper'] > div[class*='divider'],
#app main[class*='main'] > div[class*='wrapper'] > form div[class*='content'],
#app main[class*='main'] > div[class*='wrapper'] > form div[class*='content'] > span {
  color: #a7a5b3;
}

#app main[class*='main'] > div[class*='wrapper'] > div[class*='divider'] > i[class*='line'],
#app
  main[class*='main']
  > div[class*='wrapper']
  > div[class*='terms']
  > i[class*='divider']::after {
  background: rgba(247, 248, 248, 14%);
}

#app button {
  font-weight: 600;
  font-size: 16px;
  border-radius: 4px;
}

#app button[type='submit'] {
  background: linear-gradient(270.84deg, #2fd6fb -24.55%, #6369fc 44.33%, #a741eb 119.2%), #5d34f2;
}

#app div[class*='socialLinkList'] *,
#app div[class*='main'] * {
  font-family: 'Share Tech';
}

#app main[class*='main'] > div[class*='wrapper'] > div[class*='createAccount'] {
  font-family: 'Share Tech';
  color: #ffffff;
}

#app div[class*='socialLinkList'] > button {
  border: none;
  background-color: #645995;
}

Logto custom css use case

note:

Since Logto uses CSS Modules, you may see a hash value in the class property of DOM elements (e.g., a <div> with vUugRG_container). To override these, you can use the $= CSS selector to match elements that end with a specified value. In this case, it should be div[class$=container].

Custom CSS by Management API​

You also can use the Management API PATCH /api/sign-in-exp with body { "customCss": "arbitrary string" } to set customized CSS for the sign-in experience. You should see the value of customCss attached after <title> of the page. If the style has a higher priority, it should be able to override.