플로(FLO) 뮤직 PC 웹에 어두운 모드 기능을 추가하는 Userscript

최근 플로(FLO) 뮤직(https://www.music-flo.com/) 이라는 음원 스트리밍 사이트를 알게되었다. 마침 휴대폰 통신사가 SKT 인 사용자에게 6개월 간 50% 할인을 제공하는 이벤트를 진행 중이길래 결제하여 이용하게 되었다. 스마트폰의 경우에는 전용 어플을 이용하면 되고, PC의 경우 별도의 클라이언트 설치 없이 웹으로 접속해 이용하면 된다.

그런데 웹으로 이용할 때의 배경이 하얀색이다보니 늦은 밤이나 새벽에 작업할 때는 너무 밝아서 눈이 부셨다. 그래서 어두운 모드 기능을 추가하는 Userscript(사용자 확장 기능)를 만들었다.

FLO 뮤직 PC 웹에 어두운 모드 기능을 추가하는 Userscript

유저스크립트를 설치 후 새로고침 하면 자동으로 어두운 모드가 활성화된다. 이 스크립트의 동작은 어두운 색상에 해당하는 css 를 On/Off 하는 것이 전부이고, 모드의 On/Off 여부만을 유저스크립트 데이터로 저장한다.

개인적인 용도로 사용하려고 만들었지만 혹시 필요한 사람이 있을 수도 있기에 올려둔다.

미리보기

페이지 상단에 추가된 [어두운 모드 ON / OFF] 버튼을 이용하여 켜고 끌 수 있다.

모든 페이지의 모든 동작에 대해서 테스트 한 것은 아니라서 일부 이상하게 보이는 페이지가 있을 수 있다.

현재는 정상적으로 동작하지만, 추후 홈페이지 개편이 있을 경우 제대로 보이지 않을 수도 있다. 이 경우 Userscript 를 비활성화 or 삭제해주면 될 것이다.

설치하기

1. 브라우저에 맞는 Tampermonkey 확장 기능을 설치한다.
   Firefox - Tampermonkey
   Chrome - Tampermonkey
2. 확장기능 설치 후, https://raw.githubusercontent.com/nomomo/FLO-Music-Dark/master/FLO-Music-Dark.user.js 을 접속하면 뜨는 창에서 스크립트를 설치한다.
   

Github에 코드를 올려놨다. https://github.com/nomomo/FLO-Music-Dark

주의: 본 스크립트를 설치 및 사용하며 브라우저 과부하로 인한 응답 없음/뻗음 등 으로 인한 데이터 손실 등 문제 발생 시 개발자는 책임지지 않음(보고된 문제는 없음)