PC사용시 밝은 화면은 눈에 부담을 주게 됩니다. 우리는다크모드를 활성화 하여 이 밝은 빛으로부터 도망칠 수 있는데요, 마이크로 소프트에서 기본으로 제공하는 엣지 브라우저의 다크모드 설정 방법에 대해 알아보겠습니다.
개발자라면 특히나 다크모드를 설정해야할 이유가 하나 더 있는데요.
왜냐하면 밝으면 Bug가 꼬이기 때문..... 🙏
엣지 브라우저는 구글의 크롬 브라우저와 같은 크로미움 계열의 브라우저로 비슷한 방법을 통해 크롬 브라우저에서도 설정이 가능합니다. 자세한 방법을 알고싶다면 기존에 작성하였던 크롬 브라우저의 다크모드 적용 방법 포스팅을 참고해주세요.
브라우저 다크모드 설정 하기
엣지 브라우저의 다크모드 설정 방법은 아래와 같습니다. 설정위치만 잘 찾아내면 세부 내용은 너무나 직관적이라 간단하게 설정이 가능합니다.
엣지 브라우저를 켜고 우측 상단의 미트볼 아이콘을 클릭하여 설정으로 진입합니다.
브라우저 디스플레이 탭으로 이동합니다.
전체적인 모양 메뉴에서 원하는 모드를 선택할 수 있습니다.
- 시스템 기본값: OS의 설정을 따릅니다.
- 밝게: 밝은 모드를 항상 유지합니다.
- 어둡게: 어두운 모드를 항상 유지합니다.
시스템 기본값 옵션을 통해 시간에 따라 변하는 시스템의 테마를 따라서 다크/라이트 모드가 자동으로 적용되도록 할 수도 있습니다. 시스템의 다크모드를 변경하는 방법이 궁금하시다면 OS의 다크모드(어두운 모드) 설정을 참고해주세요.
위와같은 방법으로 엣지브라우저의 테마를 설정할 수 있습니다만 이 방법은 브라우저의 외관과 시작페이지의 테마에만 적용이 가능합니다.
다크모드가 적용되지 않는 페이지는 여전히 웹페이지에서 제공하는 내용으로만 봐야하죠.
웹페이지 다크모드 적용, 다크모드 히든모드 적용하기
이번에는 크로미움 계열 브라우저에서 제공하는 웹 컨텐츠 자동 다크모드 기능을 사용하는 방법입니다. 이방법을 통해 다크모드를 제공하지 않는 웹페이지의 컨텐츠도 다크모드가 적용된듯한 효과를 주어 눈의 피로를 덜어줄 수 있습니다.
좌측 텍스트를 복사하여 주소창에 붙여넣고 이동합니다.
edge://flags 로 진입하면 브라우저에서 제공하는 여러 실험기능들을 확인할 수 있습니다.
위의 주소는 flags중에 dark모드를 즉시 찾을 수 있는 코드로 우리가 찾고있는Auto Dark Mode Web Contents기능에 바로 음영표시를 해 줍니다.Auto Dark Mode Web Contents기능을 활성화 합니다.
우측의 Default를 Enabled로 변경하면 기본 모드로 적용이 가능하며, 그 아래로는 웹컨텐츠 색을 변경하는 여러가지 모드가 포함되어 있습니다.
설정하게되면 웹페이지의 컨텐츠가 아래와 같이 자동으로 다크모드로 변하게 됩니다.
위와같은 방법으로 엣지브라우저에서 다크모드를 설정할 수 있습니다.