Skip to content

Commit e8baa0e

Browse files
amandleamandle
authored
Add support for dark themes (#367)
* add support for a dark theme * fix for text color propagation * set the edit text color
1 parent 98fc39b commit e8baa0e

File tree

12 files changed

+106
-95
lines changed

12 files changed

+106
-95
lines changed

‎app/src/main/java/com/firebase/uidemo/auth/AuthUiActivity.java

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@ public class AuthUiActivity extends AppCompatActivity {
6969
@BindView(R.id.purple_theme)
7070
RadioButton mUsePurpleTheme;
7171

72+
@BindView(R.id.dark_theme)
73+
RadioButton mUseDarkTheme;
74+
7275
@BindView(R.id.email_provider)
7376
CheckBox mUseEmailProvider;
7477

@@ -249,6 +252,10 @@ private int getSelectedTheme() {
249252
return R.style.PurpleTheme;
250253
}
251254

255+
if (mUseDarkTheme.isChecked()) {
256+
return R.style.DarkTheme;
257+
}
258+
252259
return R.style.GreenTheme;
253260
}
254261

‎app/src/main/res/layout/auth_ui_layout.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
android:layout_width="wrap_content"
6363
android:layout_height="wrap_content"
6464
android:text="@string/green_theme" />
65+
66+
<RadioButton
67+
android:id="@+id/dark_theme"
68+
android:layout_width="wrap_content"
69+
android:layout_height="wrap_content"
70+
android:text="@string/dark_theme" />
6571
</RadioGroup>
6672

6773
<TextView

‎app/src/main/res/values-v21/styles.xml

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<resources>
22

33
<style name="PurpleTheme" parent="FirebaseUI">
4+
<item name="android:textColor">#000000</item>
5+
<item name="android:textColorPrimary">@color/material_deep_purple_50</item>
6+
47
<item name="colorPrimary">@color/material_deep_purple_500</item>
58
<item name="android:colorPrimary">@color/material_deep_purple_500</item>
69

@@ -10,10 +13,12 @@
1013
<item name="colorAccent">@color/material_lime_a700</item>
1114
<item name="android:colorAccent">@color/material_lime_a700</item>
1215

13-
1416
<item name="colorControlNormal">@color/material_deep_purple_500</item>
1517
<item name="android:colorControlNormal">@color/material_deep_purple_500</item>
1618

19+
<item name="colorButtonNormal">@color/material_deep_purple_500</item>
20+
<item name="android:colorButtonNormal">@color/material_deep_purple_500</item>
21+
1722
<item name="colorControlActivated">@color/material_deep_purple_a200</item>
1823
<item name="android:colorControlActivated">@color/material_deep_purple_a200</item>
1924

@@ -24,6 +29,9 @@
2429
</style>
2530

2631
<style name="GreenTheme" parent="FirebaseUI">
32+
<item name="android:textColor">@color/material_green_500</item>
33+
<item name="android:textColorPrimary">@color/material_green_50</item>
34+
2735
<item name="colorPrimary">@color/material_green_500</item>
2836
<item name="android:colorPrimary">@color/material_green_500</item>
2937

@@ -33,6 +41,9 @@
3341
<item name="colorAccent">@color/material_purple_a700</item>
3442
<item name="android:colorAccent">@color/material_purple_a700</item>
3543

44+
<item name="colorButtonNormal">@color/material_purple_a700</item>
45+
<item name="android:colorButtonNormal">@color/material_purple_a700</item>
46+
3647
<item name="colorControlNormal">@color/material_green_500</item>
3748
<item name="android:colorControlNormal">@color/material_green_500</item>
3849

@@ -45,6 +56,22 @@
4556
<item name="android:windowBackground">@color/material_green_50</item>
4657
</style>
4758

59+
<style name="DarkTheme" parent="FirebaseUI">
60+
<item name="colorPrimary">@color/primary_material_dark</item>
61+
<item name="colorPrimaryDark">@color/primary_dark_material_dark</item>
62+
<item name="colorAccent">@color/accent_material_dark</item>
63+
<item name="android:colorBackground">@color/background_material_dark</item>
64+
<item name="android:colorForeground">@color/foreground_material_dark</item>
65+
<item name="android:navigationBarColor">@android:color/black</item>
66+
<item name="android:statusBarColor">@android:color/black</item>
67+
<item name="android:textColor">@color/abc_primary_text_material_dark</item>
68+
<item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
69+
<item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_light</item>
70+
<item name="android:textColorSecondary">@color/abc_secondary_text_material_dark</item>
71+
<item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_light</item>
72+
<item name="android:windowBackground">@color/background_material_dark</item>
73+
</style>
74+
4875
<style name="WarnButton" parent="Widget.AppCompat.Button.Colored">
4976
<item name="android:colorButtonNormal">@color/material_red_a200</item>
5077
<item name="android:textColor">@android:color/white</item>

‎app/src/main/res/values/colors.xml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,9 @@
2323
<color name="material_purple_a700">#AA00FF</color>
2424

2525
<color name="material_red_a200">#FF5252</color>
26+
27+
<color name="material_grey_200">#EEEEEE</color>
28+
<color name="material_grey_400">#BDBDBD</color>
29+
<color name="material_grey_500">#9E9E9E</color>
30+
<color name="material_grey_700">#616161</color>
2631
</resources>

‎app/src/main/res/values/strings.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<string name="sign_in">Start</string>
1616
<string name="green_theme">Green Theme</string>
1717
<string name="purple_theme">Purple Theme</string>
18+
<string name="dark_theme">Dark Theme</string>
1819
<string name="use_theme_header">Use theme:</string>
1920
<string name="logo_header">Logo:</string>
2021
<string name="firebase_logo_label">Firebase Auth</string>

‎app/src/main/res/values/styles.xml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
<item name="colorControlActivated">@color/material_deep_purple_a200</item>
1515
<item name="colorControlHighlight">@color/material_lime_a700</item>
1616
<item name="android:windowBackground">@color/material_deep_purple_50</item>
17+
<item name="android:textColor">@color/material_grey_900</item>
18+
<item name="android:textColorPrimary">@color/material_deep_purple_50</item>
19+
<item name="colorButtonNormal">@color/material_deep_purple_500</item>
1720
</style>
1821

1922
<style name="GreenTheme" parent="FirebaseUI">
@@ -24,6 +27,23 @@
2427
<item name="colorControlActivated">@color/material_lime_a700</item>
2528
<item name="colorControlHighlight">@color/material_green_a200</item>
2629
<item name="android:windowBackground">@color/material_green_50</item>
30+
<item name="android:textColor">@color/material_grey_900</item>
31+
<item name="android:textColorPrimary">@color/material_deep_purple_50</item>
32+
<item name="colorButtonNormal">@color/material_green_500</item>
33+
</style>
34+
35+
<style name="DarkTheme" parent="FirebaseUI">
36+
<item name="colorPrimary">@color/primary_material_dark</item>
37+
<item name="colorPrimaryDark">@color/primary_dark_material_dark</item>
38+
<item name="colorAccent">@color/accent_material_dark</item>
39+
<item name="android:colorBackground">@color/background_material_dark</item>
40+
<item name="android:colorForeground">@color/foreground_material_dark</item>
41+
<item name="android:textColor">@color/abc_primary_text_material_dark</item>
42+
<item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item>
43+
<item name="android:textColorPrimaryInverse">@color/abc_primary_text_material_light</item>
44+
<item name="android:textColorSecondary">@color/abc_secondary_text_material_dark</item>
45+
<item name="android:textColorSecondaryInverse">@color/abc_secondary_text_material_light</item>
46+
<item name="android:windowBackground">@color/background_material_dark</item>
2747
</style>
2848

2949
<style name="WarnButton" parent="Widget.AppCompat.Button.Colored">

‎auth/src/main/res/drawable-v21/rounded_button.xml

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎auth/src/main/res/drawable/rounded_button.xml

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎auth/src/main/res/layout/confirm_recovery_layout.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
android:orientation="vertical"
44
style="@style/FirebaseUI.WrapperStyle">
55
<TextView
6-
style="@style/FirebaseUI.Text.BodyText"
6+
style="@style/FirebaseUI.Text.BodyTextNoColor"
77
android:id="@+id/body_text"/>
88
<Button
99
style="@style/FirebaseUI.Button.AlertButton"

‎auth/src/main/res/values-v21/styles.xml

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,31 @@
55
<item name="colorPrimaryDark">@color/authui_colorPrimaryDark</item>
66
<item name="colorAccent">@color/authui_colorAccent</item>
77
<item name="colorButtonNormal">@color/authui_colorPrimary</item>
8-
9-
<item name="android:colorPrimary">@color/authui_colorPrimary</item>
10-
<item name="android:colorPrimaryDark">@color/authui_colorPrimaryDark</item>
11-
<item name="android:colorAccent">@color/authui_colorAccent</item>
12-
<item name="android:colorButtonNormal">@color/authui_colorPrimary</item>
13-
8+
<item name="android:textColorHint">@color/authui_colorPrimary</item>
149
<item name="android:buttonStyle">@style/FirebaseUI.Button</item>
1510
<item name="android:editTextStyle">@style/FirebaseUI.EditText</item>
11+
<item name="android:textViewStyle">@style/FirebaseUI.Text.BodyText</item>
12+
<item name="android:textColorPrimary">#FFF</item>
13+
<item name="android:textColor">#000</item>
1614
</style>
1715

1816
<style name="FirebaseUI.Dialog" parent="Base.Theme.AppCompat.Light.Dialog.MinWidth">
19-
<item name="colorPrimary">@color/authui_colorPrimary</item>
20-
<item name="colorPrimaryDark">@color/authui_colorPrimaryDark</item>
21-
<item name="colorAccent">@color/authui_colorAccent</item>
22-
<item name="colorButtonNormal">@color/authui_colorPrimary</item>
23-
24-
<item name="android:colorPrimary">@color/authui_colorPrimary</item>
25-
<item name="android:colorPrimaryDark">@color/authui_colorPrimaryDark</item>
26-
<item name="android:colorAccent">@color/authui_colorAccent</item>
27-
<item name="android:colorButtonNormal">@color/authui_colorPrimary</item>
28-
2917
<item name="android:buttonStyle">@style/FirebaseUI.Button</item>
3018
<item name="android:editTextStyle">@style/FirebaseUI.EditText</item>
31-
3219
<item name="android:layout_width">match_parent</item>
3320
<item name="android:windowMinWidthMajor">360dp</item>
3421
<item name="android:layout_height">match_parent</item>
3522
</style>
36-
</resources>
23+
24+
<style name="FirebaseUI.EditText">
25+
<item name="android:textSize">16sp</item>
26+
<item name="android:lineSpacingExtra">8sp</item>
27+
<item name="android:textColorHint">?android:textColor</item>
28+
<item name="android:textColor">?android:textColor</item>
29+
<item name="android:editTextColor">?android:textColor</item>
30+
<item name="android:layout_width">match_parent</item>
31+
<item name="android:layout_height">wrap_content</item>
32+
<item name="android:fontFamily">sans-serif</item>
33+
<item name="android:textCursorDrawable">@null</item>
34+
</style>
35+
</resources>

‎auth/src/main/res/values/colors.xml

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,11 @@
44
<color name="authui_colorPrimaryDark">#2F3E9E</color>
55
<color name="authui_colorAccent">#3E50B4</color>
66
<color name="authui_colorActivated">#1a237e</color>
7+
<color name="authui_inputTextColor">#FFFFFF</color>
8+
<color name="authui_inputTextColorDisabled">#333333</color>
9+
<color name="authui_inputTextColorDark">#000000</color>
10+
<color name="authui_inputTextColorDarkDisabled">#333333</color>
711

8-
<color name="headingColor">#212121</color>
9-
<color name="bodyTextColor">#c0000000</color>
1012
<color name="errorColor">#DD2C00</color>
1113
<color name="linkColor">#4285F4</color>
12-
<color name="buttonColor">@color/authui_colorPrimary</color>
13-
<color name="buttonColorPressed">@color/authui_colorActivated</color>
14-
<color name="buttonTextColor">#FFFFFF</color>
15-
<color name="inputLabelColor">#757575</color>
16-
<color name="shadowColor">#eeeeee</color>
1714
</resources>

‎auth/src/main/res/values/styles.xml

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
33
<style name="FirebaseUI" parent="Theme.AppCompat.Light.DarkActionBar">
4+
<item name="android:textColor">@color/authui_inputTextColorDark</item>
5+
<item name="android:textColorPrimary">@color/authui_inputTextColor</item>
46
<item name="colorPrimary">@color/authui_colorPrimary</item>
57
<item name="colorPrimaryDark">@color/authui_colorPrimaryDark</item>
68
<item name="colorAccent">@color/authui_colorAccent</item>
79
<item name="colorButtonNormal">@color/authui_colorPrimary</item>
8-
910
<item name="android:buttonStyle">@style/FirebaseUI.Button</item>
1011
<item name="android:editTextStyle">@style/FirebaseUI.EditText</item>
12+
<item name="colorControlNormal">@color/authui_colorPrimary</item>
13+
<item name="colorControlActivated">@color/authui_colorAccent</item>
14+
<item name="colorControlHighlight">@color/authui_colorAccent</item>
1115
</style>
1216

1317
<style name="FirebaseUI.Dialog" parent="Base.Theme.AppCompat.Light.Dialog.MinWidth">
14-
<item name="colorPrimary">@color/authui_colorPrimary</item>
15-
<item name="colorPrimaryDark">@color/authui_colorPrimaryDark</item>
16-
<item name="colorAccent">@color/authui_colorAccent</item>
17-
<item name="colorButtonNormal">@color/authui_colorPrimary</item>
18-
1918
<item name="android:layout_width">match_parent</item>
2019
<item name="android:windowMinWidthMajor">360dp</item>
2120
<item name="android:layout_height">match_parent</item>
@@ -106,10 +105,11 @@
106105
<!-- Common styles -->
107106
<style name="FirebaseUI.Text.TextInputLayout">
108107
<item name="android:paddingTop">8dp</item>
108+
<item name="android:textColorHint">?android:attr/textColor</item>
109109
</style>
110110

111111
<style name="FirebaseUI.Text.HintText" parent="FirebaseUI.Text.T12">
112-
<item name="android:textColor">@color/inputLabelColor</item>
112+
<item name="android:textColor">?android:attr/textColor</item>
113113
</style>
114114

115115
<style name="FirebaseUI.Text.ErrorText" parent="FirebaseUI.Text.T12">
@@ -120,18 +120,12 @@
120120

121121
<style name="FirebaseUI.Button" parent="@style/Widget.AppCompat.Button">
122122
<item name="android:layout_width">wrap_content</item>
123+
<item name="android:layout_height">wrap_content</item>
123124
<item name="android:layout_gravity">right</item>
124-
<item name="android:layout_height">36dp</item>
125-
<item name="android:layout_margin">8dp</item>
126-
<item name="android:textColor">@color/buttonTextColor</item>
127-
<item name="android:textAllCaps">true</item>
128-
<item name="android:radius">3dp</item>
129-
<item name="android:background">@drawable/rounded_button</item>
125+
<item name="android:textColor">?attr/android:textColorPrimary</item>
130126
</style>
131127

132128
<style name="FirebaseUI.Button.NextButton">
133-
<item name="android:layout_width">88dp</item>
134-
<item name="android:layout_height">36dp</item>
135129
</style>
136130

137131
<style name="FirebaseUI.Button.AlertButton">
@@ -142,19 +136,19 @@
142136
<item name="android:layout_marginBottom">0dp</item>
143137
<item name="android:gravity">right|center</item>
144138
<item name="android:background">@android:color/transparent</item>
145-
<item name="android:textColor">@color/buttonColor</item>
146139
</style>
147140

148141
<style name="FirebaseUI.EditText">
142+
<item name="android:textColor">?android:textColor</item>
149143
<item name="android:textSize">16sp</item>
150144
<item name="android:lineSpacingExtra">8sp</item>
151145
<item name="android:layout_width">match_parent</item>
152146
<item name="android:layout_height">wrap_content</item>
153147
<item name="android:fontFamily">sans-serif</item>
154-
<item name="android:colorActivatedHighlight">@color/authui_colorPrimary</item>
155-
<item name="android:colorFocusedHighlight">@color/authui_colorPrimary</item>
148+
<item name="android:textCursorDrawable">@null</item>
156149
</style>
157150

151+
158152
<style name="FirebaseUI.EditText.PasswordField">
159153
<item name="android:hint">@string/password_hint</item>
160154
<item name="android:inputType">textPassword</item>
@@ -172,26 +166,24 @@
172166

173167
<style name="FirebaseUI.Text.Link">
174168
<item name="android:textColor">@color/linkColor</item>
175-
176169
</style>
177170

178171
<style name="FirebaseUI.Text.Heading" parent="FirebaseUI.Text.T07">
179-
<item name="android:textColor">@color/headingColor</item>
180172
<item name="android:paddingTop">0dp</item>
181173
<item name="android:paddingBottom">16dp</item>
182174
</style>
183175

184176
<style name="FirebaseUI.Text.BodyText" parent="FirebaseUI.Text.T08">
185177
<item name="android:layout_width">match_parent</item>
186178
<item name="android:layout_height">wrap_content</item>
187-
<item name="android:textColor">@color/bodyTextColor</item>
179+
<item name="android:textColor">?android:textColor</item>
188180
<item name="android:paddingBottom">16dp</item>
189181
</style>
190182

191-
<style name="FirebaseUI.Text.InputLabel" parent="FirebaseUI.Text.T12">
192-
<item name="android:textColor">@color/inputLabelColor</item>
193-
<item name="android:paddingTop">8dp</item>
194-
<item name="android:paddingBottom">8dp</item>
183+
<style name="FirebaseUI.Text.BodyTextNoColor" parent="FirebaseUI.Text.T08">
184+
<item name="android:layout_width">match_parent</item>
185+
<item name="android:layout_height">wrap_content</item>
186+
<item name="android:paddingBottom">16dp</item>
195187
</style>
196188

197189
<!-- Authentication method picker styles -->

0 commit comments

Comments
 (0)