2024-10-27 앱 다크모드 특정색 변경

오늘은 특정 뷰에 color를 다크모드일때 바꿔주는 방법에 대해서 포스팅 해보려 한다.

 

 

먼저 레이아웃을 보자.

다크모드가 꺼져있는 상태

 

다크모드가 켜진 상태

 

사실 두 레이아웃에서 사용되는 View는 모두 같은 View지만

각 View들의 특정 속성들만 다크모드일 때 변경함으로써 위와같이 레이아웃을 짤 수 있다.

 

그렇다면 다크모드일 때 색상을 바꾸는것부터 알아보자.

 

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    
    <!-- 다크모드 일때도 흰색 -->
    <color name="onlyWhite">#FFFFFFFF</color>
    
    <color name="grey">#637381</color>

    <!-- 숫자 버튼 색상 -->
    <color name="lightGrey">#F5F5F5</color>

    <!-- 부호 버튼 색상 -->
    <color name="signGrey">#e9ecef</color>

    <!-- 그라데이션 색상 -->
    <color name="startGradient">#ED0E98</color>
    <color name="endGradient">#FE5A2D</color>

</resources>

 

colors 파일을 이용해 먼저 기존 컬러들을 설정해 준다.

여기서 설정한 color가 일반 Day모드 일때 적용되는 color가 되는것이다.

 

 

그리고 colors.xml을 night 전용으로 하나 더 생성해준다.

 

Packages

 

values-night 패키지에 colors.xml을 만들어주게 되면

 

 

아래 이미지처럼 colos.xml(night) 파일이 만들어진다.

 

 

만든 colors.xml(night) 파일에 다크모드일 때 바뀌는 색상에 대해 정의해주면 끝나게 된다.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="black">#FFFFFFFF</color>
    <color name="white">#FF000000</color>

    <!-- 숫자 버튼 색상 -->
    <color name="lightGrey">#27292E</color>

    <!-- 부호 버튼 색상 -->
    <color name="signGrey">#333333</color>

</resources>

 

검은색은 흰색으로 흰색은 검은색으로 지정해주고

나머지 바뀌는 색상값만 정의 해주면 끝난다.

 

기존 정의한 color를 그대로 사용하고 싶다면

다크모드일때 색상코드를 작성해주지 않으면 된다.

 

 

위처럼 적용하고 

Split이나 Design에서 Mode를 지정해주면서 레이아웃을 비교해보면

앞서 위에서 본 이미지와 같이 적용할 수 있다.

 

 

기존에 만든 앱들의 경우 이러한 다크모드를 꺼놓는 설정으로 만들긴 했지만

사람들이 많이 사용하는 카카오톡이나 기타 앱들의 경우 대부분 다크모드가 적용되어 있는 앱들이 대부분이다.

 

그렇기 때문에 이러한 다크모드의 경우도 고려해 앱을 설계하는것도 필요하다고 생각한다.

 

 

레이아웃 코드 깃허브 참고

https://github.com/nam-su/CarculatorExample/tree/master

GitHub - nam-su/CarculatorExample