Chrome을 이용하여 Discord에 테마 추가하기

일반적으로 디스코드에는 Dark, White 두 가지 테마가 있습니다. 하지만 우리는 그것을 원하는게 아니죠. 저희는 Chrome에서 지원하는 앱 기능으로 Discord의 테마를 바꿔볼겁니다.

시작하기 전에…

이 방법은 공식 윈도우 클라이언트를 이용한 방법이 아니므로 다음과 같은 일이 발생할 수 있습니다.

기존보다 메모리 사용량이 증가할 수 있습니다.

사전 준비

Chrome에 Stylish 또는 Stylus 등 페이지의 CSS 를 조정할 수 있게 하는 확장기능을 설치해야 합니다. 여기에서는 Stylish을 설치하여 진행을 하도록 하겠습니다.

Chrome에서 디스코드 앱 생성

Chrome으로 디스코드 웹 클라이언트에 접속합니다. Chrome에서 오른쪽 위 버튼 ( > 도구 더보기 > 바로가기 만들기... 를 클릭합니다.

알림에서 창으로 열기에 체크를 하고 만들기를 클릭합니다.

Chrome Discord 앱이 생성되었습니다. 동시에 바탕화면에 Discord 바로가기가 생성되었습니다.

Discord Custom CSS 적용하기

이제 Discord의 CSS를 수정 할 차례입니다. CSS를 직접 수정하는것은 일반 사용자에게는 조금 어려울 수 있지만, Stylish에는 다른 사용자가 만들어 놓은 테마를 자동으로 검색하는 기능이 있습니다. 저희는 그 기능을 이용해보도록 하겠습니다.

Chrome으로 만든 Discord 앱에서 오른쪽 위 버튼 ( > Stylish ()를 클릭합니다.

Stylish의 Library 탭에서 많은 테마를 확인할 수 있습니다. 여기서 저희는 맨 상단에 위치하고 있는 ‘Clean Discord! by Ctrl W‘ 를 설치 해보겠습니다.

디스코드의 CSS가 변경되었습니다. 왼쪽 채널 바, 그리고 오른쪽 상태 바가 숨겨지고 마우스를 갖다 대면 다시 나타나는것을 확인할 수 있습니다.

Discord 배경이미지 바꾸기

Chrome으로 만든 Discord 앱에서 오른쪽 위 버튼( > Stylish() > Installed 탭을 들어가 설치한 테마의 Edit (버튼을 클릭합니다.

뭔가 무서운 화면이 나오지만, 걱정하지 않으셔도 됩니다. 저희가 바꿀 부분은 저 중에 극히 일부입니다. 맨 윗줄을 봅시다.

/*--- BACKGROUND ---*/
body {
    background: url("https://cdn.discordapp.com/attachments/622572402605293573/632100752214458368/Konachan.com_-_289931.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

background: url 부분을 원하는 사진의 링크로 수정합니다. 저는 Discord에 사진을 올리고, 그 사진의 url을 적어넣었습니다.

/*--- BACKGROUND ---*/
body {
    background: url("https://cdn.discordapp.com/attachments/574261461262794813/638662310918881281/24.png"); /* 링크를 수정하였습니다 */

수정 후 왼쪽 메뉴바에 Save 버튼을 클릭합니다.