🗒️ Light Mode (4)

1. 2023.05.16 [VS Code] 비주얼 스튜디오 코드 다크/라이트 모드 자동 전환 기능 켜는 방법 (Auto Detect Color Scheme)

   비주얼 스튜디오 코드 다크/라이트 모드 자동 전환 기능 켜는 방법(Auto Detect Color Scheme) 들어가며 비주얼 스튜디오 코드(VS Code)를 사용할 때, 시스템의 모드(라이트/다크)에 따라 테마가 바뀌도록 설정해보자. 보통 대부분의 프로그램은 이 기능(Auto Theme Sync)을 지원한다. 몇몇 VS Code는 자동으로 이 기능이 켜져 있을 수도 있으나, 몇몇 VS Code는 이 기능이 자동으로 설정되어 있지 않아서 이 기능을 쓰려면 따로 설정해줘야 한다. 방법 VS Code 상단의 @[File]@ 메뉴 → @[Preference]@ → @[Settings]@ 순으로 들어간다. (혹은 단축키 @[Ctrl]@ + @[,]@를 누른다.) @[Settings]@ 페이지의 상단 검색창에 ..
2. 2023.05.13 [Widnows] 윈도우 11 다크/라이트 모드 바꾸는 방법 (수동, 단축키)

   윈도우 11 다크/라이트 모드 바꾸는 방법 (수동, 단축키) 들어가며 단축키로 간단하게 윈도우 11의 다크/라이트 모드를 전환하는 방법을 알아보자. 방법 ① 수동으로 변경하기 수동으로 다크/라이트 모드를 변경하는 방법이다. 변경할 때마다 [설정] > [개인 설정] > [색] > [모드 선택]에서 바꿔주면 된다. 1. 바탕화면 아무곳에 마우스 커서를 올린 후 '마우스 오른쪽 버튼' 클릭! 2. [개인 설정]에서 [색] 탭 클릭! 3. 다크/라이트 모드 선택 ② 단축키로 변경하기 아쉽게도 윈도우 11에서 다크/라이트 모드를 변경할 수 있는 단축키(Shortcut)가 없다. 그래서 별도의 프로그램을 실행하여 사용해야 하는데, 그 프로그램이 @EasyDark@라는 프로그램이다. 💾 EasyDark 프로그램 다운..
3. 2022.11.04 [Notion] 노션(Notion) 다크 모드 설정하는 방법 (Windows)

   노션(Notion) 다크 모드 설정하는 방법 (Windows) 들어가며 윈도우에서 노션 앱을 사용할 때, 간단하게 다크 모드(Dark Mode)를 설정할 수 있다. 방법 노션 앱에서 [설정과 멤버(Settings & Members]에 들어간다. [내 알림과 설정] 탭의 [내 설정] 구간에서 [테마]를 다크 모드로 변경해준다.
4. 2022.09.27 [CSS] 다크/라이트 모드 구현 방법

   다크/라이트 모드 구현 방법 들어가며 CSS를 이용하여 홈페이지에 다크/라이트 모드를 적용할 수 있다. 보통 토글(Toggle) 버튼을 만들어서 사용자가 기호에 따라 원하는 모드로 변경할 수 있도록 한다. (자바스크립트 또는 제이쿼리를 사용해서 구현할 수 있다.) 방법 방법 ① : prefers-color-scheme 미디어 쿼리 이용하기 prefers-color-scheme 미디어 쿼리는 사용자의 OS에 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 CSS 스타일이 적용되도록 해준다. 감지하는 역할만 하기 때문에, 아쉽게도 토글 버튼 등을 이용하여 속성을 변경시킬 수는 없다. (light ↔ dark) @media (prefers-color-scheme: light) { /* 라이트 모드에 적..