안드로이드 앱 테마에 따른 색상 변경하기

처음으로는 기존에 있는 색상을 바꾸지 않은 상태에서 AppCompatDelegate 을 이용하여 일반모드와 다크모드를 변경하는 코드를 작성해 보겠습니다.
AppCompatDelegate는 Android의 AppCompat 라이브러리에서 제공하는 클래스 중 하나이며, 주로 app의 테마와 UI 모드를 동적으로 변경하는 데 사용합니다.
 
사용 예제로는 다름와 같습니다.

// 다크 테마
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// 일반 테마
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
// 시스템 설정에 따른 테마
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)

 
중복되는 부분을 함수로 변경하여 작성한다면 하기와 같이 줄일 수 있습니다.

changeTheme(AppCompatDelegate.MODE_NIGHT_YES)
changeTheme(AppCompatDelegate.MODE_NIGHT_NO)
changeTheme(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
private fun changeTheme(mode: Int) {
	AppCompatDelegate.setDefaultNightMode(mode)
}

 
별도의 색상 지정 및 테마 설정 없이 상기 코드만을 이용하면 하기 영상 같이 만들 수 있습니다.

 
전체 코드 git
https://github.com/Lst-1995-kotlin/AOS_STUDY/tree/2c27c4d700e5a4a3b9551e90a97aac82a5bdc2f6/theme_study

AOS_STUDY/theme_study at 2c27c4d700e5a4a3b9551e90a97aac82a5bdc2f6 · Lst-1995-kotlin/AOS_STUDY

 
 
이번에는 색상을 추가하여 테마 변경에 따른 색상 변화를 확인해보겠습니다.
app\src\main\res\values\colors.xml 에 일반 테마에 사용할 색상과 다크 테마에 사용할 색상을 넣어 줍니다.
(해당 과정은 추후 피그마를 사용할 경우 매우 간단하게 넣어 줄 수 도 있습니다. 이 글은 해당 내용에 대해 다루지 않습니다.)
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="primary_light">#03A9F4</color>
    <color name="primary_night">#CC4BE2</color>
    <color name="text_light">#168E83</color>
    <color name="text_night">#ACBC0F</color>
</resources>

 
 
이후
app\src\main\res\values\themes.xml
app\src\main\res\values-night\themes.xml
테마를 가지고 있는 두 파일 내에 동일한 아이템명으로 작성하되, 색상값만 다르게 넣어 줍니다.

// 일반 테마
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Theme_study" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary_light</item>
        <item name="colorOnSurface">@color/text_light</item>
    </style>
</resources>

// 다크 테마
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Theme_study" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary_night</item>
        <item name="colorOnSurface">@color/text_night</item>
    </style>
</resources>

 
 
해당 코드만 작성한 뒤 테마를 변경하게 된다면 기존과 다르게 버튼 색이 다른 색으로 변경 됨을 알 수 있습니다.
 
이번에는 style를 이용하여 테마에 따른 색상 변경을 하는 방법입니다.
app\src\main\res\values\style.xml 파일이 없다면 만들어 주시고 만들어 주신다음에는 하기와 같이 입력합니다.
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="custom_button_style" >
        <item name="background">?attr/colorPrimary</item>
        <item name="android:textColor">?attr/colorOnSurface</item>
    </style>
    <style name="custom_tv_style">
        <item name="android:textColor">?attr/colorOnSurface</item>
    </style>
</resources>

 
 

잠깐!!!  ?arrt 연산자

해당 연산자는 Android의 테마 시스템에서 사용되는 특수 구문으로, 현재 테마에서 정의된 속성 값을 참조할 때 사용되며, 이를 통해 특정 속성의 값을 직접 하드코딩하지 않고, 테마에 따라 동적으로 변경 할 수 있습니다.
 
 
이번에는 activity_main.xml 파일로 이동한 후 하기와 같이 코드를 추가해줍니다.

// 버튼
style ="@style/custom_button_style"
// 텍스트 뷰
style="@style/custom_tv_style"

 
이제 테마 변경에 따라서 버튼의 색상 및 버튼 텍스트 색상, 하기에 있는 텍스트 뷰의 텍스트 색상까지 변경하는 법을 알아보았습니다.
?arrt 연산자는 xml 파일 내부에서 사용할 수 있어 하기와 같이 사용할 수도 있습니다.
하지만 동일한 모양의 뷰들을 여러번 사용할 때마다 다른 설정까지 포함해서 하는 경우는 오히려 유지보수 측면에서 어렵기 때문에 스타일을 통해서 색상을 관리하는 편이 매우 유용하다고 생각하기에 하기와 같은 코드를 xml 파일 내 직접적으로 사용하는 것은 저는 추천하지 않습니다.

android:textColor="?attr/colorPrimary"/>

 

 
마지막 전체 코드
https://github.com/Lst-1995-kotlin/AOS_STUDY/tree/71166f30475942217ed962eac46c87d116e85684/theme_study

AOS_STUDY/theme_study at 71166f30475942217ed962eac46c87d116e85684 · Lst-1995-kotlin/AOS_STUDY