본문 바로가기

다크모드2

[JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 자바스크립트을 활용하여 CSS 속성을 수정할 수 있습니다. 이를 활용하여, 버튼을 클릭했을 때 웹페이지화면을 다크모드/라이트모드로 전환할 수 있는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 setWebDisplayAppearance-HTML을 입력하면 예제 구현에 필요한 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 라이트/다크모드 전환 예제 [사용법] 상단 우측에 있는 버튼을 누르면 다크모드 혹은 라이트모드로 전환할 수 있습니다. 다음으로, 버튼을 누르면 웹페이지가 라이트.. 2021. 6. 26.
[Java][Android] 다크모드 구현하기 안녕하세요! 오늘은 스틱코드를 이용하여 '다크모드'를 구현해보도록 하겠습니다. '다크/라이트 모드'에 사용될 'themes.xml'을 생성해 줍니다. 'themes.xml' 파일을 이용하여 '다크 모드'가 적용 되었을 때와 '라이트 모드(일반)'가 적용되었을 때, xml 파일 내 설정해둔 배경, 글씨 등의 UI 색상이 적용 되도록 진행해 보겠습니다. 1. ThemeUtil 만들기 먼저 '다크/라이트 모드'를 선택한 값에 따라 모드가 바뀌도록 하는 '테마 유틸 클래스'를 생성해보도록 하겠습니다. ThemeUtil.java developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate AppCompatDelegate | Android 개발자.. 2021. 4. 22.