[sencha touch] theme 설정하기

이전 내용에서 scss파일을 수정하여 이미지 버튼과 버튼효과 버튼 색깔설정에 대해 경험해 보았습니다.

이번에는 sencha theme를 수정해보는 내용을 설명하겠습니다.

sencha project를 생성하여 (project 생성방법 : http://squll1.tistory.com/entry/sencha-touch-mvc%ED%8C%A8%ED%84%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 )

실행을하면 다음과 같은 화면이 나타납니다.

이 파란 색깔이 마음에 드시는분도 있겠지만 저는 마음에 들지 않아 바꿔 보도록 하겠습니다.

그럼 resources -> sass -> app.scss 파일을 열어 줍니다.

파일을 열면 다음과 같은 내용이 나올 겁니다.

우리는 이 scss파일에 코드를 추가하여 전체적인 theme를 바꿔 보도록 하겠습니다.

상단 타이틀바와 하단 탭바의 색깔을 바꿔 보도록 하겠습니다.

아래와 같이 $base-color 값을 설정하면 됩니다.

$base-color값을 설정후 다시 새로 고침하면 화면이 바뀌지 않는데

그 이유는 이 scss파일을 컴파일 해줘야 css파일이 생성되고 우리는 생성된 css파일을 적용하기 때문입니다.

컴파일을 하는 방법은 터미널 창을 열고 scss파일이 있는 경로로 이동 합니다.

이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.

그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.

컴파일이 끝나고 새로고침을 해보면 새로운 색깔이 적용된걸 확인 할 수 있습니다.

다음으로 타이틀바와 탭바에 효과를 적용해 보도록 하겠습니다.

아래와 같이 $base-gradient값을 설정하면 됩니다.

저는 glossy효과를 설정했습다. 효과의 종류에는 glossy, bevel, flat, matte가 있습니다.

다시 scss파일을 컴파일하고 새로고침 해보면 타이틀바와 탭바에 광택효과가 적용된걸 확인 할 수 있습니다.

다음으로 화면의 background-color를 바꿔보도록 하겠습니다.

background-color는 $page-bg-color값을 사용하면 됩니다.

지금 배경색은 회색인데 흰색으로 바꿔 보겠습니다.

다시 scss파일을 컴파일 하고 실행해 보면 다음과 같이 흰색으로 바뀐것이 보입니다.

이번에는 하단 탭바의 glossy효과만 다른 효과로 바꿔 보도록 하겠습니다.

이 효과는 $tabs-bar-gradient값을 설정하면 됩니다.

아래와 같이 bevel효과를 설정하고

컴파일 후 실행해 보면

상단 타이블바는 glossy효과 하단 탭바는 bevel효과가 적용됐습니다.

이제 상단 타이틀바만의 효과를 바꾸고 싶다면 $toolbar-gradient값을 설정하면 됩니다.

컴파일 후 실행해 보면 다음과 같이 상단 타이틀바도 flat효과가 적용된걸 확인 할 수 있습니다.

타이블바와 탭바 모두 같은 효과를 지정하려면 앞에 설명했던 $base-gradient값만 설정하면 됩니다.

다음으로 현재 탭바의 아이콘 색이 빨간색인데 이 색을 흰색으로 바꿔 보도록 하겠습니다.

탭바 아이콘 색은 $tabs_dark_active_color값을 설정하면 됩니다.

컴파일 하고 실행해 보면 탭바 아이콘 색이 빨간색에서 흰색으로 바뀐걸 확인 할 수 있습니다.

이 외에도 theme를 수정할 수 있는 많은 값들이 있지만

여기까지 설명하겠습니다.