본문으로 건너뛰기

커스텀 CSS

우리의 UI 미세 조정이 브랜드와 완전히 일치하지 않는 경우, 커스텀 CSS를 사용하여 로그인 경험을 맞춤화하세요. CSS 코드를 편집기에 추가하고 즉시 변경 사항을 확인할 수 있습니다.

Logto 콘솔에서의 커스텀 CSS​

  1. 콘솔 > 로그인 경험 > 브랜딩 > 커스텀 CSS 로 이동합니다.
  2. 왼쪽 편집기에서 CSS 코드를 편집하면, 오른쪽 미리보기 모달에서 즉시 렌더링됩니다. 참고: 코드 편집기는 현재 CSS 코드만 지원합니다. HTML이나 Javascript는 지원하지 않습니다.
  3. 변경 사항을 저장합니다.
  4. 모든 페이지에서 변경 사항을 확인하려면 "라이브 미리보기" 버튼을 클릭하는 것을 잊지 마세요.

Logto의 컴포넌트화된 인터페이스 디자인을 보려면, GitHub에서 Logto/packages/experience/src로 이동하거나 Logto 라이브 미리보기 페이지에서 브라우저의 "요소 검사" 도구를 열 수 있습니다.

예시​

예를 들어, 웹 뷰에서 로그인 페이지에 Night City 느낌을 주고 싶다면, 다음 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 커스텀 CSS 사용 사례
노트:

Logto는 CSS 모듈을 사용하기 때문에, DOM 요소의 class 속성에서 해시 값을 볼 수 있습니다 (예: vUugRG_container가 있는 <div>). 이를 재정의하려면, $= CSS 선택자를 사용하여 지정된 값으로 끝나는 요소를 매칭할 수 있습니다. 이 경우, div[class$=container]이어야 합니다.

Management API를 통한 커스텀 CSS​

Management API PATCH /api/sign-in-exp를 사용하여 본문 { "customCss": "arbitrary string" }와 함께 로그인 경험을 위한 커스텀 CSS를 설정할 수도 있습니다. customCss의 값은 페이지의 <title> 뒤에 첨부되어야 합니다. 스타일의 우선순위가 높으면, 이를 재정의할 수 있어야 합니다.