AI 검색서비스 포털의 테마

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 7분

    • 관련 CSS 변수를 업데이트하여 환경 서비스 포털 의 AI 검색 모양과 느낌을 사용자 지정할 수 있습니다.

    다음 CSS 변수는 에서 기능서비스 포털의 AI 검색 모양과 느낌을 제어합니다. 기능에 대한 AI 검색 자세한 내용은 AI 검색 사용을 참조하십시오.

    테마 [sp_theme] 기록의 CSS 변수 필드에서 이러한 변수를 편집할 수 있습니다. 포털 테마와 연결된 CSS 포함을 사용하여 이러한 변수를 구성할 수도 있습니다. 자세한 내용은 다음 주제를 참조하십시오.

    변수 기본값 설명
    $now-sp-font-family-sans-serif "SourceSansPro", Helvetica, Arial, 산세리프 모든 텍스트의 글꼴 집합입니다.
    $now-sp-color--text-primary $gray 다크 선택되지 않은 탭의 색상, Genius 결과 버튼 텍스트, 적중 텍스트 색상, 결과 아이콘, 검색 창 드롭다운 목록 항목 텍스트 및 아이콘 색상입니다.
    $now-sp-text-link--primary--color $gray 다크 검색 결과의 제목 텍스트 색상입니다.
    $now-sp-display-type--tertiary--color $gray 다크 검색 결과의 텍스트 스니펫 색상입니다.
    $now-sp-color--neutral-12 $gray 다크 모바일 뷰에서 패싯의 확장된 아이콘 색상(펼침 단추)입니다.
    $now-sp-global-border-radius 4픽셀 둥근 검색 결과 모서리는 검색 결과 카드가 아닌 컨텐츠 창에 영향을 줍니다. 이 변수는 Genius 결과, Genius 결과의 버튼 및 검색 표시줄 아이콘 가리키기의 배경 강조 표시에도 영향을 줍니다. 이 변수는 패싯에 영향을 주지 않습니다.
    $now-sp-color--focus-ring $brand-기본 탭 포커스 색상입니다.
    $now-sp-tabs--selected--color $brand-기본 선택한 탭의 텍스트 색상입니다. 호버에 포함되지 않습니다.
    $now-sp-tabs--color--hover $brand-기본 마우스를 가져갔을 때 모든 탭의 텍스트 색상입니다.
    $now-sp-tabs--border-color $sp-b-테두리 색상 탭에 밑줄 색상이 표시됩니다.
    $now-sp-tabs--selected--background-color $brand-기본 선택한 탭의 밑줄 색상입니다.
    $now-sp-heading--title-primary--color $gray 다크 색상 필터 레이블.
    $now-sp-checkbox-label--color $gray 다크 필터 항목(확인란 레이블) 색상입니다.
    $now-sp-button--primary--bare--color $link색 패싯 필터에서 모두 지우기 및 지우기 링크 색상.
    $now-sp-button--primary--bare--color--active $link색 클릭 시 패싯 필터에서 모두 지우기 및 링크 색상 지우기.
    $now-sp-button--primary--bare--color--hover $link-호버-컬러  마우스를 올리면 패싯 필터에서 모두 지우기 및 링크 색 지우기.
    $now-sp-pill--selected--background-color $brand-기본 선택한 필터 정제 배경입니다.
    $now-sp-pill--selected--border-color $brand-기본 선택한 필터 정제 테두리 색상입니다.
    $now-sp-button--secondary--background-color $btn-default-bg Genius 결과 버튼 배경.
    $now-sp-button--secondary--color $btn-기본 색상 Genius 결과 버튼 텍스트 색입니다.
    $now-sp-button--secondary--border-color $btn-기본 테두리 Genius 결과 버튼 테두리 색상입니다.
    $now-sp-button--secondary--background-color--hover 어둡게($btn-기본값-배경, 10%) 마우스를 가져갈 때의 Genius 결과 버튼 배경색입니다.
    $now-sp-button--secondary--color--hover $btn-기본 색상 마우스를 가져갈 때의 Genius 결과 버튼 텍스트 색상입니다.
    $now-sp-button--secondary--border-color--hover 어둡게($btn-기본 테두리, 12%) 마우스를 올리면 Genius 결과 버튼 테두리가 표시됩니다.
    $now-sp-button--secondary--background-color--active 어둡게($btn-기본값-배경, 10%) 클릭 시 Genius 결과 버튼 배경.
    $now-sp-button--secondary--color--active $btn-기본 색상 클릭 시 Genius 결과 버튼 텍스트 색입니다.
    $now-sp-button--secondary--border-color--active 어둡게($btn-기본 테두리, 12%) 클릭 시 Genius 결과 버튼 테두리 색상입니다.
    $now-sp-highlighted-value--tertiary--color $gray 다크 Genius 결과 상위 결과 태그 텍스트 색입니다.
    $now-sp-button--border-radius $now-sp-global-border-radius 버튼과 검색 창 버튼의 반경을 구분합니다.
    $now-sp-container--border-radius $now-sp-global-border-radius 검색 결과 카드, Genius 결과 카드 및 검색 결과 컨테이너의 테두리 반경입니다. 개별 결과 간의 테두리에는 영향을 주지 않습니다.
    $now-sp-button--primary-negative--background-color $btn-primary-bg EVAM 작업 확인 모달의 Genius 버튼 배경색입니다.
    $now-sp-button--primary-negative--border-color $btn-기본 테두리 EVAM 작업 확인 모달의 Genius 버튼 테두리 색상입니다.
    $now-sp-button--primary-negative--background-color--hover 어둡게($btn-기본-배경, 10%) EVAM 작업 확인 모달에서 마우스를 가져갈 때의 Genius 버튼 배경색입니다.
    $now-sp-button--primary-negative--border-color--hover 어둡게($btn-기본 테두리, 12%) Genius 버튼 테두리 색상 확인 내에 마우스를 올리면 됩니다.
    $now-sp-button--primary-negative--background-color--active 어둡게($btn-기본-배경, 10%) 확인 모달 내부를 클릭할 때의 Genius 버튼 배경색입니다.
    $now-sp-button--primary-negative--border-color--active 어둡게($btn-기본 테두리, 12%) 확인 모달 내부를 클릭할 때의 Genius 버튼 테두리 색상입니다.
    $now-sp-button--primary--background-color $btn-primary-bg 선택한 필터(알약) 배경색입니다.
    $now-sp-button--primary--border-color $btn-기본 테두리 선택한 필터(정제) 테두리 색상
    $now-sp-button--primary--color $btn-기본 색상 선택한 필터(알약) 색상입니다.
    $now-sp-button--primary--background-color--hover 어둡게($btn-기본-배경, 10%) 호버에서 선택한 필터(정제) 배경색.
    $now-sp-button--primary--border-color--hover 어둡게($btn-기본 테두리, 12%) 호버에서 선택한 필터(정제) 테두리 색상입니다.
    $now-sp-button--primary--background-color--active 어둡게($btn-기본-배경, 10%) 클릭 시 선택한 필터(정제) 배경색입니다.
    $now-sp-button--primary--border-color--active 어둡게($btn-기본 테두리, 12%) 클릭 시 선택한 필터(정제) 테두리 색상입니다.
    $now-sp-rem-factor 5 --classicsponlydonotuse--rem-multipy와 동일한 변수입니다.
    주:
    이 변수를 사용하지 않는 것이 좋습니다.
    $sp-search-result-title-highlight--background-color 없음 검색 결과에서 제목 강조 표시의 텍스트 배경색입니다.
    주:
    이 테마 설정을 적용하려면 다음 예와 같이 관련 EVAM 뷰 템플릿의 sn-search-result-evam-card 구성요소에 대해 값이 "아니오"인 정적 값 removeHitHighlighting을 추가해야 합니다.
    {
  "component": "sn-search-result-evam-card",
  "staticValues": {
    "removeHitHighlighting": {
      "translatable": true,
      "key": "false"
    }
  },
}

    뷰 템플릿의 EVAM 설정 구성에 대한 자세한 내용은 다음 문서를 참조하십시오 Define an EVAM view template.