Skip to content

Commit 8c0c22b

Browse files
imdevanimdevan
committed
refactor: extract theme colors
1 parent d7e685b commit 8c0c22b

File tree

2 files changed

+65
-29
lines changed

2 files changed

+65
-29
lines changed

‎src/themes/dark/index.js‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { StyleSheet } from 'react-native';
2-
2+
extendableBadgeItemContainer
33
import Colors from '../../constants/colors';
44

55
export const ICONS = {
@@ -9,6 +9,24 @@ export const ICONS = {
99
CLOSE: require('./icons/close.png'),
1010
};
1111

12+
export const THEME = {
13+
badgeDotBackgroundColor: Colors.GREY,
14+
badgeBackgroundColor: Colors.ALTO,
15+
dropDownContainerBackgroundColor: Colors.EBONY_CLAY,
16+
dropDownContainerBorderColor: Colors.BLACK,
17+
itemSeparatorBackgroundColor: Colors.SHUTTLE_GREY,
18+
labelColor: Colors.HEATHER,
19+
ListItemLabelColor: Colors.HEATHER,
20+
modalContentContainerBackgroundColor: Colors.EBONY_CLAY,
21+
modalTitleColor: Colors.HEATHER,
22+
listMessageTextColor: Colors.HEATHER,
23+
searchContainerBorderBottomColor: Colors.SHUTTLE_GREY,
24+
searchTextInputBorderColor: Colors.SHUTTLE_GREY,
25+
searchTextInputColor: Colors.WHITE,
26+
backgroundColor: Colors.EBONY_CLAY,
27+
borderColor: Colors.BLACK
28+
}
29+
1230
export default StyleSheet.create({
1331
arrowIcon: {
1432
height: 20,
@@ -18,7 +36,7 @@ export default StyleSheet.create({
1836
marginLeft: 10,
1937
},
2038
badgeDotStyle: {
21-
backgroundColor: Colors.GREY,
39+
backgroundColor: THEME.badgeDotBackgroundColor,
2240
borderRadius: 10 / 2,
2341
height: 10,
2442
marginRight: 8,
@@ -29,7 +47,7 @@ export default StyleSheet.create({
2947
},
3048
badgeStyle: {
3149
alignItems: 'center',
32-
backgroundColor: Colors.ALTO,
50+
backgroundColor: THEME.badgeBackgroundColor,
3351
borderRadius: 10,
3452
flexDirection: 'row',
3553
paddingHorizontal: 10,
@@ -50,8 +68,8 @@ export default StyleSheet.create({
5068
fontStyle: 'italic',
5169
},
5270
dropDownContainer: {
53-
backgroundColor: Colors.EBONY_CLAY,
54-
borderColor: Colors.BLACK,
71+
backgroundColor: THEME.dropDownContainerBackgroundColor,
72+
borderColor: THEME.dropDownContainerBorderColor,
5573
borderRadius: 8,
5674
borderWidth: 1,
5775
overflow: 'hidden',
@@ -66,7 +84,7 @@ export default StyleSheet.create({
6684
},
6785
extendableBadgeItemContainer: {
6886
marginEnd: 7,
69-
marginVertical: 3,
87+
marginVertical: 3
7088
},
7189
flatListContentContainer: {
7290
flexGrow: 1,
@@ -75,11 +93,11 @@ export default StyleSheet.create({
7593
marginRight: 10,
7694
},
7795
itemSeparator: {
78-
backgroundColor: Colors.SHUTTLE_GREY,
96+
backgroundColor: THEME.itemSeparatorBackgroundColor,
7997
height: 1,
8098
},
8199
label: {
82-
color: Colors.HEATHER,
100+
color: THEME.labelColor,
83101
flex: 1,
84102
},
85103
labelContainer: {
@@ -105,7 +123,7 @@ export default StyleSheet.create({
105123
paddingHorizontal: 10,
106124
},
107125
listItemLabel: {
108-
color: Colors.HEATHER,
126+
color: THEME.ListItemLabelColor,
109127
flex: 1,
110128
},
111129
listMessageContainer: {
@@ -115,30 +133,30 @@ export default StyleSheet.create({
115133
padding: 10,
116134
},
117135
listMessageText: {
118-
color: Colors.HEATHER,
136+
color: THEME.listMessageTextColor,
119137
},
120138
listParentContainer: {},
121139
listParentLabel: {},
122140
modalContentContainer: {
123-
backgroundColor: Colors.EBONY_CLAY,
141+
backgroundColor: THEME.modalContentContainerBackgroundColor,
124142
flexGrow: 1,
125143
},
126144
modalTitle: {
127-
color: Colors.HEATHER,
145+
color: THEME.modalTitleColor,
128146
fontSize: 18,
129147
},
130148
searchContainer: {
131149
alignItems: 'center',
132-
borderBottomColor: Colors.SHUTTLE_GREY,
150+
borderBottomColor: THEME.searchContainerBorderBottomColor,
133151
borderBottomWidth: 1,
134152
flexDirection: 'row',
135153
padding: 10,
136154
},
137155
searchTextInput: {
138-
borderColor: Colors.SHUTTLE_GREY,
156+
borderColor: THEME.searchTextInputBorderColor,
139157
borderRadius: 8,
140158
borderWidth: 1,
141-
color: Colors.WHITE,
159+
color: THEME.searchTextInputColor,
142160
flexGrow: 1,
143161
flexShrink: 1,
144162
margin: 0,
@@ -149,8 +167,8 @@ export default StyleSheet.create({
149167
selectedItemLabel: {},
150168
style: {
151169
alignItems: 'center',
152-
backgroundColor: Colors.EBONY_CLAY,
153-
borderColor: Colors.BLACK,
170+
backgroundColor: THEME.backgroundColor,
171+
borderColor: THEME.borderColor,
154172
borderRadius: 8,
155173
borderWidth: 1,
156174
flexDirection: 'row',

‎src/themes/light/index.js‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,23 @@ export const ICONS = {
99
CLOSE: require('./icons/close.png'),
1010
};
1111

12+
export const THEME = {
13+
badgeDotBackgroundColor: Colors.GREY,
14+
badgeBackgroundColor: Colors.ALTO,
15+
dropDownContainerBackgroundColor: Colors.EBONY_CLAY,
16+
dropDownContainerBorderColor: Colors.BLACK,
17+
itemSeparatorBackgroundColor: Colors.SHUTTLE_GREY,
18+
labelColor: Colors.HEATHER,
19+
ListItemLabelColor: Colors.HEATHER,
20+
modalContentContainerBackgroundColor: Colors.EBONY_CLAY,
21+
modalTitleColor: Colors.HEATHER,
22+
listMessageTextColor: Colors.HEATHER,
23+
searchContainerBorderBottomColor: Colors.SHUTTLE_GREY,
24+
searchTextInputBorderColor: Colors.SHUTTLE_GREY,
25+
backgroundColor: Colors.WHITE,
26+
borderColor: Colors.BLACK
27+
}
28+
1229
export default StyleSheet.create({
1330
arrowIcon: {
1431
height: 20,
@@ -18,7 +35,7 @@ export default StyleSheet.create({
1835
marginLeft: 10,
1936
},
2037
badgeDotStyle: {
21-
backgroundColor: Colors.GREY,
38+
backgroundColor: THEME.badgeDotBackgroundColor,
2239
borderRadius: 10 / 2,
2340
height: 10,
2441
marginRight: 8,
@@ -29,7 +46,7 @@ export default StyleSheet.create({
2946
},
3047
badgeStyle: {
3148
alignItems: 'center',
32-
backgroundColor: Colors.ALTO,
49+
backgroundColor: THEME.badgeBackgroundColor,
3350
borderRadius: 10,
3451
flexDirection: 'row',
3552
paddingHorizontal: 10,
@@ -50,8 +67,8 @@ export default StyleSheet.create({
5067
fontStyle: 'italic',
5168
},
5269
dropDownContainer: {
53-
backgroundColor: Colors.WHITE,
54-
borderColor: Colors.BLACK,
70+
backgroundColor: THEME.dropDownContainerBackgroundColor,
71+
borderColor: THEME.dropDownContainerBorderColor,
5572
borderRadius: 8,
5673
borderWidth: 1,
5774
overflow: 'hidden',
@@ -75,11 +92,11 @@ export default StyleSheet.create({
7592
marginRight: 10,
7693
},
7794
itemSeparator: {
78-
backgroundColor: Colors.BLACK,
95+
backgroundColor: THEME.itemSeparatorBackgroundColor,
7996
height: 1,
8097
},
8198
label: {
82-
color: Colors.BLACK,
99+
color: THEME.labelColor,
83100
flex: 1,
84101
},
85102
labelContainer: {
@@ -105,7 +122,7 @@ export default StyleSheet.create({
105122
paddingHorizontal: 10,
106123
},
107124
listItemLabel: {
108-
color: Colors.BLACK,
125+
color: THEME.ListItemLabelColor,
109126
flex: 1,
110127
},
111128
listMessageContainer: {
@@ -118,21 +135,22 @@ export default StyleSheet.create({
118135
listParentContainer: {},
119136
listParentLabel: {},
120137
modalContentContainer: {
138+
// TODO: add background color
121139
flexGrow: 1,
122140
},
123141
modalTitle: {
124-
color: Colors.BLACK,
142+
color: THEME.modalTitleColor,
125143
fontSize: 18,
126144
},
127145
searchContainer: {
128146
alignItems: 'center',
129-
borderBottomColor: Colors.BLACK,
147+
borderBottomColor: THEME.searchContainerBorderBottomColor,
130148
borderBottomWidth: 1,
131149
flexDirection: 'row',
132150
padding: 10,
133151
},
134152
searchTextInput: {
135-
borderColor: Colors.BLACK,
153+
borderColor: THEME.searchTextInputBorderColor,
136154
borderRadius: 8,
137155
borderWidth: 1,
138156
color: Colors.BLACK,
@@ -146,8 +164,8 @@ export default StyleSheet.create({
146164
selectedItemLabel: {},
147165
style: {
148166
alignItems: 'center',
149-
backgroundColor: Colors.WHITE,
150-
borderColor: Colors.BLACK,
167+
backgroundColor: THEME.backgroundColor,
168+
borderColor: THEME.borderColor,
151169
borderRadius: 8,
152170
borderWidth: 1,
153171
flexDirection: 'row',

0 commit comments

Comments
 (0)