Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[connect] Add dark mode example #9785

Merged
merged 1 commit into from
Dec 19, 2024
+176 −3
Merged

[connect] Add dark mode example #9785

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions ...-example/src/main/java/com/stripe/android/connect/example/ui/appearance/AppearanceInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ data class AppearanceInfo(
HotDog(R.string.appearance_hot_dog),
OceanBreeze(R.string.appearance_ocean_breeze),
Link(R.string.appearance_link),
Dynamic(R.string.appearance_dynamic),
CustomFont(R.string.custom_font)
}

Expand All @@ -38,6 +39,7 @@ data class AppearanceInfo(
AppearanceId.HotDog -> hotDogAppearance(context)
AppearanceId.OceanBreeze -> oceanBreezeAppearance(context)
AppearanceId.Link -> linkAppearance(context)
AppearanceId.Dynamic -> dynamicAppearance(context)
AppearanceId.CustomFont -> customFont()
}
}
Expand Down Expand Up @@ -148,6 +150,54 @@ data class AppearanceInfo(
)
)

private fun dynamicAppearance(context: Context) = AppearanceInfo(
appearanceId = AppearanceId.Dynamic,
appearance = Appearance(
colors = Colors(
primary = ContextCompat.getColor(context, R.color.dynamic_colors_primary),
text = ContextCompat.getColor(context, R.color.dynamic_colors_text),
background = ContextCompat.getColor(context, R.color.dynamic_colors_background),
border = ContextCompat.getColor(context, R.color.dynamic_colors_border),
secondaryText = ContextCompat.getColor(context, R.color.dynamic_colors_secondary_text),
actionPrimaryText = ContextCompat.getColor(context, R.color.dynamic_colors_action_primary_text),
actionSecondaryText = ContextCompat.getColor(context, R.color.dynamic_colors_action_secondary_text),
formAccent = ContextCompat.getColor(context, R.color.dynamic_colors_form_accent),
formHighlightBorder = ContextCompat.getColor(context, R.color.dynamic_colors_form_highlight_border),
danger = ContextCompat.getColor(context, R.color.dynamic_colors_danger),
offsetBackground = ContextCompat.getColor(context, R.color.dynamic_colors_offset_background),
),
buttonPrimary = Button(
colorBackground = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_background),
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_button_primary_text)
),
buttonSecondary = Button(
colorBackground = ContextCompat.getColor(
context,
R.color.dynamic_colors_button_secondary_background
),
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_button_secondary_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_button_secondary_text)
),
badgeSuccess = Badge(
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_success_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_success_text)
),
badgeNeutral = Badge(
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_neutral_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_neutral_text),
),
badgeWarning = Badge(
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_warning_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_warning_text)
),
badgeDanger = Badge(
colorBorder = ContextCompat.getColor(context, R.color.dynamic_colors_badge_danger_border),
colorText = ContextCompat.getColor(context, R.color.dynamic_colors_badge_danger_text)
),
)
)

