Implements dark mode color schemes and theme handling for Jetpack Compose Android apps.
npx skills add https://github.com/Bumh3rr/solvyx-app --skill dark-mode-bumh3rr
Please help me install this Agent Skill. Skill: dark-mode Source: https://github.com/Bumh3rr/solvyx-app/tree/main/.opencode/skill/dark-mode Command: npx skills add https://github.com/Bumh3rr/solvyx-app --skill dark-mode-bumh3rr
darkColorScheme template with intelligent color inversion rules, including which semantic colors (error, warning, success) should not be mechanically inverted. - Theme Management: Includes a SolvyxTheme wrapper with automatic system detection via isSystemInDarkTheme(), a manual ThemeMode toggle (SYSTEM/LIGHT/DARK), and correct status bar/navigation bar configuration. - Edge Case Handling: Covers dark-mode-specific concerns like shadows vs. borders on cards, image asset variants, dual light/dark previews, and Compose UI tests. - Use Case: When adding a new screen or component, apply this Skill to ensure WCAG AA contrast in both modes, avoid hardcoded Color.Black/Color.White, and ship dark previews alongside light ones. ## Quick Start Apply the dark mode skill to review my new Compose screen and make sure all colors, contrast, and previews work correctly in both light and dark themes.High-intent search queries and answers about installing and using this skill.
Define a darkColorScheme with inverted primary, background, and surface tokens, then wrap your UI in a theme composable that selects the scheme using isSystemInDarkTheme(). Provide a ThemeMode enum (SYSTEM, LIGHT, DARK) if users need a manual override.
Use WindowCompat.getInsetsController inside a SideEffect in your theme composable. Set isAppearanceLightStatusBars to false in dark mode and true in light mode, with a transparent status bar color, so icons remain visible against the background.
No, mechanical inversion is an anti-pattern. Semantic colors like error red, warning amber, and success green should shift to slightly lighter or more vibrant variants rather than being inverted, so they remain readable without appearing harsh on dark backgrounds.
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text in both light and dark modes. Button labels need 4.5:1 against their background, and borders need at least 3:1. Validate specific pairs with tools like the WebAIM Contrast Checker.
Shadows have very low visibility on dark backgrounds. Compensate by using subtle borders with outlineVariant, lighter surfaceVariant tones, or Material 3 tonal elevation instead of relying on shadow elevation alone.
Create a Compose test rule, set content wrapped in your theme with darkTheme set to true, and assert that nodes are displayed. Also add @Preview annotations with uiMode = Configuration.UI_MODE_NIGHT_YES to visually verify dark rendering in Android Studio.
mahg-esDesign CSS theme systems with design tokens, color palettes, and typography scales.
thrillmadeVerify color contrast against WCAG 2.2 AA standards.
Cap-goGuide WCAG-compliant accessibility in Capacitor apps with screen reader and focus management.
olafkfreundApply unified color palettes and wallpaper-derived themes across NixOS configurations.