이 튜토리얼은 순전히 불필요한 내용입니다. 단지 개인적으로 색상을 조금 바꾸는 것이 더 보기 좋다고 생각했을 뿐입니다. 아무래도 무, 배추처럼 각자 취향이 다르니 원래 색상을 좋아하는 사람도 있겠지만, 그래도 기록해 둡니다. 혹시 저처럼 다른 색상으로 바꾸는 것을 좋아하는 사람이 있을지도 모르니까요. 먼저 이미지를 올립니다.

과정

먼저 검색창의 클래스명을 찾습니다. F12를 눌러 요소를 검사합니다.

.Search-input:before 클래스명을 확인한 다음 열어 봅니다.

/vendor/flarum/core/less/lib/Search.less

아래 그림과 같이 수정합니다. 왼쪽은 수정된 버전이고, 오른쪽은 원본 버전입니다.

다음 CSS로 수정해야 합니다.

background: #2aaaff;
color: #fff;
border-radius: 4px 0 0 4px;
padding-left: 40px;
padding-right: 10px;

Background는 웹사이트 테마 색상과 동기화합니다.

background: #2aaaff; 
改成
background: @primary-color;