private fun customFont() = AppearanceInfo(
appearanceId = AppearanceId.Link,
appearance = Appearance(
Expand Down
19 changes: 17 additions & 2 deletions ...c/main/java/com/stripe/android/connect/example/ui/common/BasicExampleComponentActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ import androidx.compose.material.ModalBottomSheetLayout
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.viewinterop.AndroidView
import androidx.fragment.app.FragmentActivity
Expand All @@ -27,13 +29,16 @@ import com.stripe.android.connect.EmbeddedComponentManager
import com.stripe.android.connect.PrivateBetaConnectSDK
import com.stripe.android.connect.example.core.Success
import com.stripe.android.connect.example.core.then
import com.stripe.android.connect.example.data.SettingsService
import com.stripe.android.connect.example.ui.appearance.AppearanceInfo
import com.stripe.android.connect.example.ui.appearance.AppearanceView
import com.stripe.android.connect.example.ui.appearance.AppearanceViewModel
import com.stripe.android.connect.example.ui.embeddedcomponentmanagerloader.EmbeddedComponentLoaderViewModel
import com.stripe.android.connect.example.ui.embeddedcomponentmanagerloader.EmbeddedComponentManagerLoader
import com.stripe.android.connect.example.ui.settings.settingsComposables
import dagger.hilt.android.AndroidEntryPoint
import kotlinx.coroutines.launch
import javax.inject.Inject

@Suppress("ConstPropertyName")
private object BasicComponentExampleDestination {
Expand All @@ -50,6 +55,9 @@ abstract class BasicExampleComponentActivity : FragmentActivity() {

abstract fun createComponentView(context: Context, embeddedComponentManager: EmbeddedComponentManager): View

@Inject
lateinit var settingsService: SettingsService

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

Expand Down Expand Up @@ -117,8 +125,15 @@ abstract class BasicExampleComponentActivity : FragmentActivity() {
openSettings = openSettings,
reload = viewModel::reload,
) { embeddedComponentManager ->
AndroidView(modifier = Modifier.fillMaxSize(), factory = { context ->
createComponentView(context, embeddedComponentManager)
val context = LocalContext.current
LaunchedEffect(context) {
val appearanceInfo = settingsService.getAppearanceId()
?.let { AppearanceInfo.getAppearance(it, context).appearance }
?: return@LaunchedEffect
embeddedComponentManager.update(appearanceInfo)
Comment on lines +129 to +133
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not ideal because in our Example app EmbeddedComponentManager is scoped to our Application while we're updating the appearance per Activity. Practically speaking, it's OK, but it doesn't serve as a great example for integrators.

}
AndroidView(modifier = Modifier.fillMaxSize(), factory = {
createComponentView(it, embeddedComponentManager)
})
}
}
Expand Down
81 changes: 81 additions & 0 deletions connect-example/src/main/res/values-night/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="default_border_color">#FBD992</color>
<color name="default_background_color">#FCEEB5</color>
<color name="default_text_color">#B13600</color>

<!-- Ogre Theme Colors -->
<color name="ogre_primary">#5AE92B</color>
<color name="ogre_background">#837411</color>
<color name="ogre_button_primary_background">#DAB9B9</color>
<color name="ogre_button_primary_border">#F00000</color>
<color name="ogre_button_primary_text">#000000</color>
<color name="ogre_button_secondary_background">#025F08</color>
<color name="ogre_text">#554125</color>
<color name="ogre_badge_neutral_text">#28D72A</color>
<color name="ogre_badge_neutral_background">#638863</color>
<color name="ogre_button_secondary_text">#000000</color>

<!-- Hot Dog Theme Colors -->
<color name="hot_dog_primary">#FF2200</color>
<color name="hot_dog_background">#FFFF00</color>
<color name="hot_dog_button_secondary_background">#C6C6C6</color>
<color name="hot_dog_button_secondary_border">#1F1F1F</color>
<color name="hot_dog_button_primary_border">#1F1F1F</color>
<color name="hot_dog_button_primary_text">#1F1F1F</color>
<color name="hot_dog_button_primary_background">#C6C6C6</color>
<color name="hot_dog_offset_background">#FF2200</color>
<color name="hot_dog_text">#000000</color>
<color name="hot_dog_secondary_text">#000000</color>
<color name="hot_dog_badge_danger_text">#991400</color>
<color name="hot_dog_badge_warning_background">#F9A443</color>

<!-- Ocean Breeze Theme Colors -->
<color name="ocean_breeze_background">#EAF6FB</color>
<color name="ocean_breeze_primary">#15609E</color>
<color name="ocean_breeze_badge_success_text">#2A6093</color>
<color name="ocean_breeze_badge_neutral_text">#5A621D</color>
<color name="ocean_breeze_button_secondary_text">#2C93E8</color>
<color name="ocean_breeze_button_secondary_border">#2C93E8</color>

<!-- Link Theme Colors -->
<color name="link_primary">#1C3944</color>
<color name="link_button_primary_background">#33DCB3</color>
<color name="link_button_primary_border">#33DCB3</color>
<color name="link_button_primary_text">#1C3944</color>
<color name="link_secondary_text">#485B61</color>
<color name="link_text">#1C3944</color>
<color name="link_action_primary_text">#33DCB3</color>
<color name="link_badge_success_background">#B4FEE1</color>
<color name="link_badge_success_border">#C0D7CD</color>
<color name="link_badge_success_text">#1C3944</color>
<color name="link_badge_neutral_background">#DEFECC</color>
<color name="link_badge_neutral_text">#1C3944</color>

<!-- Dynamic Colors Theme -->
<color name="dynamic_colors_primary">#EBF0F4</color>
<color name="dynamic_colors_text">#FFFFFF</color>
<color name="dynamic_colors_background">#272626</color>
<color name="dynamic_colors_button_primary_background">#077EDF</color>
<color name="dynamic_colors_button_primary_border">#077EDF</color>
<color name="dynamic_colors_button_primary_text">#FFFFFF</color>
<color name="dynamic_colors_button_secondary_background">#3D4042</color>
<color name="dynamic_colors_button_secondary_border">#89969F</color>
<color name="dynamic_colors_button_secondary_text">#FFFFFF</color>
<color name="dynamic_colors_border">#3D3D3D</color>
<color name="dynamic_colors_secondary_text">#F4F3F3</color>
<color name="dynamic_colors_action_primary_text">#EBF0F4</color>
<color name="dynamic_colors_action_secondary_text">#F7F7F7</color>
<color name="dynamic_colors_form_accent">#EBF0F4</color>
<color name="dynamic_colors_form_highlight_border">#363636</color>
<color name="dynamic_colors_danger">#DF1B41</color>
<color name="dynamic_colors_badge_neutral_border">#7D7F87</color>
<color name="dynamic_colors_badge_neutral_text">#D1D3DC</color>
<color name="dynamic_colors_badge_success_border">#7A8C7B</color>
<color name="dynamic_colors_badge_success_text">#CFE3D0</color>
<color name="dynamic_colors_badge_warning_border">#794A00</color>
<color name="dynamic_colors_badge_warning_text">#E7A288</color>
<color name="dynamic_colors_badge_danger_border">#6F2341</color>
<color name="dynamic_colors_badge_danger_text">#EC93AF</color>
<color name="dynamic_colors_offset_background">#171717</color>
</resources>
28 changes: 27 additions & 1 deletion connect-example/src/main/res/values/colors.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,30 @@
<color name="link_badge_neutral_background">#DEFECC</color>
<color name="link_badge_neutral_text">#1C3944</color>

</resources>
<!-- Dynamic Colors Theme -->
<color name="dynamic_colors_primary">#0969DA</color>
<color name="dynamic_colors_text">#24292F</color>
<color name="dynamic_colors_background">#FFFFFF</color>
<color name="dynamic_colors_button_primary_background">#0969DA</color>
<color name="dynamic_colors_button_primary_border">#261B1F24</color>
<color name="dynamic_colors_button_primary_text">#FFFFFF</color>
<color name="dynamic_colors_button_secondary_background">#F6F8FA</color>
<color name="dynamic_colors_button_secondary_border">#261B1F24</color>
<color name="dynamic_colors_button_secondary_text">#24292F</color>
<color name="dynamic_colors_border">#D7D7D7</color>
<color name="dynamic_colors_secondary_text">#57606A</color>
<color name="dynamic_colors_action_primary_text">#0969DA</color>
<color name="dynamic_colors_action_secondary_text">#6E7781</color>
<color name="dynamic_colors_form_accent">#0969DA</color>
<color name="dynamic_colors_form_highlight_border">#0969DA</color>
<color name="dynamic_colors_danger">#B35900</color>
<color name="dynamic_colors_badge_neutral_border">#8C959F</color>
<color name="dynamic_colors_badge_neutral_text">#6E7781</color>
<color name="dynamic_colors_badge_success_border">#218BFF</color>
<color name="dynamic_colors_badge_success_text">#0969DA</color>
<color name="dynamic_colors_badge_warning_border">#D4A72C</color>
<color name="dynamic_colors_badge_warning_text">#BF8700</color>
<color name="dynamic_colors_badge_danger_border">#DD7815</color>
<color name="dynamic_colors_badge_danger_text">#B35900</color>
<color name="dynamic_colors_offset_background">#F8F8F8</color>
</resources>
1 change: 1 addition & 0 deletions connect-example/src/main/res/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,5 +44,6 @@
<string name="appearance_hot_dog">Hot Dog Stand</string>
<string name="appearance_ocean_breeze">Ocean Breeze</string>
<string name="appearance_link">Link</string>
<string name="appearance_dynamic">Dynamic</string>
<string name="custom_font">Custom Font</string>
</resources>
Loading