Skip to content

Revise dark mode color scheme with lighter dark tones #79

Description

@MessiasLima

Description

The current dark-mode color palette is too dark, with background and surface colors near black (#111413, #141313), making the UI feel heavy and reducing readability. Create a new set of dark color tokens that use a softer, less aggressive dark palette while maintaining proper contrast ratios for accessibility.

  • Scope and constraints
    • Only dark-mode color values in Color.kt should change; light scheme stays untouched.
    • All dark-color variable names (*Dark) must remain the same — only the hex values change.
    • Must maintain WCAG AA contrast against text/icon colors.
    • The darkScheme in Theme.kt references the same *Dark variables, so no changes needed there.
    • Components use MaterialTheme.colorScheme.* tokens and will pick up the new colors automatically.

Scope

In scope: Updating dark color hex values in Color.kt (primaryDark through surfaceContainerHighestDark).

Out of scope: Light scheme, typography, shapes, component-level changes, or adding new color tokens.

Acceptance criteria

  • Dark background/surface colors are updated to a softer dark gray (not near-black) in Color.kt.
  • All on*Dark text/icon colors are adjusted if needed to maintain WCAG AA contrast.
  • App renders correctly in dark mode on all platforms (Android, iOS, JVM).
  • No visual regressions in components using MaterialTheme.colorScheme tokens in dark mode.

Additional information

The current dark colors are defined in foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/theme/Color.kt:40-74. The assignee should create a cohesive dark palette from scratch with appropriate contrast.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions