Calculate contrast
On Android, you can use the Accessibility Scanner app to detect contrast issues automatically.
kotlin
// No code requiredIn Jetpack Compose, you can use the Accessibility Scanner app to detect contrast issues automatically. Or if your Composables have preview, you can run Compose UI checks directly from Android studio, to find common accessibiltiy issues.
kotlin
// No code requiredOn iOS, can use Xcode's Accessibility Inspector to detect contrast issues automatically.
You can also use the property accessibilityContrast to check if the user has enabled increased contrast in the Accessibility settings of their device.
swift
if UITraitCollection.current.accessibilityContrast == .high {
// High contrast logic
}In SwiftUI, can use Xcode's Accessibility Inspector to detect contrast issues automatically.
You can also use the property of colorSchemeContrast environment variable to check if the user has enabled increased contrast in the Accessibility settings of their device.
swift
// Access the current accessibility contrast scheme environment value
@Environment(\.colorSchemeContrast) private var colorSchemeContrast
var body: some View {
Text("Appt")
// Apply different colors depending on the contrast scheme
.foregroundColor(colorSchemeContrast == .increased ? .black : .gray)
.background(colorSchemeContrast == .increased ? .white : .black)
}With Flutter, you can use the Accessibility Scanner app and Xcode's Accessibility Inspector to detect contrast issues automatically.
dart
// No code requiredWith React Native, you can use the Accessibility Scanner app and Xcode's Accessibility Inspector to detect contrast issues automatically.
jsx
// No code requiredIn MAUI, you can use the Accessibility Scanner and Xcode's Accessibility Inspector to detect contrast issues automatically.
csharp
// No code requiredWith Xamarin, you can use the Accessibility Scanner app and Xcode's Accessibility Inspector to detect contrast issues automatically.
csharp
// No code requiredSupport dark mode
On Android, you can detect dark mode by checking if the uiMode configuration contains UI_MODE_NIGHT_MASK.
By adding -night resources to your project you can let Android automatically pick the right resources. For example, add a colors.xml file inside a values-night folder to specify night mode colors.
kotlin
fun Context.isInNightMode(): Boolean {
val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
return nightModeFlags == Configuration.UI_MODE_NIGHT_YES
}On iOS, you can detect dark mode by checking if the userInterfaceStyle has been set to .dark.
You can provide dark mode resources to let iOS automatically use the right resources. For example, inside Assets.xcassets you can add a Dark version for colors and images.
swift
func isInDarkMode() -> Bool{
if #available(iOS 12.0, *) {
if UIScreen.main.traitCollection.userInterfaceStyle == .dark {
return true
}
}
return false
}In SwiftUI, you can detect dark mode by checking if the colorScheme environment variable has been set to .dark.
You can provide dark mode resources to let iOS automatically use the right resources. For example, inside Assets.xcassets you can add a Dark version for colors and images.
swift
// Access the current color scheme environment value
@Environment(\.colorScheme) var colorScheme
var body: some View {
Text("Appt")
// Apply different colors depending on color scheme
.foregroundColor(colorScheme == .light ? .black : .gray)
.background(colorScheme == .light ? .white : .black)
}With Flutter, you can detect dark mode by checking if the platformBrightness has been set to Brightness.dark.
When defining an App, you can define a darkTheme to letter Flutter automatically use dark mode resources.
dart
import 'dart:ui';
import 'package:flutter/widgets.dart';
/// Dark mode extension
extension DarkMode on BuildContext {
bool get isDarkMode {
return MediaQuery.of(this).platformBrightness == Brightness.dark;
}
}
/// Define dark theme
MaterialApp(
themeMode: ThemeMode.system,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.red,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
);With React Native, you can detect dark mode by checking if the Appearance.getColorScheme() method returns dark.
When defining a ThemeProvider you can return a different theme when dark mode is active.
jsx
import { useColorScheme } from 'data/en/screen-dark-mode/react-native';
import { ThemeProvider } from 'styled-components';
const darkTheme = {
primary: "#f967e9",
};
const lighTheme = {
primary: "#cc00b9"
};
const App: React.FC = () => {
const scheme = useColorScheme();
return (
<ThemeProvider theme={scheme === 'dark' ? darkTheme : lightTheme}>
{props.children}
</ThemeProvider>
);
}
export default App;In MAUI, you can detect the current theme configuration using the Application.Current.RequestedTheme property.
csharp
public bool IsInDarkMode
=> Application.Current.RequestedTheme == AppTheme.Dark;With Xamarin, you can detect dark mode by checking if the RequestedTheme property equals OSAppTheme.Dark.
In XAML you can use AppThemeBinding to define different resources for dark mode.
csharp
using Xamarin.Essentials;
OSAppTheme theme = Application.Current.RequestedTheme;
if (theme == OSAppTheme.Dark) {
// Dark mode
}xml
<ContentPage>
<StackLayout>
<Label Text="This text is black in light mode and white in dark mode."
TextColor="{AppThemeBinding Light=Black, Dark=White}" />
<Image Source="{AppThemeBinding Light=logo_light.png, Dark=logo_dark.png}" />
</StackLayout>
</ContentPage>